Site institucional corporativo com 17 páginas, design cinematográfico e arquitetura estática para uma empresa de facilities management com mais de 10 anos de mercado
Plataforma construída com Next.js 16 e React 19 para a Sanatto Facilities — empresa carioca especializada em limpeza, portaria, recepção, copa, manutenção e gestão de equipes. O site cobre soluções completas com 6 serviços catalogados, cases por 8 segmentos de mercado, jornada de contratação em 4 etapas, portal de carreiras com banco de talentos, portal do colaborador, blog, galeria de vídeos, sala de imprensa, programa de parceiros, serviços de alimentação e formulário de contato com validação Zod. Tudo em export estático com Tailwind CSS v4, shadcn/ui e Framer Motion, deployado em Cloudflare Pages com custo zero de infraestrutura.
- 17
- Páginas estáticas
- 98
- Lighthouse Score
- 0
- Custo de infra (R$)
Cliente
Sanatto Facilities
Setor
Facilities Management · Serviços Corporativos
Linha do tempo
2 semanas · 2026-08
Aplicação ao vivo
Abrir aplicaçãoO desafio
Segunda-feira, 9h. Um síndico de condomínio residencial no Rio de Janeiro pesquisa no Google por empresas de facilities management. Ele precisa de limpeza, portaria e manutenção — mas quer uma empresa que tenha cases no segmento, processo de contratação claro e cultura de compliance. Entra no site da Sanatto. Em segundos, navega para a página de cases, filtra por condomínio residencial, vê depoimentos de outros síndicos, entende a jornada de contratação em 4 etapas e preenche o formulário de contato. Antes do café da manhã, a Sanatto já tem um lead qualificado.
A Sanatto Facilities, empresa carioca com mais de 10 anos de atuação em facilities management, precisava de uma presença digital profissional que comunicasse sua estrutura de serviços, cases por segmento e cultura de compliance. O site anterior era genérico, não comunicava a maturidade operacional da empresa e não tinha páginas dedicadas para recruiting, portal do colaborador, blog, imprensa ou parceiros.
A abordagem
Tratamos o site institucional como um produto digital, não como um panfleto online. Primeiro mapeamos toda a estrutura de serviços da Sanatto: 6 serviços principais, 8 segmentos de mercado, jornada de contratação em 4 etapas, programa de parceiros, portal de carreiras e portal do colaborador. A partir daí desenhamos uma arquitetura de informação com 17 páginas independentes, cada uma com hero section cinematográfico, conteúdo estruturado e CTAs claros. O design system foi construído com Tailwind CSS v4 e shadcn/ui, usando uma paleta navy blue e gold que comunica seriedade e premium. Animações Framer Motion com fade-in direcional criam ritmo sem comprometer performance. Export estático para garantir Lighthouse 98+ e zero custo de infraestrutura.
A solução
O site da Sanatto Facilities é uma plataforma institucional completa com 17 páginas que cobre toda a jornada do cliente — do primeiro contato no Google até a solicitação de proposta, passando por soluções, cases, sobre, carreiras e imprensa.
- 17 páginas estáticas com conteúdo estruturado: home, soluções, cases, sobre, contratar, contato, carreiras, portal do colaborador, blog, vídeos, parceiros, imprensa, alimentação, política de privacidade, termos de uso e 404 customizada
- 6 serviços catalogados com listas itemizadas: limpeza e conservação, portaria e controle de acesso, recepção e hotelaria, copa e apoio operacional, manutenção e zeladoria, gestão de equipes
- Cases por 8 segmentos de mercado: condomínio resididencial, empresa corporativa, indústria, escola, hospital, varejo, escritório de advocacia e centro logístico — com depoimentos reais por segmento
- Jornada de contratação em 4 etapas: diagnóstico, proposta, implementação e operação — com CTAs claros em cada etapa conduzindo ao formulário de contato
- Portal de carreiras com vagas abertas, benefícios catalogados e banco de talentos, além de portal do colaborador com comunicados e links de RH
- Formulário de contato com react-hook-form e validação Zod: nome, email, telefone, assunto e mensagem com validação client-side e estados de loading
- Design system consistente com shadcn/ui, paleta navy blue (#0a1f44) e gold (#c9a227), tipografia Geist Sans e componentes reutilizáveis (button, page-hero, section-header, fade-in, logo, contact-form)
- Animações cinematográficas com Framer Motion: fade-in direcional em todas as seções, hero sections com gradient e transições suaves entre páginas
Linha do tempo
Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.
Semana 1
Descoberta
- Mapeamento de 6 serviços e 8 segmentos de mercado
- Definição da arquitetura de informação com 17 páginas
- Design system: paleta navy blue e gold, tipografia Geist Sans
- Wireframe de cada página com hero section e CTAs
Semana 1-2
Desenvolvimento
- Setup Next.js 16 com App Router e Tailwind CSS v4
- Implementação de componentes shadcn/ui reutilizáveis
- Desenvolvimento das 17 páginas com conteúdo estruturado
- Animações Framer Motion com fade-in direcional
Semana 2
Deploy
- Configuração de export estático com output: export
- Deploy automatizado via GitHub Actions + Cloudflare Pages
- Criação de CNAME e domínio customizado sanatto.expostacker.com.br
- Validação de Lighthouse 98+ e responsividade mobile
Metodologia
Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.
Mapear serviços, segmentos e jornada do cliente antes de codar
Definir design system com paleta, tipografia e componentes reutilizáveis
Construir cada página com hero section, conteúdo estruturado e CTA claro
Validar responsividade mobile e acessibilidade em cada página
Export estático para garantir performance e zero custo de infraestrutura
Deploy automatizado via GitHub Actions para eliminar operação manual
Arquitetura
- → Next.js 16 com App Router e output: export para gerar 18 páginas HTML estáticas
- → Tailwind CSS v4 com PostCSS para CSS mínimo e otimizado
- → shadcn/ui com @base-ui/react para componentes acessíveis e headless
- → Framer Motion para animações client-side com prefers-reduced-motion
- → react-hook-form + Zod para validação de formulário no client
- → Cloudflare Pages para hosting estático com SSL automático e DDoS protection
- → GitHub Actions para CI/CD: install → build → deploy automático
- → Cloudflare DNS com CNAME para subdomínio sanatto.expostacker.com.br
Diagrama conceitual — não reflete implementação real
Stack tecnológica
Escolhas técnicas e o que ficou para fora.
Frontend
Por quê: App Router, export estático e Turbopack para build em 4 segundos
Alternativa rejeitada: Astro — excelente para conteúdo estático, mas menos ecossistema para interatividade
Por quê: Server Components por padrão, novos hooks para interatividade client-side
Alternativa rejeitada: Vue 3 — maduro, mas menos ecossistema com Server Components
Por quê: Sintaxe @import, CSS variables nativas e bundle CSS mínimo
Alternativa rejeitada: Styled Components — adiciona runtime e aumenta o bundle
UI/Design
Por quê: Componentes headless acessíveis com @base-ui/react e CVA
Alternativa rejeitada: Material UI — mais pesado e menos flexível para customização
Por quê: Animações fade-in direcionais com prefers-reduced-motion respeitado
Alternativa rejeitada: CSS animations — menos controle sobre timing e direção
Por quê: Icon library leve e consistente com o design system
Alternativa rejeitada: Heroicons — boa, mas menos opções de ícones
Form/Validação
Por quê: Performance e DX superior para formulários com validação
Alternativa rejeitada: Formik — mais boilerplate e performance inferior
Por quê: Schema validation tipada integrada com TypeScript
Alternativa rejeitada: Yup — menos integração nativa com TypeScript
Por quê: Bridge entre react-hook-form e Zod para validação tipada
Alternativa rejeitada: Validação manual — mais código e menos segurança de tipos
Infra/Deploy
Por quê: Deploy de site estático com SSL automático, DDoS protection e custo zero
Alternativa rejeitada: Vercel — excelente, mas plano gratuito tem limites menores
Por quê: CI/CD automatizado: install, build e deploy a cada push na main
Alternativa rejeitada: Deploy manual — lento, propenso a erro e não escalável
Por quê: CNAME automático para subdomínio sanatto.expostacker.com.br
Alternativa rejeitada: DNS manual — não escala para múltiplos projetos
Decision log
O que escolhi, o que rejeitei e por quê.
Next.js 16 com export estático em vez de SSR
Por que: Um site institucional não precisa de renderização dinâmica no servidor. Export estático garante Lighthouse 98+, zero custo de infraestrutura no Cloudflare Pages e carregamento instantâneo em qualquer conexão.
Alternativas rejeitadas: Avaliamos SSR com Next.js e WordPress com headless CMS, mas o custo de infraestrutura e a complexidade de operação não se justificavam para conteúdo institucional.
Tailwind CSS v4 com shadcn/ui em vez de CSS custom
Por que: Tailwind v4 com shadcn/ui garante consistência visual, componentes acessíveis e manutenção rápida. A paleta navy blue e gold foi definida via CSS variables, permitindo dark mode sem retrabalho.
Alternativas rejeitadas: CSS custom daria mais liberdade visual, mas sacrificaria consistência, acessibilidade e velocidade de desenvolvimento.
17 páginas independentes em vez de single page
Por que: Cada serviço, segmento e jornada merece uma página dedicada para SEO, indexação no Google e clareza na jornada do usuário. Single page institucional perde indexação e confunde a navegação.
Alternativas rejeitadas: Uma landing page única seria mais rápida de construir, mas limitaria drasticamente a indexação no Google e a profundidade de conteúdo por serviço.
FASSI.AI
Respostas validadas contra catálogo. Fallback para busca estática. Cache de 24h. Responses validated against catalog. Fallback to static search. 24h cache.
Gamificação
Sistema de motivação estruturado para vendedores. Structured motivation system for sales teams.
Pontos de experiência (XP)
Cada ação comercial gera XP, tornando o progresso visível e mensurável.
Ligas e temporadas
Divisão em ligas por desempenho, com rebaixamento e promoção a cada ciclo.
Badges e conquistas
Reconhecimento por metas específicas, ritmo e consistência de vendas.
Ranking ao vivo
Classificação atualizada em tempo real para estimular competição saudável.
Recompensas e desbloqueios
Benefícios tangíveis desbloqueados por patamar de pontuação.
Desafios e missões
Objetivos de curto prazo para manter o engajamento e testar novas táticas.
Gamificação
Segurança e acesso
Segurança e conformidade
-
Export estático: sem servidor, sem superfície de ataque
-
Formulário de contato com validação client-side via Zod
-
Política de privacidade e termos de uso publicados
-
Sem banco de dados, sem autenticação, sem dados sensíveis armazenados
-
Deploy via Cloudflare Pages com SSL automático e DDoS protection
-
Conformidade com LGPD no formulário de contato
Resultados
Resultados reportados pelo cliente durante o rollout
Baseline: 1
Fonte: Next.js build output — 18 rotas pré-renderizadas
Baseline: 62
Fonte: Lighthouse audit — média mobile e desktop
Baseline: 0
Fonte: Next.js build com Turbopack — média de 3 builds
Baseline: R$ 80
Fonte: Cloudflare Pages plano gratuito
Baseline: 0
Fonte: Página de cases — 8 segmentos com depoimentos
Baseline: 0
Fonte: Página de soluções — 6 serviços com listas itemizadas
Dados reportados pelo cliente
Lições aprendidas
Nem tudo saiu como planejado.
— O maior aprendizado foi que um site institucional não é um panfleto — é um produto digital. Cada página precisa ter propósito, CTA e conteúdo estruturado. A arquitetura de informação com 17 páginas indexadas no Google gera leads qualificados que uma landing page única nunca geraria. O export estático com Next.js 16 provou que não precisa de SSR para ter um site corporativo de alto nível. E o Tailwind CSS v4 com shadcn/ui acelerou o desenvolvimento sem sacrificar acessibilidade ou consistência visual.
Pronto para construir algo similar?
Transformei um ecossistema complexo em uma plataforma intuitiva que escala com o negócio. Posso fazer o mesmo para o seu projeto.