# Portal Distribuidora — experiência de conexão V4

## Escopo aprovado

Evolução do protótipo local existente, inspirada na apresentação 3D da Neoconda: grafite e amarelo da marca, áreas claras para conteúdo e uma seção interativa ligada aos cinco segmentos. Não é publicação nem migração do WordPress. Não foram alterados acesso, DNS, conteúdo, URLs, indexação, tags ou cache do site publicado.

## Implementação

- Abertura com foto real da Portal, contraste grafite, destaque editorial em serifada e amarelo `#F9C349`.
- Conteúdo institucional e categorias em superfícies claras, preservando o acesso aos produtos, orçamento e contato do protótipo.
- Seção escura de segmentos com maquete tridimensional original: construção, instalação, indústria, operação rural e engenharia, conectadas a um ponto central.
- Selecionar um segmento ilumina sua conexão e eleva a parte correspondente da maquete; o texto e o link de WhatsApp continuam sendo HTML, fora do canvas.
- Rotação discreta responde à rolagem nativa. Não há scroll-jacking, introdução obrigatória, cursor substituído ou tela de carregamento bloqueando o site.
- Maquete identificada como conceitual: não representa instalação executiva, obra de cliente, produto certificado ou prova de capacidade técnica.
- Mensagens de WhatsApp por segmento usam o contato público já estabelecido `556232907222`; o site abre uma mensagem preparada, sem enviá-la automaticamente.
- Não foram adicionadas alegações de estoque, prazo de atendimento, contratos, marcas autorizadas ou resultados não confirmados.

## Carregamento e acessibilidade

- Three.js e a cena estão em importação dinâmica. No computador, são solicitados quando a seção se aproxima da área visível, não no primeiro carregamento da home.
- Em telas até 760px e quando o navegador sinaliza economia de dados, o visitante escolhe “Explorar em 3D”. A foto real é a apresentação inicial.
- Sem JavaScript ou sem WebGL, a foto e os cinco blocos de conteúdo permanecem; a visualização não é necessária para consultar materiais ou iniciar contato.
- Controles nativos `details/summary` permitem seleção por teclado. Com JavaScript, abrir um segmento recolhe os demais. Sem JavaScript, continuam funcionando independentemente.
- A preferência por movimento reduzido produz uma cena estática. Há controle explícito para pausar ou ativar movimento.
- A renderização para quando a seção deixa a área visível ou a aba fica oculta. Recursos gráficos e ouvintes são liberados ao sair da página.
- Renderização limitada a aproximadamente 30 quadros/s; densidade de pixels limitada a 1,5 no desktop e 1 em tela móvel.
- As peças repetidas usam instâncias agrupadas para reduzir chamadas de desenho. O movimento ocorre em pequenos intervalos após rolar ou selecionar; não mantém uma animação infinita quando não há interação.
- Nenhum rastreador de produção ou evento GA4 foi instalado. Clique em WhatsApp não comprova envio da mensagem ou lead qualificado; uma futura mensuração deve distinguir essas etapas.

## Governança de SEO

Os testes locais cobrem as 17 rotas do protótipo, não as 146 URLs do WordPress. A prévia continua com bloqueio de indexação próprio de ambiente local. Esse bloqueio não deve ser levado ao site publicado.

A implementação no Elementor deverá ser um módulo isolado e progressivo, preservando as 146 URLs e todos os conteúdos indexados que não estão integralmente representados nesta prévia. Congelar slugs, canonical, breadcrumbs, links internos e intenção de title/H1. Não consolidar páginas nem aplicar noindex com base apenas no redesign.

Antes de publicar: comparar rastreamentos de staging com o site publicado, conferir renderização dos textos sem a cena, testar dispositivos reais, medir Core Web Vitals e comparar com a linha de base. Acompanhar Search Console após a publicação. Não existe garantia de ausência absoluta de oscilação de ranking.

## Pendências de produção

1. Confirmar os segmentos efetivamente atendidos e as condições comerciais com a Portal.
2. Transpor o módulo para staging WordPress/Elementor sem substituir a arquitetura existente pelas rotas do protótipo.
3. Revalidar os problemas históricos de links, cache, contraste e rastreamento antes de definir correções e redirecionamentos.
4. Consolidar a mensuração de WhatsApp somente após validar GTM e consentimento existentes.
5. Conferir segurança e atualizações das dependências do ambiente de produção antes de qualquer publicação.

## Verificação desta entrega

- Compilação concluída e cinco testes automatizados aprovados: 17 rotas com status 200, contrato de metadados único, bloqueio de indexação local, página 404 real, WhatsApp correto e conteúdo dos cinco segmentos presente no HTML sem canvas.
- Verificação visual em desktop e tela móvel com largura CSS efetiva de 354px: cena renderizada, seleção de indústria e engenharia sincronizada com texto e WhatsApp, pausa funcionando, ativação manual no mobile, nenhuma imagem quebrada ou overflow horizontal detectado nessa largura.
- A primeira tela móvel mantém a proposta de valor e o WhatsApp visíveis; a barra fixa de contato permanece disponível.
- O módulo gráfico final mede 554.809 bytes minificados / 137.641 bytes em gzip; o componente de ativação mede 3.508 / 1.566 bytes. O módulo gráfico é adiado e não integra o carregamento inicial obrigatório. Isso não equivale a uma medição de velocidade percebida ou de Core Web Vitals.
- A checagem geral de TypeScript detectou problemas preexistentes no exemplo D1 (imports de banco ausentes) e tipos Cloudflare do worker (`Fetcher`, `D1Database`). Não foram corrigidos como parte do redesign; foi criada uma verificação isolada da interface em `tsconfig.ui.json`, sem substituir a configuração geral.
- A verificação isolada da interface (`npm run typecheck:ui`) e o lint dos quatro módulos alterados/criados passaram sem erros.
- Arquivos de dependências e do worker estavam como placeholders do iCloud, causando travamento de leitura e avisos transitórios na prévia. As dependências foram reinstaladas do mesmo lockfile, e o worker foi baixado sem edição. A instalação anterior permanece em `portal-local-modelo/node_modules/.portal-previous-install/`.
- A prévia final usa a versão compilada, servida somente em `127.0.0.1:3200`, evitando os avisos transitórios de atualização automática. Novas alterações exigem recompilar/reiniciar ou retomar o servidor de desenvolvimento.
- Não foram medidos Lighthouse, Core Web Vitals em campo, ganho de conversão ou ranking. Esses resultados não devem ser inferidos dos testes locais.

## Referências

- Direção de interação: https://neoconda.com/
- API de renderização: https://threejs.org/docs/
- Conteúdo e JavaScript: https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
- Métricas de experiência: https://developers.google.com/search/docs/appearance/core-web-vitals

As skills de construção e hospedagem de Sites orientaram a preservação do projeto, o aprimoramento progressivo e a validação. A etapa de hospedagem foi mantida fora do escopo: a aprovação foi para evoluir a prévia local, não publicar o site.