Aura Motors V2

Mapa de seções

• SiteHeader — navbar fixa transparente → blur ao scroll; esconde ao scroll para baixo (150px), reaparece ao subir
• HeroShowcase — hero fullscreen com imagem/vídeo, 5 camadas de gradient overlay, dock de busca de veículos (desktop)
• FeaturedVehicles — grid 3 colunas, cards com barra de acento #ea0029, hover translateY(-4px)
• ProcessStrip — 4 etapas horizontais separadas por linha pontilhada vermelha
• ConciergeShowcase — seção split com texto institucional e formulário de contato
• SiteFooter — logo + links + redes sociais + copyright

Implementação

• CSS Variables no :root: --color-bg:#0a0a0a; --color-paper:#050505; --color-surface:#141414; --color-red:#ea0029; --color-indigo:#21145f; --font-heading:'Bebas Neue',sans-serif; --font-body:'Plus Jakarta Sans',sans-serif
• PageVeil: div fixed inset-0 z-0 pointer-events-none opacity-[0.1] com background-image de linhas horizontais rgba(255,255,255,0.05) 1px e verticais de 88×88px; mask: linear-gradient(180deg, transparent, black 10%, black 90%, transparent)
• Navbar: position fixed, inset-x-0 top-0 z-50, padding px-4 py-4, max-w-[88rem] mx-auto border-radius-[1.7rem]. Scrolled (>50px): bg rgba(10,10,10,0.95), border-bottom 1px solid rgba(255,255,255,0.10), backdrop-blur-xl, shadow 0 18px 60px rgba(0,0,0,0.4). Ocultar scroll-down >150px: translateY(-100%) transition 0.8s cubic-bezier(0.76,0,0.24,1)
• Hero breakout: ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)] w-screen. Background paper #050505. border-bottom 1px solid rgba(234,0,41,0.2). rounded-b-[4rem] desktop
• Hero overlays (desktop): esquerda linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.80) 40%, transparent 75%); base-inferior h-[14rem] linear-gradient(to top, rgba(0,0,0,0.90), rgba(0,0,0,0.50) 40%, transparent); radial central radial-gradient(ellipse at center, transparent, rgba(0,0,0,0.6)) opacity-[0.80]
• 3 linhas verticais (desktop, pointer-events-none) em 25%, 50%, 75%: width 1px, bg rgba(255,255,255,0.03)
• VehicleCard: border-radius 1.25rem; bg linear-gradient(180deg, rgba(30,30,30,0.98), rgba(15,15,15,0.98)); border 1px solid rgba(255,255,255,0.06); shadow 0 18px 44px rgba(0,0,0,0.22). Hover: translateY(-4px), shadow 0 24px 56px rgba(0,0,0,0.34), border rgba(255,255,255,0.12). Barra topo: 88×5px linear-gradient(90deg,#ea0029,#21145f,transparent)
• Imagem do card: h-80 (320px), hover scale(1.05) 700ms; overlay to-t from-black/80 via-black/20 to-transparent
• Scrollbar: width 8px; track rgba(20,20,20,0.8); thumb rgba(234,0,41,0.5) border-radius 999px

Animações

• Easing padrão hero: [0.22, 1, 0.36, 1] (cubic-bezier) — use este em TODAS as animações de entrada
• Badge hero: opacity 0→1, y +24→0, blur 8px→0; duration 1.35s, delay 0.1s
• Headline hero: opacity 0→1, y +52→0, blur 16px→0; duration 1.7s, delay 0.25s
• Subtítulo hero: opacity 0→1, y +24→0; duration 1.55s, delay 0.45s
• CTA botões: opacity 0→1, y +24→0; duration 1.55s, delay 0.6s
• Imagem de fundo hero: opacity 0→1; duration 1.8s, easeOut, no delay
• Cards de veículos (whileInView): opacity 0→1, y +20→0; stagger 0.08s por card, duration 0.6s
• Navbar ocultar: translateY(-100%), transition 0.8s cubic-bezier(0.76,0,0.24,1); revelar: translateY(0) mesma transição
• Hover no botão CTA: translateY(-2px), box-shadow 0 20px 40px rgba(234,0,41,0.4); transition 220ms ease
• Logo/imagem glide keyframe: scale(1.02) translate3d(0,0,0) → scale(1.06) translate3d(-1.25%,-0.8%,0); 18s ease-in-out infinite alternate

Crie um website automotivo dark-premium completo para uma concessionária chamada '[NOME_NEGOCIO]' usando React + Vite + TypeScript + Tailwind CSS + Framer Motion + React Router DOM.

PACOTES NPM: framer-motion, react-router-dom, lucide-react
FONTES GOOGLE (adicione no index.html): Bebas Neue (400), Plus Jakarta Sans (300, 400, 500, 600, 700, 800)

---

1. TOKENS DE DESIGN — adicione no index.css:
:root {
  --color-bg: #0a0a0a; --color-paper: #050505; --color-surface: #141414;
  --color-elevated: #1c1c1c; --color-red: #ea0029; --color-indigo: #21145f;
  --font-heading: 'Bebas Neue', sans-serif; --font-body: 'Plus Jakarta Sans', sans-serif;
}
body { background: #0a0a0a; font-family: var(--font-body); color: rgba(255,255,255,0.92); }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: rgba(20,20,20,0.8); }
::-webkit-scrollbar-thumb { background: rgba(234,0,41,0.5); border-radius: 999px; }

2. GRADE DE FUNDO GLOBAL (componente PageVeil):
Div fixed inset-0 z-0 pointer-events-none opacity-[0.1]:
background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px)
background-size: 88px 88px
mask-image: linear-gradient(180deg, transparent, black 10%, black 90%, transparent)

3. NAVBAR (SiteHeader):
- position: fixed inset-x-0 top-0 z-50; padding: px-4 py-4 md:px-6
- Interno: mx-auto max-w-[88rem] → div rounded-[1.7rem] border px-4 py-3 md:py-4 md:px-6 transition-all duration-500
- Padrão: border-transparent bg-transparent shadow-none
- Rolado (scrollY > 50, dark mode): border-white/10 bg-[rgba(10,10,10,0.95)] shadow-[0_18px_60px_rgba(0,0,0,0.4)] backdrop-blur-xl
- Ocultar ao rolar para baixo >150px via Framer Motion: y='-100%' transition duration 0.8s ease [0.76,0,0.24,1]; reaparecer ao rolar para cima: y=0
- Logo: 3 barras horizontais empilhadas (h-[3px] md:h-[4px] rounded-full) nas cores #ea0029 (w-8/w-10), #21145f (w-5/w-6), forest-green (w-11/w-14) + texto "Aura Motors" em Bebas Neue 1.5rem md:2.1rem tracking-[0.08em]
- Links: Plus Jakarta Sans 11px weight-800 tracking-[0.22em] uppercase; ativo: #ea0029; padrão: rgba(255,255,255,0.6) hover: white
- Botão CTA: rounded-[0.9rem] bg-[#ea0029] text-white px-5 py-3 text-[11px] font-extrabold tracking-[0.08em] hover:translate-y-[-2px] hover:bg-[#b0001e]
- Mobile: hambúrguer → painel lateral; bg rgba(10,10,10,0.98) border-white/10; links em coluna; fechar ao navegar

4. SEÇÃO HERO:
- Destaque tela cheia: left-1/2 right-1/2 ml-[-50vw] mr-[-50vw] w-screen
- Background: #050505; border-b border-[#ea0029]/20; rounded-b-[2.5rem] md:rounded-b-[4rem]; z-20 shadow-2xl
- Mídia (mobile: relative h-[45svh] min-h-[340px]; desktop: absolute inset-0 h-[100svh]): object-cover, md:object-[80%_center], md:brightness-100 dark:md:brightness-[0.70] md:contrast-[1.1]
- Entrada da imagem: Framer Motion opacity 0→1, duration 1.8s ease easeOut
- CAMADAS DE GRADIENTE (todos hidden em mobile, block em md+):
  * Radial central: radial-gradient(ellipse at center, transparent, rgba(0,0,0,0.6)) opacity-80
  * Esquerda: w-3/4 xl:w-2/3 linear-gradient(to right, rgba(0,0,0,0.95), rgba(0,0,0,0.80), transparent)
  * Inferior: h-56 linear-gradient(to top, rgba(0,0,0,0.90), rgba(0,0,0,0.50) 40%, transparent)
- Fades mobile: inset-x-0 bottom-0 h-[28svh] gradient-to-t from-[#050505] via-[#050505]/85 to-transparent; top-0 h-24 gradient-to-b from-[#050505]/75
- Conteúdo: mx-auto max-w-[90rem] px-6 pb-12 md:px-8 md:pb-[11rem] md:pt-[8.5rem] xl:px-12
- Badge/chip: inline-flex gap-3 rounded-full border border-white/[0.15] bg-black/[0.4] px-5 py-3.5 text-white shadow-[0_18px_40px_rgba(0,0,0,0.35)] backdrop-blur-xl; Framer: opacity 0→1, y +34→0, blur 10px→0, duration 1.35s ease [0.22,1,0.36,1]
- Eyebrow: Plus Jakarta Sans 10px extrabold uppercase tracking-[0.28em] text-white/65 + linha h-px w-6 sm:w-10 bg-[#ea0029]/60; Framer: opacity 0→1, y +34→0, blur 10px→0, duration 1.35s delay 0.15s
- Título principal: Bebas Neue text-[clamp(2.8rem,9vw,6.5rem)], leading-[0.85], tracking-[0.01em]; Framer: opacity 0→1, y +52→0, filter blur(16px)→0, duration 1.7s delay 0.25s ease [0.22,1,0.36,1]
- Subtítulo: Plus Jakarta Sans 1.05rem md:1.15rem text-white/80 max-w-[34rem] leading-[1.65]; Framer: opacity 0→1, y +36→0, blur 10px→0, duration 1.55s delay 0.45s
- Botão primário: min-h-[3.5rem] rounded-[0.9rem] bg-[#ea0029] px-8 py-4 text-[0.86rem] font-extrabold uppercase tracking-[0.08em] shadow-[0_16px_34px_rgba(234,0,41,0.28)] hover:translate-y-[-2px] hover:bg-[#b0001e] hover:shadow-[0_20px_42px_rgba(234,0,41,0.32)]; Framer: opacity 0→1, y +36→0, blur 10px→0, duration 1.55s delay 0.65s
- Botão secundário: min-h-[3.5rem] rounded-[0.9rem] border border-white/[0.18] bg-black/40 backdrop-blur-md hover:bg-black/60
- Painel de busca (apenas md+): grid 3 colunas + 1 botão; bg linear-gradient(180deg,rgba(20,20,20,0.82),rgba(15,15,15,0.72)) backdrop-blur-[22px] shadow-[0_20px_60px_rgba(0,0,0,0.6)] rounded-2xl; células px-[1.65rem] py-[1.2rem] separadas por div w-px bg-white/[0.08]

5. CARD DE VEÍCULO:
- Container article.premium-card (adicione classe CSS): rounded-[1.45rem] bg-[var(--color-cream)] border border-white/[0.06] shadow-[0_18px_44px_rgba(0,0,0,0.22)] transition hover:shadow-[0_24px_56px_rgba(0,0,0,0.34)] hover:border-white/[0.12]
- Link de imagem: rounded-[1.45rem] m-3 mb-0 overflow-hidden h-80 block
- Imagem: h-80 w-full object-cover group-hover:scale-105 transition duration-700
- Overlay imagem: absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent
- Sobre a imagem (abs bottom-4): marca em 11px extrabold uppercase tracking-[0.24em] text-white/80 + nome em Bebas Neue clamp(1.5rem,5vw,2.5rem) leading-[0.9] tracking-[0.04em]
- Botão ícone (abs bottom-4 right-4): rounded-full bg-[#ea0029] p-3 shadow-[0_8px_20px_rgba(234,0,41,0.3)] group-hover:scale-110 transition duration-500
- Preço: Plus Jakarta Sans extrabold clamp(1.55rem,3.2vw,2.2rem) leading-none tracking-[-0.04em] (NÃO Bebas Neue)
- Stats tiles (3 cols): rounded-[1rem] border border-white/5 bg-white/[0.02] p-3.5 — Quilometragem | Potência | Ano
- Sem barra de acento topo — o destaque vermelho está no botão circular da imagem

6. GRADE DE VEÍCULOS: grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 max-w-[88rem] mx-auto py-24 px-6 md:px-12
   Entrada dos cards: whileInView opacity 0→1 y +20→0, stagger 0.08s, duration 0.6s, ease [0.22,1,0.36,1]

7. ESPAÇAMENTO DE SEÇÃO: py-24 px-6 sm:px-8 lg:px-12, max-w-[88rem] mx-auto
   Rótulo acima do título: Plus Jakarta Sans 11px weight-800 tracking-[0.26em] uppercase color-[#ea0029]
   Título da seção: Bebas Neue clamp(2rem,5vw,4rem) tracking-[0.01em]

8. PÁGINAS: / → Início | /estoque → Grade filtrável | /estoque/:id → Ficha do veículo | /financiamento → Simulador | /contato → Formulário+Mapa | /sobre → História+Equipe

9. MÍDIAS OBRIGATÓRIAS: foto/vídeo hero 1920×1080 escuro, 8+ fotos de veículos 1200×900, logo SVG branco

10. PERSONALIZE: substitua [NOME_NEGOCIO], #ea0029 pela cor da marca, fotos por fotos reais do estoque, dados de contato

Assets necessários

• ObrigatórioFoto/vídeo hero: Imagem ou vídeo de carro em ambiente escuro 1920×1080, object-position: 80% center
• ObrigatórioFotos de veículos: Mínimo 8 fotos em fundo neutro escuro, proporção 4:3, 1200×900px
• ObrigatórioLogotipo: SVG monocromático branco + versão com acento vermelho
• OpcionalÍcone favicon: 32×32px e 192×192px PNG

Checklist de QA

• Navbar some ao scroll para baixo e aparece ao subir — testar em iOS Safari
• Hero gradients cobrem texto em todos os tamanhos de tela (375px, 768px, 1440px)
• Cards de veículos: hover translateY funcionando em touch devices (pointer-coarse)
• Dock de busca: oculto em mobile, visível apenas em md:
• Scrollbar vermelha presente em Windows Chrome — verificar
• Animações de entrada só disparam uma vez (viewport once:true)

Nota de personalização

Troque [NOME_NEGOCIO] pelo nome real. Para mudar a cor primária, substitua #ea0029 em todo o projeto (CSS vars + Tailwind classes). A fonte Bebas Neue pode ser substituída por Oswald 700 para tom mais comercial. O dock de busca do hero requer dados de estoque reais — adapte os campos para o inventário do cliente.