styled-components com ServerStyleSheet
O CSS vai junto no HTML do servidor. Sem isso a primeira pintura chega sem estilo, e essa página é o primeiro contato comercial da empresa.
BC
2023 a hoje · cliente
Maincore
Site institucional que precisa vender dois produtos técnicos e capturar lead qualificado. Next.js 13 com styled-components no servidor, Radix nos componentes interativos e captura de lead com captcha validado no backend.
site no ar código fechado
O problema
A Maincore vende sistemas embarcados e lógica programável, coisa que ninguém compra por impulso. O site precisava explicar duas linhas distintas, sustentar a busca em português e inglês, e transformar visita em conversa sem intermediário guardando o dado do lead.
O que eu construí
Site institucional em Next.js com duas páginas de produto, central de recursos, formulário de contato e inscrição em newsletter protegida por captcha.
Decisões técnicas
Radix no accordion e no menu
Especificação de produto mora em accordion. Teclado, foco e ARIA prontos custam menos que reimplementar errado.
reCAPTCHA verificado no servidor
O token só vale quando o backend confirma com a Google. Validar no cliente é decorativo.
SMTP próprio em vez de form service
O lead cai direto na caixa da empresa, sem terceiro guardando dado de cliente.
Uma rota por produto
Polaris e Sirius em URLs separadas em vez de abas. Produto que precisa rankear precisa de endereço próprio.
Resultado
No ar desde 2023 na Vercel, duas linhas de produto documentadas e formulário entregando direto na caixa corporativa.
O que eu faria diferente hoje
A tradução é decidida no cliente por navigator.language, e o atributo lang do html está fixo em "en". Crawler nunca vê a versão em inglês e o idioma declarado não bate com o conteúdo. Hoje eu usaria rota por locale, que foi o que fiz neste portfólio com next-intl.