Site institucional eGoverna

Site institucional da eGoverna — ecossistema inteligente para a gestão pública.

Stack: Next.js 16 (App Router) · TypeScript · Tailwind CSS v4 · Lucide

---

Como rodar

npm install
npm run dev     # http://localhost:3000
npm run build   # build de produção
npm start       # servir o build
npm run lint

Variáveis de ambiente

Copie .env.example para .env.local. Todas são opcionais — sem elas o site funciona normalmente e nenhum script de terceiros é carregado.

Variável	Para que serve
NEXT_PUBLIC_GTM_ID	Google Tag Manager
NEXT_PUBLIC_GA4_ID	Google Analytics 4
NEXT_PUBLIC_META_PIXEL_ID	Meta Pixel
NEXT_PUBLIC_LINKEDIN_PARTNER_ID	LinkedIn Insight Tag
NEXT_PUBLIC_SITE_URL	URL pública (canonical, sitemap, Open Graph)
CONTACT_WEBHOOK_URL	Destino do formulário (ver abaixo)

---

Formulário de contato

O envio é processado por uma Server Action em app/actions/contact.ts, com validação no servidor, honeypot e verificação de tempo contra automação.

Sem CONTACT_WEBHOOK_URL, as solicitações são apenas registradas no log do servidor — úteis para teste, mas não chegam a ninguém. Antes de ir ao ar, defina a variável com um endpoint que receba o JSON:

{
  "nome": "...", "email": "...", "telefone": "...",
  "estado": "RS", "cidade": "...", "cargo": "...", "mensagem": "...",
  "origem": "site-egoverna", "enviadoEm": "2026-09-15T12:00:00.000Z"
}

Serve qualquer destino que aceite POST: CRM, Zapier/Make, n8n, ou uma rota própria que dispare e-mail.

---

Conteúdo

Textos, módulos, benefícios e valores ficam centralizados em lib/site.ts. Para adicionar ou editar um módulo, basta alterar o array modules — a sidebar, os chips do mobile e o painel de conteúdo são renderizados a partir dele, sem tocar no JSX.

Todo o conteúdo vem do site oficial (egoverna.com.br) ou do briefing. Nenhuma métrica, cliente, certificação ou dado de contato foi inventado. O único contato publicado é o WhatsApp que já constava no site atual.

Assets da marca

Arquivo	Origem
public/logos/egoverna-branco.png	pasta /Logos do projeto
public/logos/egoverna-preto.png	pasta /Logos do projeto
public/logos/egoverna-simbolo.png	símbolo oficial (site atual)
public/video/hero-cidade.mp4	vídeo original do hero do site atual
public/video/hero-poster.jpg	frame extraído do próprio vídeo
public/images/sistema-egoverna.webp	screenshot real do sistema
public/images/equipe-egoverna.webp	imagem oficial de equipe

A logo nunca é recriada em CSS ou texto: o componente components/ui/Logo.tsx exibe sempre o arquivo oficial, com proporção preservada. A troca branca ↔ preta no header é um crossfade de opacidade entre os dois arquivos.

Vídeo em WebM (opcional)

O MP4 tem 2,7 MB. Para servir também WebM (~30% menor), gere o arquivo e adicione o <source> conforme o comentário em components/HeroVideo.tsx:

ffmpeg -i public/video/hero-cidade.mp4 -c:v libvpx-vp9 -crf 34 -b:v 0 -an \
  public/video/hero-cidade.webm

---

Analytics

Os eventos estão prontos em lib/analytics.ts e são disparados no dataLayer (e no gtag, quando houver GA4):

click_contact · click_demo · form_start · form_submit · module_view · whatsapp_click

phone_click e email_click estão definidos no tipo, mas não são disparados: o site não publica telefone fixo nem e-mail, porque esses dados não constam nas fontes oficiais. Quando forem fornecidos, basta chamar track() nos links.

---

Acessibilidade e performance

Verificados no build de produção:

• Lighthouse: Performance 100 · Acessibilidade 100 · SEO 100
• Core Web Vitals: LCP 1,7s · CLS 0,002 · TBT 20ms
• axe-core: 0 violações WCAG 2.1 AA (home, páginas legais, formulário com erros e menu mobile aberto)
• Sem overflow horizontal em 1920/1440/1280/1024/768/430/390/360px
• Navegação por teclado nos módulos (padrão ARIA tablist) e no menu
• prefers-reduced-motion desativa o vídeo e as animações de entrada
• Sem JavaScript, todo o conteúdo continua legível no HTML

Notas de manutenção:

• --color-ink-400 é o tom mais claro admitido em texto (4.96:1). Tons mais claros (ink-300) servem só para bordas, ícones decorativos e placeholders.
• O amarelo da marca não é usado em texto pequeno sobre fundo claro — não atinge 4.5:1. Ele aparece como elemento gráfico, ou como texto sobre azul profundo (12:1).

---

Páginas

• / — home
• /politica-de-privacidade — LGPD
• /termos-de-uso
• /sitemap.xml, /robots.txt — gerados dinamicamente

As páginas legais trazem o texto padrão de LGPD e uso do site. Revise-as com o jurídico e complete os dados societários (razão social, CNPJ, endereço, e-mail do encarregado de dados) — deixados de fora por não constarem em nenhuma fonte oficial disponível.