Plataforma de gestão de reclamações — build da landing page

Uma landing page institucional para uma plataforma em nuvem de gestão empresarial e tratamento de reclamações, desenvolvida para transformar um design recebido não construível em uma aplicação React responsiva e pronta para produção. Construída em vinte e um dias com dezenove componentes de seção autorais sobre uma base React + Vite + shadcn, acompanhada por um microsserviço em Express no Render com proteções de segurança.

Subcontrato de agência na Spaceapps; o relacionamento comercial com o cliente pertencia à agência e eu entreguei como funcionário. O design original da landing page foi criado pelo Thiago, nosso líder técnico, e o sistema de gestão em nuvem atrás do login foi construído por outra equipe em Supabase e Bubble. Minha contribuição foi em design engineering: corrigir o arquivo no Figma para torná-lo viável, programar manualmente todas as dezenove seções e estruturar o serviço de captura com hardening.

Correção de design: Tornando entregas construíveis

No trabalho de agência, entregas de design frequentemente chegam em um estado que parece pronto no canvas, mas quebra no código: ausência de auto-layout, posicionamentos absolutos arbitrários, contêineres rígidos que quebram em telas menores e espaçamentos inconsistentes. O Gestrif é o segundo caso documentado dessa prática no portfólio (ao lado do AllPrice). Em vez de devolver o arquivo com atritos, realizei uma revisão direta no Figma — corrigindo hierarquias, alinhamentos flexbox e regras de contêiner responsivo antes de escrever a primeira linha de código.

🧩19

seções autorais programadas

📦50

primitivas shadcn integradas

🛡️5 req / 15m

limite de taxa anti-spam no formulário

⏱️21 dias

do primeiro commit ao deploy em produção

Arquitetura front-end: 19 seções, não 69 componentes

O repositório contém 69 arquivos de componentes, e declarar esse número sem critério inflaria a autoria real. A arquitetura divide-se claramente entre 50 primitivas de UI shadcn/Radix geradas via CLI (botões, modais, campos de entrada, seletores) e dezenove componentes de seção autorais desenvolvidos para estruturar a narrativa comercial do Gestrif:

• Cabeçalho de navegação com menu mobile lateral responsivo.
• Seção Hero destacando a proposta de valor, CTA principal e selos de credibilidade.
• Cinco seções aprofundadas com imagens alternadas demonstrando as funcionalidades do sistema.
• Dois grids de cards estruturando os recursos operacionais e o fluxo de tratamento de reclamações.
• Tabela comparativa interativa contrastando o Gestrif com planilhas e processos manuais dispersos.
• Passo a passo 'Como Funciona' guiando o processo de adesão à plataforma.
• Faixa contínua (marquee) exibindo as integrações do ecossistema.
• Tabela de preços com alternância entre faturamento mensal e anual.
• Carrossel de depoimentos e cards de validação social.
• Acordeão completo de FAQ cobrindo segurança, migração de dados e conformidade.
• Seção de captura de leads conectada à validação de back-end.
• Rodapé institucional com termos legais, mapa do site e dados da empresa.

O projeto foi iniciado a partir de um scaffold Lovable (lovable-tagger em devDependencies, com vite_react_shadcn_ts no package.json). O scaffold forneceu a estrutura inicial de Vite e shadcn; todas as dezenove seções visuais foram codificadas manualmente a partir do Figma corrigido.

Back-end de produção: Captura protegida no Render

Muitas landing pages tratam o envio de formulários de forma descuidada — utilizando webhooks de terceiros desprotegidos ou links mailto que atraem robôs de spam e geram instabilidade. Para o Gestrif, publiquei um serviço Express no Render: o núcleo do servidor (server/index.js) é um boilerplate compartilhado, e o que é próprio do Gestrif é o ponto de entrada, server/start.js, onde apliquei camadas reais de segurança:

• Rate Limiting — Limite estrito de 5 requisições por IP a cada 15 minutos, bloqueando envios em massa automatizados.
• Content Security Policy (CSP) & Cabeçalhos — Configuração do Helmet com lista explícita de origens permitidas, prevenindo injeções de script (XSS) e cliques fantasma (clickjacking).
• Limite de Carga (Payload Cap) — Teto rígido de 10 KB para o corpo das requisições JSON, prevenindo sobrecarga de memória do servidor.
• Suporte a Proxy Reverso — Configuração de trust proxy no Express para a infraestrutura do Render, garantindo a leitura correta do IP real do usuário.
• Telemetria e Compressão — Compressão gzip ativa em todas as respostas e logs estruturados via Morgan com formatação diferenciada para produção.

Iteração contínua e retorno do cliente

O histórico de commits documenta um ciclo de desenvolvimento ágil de agência: montagem inicial (22/07), ajustes solicitados pelo cliente (30/07), adição de novas seções e refinamento responsivo (06/08) e hardening final do servidor (12/08). Os registros de 'novas seções adicionadas' referem-se a seções programadas para atender a demandas comerciais do cliente, e não a telas criadas do zero. Ajustar-se a mudanças de escopo mantendo o código limpo e o prazo intacto é a essência do trabalho profissional de agência.

O que isto não é

• Não é a minha criação do design original. O Thiago concebeu o layout inicial; eu revisei o arquivo, corrigi o que era inviável e o tornei construível.
• Não é a plataforma em nuvem de gestão. O sistema operacional atrás de gestrif.com/login foi desenvolvido em Supabase e Bubble por outra equipe de engenharia.
• Não é uma aplicação Next.js. A stack é uma SPA em React 18 e Vite renderizada no cliente; next-themes foi apenas uma dependência instalada.
• Não são 69 componentes autorais. São 19 seções construídas à mão sobre 50 primitivas shadcn geradas via CLI.
• Não é um back-end corporativo complexo. O serviço Express no Render é uma camada segura de captura de contatos, e não uma API de dados financeiros.
• Não é inspecionável no Figma hoje. O acesso ao arquivo daquele período expirou; a revisão de design é um fato histórico verificado, enquanto o AllPrice é a prova visual que pode ser inspecionada.
• Não possui métricas de conversão comercial. Nenhum dado analítico de vendas foi retido antes da transição — uma ausência confirmada neste portfólio.
• Não é a plataforma completa descrita no README do repositório. O README reproduz o texto de vendas do cliente para o produto final, não o escopo restrito da landing page.

O valor de um engenheiro com olhar de design

O Gestrif exemplifica a dinâmica clássica de transbordo em agências: receber um arquivo de design com inconsistências e entregar uma aplicação web precisa, responsiva e segura sem repassar atritos para a equipe. Comprova a habilidade de identificar e corrigir falhas de layout antes de tocar no código, programar componentes sólidos em TypeScript e Tailwind e blindar o serviço contra riscos comuns em produção.

Evidência

O produto foi entregue e opera em produção: gestrif.com responde e redireciona para /login atrás de uma barreira de autenticação. O repositório contém o front-end institucional, evidenciando a minha correção de design e engenharia de front-end, e não o sistema interno atrás do login. O build SPA em Vite está preservado e inspecionável no mirror em meu próprio domínio. Não existem métricas quantitativas de conversão ou engajamento — uma ausência confirmada neste portfólio, e não uma falta de coleta.