1.6 KiB
Clips Page & Landing Page Redesign
Clips Page (/clips)
Responsive grid gallery of podcast clips with click-to-play YouTube embeds.
Grid: 3 columns desktop, 2 tablet, 1 mobile. Cards use 9:16 vertical aspect ratio.
Card pre-click: Dark bg-light card with clip title (bold), episode label, centered orange play button, description text below. Matches site aesthetic.
Card playing: Click swaps card for YouTube Shorts iframe (youtube-nocookie.com, autoplay). Fills same 9:16 space.
Data: Static website/data/clips.json aggregated from per-episode clips-metadata.json files. Each entry: title, description, episode_number, optional youtube_id. Cards without youtube_id show no play button.
Featured row: Top 3 hand-picked clips displayed larger, followed by full grid below.
Nav: "Clips" added to hero secondary links and footer nav.
Landing Page Improvements
About section (between hero and episodes): Centered text block. Show description + AI teaser line ("Part human callers, part AI-generated characters, fully unhinged advice") + "See how it works" link. No card background.
Clips highlight (between about and episodes): Horizontal row of 3 featured clips, same card style as clips page. "Best Clips" header with "See all clips" link.
Final section order: Banner → Hero → About → Featured Clips → Episodes → Testimonials → Footer
How It Works — Reaper Video
New "Post-Production Automation" section with native <video> tag (mp4 on CDN). Shows Reaper automating silence removal, ad ducking, loudness normalization. Wrapped in hiw-hero-card style container.