evandro
c7d09d63d4
Hero e movimento - cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py): marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao cursor e, parada no topo, passa sozinha pelos estados com legenda - três níveis de aparelho (full, lite, static); sem WebGL fica o pôster - título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha." - faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções - rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa compartilhada entre a lista de cases e o case Ofertas - atendimento no WhatsApp com IA e nota fiscal para a reforma tributária (páginas de serviço, cartões da home, formulário e aviso com data de validade) - página /ia atualizada, com fontes - peças 3D em loop nos cartões e topos de página (3d/pecas.py) Design - hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta - um destino por rótulo: "Falar sobre meu projeto" leva ao formulário, "Chamar no WhatsApp" abre o WhatsApp - logo montado em blocos, 404 redesenhado, grades sem célula vazia - ícones do PWA e manifesto novos Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.
7.5 KiB
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 →
grepepnpm 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
getBoundingClientRectem 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/blocose 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 emHero.tsx:111-114. - Faixa de clientes:
app/components/ClientStrip.tsx(nomes com link para/cases/<id>, anos na mesma linha); lista emapp/page.tsx(clientNames). - Hero em
max-w-[max(1400px,var(--shell))]comlg: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-word1,1 s com atraso de 0,12 s + 45 ms por palavra;.hero-in1 s com--dde até 0,75 s (globals.css:873-914). O júri mediu 2,6 s até assentar. - Estados da peça por rolagem:
stateAtemlib/blocos.ts; no nívellitea 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 emglobals.css, testes e e2e que citam o título - feito
T2 — ciclo em repouso e legenda da peça
- Serve: CA6 · Arquivos:
BlocosScene.tsx,HeroField.tsx,lib/blocos.ts, testes - 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.