feat: implement podcast design

[ahtesham-quraish]

What are the relevant tickets?

https://github.com/mitodl/hq/issues/10522

Description (What does it do?)

This includes the banner with latest episodes on banner section and also the listings of podcasts

Screenshots (if appropriate):

Screen.Recording.2026-03-17.at.3.20.39.PM.mov

How can this be tested?

For testing you need to hit the following url /podcast and Podcast page will be displayed you can play around with player and listen the audio.

Additional Context

This includes the Banner and listing of Podcasts only. Pagination will be included in next PR and detail of Podcast also will be included in next PR.

[github-actions]

OpenAPI Changes

Show/hide No detectable change.

Unexpected changes? Ensure your branch is up-to-date with main (consider rebasing).

[Copilot]

Pull request overview

Adds a new /podcast route and page UI, including a custom “recent episodes” layout and an always-on-bottom audio player, plus supporting constants/assets.

Changes:

• Introduces a new /podcast Next.js app-route page that renders a Podcast landing page.
• Adds Podcast UI components: page template (banner + recent episodes) and a custom audio player (desktop bar + mobile card).
• Adds a podcast URL constant and new SVG assets used by the page design.

Reviewed changes

Copilot reviewed 7 out of 11 changed files in this pull request and generated 10 comments.

Show a summary per file

File	Description
frontends/main/src/page-components/SearchSubscriptionToggle/SubscriptionToggle.tsx	Adds a “Subscribe to new episodes” toggle component (currently largely duplicated from existing toggle).
frontends/main/src/common/urls.ts	Adds PODCAST URL constant.
frontends/main/src/app/podcast/page.tsx	Adds the /podcast route entry and metadata.
frontends/main/src/app-pages/PodcastPage/PodcastPlayer.tsx	Implements fixed-position audio player UI for desktop and mobile.
frontends/main/src/app-pages/PodcastPage/PodcastPageTemplate.tsx	Implements the podcast landing page template (banner + recent episodes list + player integration).
frontends/main/src/app-pages/PodcastPage/PodcastPage.tsx	Fetches recent podcast episodes and renders the template.
frontends/main/public/images/circles.svg	Adds design asset used in the podcast banner.
frontends/main/public/images/Vector.svg	Adds design asset used in the podcast banner.

---

You can also share your feedback on Copilot code review. Take the survey.

[ChristopherChudzicki]

if you rebase, openapi diff thing should pass

[zamanafzal]

Here are few of my observations related to design changes.

1- For both mobile and desktop, the red play icon doesn't match the design.
2- There is more margin between the Recent Episode cards compared to figma design.
3- The play icon position is also changed from what it is in the Figma design.
4- In the desktop screen, the design for the Banner does not match to figma. The circle of the background image needs to overlap with the text(MIT Podcasts).

[zamanafzal]

I think this is left mistakenly hard-coded?

[ahtesham-quraish]

We have added this intentionally later on it will be replaced by real podcast name currently it is not available in api response.

[zamanafzal]

Is this intentional?

[ahtesham-quraish]

Yes, currently data is not available in api response

[zamanafzal]

I think it's a type related to the base URL

[ahtesham-quraish]

Yes we will have the urls currently not available

[zamanafzal]

Same as above.

[ahtesham-quraish]

1- For both mobile and desktop, the red play icon doesn't match the design.
2- There is more margin between the Recent Episode cards compared to figma design.
3- The play icon position is also changed from what it is in the Figma design.
4- In the desktop screen, the design for the Banner does not match to figma. The circle of the background image >needs to overlap with the text(MIT Podcasts).

I have fixed the circle thing as per requirement you can see that here

Play button needs approval from @Ferdi, @mbilalmughal will confirm it and which is not confirmed yet