EN

Nº 01de 22Destaque

TECNA — site comercial

Site bilíngue de uma construtora de Brasília/DF em Next 16: conteúdo vindo do CMS do Portal no build, rebuild a cada publicação e tradução por LLM revisada por gente

Ano
2026
Status
NO AR
Papel
Desenvolvedor principal · equipe IOTech
Stack
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 +5
tecna-landingpage.vercel.app
TECNA — site comercial — HUB — as quatro unidades; o card em foco sai nítido, os outros desfocados
5 capturas

1 de 5

TECNA — site comercial — HUB — as quatro unidades; o card em foco sai nítido, os outros desfocados

HUB — as quatro unidades; o card em foco sai nítido, os outros desfocados

01O projeto

Novo site comercial da TECNA, construtora de alto padrão de Brasília/DF, feito pela IOTech: um HUB com as quatro unidades de negócio — TECNA Construtora, TECNA Home, TECNA Engenharia e Imóveis TECNA —, um subsite por unidade com página de obra, Quem Somos, blog, investidor e contato, em português e inglês. É projeto de equipe, e sou o desenvolvedor principal: 101 dos 125 commits do repositório são meus. Todo texto, obra e post é editado num CMS dentro do Portal TECNA; o site lê esse conteúdo no build, se reconstrói por Deploy Hook a cada publicação e, se o CMS não tiver um campo, cai no conteúdo local empacotado em vez de quebrar a página.

02O que foi feito

  1. Next 16 + React 19 + TypeScript + Tailwind 4 com quatro dependências de runtime (next, react, react-dom e @vercel/analytics) e as páginas pré-renderizadas estáticas por generateStaticParams

  2. Contrato tipado entre dois repositórios: o site busca o conteúdo na API do Portal no build, publicar no CMS dispara um Deploy Hook, e o botão “Traduzir o que falta” preenche o inglês por LLM (Anthropic SDK) para alguém revisar antes de salvar

  3. Migração do WordPress sem perder SEO: 28 posts importados com HTML limpo por lista fechada, 9 redirecionamentos permanentes das URLs antigas, hreflang com x-default, JSON-LD e sitemap nas duas línguas

  4. Formulário de contato por server action com validação no servidor, honeypot, trava de tempo de 3 s, rate limit por IP e consentimento LGPD — e ele nunca finge sucesso; CSP estrita, HSTS e nenhum cookie ou terceiro em runtime

  5. E2E em Playwright contra o build de produção, incluindo um spec que percorre o sitemap inteiro caçando a grafia errada da marca, e axe (WCAG 2.1 AA) nas páginas principais a 1440 e 390 px

03Decisões

Decisão 01

Pergunta: Por que ler o CMS no build e não a cada request?

Resposta: O conteúdo de um site de construtora muda poucas vezes por semana, e quem lê é muito mais gente do que quem edita. No build a página sai estática, rápida e sem depender do Portal estar de pé; a publicação no CMS dispara um Deploy Hook, então o atraso entre salvar e ver no ar é o tempo de um build. E se o CMS ainda não tiver um campo, o site cai no conteúdo local empacotado em vez de renderizar um buraco.

Decisão 02

Pergunta: Por que a tradução por LLM não salva sozinha?

Resposta: É texto institucional de uma empresa, e tradução de máquina erra tom e termo técnico de construção sem avisar. O botão preenche só o que está faltando em inglês, em lotes, sem atropelar o que alguém já digitou; a pessoa lê e só então salva. O LLM economiza a digitação, não a revisão.

04Capturas

  • construtora.webp

    Subsite da TECNA Construtora

  • imoveis.webp

    Subsite Imóveis TECNA — lançamentos residenciais

  • hub.webp

    HUB em repouso, sem nenhum card em foco

  • mobile.webp

    HUB no celular — os cards empilhados

1 de 5

TECNA — site comercial — HUB — as quatro unidades; o card em foco sai nítido, os outros desfocados

HUB — as quatro unidades; o card em foco sai nítido, os outros desfocados

05Stack

  • Next.js 16
  • React 19
  • TypeScript
  • Tailwind CSS 4
  • Server Actions
  • Anthropic SDK
  • Playwright
  • axe-core
  • Vercel
Próximo projeto →Nº 02

Plataforma financeira pessoal ponta a ponta com IA, em produção