PT

Nº 01of 22Featured

TECNA — commercial website

Bilingual website for a Brasília/DF builder on Next 16: content pulled from the Portal's CMS at build time, a rebuild on every publish, and LLM translation reviewed by a person

Year
2026
Status
LIVE
Role
Principal developer · IOTech team
Stack
Next.js 16 · React 19 · TypeScript · Tailwind CSS 4 +5
tecna-landingpage.vercel.app
TECNA — commercial website — HUB — the four business units; the focused card goes sharp, the rest stay blurred
5 screens

1 of 5

TECNA — commercial website — HUB — the four business units; the focused card goes sharp, the rest stay blurred

HUB — the four business units; the focused card goes sharp, the rest stay blurred

01The project

TECNA's new commercial website — a high-end builder in Brasília/DF — built through IOTech: a HUB with the four business units — TECNA Construtora, TECNA Home, TECNA Engenharia and Imóveis TECNA —, one sub-site per unit with project pages, About, blog, investor and contact pages, in Portuguese and English. It is a team project, and I am the principal developer: 101 of the repository's 125 commits are mine. Every text, project and post is edited in a CMS inside the TECNA Portal; the site reads that content at build time, rebuilds through a Deploy Hook on every publish and, when the CMS is missing a field, falls back to bundled local content instead of breaking the page.

02What was built

  1. Next 16 + React 19 + TypeScript + Tailwind 4 with four runtime dependencies (next, react, react-dom and @vercel/analytics) and pages prerendered static through generateStaticParams

  2. A typed contract between two repositories: the site fetches content from the Portal's API at build time, publishing in the CMS fires a Deploy Hook, and a “Translate what's missing” button fills in the English through an LLM (Anthropic SDK) for a person to review before saving

  3. Migrating off WordPress without losing SEO: 28 posts imported with HTML sanitized by a closed allowlist, 9 permanent redirects from the old URLs, hreflang with x-default, JSON-LD and a sitemap in both languages

  4. Contact form as a server action with server-side validation, a honeypot, a 3-second time trap, per-IP rate limiting and LGPD consent — and it never fakes success; strict CSP, HSTS and no cookies or third parties at runtime

  5. Playwright E2E against the production build, including a spec that crawls the whole sitemap hunting for misspellings of the brand, and axe (WCAG 2.1 AA) on the main pages at 1440 and 390 px

03Decisions

Decision 01

Question: Why read the CMS at build time instead of on every request?

Answer: A builder's website changes a few times a week, and far more people read it than edit it. At build time the page comes out static, fast and independent of the Portal being up; publishing in the CMS fires a Deploy Hook, so the delay between saving and seeing it live is one build. And when the CMS does not have a field yet, the site falls back to bundled local content instead of rendering a hole.

Decision 02

Question: Why doesn't the LLM translation save itself?

Answer: It is a company's institutional copy, and machine translation gets tone and construction terminology wrong without warning. The button fills in only what is missing in English, in batches, without overwriting what someone already typed; a person reads it and only then saves. The LLM saves the typing, not the review.

04Screens

  • construtora.webp

    TECNA Construtora sub-site

  • imoveis.webp

    Imóveis TECNA sub-site — residential launches

  • hub.webp

    HUB at rest, with no card in focus

  • mobile.webp

    HUB on mobile — the cards stacked

1 of 5

TECNA — commercial website — HUB — the four business units; the focused card goes sharp, the rest stay blurred

HUB — the four business units; the focused card goes sharp, the rest stay blurred

05Stack

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

End-to-end personal finance platform with AI, in production