Aura Burger

Mapa de seções

• Hero com produto em destaque
• Menu com blocos de combos
• Prova social curta
• Bloco de localização e CTA

Implementação

• Hero com produto principal e CTA imediato para pedido.
• Grid de menu com categorias e cards de combos.
• Faixa de diferenciais com 3 argumentos de valor.
• Bloco final com contato e links de pedido.

Animações

• Fade-up de entrada por seção.
• Hover em cards de menu com escala 1.02.
• Microtransição no CTA principal com glow suave.

Crie um website de hamburgueria premium de página única para '[NOME_HAMBURGERIA]'. Stack: React + Vite + TypeScript + Tailwind CSS v4 + Framer Motion (motion/react) + React Router DOM.

PACOTES NPM: motion, react-router-dom, lucide-react
FONTES GOOGLE (no index.html): Oswald (400, 700, 900), Inter (300, 400, 500, 700)

---

1. TOKENS DE DESIGN — adicione no index.css:
@import "tailwindcss";
@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-oswald: "Oswald", sans-serif;
  --color-black: #080808; --color-dark: #111111;
  --color-card: #161616; --color-border: #222222;
  --color-red: #C8102E; --color-orange: #E85D04;
  --color-yellow: #FFB703; --color-white: #F5F5F5; --color-gray: #888888;
}
body { @apply bg-black text-white font-sans antialiased overflow-x-hidden; }
h1,h2,h3,h4,h5,h6 { @apply font-oswald uppercase tracking-[-0.02em]; }
Grain overlay (body::after): fixed inset-0 z-[9999] pointer-events-none opacity-[0.04] SVG fractalNoise background-size 180px 180px.
Grade de fundo (.bg-grid-lines): linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px) + 90deg; background-size 64px 64px.

2. NAVBAR:
fixed inset-x-0 top-0 z-50; bg-black/90 backdrop-blur-sm border-b border-border.
Logo: Oswald 700, 1.5rem uppercase tracking-[0.15em], branco.
Links: Inter 500, 13px, uppercase, tracking-[0.12em], text-gray; hover: text-white transition 220ms.
Botão CTA: bg-red text-white font-oswald font-bold uppercase tracking-widest; SEM border-radius (cantos retos — identidade editorial urbana).

3. SEÇÃO HERO:
min-h-[90vh] flex items-center justify-center relative overflow-hidden.
Fundo: div absolute inset-0 bg-black com imagem de hambúrguer em chapa opacity-40 object-cover.
Gradiente superior: absolute inset-0 bg-gradient-to-t from-black via-black/50 to-transparent.
Gradiente lateral: absolute inset-0 bg-gradient-to-r from-black via-black/30 to-transparent.
Badge local: border border-border bg-dark/50 backdrop-blur-sm px-4 py-2; Inter 700 tracking-widest uppercase text-sm text-orange.
Título: Oswald font-black text-[clamp(4rem,10vw,9rem)] leading-[0.9] tracking-tighter uppercase branco; segunda linha com classe .text-stroke-orange (-webkit-text-stroke: 1px #E85D04; color: transparent); Framer: opacity 0→1 y +50→0 duration 0.8s delay 0.2s.
Subtítulo: Inter 400 text-xl md:text-2xl text-gray max-w-2xl; Framer: opacity 0→1 y +30→0 duration 0.8s delay 0.4s.
Botão CTA: bg-red hover:bg-orange text-white px-10 py-5 font-oswald font-bold uppercase tracking-widest text-lg transition-colors; SEM border-radius; flex items-center gap-3; ícone ChevronRight group-hover:translate-x-1.

4. MARQUEE STRIP:
bg-orange py-4 overflow-hidden border-y border-border.
Dois divs com animate-marquee (ambos animam translateX 0→-50% em 25s linear infinite): texto "AURA BURGER • [TEXTO]" em Oswald font-black 3xl uppercase tracking-widest text-black. Bolinha separadora: w-3 h-3 bg-black rounded-full.

5. SEÇÃO DESTAQUES:
py-32 bg-black bg-grid-lines.
Título: Oswald font-black text-5xl md:text-7xl uppercase + span text-red.
Grade 2 colunas em md: cards com bg-card border border-border overflow-hidden.
Card de produto: imagem h-80 object-cover w-full group-hover:scale-105 transition duration-700; overlay to-t from-black/80 to-transparent; nome do produto em Oswald 700 + preço em text-orange.

6. MENU (Página separada /menu):
Filtros por categoria: botões Oswald 700 uppercase; ativo: bg-red text-white; inativo: border border-border text-gray.
Grade: grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6.
Card: bg-card border border-border; imagem object-cover h-56; info: nome Oswald 700, descrição Inter text-gray text-sm, preço text-orange font-oswald font-bold text-2xl.

7. SEÇÃO SOBRE:
Split: imagem (aspect-square md:aspect-auto) + texto.
Fundo com bg-grid-lines. Títulos Oswald font-black. Parágrafos Inter text-gray.
3 estatísticas: número em Oswald font-black text-5xl text-orange + rótulo em Inter uppercase tracking-widest text-gray text-sm.

8. SEÇÃO CONTATO:
bg-dark. Endereço, redes sociais, horários. Botão para pedido externo (iFood/WhatsApp): bg-red sem border-radius.

9. RODAPÉ: bg-black border-t border-border. Logo + texto sobre a hamburgueria + links + copyright.

10. PÁGINAS: / → Início | /menu → Cardápio com filtros | /sobre → Equipe e história | /contato → Endereço e horários

11. MÍDIAS OBRIGATÓRIAS: 1 foto hero (hambúrguer em chapa escura, 1920×1080), 10+ fotos de produtos para o menu, fotos do ambiente, logo SVG.

12. PERSONALIZE: substitua [NOME_HAMBURGERIA], #C8102E e #E85D04 pela identidade visual da marca, textos de descrição dos produtos, preços reais e link de pedido online.

Assets necessários

• ObrigatórioFotos de produto: Imagens de hambúrgueres em alta resolução
• OpcionalVídeo curto: Loop de chapa/produção para hero opcional

Checklist de QA

• Checar legibilidade dos preços no mobile.
• Validar tamanho e nitidez das imagens de produto.
• Testar links externos de pedido.

Nota de personalização

Substitua paleta pelo branding do cliente e inclua pratos assinados com fotos reais.