PROMPT: CLAUDE - LANDING PAGE
⚙️ Como usar este Prompt
- Abra o Claude Code
- Copie e cole o prompt completo que está abaixo.
- Envie e espere alguns minutos.
A partir do resultado pronto você pode pedir qualquer alteração, cores, títulos, menus, qualquer coisa
⬇️ Copie o prompt completo abaixo ⬇️
Crie uma landing page imersiva e cinematográfica em React 19 + Vite 6 + TypeScript + Tailwind CSS v4 para a "Adriano Transportes", empresa de mobilidade urbana. Tema/conceito: "As Portas Vão Abrir" — uma inversão do aviso clássico do metrô ("as portas vão se fechar"), passando a ideia de que aqui as portas abrem e a cidade volta a respirar.
Estrutura e comportamento:
- Fundo preto, texto branco. Idioma pt-BR. `<title>` = "VELOCE — As portas vão abrir".
- Página com ~500vh de altura para dar pista de rolagem.
- **Vídeo controlado pelo scroll (scroll-to-seek):** vídeo HLS (Mux `.m3u8`) fixo em tela cheia no fundo (z-0), no maior nível de qualidade, mudo, `playsInline`. Em vez de tocar, o `currentTime` do vídeo é controlado pelo progresso do scroll via GSAP ScrollTrigger (scrub), com throttle no seek (só busca o próximo quadro quando o anterior terminou de desenhar — evento `seeked`). Use hls.js com buffer grande e fallback para MP4/HLS nativo no Safari. Mostre um overlay "Carregando... X%" baseado no buffer enquanto `canplay` não dispara.
- **Parallax de mouse** sutil sobre o vídeo (deslocamento) e sobre o painel (deslocamento + rotação 3D), com easing GSAP.
- **Texto hero gigante** ("As Portas\nVão Abrir") fixo no rodapé da viewport, fonte sans bold uppercase, `fontSize: clamp(3.5rem, 13vw, 260px)`. Anime caractere a caractere (stagger) descendo e desaparecendo conforme o scroll (componente ScrollFloat).
- **Painel glassmorphism** que desliza de baixo para cima no fim do scroll (GSAP, y 100%→0%), com `backdrop-filter: blur(160px)`, borda branca translúcida, cantos arredondados, perspectiva 3D. Dentro: rótulo serif itálico "Quem Somos" e um headline serif grande: "Você conhece o aviso de cor: as portas vão se *fechar*. A gente virou do avesso. Aqui elas *abrem*, e do outro lado a cidade volta a *respirar*".
- **Navegação em pílula (PillNav)** no topo, estilo ReactBits: logo SVG (4 pétalas) que gira 360° no hover, itens (Início, Sobre, Serviços, Contato) com efeito de "círculo de hover" que cresce e troca o label deslizando, animação de entrada (scale/width), e menu mobile hambúrguer→X com popover. "Início"/"Sobre" fazem scroll suave (GSAP ScrollToPlugin) ao topo/fundo.
Fontes: Manrope (sans), Instrument Serif (serif itálico), e uma display "Dirtyline 36 Days of Type 2022" (woff2 local). Dependências: gsap, hls.js, motion, lucide-react, react-router-dom.
Stack confirmada no `package.json`: React 19, Vite 6, Tailwind v4 (`@tailwindcss/vite`), GSAP 3.13, hls.js 1.6, motion 11, lucide-react. Vídeo: `https://stream.mux.com/43NlHXsaMrmyzWamMk87m01fNyxSTekAD669BBAPBNm00.m3u8`.