feat: control room hero, SEO/AEO optimization and design system fixes

Hero: replace particle field with cobe globe (Capricorn view, multi-axis drag, reduced-motion safe), telemetry HUD with pointer parallax, particle text build effect, Space Grotesk display font. SEO: short titles with template, PT-BR accents, twitter cards on dynamic cases, escaped JSON-LD via lib/jsonld.ts, CSP report-only, 25 service FAQs answer-first. Design: fix TW4 layered reset killing spacing utilities, literal @theme tokens, mobile hero overflow, header overlap, empty case cards. Remove framer-motion (unified on motion/react), header version badge, phone number from hero CTA. Production build verified (24 static pages).
2026-08-27 10:55:21 -03:00
1 parent 0920370f30
commit b791b7de9e
@@ -0,0 +1,70 @@
+# Plano: frontend foundation e conversão
+
+## Estado inicial
+
+- Branch atual: `feature/portrait-cyber-effects`.
+- Workspace limpo antes da implementação.
+- `pnpm run build` era o baseline verde conhecido.
+- Testes e Biome já possuíam falhas preexistentes; a validação distinguirá regressões dos problemas anteriores.
+
+## Execução
+
+### 1. Regressões primeiro
+
+Arquivos:
+
+- `app/components/Header.test.tsx`
+- `app/components/Hero.test.tsx`
+- `app/components/cinematic/MagneticButton.test.tsx`
+
+Adicionar asserções para:
+
+- links e atributos ARIA do header;
+- download do CV em `/Profile.pdf`;
+- `li` renderizado diretamente sob uma lista.
+
+Verificação: rodar as suítes específicas e observar falhas antes da implementação.
+
+### 2. Contratos compartilhados
+
+Arquivo novo:
+
+- `lib/site-navigation.ts`
+
+Exportar `CV_URL` e os itens de navegação usados pelo header. O teste do Hero e o componente devem usar o mesmo contrato.
+
+### 3. Navegação global
+
+Arquivos:
+
+- `app/layout.tsx`
+- `app/components/Header.tsx`
+- `app/components/cinematic/CinematicOverlays.tsx`
+
+Adicionar header no layout, skip link, navegação desktop, disclosure mobile e remover o botão Home redundante dos overlays.
+
+### 4. Correções de semântica e performance
+
+Arquivos:
+
+- `app/components/Hero.tsx`
+- `app/components/cinematic/MagneticButton.tsx`
+- `app/components/cinematic/FilmGrain.tsx`
+- `app/globals.css`
+
+Usar `CV_URL`, renderizar `li` sem wrapper inválido, respeitar `prefers-reduced-motion`/pointer coarse no grain e adicionar foco/scroll global.
+
+### 5. Validação e revisão
+
+Executar:
+
+```bash
+pnpm exec jest --runInBand app/components/Header.test.tsx app/components/Hero.test.tsx app/components/cinematic/MagneticButton.test.tsx
+pnpm run test -- --runInBand
+pnpm run lint
+pnpm run build
+pnpm run format
+pnpm exec biome check --write app/components/Header.tsx app/components/Hero.tsx app/components/cinematic/MagneticButton.tsx app/components/cinematic/CinematicOverlays.tsx app/components/cinematic/FilmGrain.tsx app/layout.tsx lib/site-navigation.ts
+```
+
+Revisar `git diff --check`, `git diff --stat` e o diff completo. Não criar commit sem solicitação explícita.
@@ -0,0 +1,32 @@
+# Design: frontend foundation and conversion pass
+
+## Objetivo
+
+Corrigir os pontos que impedem o portfólio de funcionar como produto: navegação global ausente, download de CV quebrado, foco de teclado inconsistente e efeitos cinematográficos executando fora do contexto necessário.
+
+## Decisões
+
+- Reutilizar o `Header` existente no layout global, sem adicionar dependências.
+- Centralizar URLs e itens de navegação em `lib/site-navigation.ts` para evitar caminhos divergentes.
+- Manter a identidade visual escura/cinematográfica, mas deixar o conteúdo principal e as ações acessíveis sem depender de animação.
+- Usar um disclosure mobile simples e acessível: `aria-expanded`, `aria-controls`, `hidden` e fechamento por `Escape`.
+- Fazer o `MagneticButton` renderizar `li` diretamente quando solicitado, eliminando `div > li` inválido.
+- Limitar cursor customizado, grain e progresso de scroll à home; páginas internas continuam com navegação normal e menos trabalho de renderização.
+- Adicionar skip link, `scroll-padding` e foco visível global.
+
+## Não incluído neste lote
+
+- Redesign completo da hero.
+- Migração de animações ou troca de biblioteca.
+- Alteração de backend, conteúdo editorial ou arquitetura de rotas.
+- Correção geral dos 152 diagnósticos do Biome; apenas os arquivos tocados serão saneados.
+
+## Critérios de aceite
+
+1. O header aparece na home e nas rotas internas.
+2. O menu mobile informa e controla seu estado, fecha com `Escape` e não deixa links ocultos no fluxo de tabulação.
+3. Todos os CTAs de CV apontam para `/Profile.pdf`, arquivo existente.
+4. Nenhum uso de `MagneticButton as="li"` produz um elemento intermediário inválido.
+5. O alvo do skip link existe e elementos focáveis têm indicação visual clara.
+6. Testes de regressão passam para header, CV e semântica de lista.
+7. Build de produção continua passando.