portifolio-evandrodevbr/specs/2026-11-10-melhorias-de-design.md

# Melhorias de design depois da avaliação
**Autor:** Evandro · **Data:** 2026-11-10 · **Porte:** grande · **Status:** concluída

## 1. Objetivo
Aplicar as melhorias que a crítica do Impeccable (29/40, Consistência 2) e o crítico cego do jury (6,4) apontaram, para o conceito de blocos valer no site inteiro e os botões responderem como o resto. Aprovado pelo usuário em 2026-11-10 ("incluir as melhorias propostas").

Leitura (frontend-orchestrator): refino · Persuade · web · `3d`, `premium` → impeccable, design-rules, threejs-shaders e threejs-animation na cena; fecha com audit, diagnóstico rápido e jury.

## 2. Escopo
- Dentro: hover dos alvos principais; blocos nos topos das páginas internas; um destino só para "Falar sobre meu projeto"; botão do WhatsApp e aviso de cookies no celular; rótulo único para a página `/ia`; grades com sobra; menos rótulos em caixa alta; cena com vida em repouso e reação ao cursor; logo em blocos no cabeçalho; `rel="noopener"` nos links externos.
- Fora (não fazer): números de resultado nos cases (dependem de dados do usuário, P1); mudar ofertas ou textos de venda; biblioteca de animação; novo conceito visual.

## 3. Critérios de aceite
- CA1 (hover): todo botão verde, botão de contorno, link de texto, item da vitrine e botão de tocar vídeo muda de forma visível sob o ponteiro e no foco, com um tratamento por papel; com movimento reduzido a troca é instantânea → `noHoverChange` 0 e nenhum alvo primário em `colorOnly` no `shoot.mjs` do jury.
- CA2 (blocos nas páginas internas): `/cases`, `/curriculo`, `/privacidade` e as duas páginas de serviço sem capa mostram uma peça de blocos à direita do topo de 1024 px em diante, decorativa, sem estouro → inspeção em 1440×900 e `pnpm test:e2e -- routes`.
- CA3 (um destino): todo controle chamado "Falar sobre meu projeto" leva ao formulário; todo controle que abre o WhatsApp se chama "Chamar no WhatsApp" → `grep` dos rótulos e `pnpm test:e2e -- contact keyboard`.
- CA4 (celular): com o aviso de cookies aberto o botão flutuante não aparece; o aviso tem até 72 px de altura em 390 px; o link da política tem alvo de 24 px ou mais → `pnpm test -- GoogleAnalytics FloatingWhatsApp` e inspeção em 390×844.
- CA5 (rótulo): menu, trilha, rodapé e rótulo da página `/ia` dizem "Revisão de app com IA" → `pnpm test -- Header Footer app/ia`.
- CA6 (grades): nenhuma grade de cartões termina com célula vazia em 1440 px em `/cases` e `/servicos`; os cartões de `/ia` e do currículo não esticam com buraco interno → inspeção.
- CA7 (rótulos): `.ds-eyebrow` sem caixa alta; o rótulo do hero cabe em até 2 linhas em 390 px; as páginas internas com trilha não repetem rótulo sobre o título → inspeção e `pnpm test`.
- CA8 (cena viva): em repouso cada estado tem um movimento próprio e, no nível `full`, os blocos reagem ao cursor; o desenho continua sob demanda e para sem atividade → `pnpm test -- BlocosScene lib/blocos` e captura com GPU.
- CA9 (logo): o símbolo do cabeçalho responde ao ponteiro e ao foco com os quadrados verdes encaixando; em repouso o logo é igual ao atual (diferença média de pixel abaixo de 2 em 255) → medição do agente e inspeção.
- CA10: `pnpm lint && pnpm typecheck && pnpm test && pnpm build && pnpm test:e2e` verdes; novo jury com crítico novo, nota por categoria igual ou maior que a anterior.

## 4. Contexto verificado
- `app/components/button-styles.ts`: `primaryButton` só clareia no hover (`hover:bg-[#d9ff40]`); contornos só mudam a borda; links de texto só mudam a cor.
- `app/components/Hero.tsx:110-116`: o botão verde do hero abre o WhatsApp; `Header.tsx:86-91`: o do cabeçalho leva ao formulário.
- `lib/site-navigation.ts:10`: item `{ href: "/ia", label: "IA" }`.
- `app/globals.css` (`.ds-eyebrow, .ds-kicker`): 12 px, `text-transform: uppercase`, `letter-spacing: 0.08em`; `Section.tsx:47-58` põe um sobre cada título.
- `app/components/FloatingWhatsApp.tsx:61-66` e `GoogleAnalytics.tsx:224-236`: botão flutuante e aviso de cookies, ambos fixos na base no celular.
- `app/components/cinematic/BlocosScene.tsx` e `lib/blocos.ts`: cena de blocos, parada em repouso fora do balanço da marca.
- `app/components/Logo.tsx`: o logo é um `.webp` único (`/brand/wordmark-<tema>.webp`), sem partes animáveis; o símbolo existe em SVG (`public/brand/mark-dark.svg`, `mark-light.svg`).
- `3d/blocos.py` e `3d/pecas.py`: geram o pôster da marca e três loops; os estados `tela`, `integracoes` e `dados` só têm prévia em `3d/out/`.

