portifolio-evandrodevbr/specs/2026-11-10-hero-abrangente.md

# Hero mais abrangente
**Autor:** Evandro · **Data:** 2026-11-10 · **Porte:** médio · **Status:** concluída

## 1. Objetivo
O título do hero fala de dois casos (pedido pelo WhatsApp e planilha). Quem não tem esses dois problemas entende que o trabalho se resume a isso. O hero passa a dizer o trabalho inteiro, e a peça de blocos passa a mostrar a amplitude sem depender da rolagem.

## 2. Escopo
Dentro: texto do hero, faixa de clientes, linha do primeiro passo, alinhamento e tamanho da peça, duração da entrada, ciclo da peça em repouso com legenda.
Fora: seções abaixo do hero, cartões de oferta (continuam específicos), o número "5 anos de experiência" (segue vindo do resumo do portfólio), região no rótulo.

## 3. Critérios de aceite
- CA1 (texto): o h1 é "Sites e sistemas sob medida para o jeito que a sua empresa trabalha.", com "sob medida" em lima; o apoio é "Do site institucional ao sistema que a sua equipe usa todo dia. Você fala com quem desenvolve."; nenhum outro lugar do site repete o título antigo → `grep` e `pnpm test`.
- CA2 (primeiro passo): abaixo dos botões há a linha "Começa com uma conversa para entender o seu caso. A proposta vem por escrito."; o hero continua cabendo no palco fixo em 1440×900, 1280×720, 1024×768, 390×844 e 360×640 → inspeção.
- CA3 (clientes): em tela de 640 px ou mais, cada cliente mostra o ramo abaixo do nome; os nomes continuam levando ao case → `pnpm test -- ClientStrip`.
- CA4 (composição): de 1024 px em diante o texto do hero começa na mesma coluna do conteúdo das outras seções; a peça fica 20% maior e mais perto do texto, sem cobri-lo → medida de `getBoundingClientRect` em 1440 e 1280.
- CA5 (entrada): texto, botões e faixa assentam em até 1,8 s → medida do fim da última animação do hero.
- CA6 (peça em repouso): no nível `full`, parada no topo, a peça passa sozinha por marca, tela, integrações e dados; qualquer rolagem devolve o comando à rolagem; abaixo da peça uma legenda digitada diz o que ela está montando; com movimento reduzido ou sem WebGL não há ciclo nem legenda → `pnpm test -- BlocosScene lib/blocos` e inspeção com GPU.
- CA7: Biome, typecheck, `pnpm test`, build e e2e verdes.

## 4. Contexto verificado
- Título e destaque: `app/components/Hero.tsx:41-52` (`ACCENT`, `TITLE`); apoio em `Hero.tsx:111-114`.
- Faixa de clientes: `app/components/ClientStrip.tsx` (nomes com link para `/cases/<id>`, anos na mesma linha); lista em `app/page.tsx` (`clientNames`).
- Hero em `max-w-[max(1400px,var(--shell))]` com `lg:px-sp-12` (`Hero.tsx:86`): em 1440 px o texto começa em x=68; as seções usam `.ds-section-shell` (`globals.css:257`), que começa em x=100.
- Peça: `.hero-piece` (`globals.css:796-815`), `width: min(46%, 680px)` de 1024 px em diante; a cena segue essa caixa (`HeroField.tsx`).
- Entrada: `.hero-word` 1,1 s com atraso de 0,12 s + 45 ms por palavra; `.hero-in` 1 s com `--d` de até 0,75 s (`globals.css:873-914`). O júri mediu 2,6 s até assentar.
- Estados da peça por rolagem: `stateAt` em `lib/blocos.ts`; no nível `lite` a troca já é automática (`BlocosScene.tsx:369-373`).
- Ramos: SEV Moda Íntima é "loja virtual" e Lavação 047 é "lavação automotiva" (`public/portfolio-data.json`); a AS Serviços "reúne engenharia física e software" (`lib/site-content.ts:954`); Julia Beauty é "estúdio de extensão de cílios" (`portfolio-data.json`).
- Legendas do mergulho já existentes: `app/components/hero-captions.ts` ("A tela", "As integrações", "Os dados").

