Featured Image or Video Layout
Leads with a large, immersive visual — image or video — that communicates mood and context before a single word is read. Content below the fold is secondary to the initial visual impact.
AI Prompt
Build a product launch hero in Next.js with Tailwind CSS using a full-bleed featured media layout. Structure: (1) Transparent sticky nav (logo left, links center, CTA right) that transitions to white with `shadow-sm` after 60px of scroll using a `useEffect` scroll listener. (2) Full-viewport hero: `min-h-screen` container with a `relative` background. Use `next/image` with `fill` and `object-cover` for the background. Overlay two gradient layers: `bg-gradient-to-b from-black/40 via-transparent to-black/80` for text readability. Centered content: a small label badge, a massive `clamp(3rem, 7vw, 6rem)` headline in white, a subtitle in `text-white/70`, and two CTA buttons side by side. Bottom-left overlay: a "scroll to explore" label with an animated bouncing arrow icon. (3) Below hero: a 4-column features strip with icon + label in each cell, separated by vertical dividers. (4) Full-width bento grid: 2 large cells + 4 small cells showing different product angles. Use `aspect-video` on all image cells. Add CSS `@keyframes` for a subtle `scale(1.03)` Ken Burns effect on the background image over 20 seconds.