## 5. Desenho
- Hover, um tratamento por papel, no verbo "encaixar" (entra pela esquerda, 280 ms, `--ease-out`, só `transform` e `opacity`):
  - botão verde: um bloco cor de papel cobre o botão da esquerda para a direita; o texto continua escuro;
  - botão de contorno: o mesmo bloco, translúcido no fundo escuro e escuro no fundo claro (o texto inverte);
  - link de texto e item do menu: uma barra de 2 px cresce da esquerda sob o texto; o sublinhado fixo dos links de texto continua;
  - item da vitrine: barra verde entra pela esquerda; tocar vídeo: o círculo cresce e fica verde.
- Um destino: "Falar sobre meu projeto" vai ao formulário em todo lugar. No hero entra um link discreto "Chamar no WhatsApp". Nas páginas de serviço, o botão que abre o WhatsApp com o assunto do serviço passa a se chamar "Chamar no WhatsApp".
- Peças das páginas internas: `/cases` usa o estado `tela`, `/curriculo` o `integracoes`, `/privacidade` o `dados`; atendimento usa o loop `peca-whatsapp` e nota fiscal um loop novo, `peca-fiscal`. Só de 1024 px em diante.
- Rótulos: sem caixa alta, 13 px, `letter-spacing` 0,02em; o efeito digitado continua. No celular o rótulo do hero mostra só "Engenharia de software".
- Cena: `marca` com os quatro quadrados verdes pulando em sequência; `tela` com o botão verde pulsando; `integracoes` com um pulso verde correndo do centro para os nós; `dados` com as barras respirando. Cursor: os blocos perto dele avançam para a frente.
- Logo: símbolo em SVG ao lado do texto recortado do `.webp` atual; se a montagem não bater com o original dentro da tolerância, fica o `.webp` com um tratamento de hover no logo inteiro.
- Descartado: esconder o botão flutuante do WhatsApp de vez no celular (é o atalho de contato mais usado).

Arquivos por frente (um dono cada): botões e celular em `button-styles.ts`, `globals.css`, `Hero.tsx`, `Header.tsx`, `FloatingWhatsApp.tsx`, `GoogleAnalytics.tsx`, vitrine e `CasePlayer.tsx`; páginas internas em `app/cases`, `app/servicos`, `app/curriculo`, `app/privacidade`, `app/ia`, `lib/site-navigation.ts`, `lib/site-content.ts`, `Footer.tsx`; Blender em `3d/` e `public/3d/`; cena em `BlocosScene.tsx` e `lib/blocos.ts`; logo em `Logo.tsx` e `public/brand/`.

## 6. Restrições, riscos, suposições
- Restrições: as mesmas das specs anteriores (Next 16, sem servidor extra além do `next dev` já aberto, sem commit).
- Riscos: o logo é a peça mais sensível da marca (por isso a tolerância e o plano B); mudar o destino do botão do hero mexe em medição de cliques e em testes de ponta a ponta.
- S1: as recomendações dos itens 3 e 5 da proposta estão aceitas como escritas.
- P1 (fora desta spec): números reais de resultado por cliente, para a página de cada case.

## 7. Microtasks
### T1 · Dar hover, destino único e celular limpo aos botões · N3
- Serve: CA1, CA3, CA4, CA7 · Depende de: nenhuma · Arquivos: os da frente "botões e celular"
- Pronto quando: os cinco papéis têm o tratamento da seção 5; o hero leva ao formulário e tem "Chamar no WhatsApp"; aviso de cookies e botão flutuante cumprem o CA4; rótulos sem caixa alta.
- Verificar: `pnpm test -- Hero Header FloatingWhatsApp GoogleAnalytics Section` e `e2e/contact.spec.ts`, `e2e/keyboard.spec.ts` contra a porta 3000.
- [x] feito

### T2 · Levar blocos, grades e rótulo único às páginas internas · N3 [P]
- Serve: CA2, CA3, CA5, CA6, CA7 · Depende de: nomes de arquivo do T3 · Arquivos: os da frente "páginas internas"
- Verificar: `pnpm test -- cases servicos curriculo privacidade app/ia Footer site-content`.
- [x] feito