## 5. Desenho
- Ramos, em um só lugar (ao lado de `clientNames`): sev-modaintima "loja virtual"; lavacao-047 "lavação automotiva"; sc-plus "aquicultura"; as-servicos "engenharia e software"; julia-beauty "estúdio de cílios".
- Faixa de clientes de 640 px em diante: cada cliente é um par empilhado, nome (15 px, link) sobre ramo (13 px, apagado). Abaixo disso, só os nomes, como hoje.
- Legenda da peça: marca sem legenda; tela "Sites e sistemas"; integrações "Integrações"; dados "Painéis e dados". Quadrado lima antes do texto, como no rótulo do hero; decorativa (`aria-hidden`).
- Ciclo em repouso (`full`): começa 3 s depois da entrada, com a página no topo; cada estado fica uns 3 s; a troca usa a transição que já existe; a rolagem assume na hora e o ciclo só volta depois de 3 s parado no topo.

## 6. Restrições, riscos, suposições
- Só `transform`, `opacity`, `clip-path`; sem biblioteca nova; o título continua sendo o LCP.
- Risco: a linha nova e o ramo aumentam a altura do hero; o título novo é mais curto, mas o palco fixo do celular é apertado. Se não couber em 360×640, a linha do primeiro passo fica só de 640 px em diante.
- Suposição: os ramos acima; o usuário viu a lista e mandou seguir, com a AS Serviços corrigida pelo texto do próprio site.

## 7. Microtasks
### T1 — texto, faixa, primeiro passo, alinhamento e entrada
- Serve: CA1 a CA5 · Arquivos: `Hero.tsx`, `ClientStrip.tsx`, `app/page.tsx`, parte do hero em `globals.css`, testes e e2e que citam o título
- [x] feito
### T2 — ciclo em repouso e legenda da peça
- Serve: CA6 · Arquivos: `BlocosScene.tsx`, `HeroField.tsx`, `lib/blocos.ts`, testes
- [x] feito
### CP1
- Verificar: CA7 e inspeção com GPU em 1440×900 e 390×844.

## 8. Registro
2026-11-10 — T1 entregue: título, apoio, linha do primeiro passo, faixa com ramo (`CLIENT_SECTORS` em `lib/proof.ts`), hero na coluna das seções (x=100 em 1440, 64 em 1280, 61 em 1024), peça em `min(55.2cqw, 816px)`, entrada assentando em 1,37 s no computador e 1,5 s no celular; título em 3 linhas no computador e 4 no celular. Abaixo de 1024 px o alinhamento não muda.
2026-11-10 — desvio: as descrições do `layout.tsx`, do `manifest.ts` e da imagem de compartilhamento repetiam o posicionamento antigo e foram trocadas pelo novo. O teste `home-positioning.test.ts` proibia "sob medida" (posicionamento de antes do WhatsApp e da planilha); passou a exigir o título novo, porque a escolha do usuário foi a opção com "sob medida".
2026-11-10 — T2 entregue: `cicloAt`, `seguir`, `caixaDosEstados` e `legendaDe` em `lib/blocos.ts`; ciclo de 3 s por estado no `full`, parado no topo; legenda digitada só de 1024 px em diante (em 390 e 360 px encostava no título). No ciclo, tela, integrações e dados ocupam 78% da caixa da peça, porque na caixa inteira encostavam no título. Tempo de quadro medido com GPU: média de 0,17 ms. Pendência anotada: em tela de computador com menos de 700 px de altura não há mergulho e o ciclo roda com a página rolada enquanto o hero está à vista.
2026-11-10 — ajustes depois da revisão visual: "sob medida" não quebra mais entre as duas palavras; para o título seguir em 3 linhas no computador, o tamanho passou a acompanhar a largura da coluna (54 px em 1440, 39 px em 1024). Em 1440 os dois botões e o link do WhatsApp ficam na mesma linha, a 33 px da peça; em 1280 o link continua na linha de baixo, porque ficaria a 3 px do desenho.
2026-11-10 — a legenda entrava no começo da troca, por cima dos blocos da marca; agora só entra com a peça assentada e sai quando a troca seguinte começa. Medido com GPU em 1440×900 e 1280×720: nenhum pixel da cena atrás da legenda nos três estados.
2026-11-10 — LCP depois da mudança, no build de produção: o h1, em 228 ms no computador com GPU e 88 ms em 390 px sem limite de rede; CLS 0.
2026-11-10 — CP1: Biome e typecheck sem erro, 154 suítes e 1681 testes, build sem erro, e2e 60 de 60 sobre `pnpm start -p 3001` (servidor encerrado depois). Não houve novo júri nem teste em celular real.