Copia o prompt.

Prompt para recriar esta landing page:

Cria uma landing page de portfólio dark mode, numa única página, com
React + Vite + Tailwind CSS + TypeScript + GSAP + Framer Motion + hls.js.

## 01. OBJETIVO
Recriar a landing page de templates HYLIOX com um visual premium,
cinematográfico e interações fluidas.

## 02. STACK TÉCNICA
- React 18 + Vite + TypeScript
- Tailwind CSS (configuração personalizada)
- GSAP (ScrollTrigger + animações)
- Framer Motion (microinterações)
- hls.js (para vídeo de fundo, se necessário)

## 03. DESIGN SYSTEM
- Fundo: #0A0A0A (Obsidian)
- Cor principal: #D4FF4F (Acid Lime)
- Texto principal: #FAFAFA (branco quente)
- Texto secundário: rgba(250,250,250,0.64)
- Borda: rgba(255,255,255,0.06)
- Superfície: rgba(255,255,255,0.03)
- Fonte sans: Geist (ou Inter como fallback)
- Fonte display: Instrument Serif (itálico)
- Fonte mono: Geist Mono (ou JetBrains Mono)
- Raio: 16px
- Vidro: backdrop-blur-xl sobre rgba(255,255,255,0.04)

### Escala tipográfica
Display (Serif Itálico): clamp(48px, 7vw, 88px)
H1: clamp(36px, 5vw, 64px)
H2: clamp(24px, 3vw, 32px)
H3: clamp(20px, 2.5vw, 28px)
Corpo: 16px / 1.6
Mono: 13px / 1.7
Tracking eyebrow: 0.4em

### Layout
Largura máxima do conteúdo: 1280px
Padding vertical das secções: clamp(80px, 10vw, 160px)
Padding do container: 24px
Grelha: 12 colunas, gap 24px

## 04. ESTRUTURA DA PÁGINA
1. Ecrã de carregamento (monograma shimmer 3s, fade ease-out)
2. Hero (vídeo HLS full-bleed no fundo, título centrado)
3. Showcase de templates (bento assimétrico com 8 cartões)
4. Como funciona (3 passos, alinhamento alternado)
5. Prova social + mural de testemunhos
6. Preços (3 planos, destaque lime no centro)
7. FAQ em acordeão (8 perguntas, transição de altura fluida)
8. CTA final (marquee + botão lime)
9. Footer (3 colunas + símbolo da marca)

## 05. HERO
- Eyebrow: "TEMPLATES · 2026" (mono, lime, uppercase, tracking 0.4em)
- Título que mistura sans + serif itálico:
  "Publica um site que
  não parece ter sido criado por IA."
- Subtítulo: "8 templates premium. Prontos para Cursor / v0 / Lovable."
- CTA principal: "Ver templates →" (fundo lime)
- CTA secundário: "Ver o método" (contorno ghost)
- Fundo: vídeo hls.js com overlay preto a 50%
- Camada subtil de partículas de poeira por cima
- O hero ocupa 100svh, conteúdo centrado

## 06. GRELHA BENTO
- 8 cartões numa grelha assimétrica
- Base de 12 colunas, cartões ocupam 4/6/8 colunas conforme a linha
- Cada cartão: raio 16px, superfície glass, elevação de 6px no hover
- Conteúdo: thumbnail (16:10), título, subtítulo numa linha
- Destaque lime no primeiro cartão

## 07. COMO FUNCIONA
- 3 passos numerados 01 / 02 / 03 em mono lime
- Cada passo: H2 grande em sans, parágrafo e imagem de apoio
- Alternar texto-imagem / imagem-texto entre linhas
- Variante sticky-pinned no scroll em desktop

## 08. PREÇOS
- 3 planos: Express (€297), Standard (€597), Custom (€1.499)
- Cartão central destacado (borda lime + glow suave)
- Cada cartão: eyebrow, nome, preço, lista de funcionalidades e CTA
- Todos os vistos em lime, todas as cruzes atenuadas
- Nota no rodapé: "Todos os preços são únicos, sem subscrição"

## 09. FAQ
- Acordeão com 8 perguntas
- Pergunta em sans medium 18px
- Resposta na cor body 16px / 1.6
- Estado aberto: borda esquerda lime de 2px
- Transição fluida de altura + opacidade (300ms ease-out)

## 10. CTA FINAL
- Eyebrow + título display:
  "Pronto para publicar?
  Ou ainda estás a ver referências?"
- Um único botão lime: "Ver templates →"
- Faixa marquee abaixo: "CRIADO COM IA · NÃO PELA IA · " (loop infinito)
- Fundo: glow radial lime subtil centrado em baixo

## 11. INTERAÇÕES
- Carregamento: monograma 3s e depois fade ease-out
- Scroll: GSAP ScrollTrigger para revelar secções
- Hover: elevação dos cartões, ligeiro scale dos botões (1.02)
- Marquee: scroll CSS infinito, pausa no hover
- Mobile: desativar parallax, simplificar estados hover

## 12. ACESSIBILIDADE
- Todos os elementos interativos acessíveis por teclado
- Focus rings: 2px lime com offset
- Contraste: AA em todo o texto body
- prefers-reduced-motion: desativar animações acionadas pelo scroll
- aria-label em todos os botões apenas com ícone

## 13. PERFORMANCE
- Lazy-load de todas as imagens abaixo da dobra
- Usar formatos de nova geração (AVIF / WebP)
- Inline do CSS crítico above-the-fold
- Adiar JavaScript não crítico
- Orçamento Lighthouse: LCP < 2.5s, CLS < 0.05