Prompt: landing page with Claude

⚙️ How to use this Prompt

1. Open Claude Code
2. Copy and paste the full prompt below.
3. Send it and wait a few minutes.

Once the result is ready, you can ask for any change: colors, titles, menus, anything

⬇️ Copy the full prompt below ⬇️

Build an immersive, cinematic landing page in React 19 + Vite 6 + TypeScript + Tailwind CSS v4 for "Adriano Transportes", an urban mobility company. Theme/concept: "The Doors Are Opening", a flip of the classic subway announcement ("the doors are closing"), getting across the idea that here the doors open and the city breathes again.

Structure and behavior:
- Black background, white text. Language en-US. `<title>` = "VELOCE — The doors are opening".
- Page around 500vh tall to give room to scroll.
- **Scroll-controlled video (scroll-to-seek):** HLS video (Mux `.m3u8`) fixed full screen in the background (z-0), at the highest quality level, muted, `playsInline`. Instead of playing, the video's `currentTime` is driven by scroll progress through GSAP ScrollTrigger (scrub), with throttled seeking (only seek to the next frame once the previous one has finished drawing, via the `seeked` event). Use hls.js with a large buffer and fall back to MP4/native HLS on Safari. Show a "Loading... X%" overlay based on the buffer until `canplay` fires.
- Subtle **mouse parallax** on the video (offset) and on the panel (offset + 3D rotation), with GSAP easing.
- **Giant hero text** ("The Doors\nAre Opening") fixed at the bottom of the viewport, bold uppercase sans font, `fontSize: clamp(3.5rem, 13vw, 260px)`. Animate it character by character (stagger), dropping down and fading out as you scroll (ScrollFloat component).
- **Glassmorphism panel** that slides up from the bottom at the end of the scroll (GSAP, y 100%→0%), with `backdrop-filter: blur(160px)`, translucent white border, rounded corners, 3D perspective. Inside: an italic serif label "About Us" and a large serif headline: "You know the announcement by heart: the doors are *closing*. We turned it inside out. Here they *open*, and on the other side the city *breathes* again".
- **Pill navigation (PillNav)** at the top, ReactBits style: SVG logo (4 petals) that spins 360° on hover, items (Home, About, Services, Contact) with a "hover circle" effect that grows and slides the label to swap it, an entrance animation (scale/width), and a mobile hamburger→X menu with a popover. "Home"/"About" smooth scroll (GSAP ScrollToPlugin) to the top/bottom.

Fonts: Manrope (sans), Instrument Serif (italic serif), and a display font "Dirtyline 36 Days of Type 2022" (local woff2). Dependencies: gsap, hls.js, motion, lucide-react, react-router-dom.

Stack confirmed in `package.json`: React 19, Vite 6, Tailwind v4 (`@tailwindcss/vite`), GSAP 3.13, hls.js 1.6, motion 11, lucide-react. Video: `https://stream.mux.com/43NlHXsaMrmyzWamMk87m01fNyxSTekAD669BBAPBNm00.m3u8`.

⬆️ Copy up to here ⬆️