### T3 · Renderizar os três estados e a peça da nota fiscal · N3 [P]
- Serve: CA2 · Arquivos: `3d/blocos.py`, `3d/pecas.py`, `public/3d/estado-*.webp`, `public/3d/peca-fiscal.*`
- Verificar: `blender -b --python 3d/blocos.py` → `OK`; `blender -b --python 3d/pecas.py` → `OK pecas=4`.
- [x] feito

### T4 · Dar vida à cena em repouso e reação ao cursor · N3 [P]
- Serve: CA8 · Arquivos: `BlocosScene.tsx`, `lib/blocos.ts` e testes
- Verificar: `pnpm test -- BlocosScene lib/blocos`; captura com GPU dos quatro estados em dois instantes.
- [x] feito

### T5 · Montar o logo do cabeçalho com o símbolo em blocos · N3 [P]
- Serve: CA9 · Arquivos: `Logo.tsx`, teste, arquivos novos em `public/brand/`
- Verificar: `pnpm test -- Logo Header Footer`; diferença média de pixel contra o logo atual abaixo de 2 em 255 em 180 e 240 px.
- [x] feito

### CP1 · após T1–T5 · N0
- Verificar: CA10 (suíte, build, e2e sobre `pnpm start -p 3001`, jury com crítico novo) e inspeção com GPU em 1440×900 e 390×844.

