Prumo Engenharia: site institucional para engenharia civil e industrial

Projeto conceitual desenvolvido pela ALB Seven. A Prumo Engenharia não é um cliente real: empresa, números, equipe, clientes e depoimentos exibidos no site são inventados. É um estudo de como uma empresa de engenharia civil e industrial deveria se apresentar na internet.

O problema do setor

Site de engenharia costuma cair em um de dois extremos. Ou é uma galeria de fotos de obra sem contexto, que não diz o que a empresa faz nem para quem, ou é um catálogo institucional genérico que serviria igualmente a uma construtora, a uma consultoria e a uma fábrica. Nos dois casos, quem decide a contratação, em geral um comprador técnico, não encontra o que procura: escopo, capacidade de execução e prova de método.

As decisões de projeto

• Bilíngue de nascença. Cinco páginas, Início, Sobre, Serviços, Projetos e Contato, em português e inglês, porque engenharia industrial negocia com matriz estrangeira. O dicionário PT define o tipo TypeScript do conteúdo, então uma chave faltando no EN quebra o type-check do build. Tradução esquecida vira erro de compilação, não texto em português no meio da página em inglês.
• Dado separado do texto. O que não muda com o idioma, fotos, slugs e valores numéricos, fica em src/data/site.ts e é combinado com os textos por um hook. Traduzir não duplica dado.
• Movimento com função narrativa. GSAP com ScrollTrigger conduz parallax, empilhamento de serviços e um painel horizontal de projetos; Lenis suaviza o scroll; Motion cuida dos reveals e dos estados de hover. A rolagem conta a sequência de uma obra, em vez de só listar seções.
• Movimento que sabe a hora de parar. Tudo respeita prefers-reduced-motion: parallax, pins, slideshow e carrossel ficam estáticos para quem pediu menos animação. Navegação por teclado com foco visível, labels e erros anunciados por aria-live.
• Formulário protegido sem backend. O envio é simulado no cliente, mas as defesas são reais: honeypot, tempo mínimo de preenchimento, limites de tamanho, máscaras de telefone e nome, validação em tempo real, bloqueio de links na mensagem, trava de duplo envio e cooldown. Ao conectar um serviço de e-mail, as mesmas regras precisam ser espelhadas no servidor, com rate limit, e o código deixa isso escrito.
• Identidade construída, não escolhida em paleta pronta. Verde profundo, amarelo segurança como único destaque e fundo osso. Cantos retos em tudo, fotos com corte chanfrado e tinta verde e dourada por cima, para aproximar o efeito de dupla exposição. O símbolo foi gerado por IA e recortado; a marca nominativa é renderizada em código, não em imagem.

Stack

React 19, TypeScript e Vite 7, com Tailwind CSS v4 pelo plugin @tailwindcss/vite e tokens em src/index.css, sem tailwind.config.js. Fontes Lexend e Source Sans 3 servidas do próprio pacote. As fotos são do Unsplash e existem para dar volume ao estudo: num projeto real, entram fotografias da própria obra.

O que isso demonstra

Que animação pesada e acessibilidade não são opostos, que internacionalização vale mais quando o compilador cobra a tradução, e que defesa de formulário é decisão de arquitetura, não plugin instalado depois que o spam começa.