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).
2.1 KiB
2.1 KiB
Plano: frontend foundation e conversão
Estado inicial
- Branch atual:
feature/portrait-cyber-effects. - Workspace limpo antes da implementação.
pnpm run buildera 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.tsxapp/components/Hero.test.tsxapp/components/cinematic/MagneticButton.test.tsx
Adicionar asserções para:
- links e atributos ARIA do header;
- download do CV em
/Profile.pdf; lirenderizado 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.tsxapp/components/Header.tsxapp/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.tsxapp/components/cinematic/MagneticButton.tsxapp/components/cinematic/FilmGrain.tsxapp/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:
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.