## 8. Registro
2026-11-10 — spec escrita a partir das nove melhorias propostas; o item 8 (resultado nos cases) ficou fora por depender de dados do usuário.
2026-11-10 — T3: `estado-tela.webp` (77 KB), `estado-integracoes.webp` (49 KB) e `estado-dados.webp` (70 KB), 1200×900 com alfa; `peca-fiscal` (webm 46 KB, mp4 54 KB, pôster 8 KB): nota de 11×16 blocos com as linhas como vãos e um selo verde de 7×7 com o "V" vazado. O pôster da marca não mudou de enquadramento. `blocos.json` com o mesmo md5.
2026-11-10 — T2: `PagePiece.tsx` novo, só de 1024 px em diante. `/cases` com o quinto cartão na linha toda; `/servicos` em 3 + 2; `/ia` e currículo com cartões alinhados pelo topo. Rótulo único `IA_PAGE_LABEL` ("Revisão de app com IA") no menu, na trilha, no rodapé e nos dados estruturados. Nenhuma página interna tinha "Falar sobre meu projeto" indo ao formulário além do currículo: os botões que abrem o WhatsApp viraram "Chamar no WhatsApp". No topo do case ficou só "Case de cliente" ou "Projeto de laboratório".
2026-11-10 — T5: logo montado de SVG (símbolo) mais `wordmark-text-<tema>.webp` (o original com o símbolo apagado, em 1600×330). Diferença média contra o logo anterior: 0,82 e 0,89 (escuro, 180 e 240 px), 0,34 e 0,39 (claro); caixa do link igual. As medidas do símbolo vieram do `.webp`, porque as do `mark-*.svg` não batem com ele.
2026-11-10 — T1: classes `cv-fill`, `cv-outline-dark`, `cv-outline-light` (bloco que entra pela esquerda) e `cv-bar` (barra de 2 px) em `globals.css`, só sob `@media (hover: hover)` e no foco. O botão do hero leva a `/#contact-form`; entrou o link "Chamar no WhatsApp", que é o que o botão flutuante observa. Fora da home, o botão do cabeçalho continua abrindo o WhatsApp, agora com o nome "Chamar no WhatsApp". Aviso de cookies com 67,7 px em 390 px e texto de 13 px abaixo de 640 px; o botão flutuante some com o aviso aberto. O espaço no fim da página já existia no rodapé. O limite de Tabs do caminho linear foi de 40 para 41 (o link novo do hero).
2026-11-10 — o contato sem JavaScript (`Contact.tsx`, `<noscript>`) também passou a dizer "Chamar no WhatsApp".
2026-11-10 — T4: `papeis()` em `lib/blocos.ts` tira do `blocos.json` os quatro quadrados da marca, o botão da tela, as seis linhas das integrações e as cinco barras dos dados. A vida em repouso e o cursor ficam no vertex shader; o peso vai a zero na troca de estado e na entrada; o relógio só anda quando há quadro. As barras respiram 15% (os 6% da proposta quase não se viam). O cursor empurra os blocos no eixo da própria peça, não na linha da câmera. Tempo de quadro medido com GPU: até 0,39 ms, um quadro a cada 33 ms.
2026-11-10 — segunda passada do Impeccable (`~/tmp/avaliacao/impeccable-2.md`): crítica 30/40, com Consistência de 2 para 3 e nenhuma heurística abaixo de 3; auditoria 15/20, sem mudança. O LCP com GPU ficou no título, em 356 ms.
2026-11-10 — problemas que as mudanças criaram, apontados na segunda passada e corrigidos: (1) o bloco cor de papel sumia nos botões verdes sobre cartão branco: em seção clara o bloco é escuro e o texto inverte; (2) sem caixa alta, o rótulo da vitrine mostrava "loja virtual · Em Produção": `projectKicker()` em `lib/project-showcase.ts` escreve "Loja virtual · em produção"; (3) rodapé, "Em movimento" e "Role para mergulhar" ainda estavam em caixa alta; (4) a imagem de reserva do 404 era pré-carregada em todas as páginas: ganhou `loading="lazy"`.
2026-11-10 — também da segunda passada: token `--whatsapp` (e `--whatsapp-hover`) no lugar das 9 cores soltas, e o botão de envio do formulário com o mesmo bloco dos outros.
2026-11-10 — o `next dev` parou de servir o CSS novo depois dos builds de produção feitos ao lado dele; foi reiniciado (pid novo) e voltou a servir.
2026-11-10 — ficam abertos, por serem decisão de produto ou anteriores a este trabalho: o botão do cabeçalho muda de nome e de destino entre a home e as outras páginas; o hero começa em x=68 e o resto em x=100; rótulos que repetem o título em três seções; o botão flutuante ainda cobre fim de linha no meio da rolagem; "Quatro pontos de partida" na home e "Cinco jeitos de começar" em `/servicos`.
2026-11-10 — suíte e2e sobre o build com as correções: 60 de 60.
2026-11-10 — pedido do usuário durante a execução: nos cartões da home, os dois balões soltos não se leem como conversa de WhatsApp, e a mídia da revisão (o trecho do relatório pequeno numa caixa escura) não sugere revisão. Mudanças: `peca-whatsapp` vira um celular de blocos com a conversa dentro, com um selo "WhatsApp" em HTML por cima; a revisão ganha a peça `peca-revisao` (uma lupa atravessa uma janela e assenta os blocos fora do lugar), com o trecho do relatório maior ao lado. O cartão da revisão deixa de ser exceção: três dos quatro cartões usam peça em loop.
2026-11-10 — peças entregues: `peca-whatsapp` refeita (celular de 9x16 blocos, três balões alternando os lados, pontos de "digitando") e `peca-revisao` nova (janela de 13 blocos de largura, lupa lima, três blocos que assentam, selo de conferido); `pecas.py` termina em `OK pecas=5`. No cartão: selo "WhatsApp" em HTML no canto de cima à esquerda; trecho do relatório ao lado da janela a partir de 29rem de quadro, embaixo do vídeo no celular e oculto entre 1024 e 1279 px (cartões lado a lado com quadro estreito). O vídeo dos cartões passou de `object-cover` a `object-contain`, porque no quadro 21:9 o celular e a janela eram cortados; o fundo do vídeo é o mesmo do quadro.
2026-11-10 — medido em dez larguras de 360 a 1920 px: o trecho nunca cobre a janela (folga mínima de 17 px, em 1280), o selo nunca cobre o celular (folga mínima de 7 px, em 360), os títulos dos cartões 3 e 4 ficam alinhados em duas colunas, sem rolagem horizontal.
2026-11-10 — verificação depois dessas mudanças: Biome sem erro, typecheck sem erro, 153 suítes e 1654 testes, build sem erro.
2026-11-10 — CP1: Biome, typecheck, 153 suítes e 1654 testes, build; e2e 60 de 60 sobre `pnpm start -p 3001` (servidor encerrado depois). Jury, rodada 2, com crítico novo (`~/tmp/.jury/127.0.0.1-3001/scorecard.md`): geral 7,0 contra 6,4; Design 6 → 7, Usabilidade 7 → 7, Criatividade 6 → 7, Conteúdo 7 → 7; nenhuma categoria caiu (CA10). Audit: 4 FAIL e 17 WARN contra 4 e 32; os 4 FAIL são os mesmos (texto de h2 que a ferramenta conta duas vezes e um link só de mouse sem nome).
2026-11-10 — depois da captura do jury: os botões do aviso de cookies ganharam o bloco no hover (eram só troca de cor em todas as páginas) e o link de e-mail de `/privacidade` ganhou alvo de 24 px. Conferido com os testes unitários e com `keyboard`, `contact` e `navigation` do e2e contra o `next dev` (28 de 28); não houve novo build de produção nem novo jury depois disso.
2026-11-10 — ficam abertos, da lista do crítico: o espaço depois de f e t no texto do celular (visto só na captura headless, não reproduzido em aparelho), o triângulo padrão dos `<details>` nas páginas de case e de serviço, espaço morto em cartões de `/servicos`, as requisições abortadas do vídeo da vitrine, e os dois itens que dependem do dono: resultado medido nos cases e a conta dos "5 anos de experiência" contra o currículo que começa em junho de 2022.