Pular para o conteúdo
emanujaff
Todos os projetos
Demo2026

Belz Corretora

Site institucional reconstruído e landing page multi-tenant de corretor, a semente de um SaaS de leads.

Next.js 16React 19TypeScriptTailwind v4SSGMulti-tenantCompliance SUSEP

Contexto

O desafio

O site da Belz Corretora estava no ar com links 404 e um WordPress possivelmente comprometido, uma superfície de ataque num negócio que depende de confiança.

A resposta foi reconstruir tudo como site estático: rápido, sem superfície de ataque e barato de manter. Mas aproveitei o projeto para resolver um segundo problema: dar ao corretor parceiro uma página de conversão própria.

A demo saiu do abstrato quando o primeiro corretor real entrou: Elton Albuquerque, sócio da Belz, com foto, registro, praças e WhatsApp próprios. Aí o multi-tenant deixou de ser hipótese de arquitetura e virou um tenant configurado, e cada decisão passou a ter que sobreviver a dados de gente de verdade.

Tecnologia

Stack

Framework
Next.js 16 (App Router, Turbopack)
UI
React 19, TypeScript, Tailwind v4
Renderização
Totalmente estático (SSG)
Deploy
Vercel ou VPS HostGator

Estrutura

Arquitetura

app/
  (site)/            # site institucional (Header + Footer compartilhados)
    page.tsx         # Home
    sobre/ seguros/ blog/ contato/
  [corretor]/        # LP multi-tenant do corretor (chrome próprio)
components/          # Header, Footer, Logo, ContatoForm, WhatsAppFloat, ui
lib/                 # site.ts, corretores.ts, whatsapp.ts

Escopo

Funcionalidades

/Site institucional

  • Home, Sobre, Seguros, Blog e Contato
  • Reconstrução limpa do site atual, sem os 404
  • Catálogo de 6 produtos separados por público (Empresarial e Pessoa física), cada um com resumo, descrição e coberturas
  • Diferenciais, indicadores institucionais e formulário de contato
  • Estático: sem banco, sem admin, sem superfície de ataque

/LP do corretor (multi-tenant)

  • Uma página de conversão por corretor, endereçada por slug (/elton-albuquerque)
  • Hero com retrato do corretor e headline própria; Avatar cai para as iniciais quando não há foto
  • “Como funciona”: a jornada real do cliente em 3 passos, para quebrar a objeção de quem nunca contratou pelo WhatsApp
  • Simulação da conversa de atendimento em balões de chat, mostrando como é falar com o corretor antes mesmo do clique
  • Seguros que atende, separados em Pessoa física e Empresarial
  • Depoimentos, CTA final e botão flutuante de WhatsApp
  • Dados de cada corretor isolados em lib/corretores.ts. Adicionar um corretor é adicionar um registro

/Compliance (SUSEP)

  • Expressão “Corretora de Seguros” exibida conforme a Circular SUSEP 127/2000, art. 8º
  • Disclaimer padrão de peça de corretora: condições e valores são definidos na apólice de cada seguradora
  • Registro SUSEP do corretor e vínculo com a Belz no rodapé da LP

Engenharia

Destaques técnicos

Arquitetado para virar SaaS sem reescrever o front

Os pontos de contato com WhatsApp (lib/whatsapp.ts, formulário de contato) foram isolados de propósito. Hoje waLink() monta um wa.me com mensagem pré-preenchida; no futuro, o mesmo clique passa a fazer um POST para o n8n, que cria o lead e dispara a IA de qualificação. O front não muda.

Estático como decisão de segurança

O problema original era um CMS comprometido. Um site sem servidor de aplicação e sem banco não tem o que ser invadido. A escolha de SSG aqui é resposta ao incidente, não preferência técnica.

Regulação como requisito de design

Corretora de seguros é setor regulado: a Circular SUSEP 127/2000 exige a expressão “Corretora de Seguros” na comunicação, e a peça não pode prometer cobertura que quem define é a apólice. Tratei isso como requisito de primeira classe: disclaimer e registro moram em lib/site.ts, não espalhados pelo texto das páginas.

A objeção do lead virou seção

Quem nunca contratou seguro pelo WhatsApp trava na dúvida “como é que isso funciona?”. Em vez de responder com texto, a LP simula a conversa em balões de chat e mostra a jornada em 3 passos. O lead vê o atendimento antes de iniciar o contato.

Degradação prevista nos dados do tenant

O tipo Corretor tem foto opcional e fotoIniciais obrigatório: se o corretor não mandar retrato, o Avatar cai para as iniciais em vez de quebrar o layout. Onboarding de um novo tenant nunca depende de ter o asset pronto.

Impacto

Resultados

  • Demo funcional, com site institucional e LP de corretor navegáveis
  • Primeiro tenant real configurado: Elton Albuquerque, sócio da Belz, com foto, registro, praças (Maceió e Recife) e WhatsApp próprios
  • Catálogo de 6 produtos e 4 diferenciais modelados como dado, não como HTML
  • Marca extraída do site original: navy #0F184B, acento dourado #D7A94B, Montserrat
  • Base multi-tenant pronta para o produto de qualificação de leads

Retrospectiva

O que esse projeto me ensinou

Um pedido de “refazer o site” pode ser a porta de entrada para um produto. O institucional era o trabalho; a LP multi-tenant é onde estava a oportunidade real.

Escolher a arquitetura a partir do modo de falha do cliente, e não do que é interessante de construir, faz a decisão se justificar sozinha.

Em setor regulado, a norma não é burocracia que se resolve no fim: ela é requisito de conteúdo. Entender a Circular SUSEP antes de escrever a página evitou ter que reescrever a comunicação inteira depois.