Site institucional corporativo com 15 páginas, design cinematográfico e arquitetura estática para uma empresa de facilities management com mais de 10 anos de mercado
- 15
- Páginas estáticas
- 98
- Lighthouse Score
- Low
- Stack serverless
Cliente
Sanatto Facilities
Setor
Facilities Management · Serviços Corporativos
Linha do tempo
2 semanas · 2026-08
Produto ao vivo
Usar agoraResultados
Resultados reportados pelo cliente durante o rollout
Baseline: 1
Fonte: Next.js build output — 15 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
O desafio
O 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
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 15 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 infraestrutura de baixo custo.
A solução
A solução
O site da Sanatto Facilities é uma plataforma institucional completa com 15 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.
- 15 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 15 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 15 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 infraestrutura de baixo custo
Deploy automatizado via GitHub Actions para eliminar operação manual
Arquitetura
- → Next.js 16 com App Router e output: export para gerar 15 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.
site
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
site
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
site
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
site
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+, infraestrutura de baixo custo 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.
15 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.
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
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 15 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.
Veja também outros produtos
Marken Fassi CASA FASSI
LXP privada para vendedores de enxovais onde o lojista entra, faz microlearning e usa o FASSI.AI para vender com confiança.
Ver case →
Nexus IA Nexus IA — Plataforma de IA
Plataforma de IA com 620+ endpoints REST, Nexus Auto com roteamento automático entre 20+ modelos, workspace com agente autônomo, multimodal e 6 planos comerciais.
Ver case →
SEEDS Experience SEEDS Experience
Comunidade exclusiva de mulheres empreendedoras onde a membro entra, conecta-se e acessa oportunidades de capital e mentoria via IA.
Ver case →Quer um produto como esse?
Posso fazer o mesmo para o seu negócio. Vamos conversar.