Corporate institutional website with 17 pages, cinematic design and static architecture for a facilities management company with over 10 years in the market
- 15
- Static pages
- 98
- Lighthouse Score
- Low
- Serverless stack
Client
Sanatto Facilities
Sector
Facilities Management · Corporate Services
Timeline
2 semanas · 2026-08
Live product
Use nowResults
Client-reported results during rollout
Baseline: 1
Fonte: Next.js build output — 18 pre-rendered routes
Baseline: 62
Fonte: Lighthouse audit — mobile and desktop average
Baseline: 0
Fonte: Next.js build with Turbopack — average of 3 builds
Baseline: R$ 80
Fonte: Cloudflare Pages free plan
Baseline: 0
Fonte: Cases page — 8 segments with testimonials
Baseline: 0
Fonte: Solutions page — 6 services with itemized lists
Client-reported data
The challenge
The challenge
Monday, 9 a.m. A residential condominium manager in Rio de Janeiro searches Google for facilities management companies. He needs cleaning, reception and maintenance — but wants a company with segment cases, a clear hiring process and a compliance culture. He enters the Sanatto website. In seconds, he navigates to the cases page, filters by residential condominium, reads testimonials from other managers, understands the 4-step hiring journey and fills out the contact form. Before breakfast, Sanatto already has a qualified lead.
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.
The approach
The approach
We treated the institutional site as a digital product, not an online brochure. First we mapped Sanatto's entire service structure: 6 main services, 8 market segments, a 4-step hiring journey, partners program, careers portal and employee portal. From there we designed an information architecture with 17 independent pages, each with a cinematic hero section, structured content and clear CTAs. The design system was built with Tailwind CSS v4 and shadcn/ui, using a navy blue and gold palette that communicates seriousness and premium quality. Framer Motion animations with directional fade-in create rhythm without compromising performance. Static export to guarantee Lighthouse 98+ and zero infrastructure cost.
The solution
The solution
The Sanatto Facilities website is a complete institutional platform with 17 pages covering the entire customer journey — from first contact on Google to requesting a proposal, through solutions, cases, about, careers and press.
- 17 static pages with structured content: home, solutions, cases, about, hiring, contact, careers, employee portal, blog, videos, partners, press, food services, privacy policy, terms of use and custom 404
- 6 cataloged services with itemized lists: cleaning and conservation, reception and access control, hospitality, pantry and operational support, maintenance and caretaking, team management
- Cases across 8 market segments: residential condominium, corporate business, industry, school, hospital, retail, law firm and logistics center — with real testimonials per segment
- 4-step hiring journey: diagnosis, proposal, implementation and operation — with clear CTAs at each step leading to the contact form
- Careers portal with open positions, cataloged benefits and talent bank, plus employee portal with announcements and HR links
- Contact form with react-hook-form and Zod validation: name, email, phone, subject and message with client-side validation and loading states
- Consistent design system with shadcn/ui, navy blue (#0a1f44) and gold (#c9a227) palette, Geist Sans typography and reusable components (button, page-hero, section-header, fade-in, logo, contact-form)
- Cinematic animations with Framer Motion: directional fade-in across all sections, hero sections with gradients and smooth page transitions
Timeline
Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.
Semana 1
Descoberta
- Mapping of 6 services and 8 market segments
- Information architecture definition with 17 pages
- Design system: navy blue and gold palette, Geist Sans typography
- Wireframe of each page with hero section and CTAs
Semana 1-2
Desenvolvimento
- Next.js 16 setup with App Router and Tailwind CSS v4
- Implementation of reusable shadcn/ui components
- Development of 17 pages with structured content
- Framer Motion animations with directional fade-in
Semana 2
Deploy
- Static export configuration with output: export
- Automated deployment via GitHub Actions + Cloudflare Pages
- CNAME creation and custom domain sanatto.expostacker.com.br
- Lighthouse 98+ validation and mobile responsiveness
Methodology
Como o projeto foi conduzido, do mapeamento ao deploy. How the project was conducted, from mapping to deploy.
Map services, segments and customer journey before coding
Define design system with palette, typography and reusable components
Build each page with hero section, structured content and clear CTA
Validate mobile responsiveness and accessibility on each page
Static export to guarantee performance and zero infrastructure cost
Automated deployment via GitHub Actions to eliminate manual operation
Architecture
- → Next.js 16 with App Router and output: export to generate 18 static HTML pages
- → Tailwind CSS v4 with PostCSS for minimal and optimized CSS
- → shadcn/ui with @base-ui/react for accessible and headless components
- → Framer Motion for client-side animations with prefers-reduced-motion
- → react-hook-form + Zod for client-side form validation
- → Cloudflare Pages for static hosting with automatic SSL and DDoS protection
- → GitHub Actions for CI/CD: install → build → automatic deploy
- → Cloudflare DNS with CNAME for sanatto.expostacker.com.br subdomain
Conceptual diagram — does not reflect real implementation
Tech stack
Technical choices and what was left out.
site
Why: App Router, static export and Turbopack for 4-second builds
Rejected alternative: Astro — excellent for static content, but less ecosystem for interactivity
Why: Server Components by default, new hooks for client-side interactivity
Rejected alternative: Vue 3 — mature, but less Server Components ecosystem
Why: @import syntax, native CSS variables and minimal CSS bundle
Rejected alternative: Styled Components — adds runtime and increases bundle
site
Why: Accessible headless components with @base-ui/react and CVA
Rejected alternative: Material UI — heavier and less flexible for customization
Why: Directional fade-in animations with prefers-reduced-motion respected
Rejected alternative: CSS animations — less control over timing and direction
Why: Lightweight icon library consistent with the design system
Rejected alternative: Heroicons — good, but fewer icon options
site
Why: Superior performance and DX for forms with validation
Rejected alternative: Formik — more boilerplate and inferior performance
Why: Typed schema validation integrated with TypeScript
Rejected alternative: Yup — less native TypeScript integration
Why: Bridge between react-hook-form and Zod for typed validation
Rejected alternative: Manual validation — more code and less type safety
site
Why: Static site deployment with automatic SSL, DDoS protection and zero cost
Rejected alternative: Vercel — excellent, but free plan has lower limits
Why: Automated CI/CD: install, build and deploy on every push to main
Rejected alternative: Manual deploy — slow, error-prone and not scalable
Why: Automatic CNAME for sanatto.expostacker.com.br subdomain
Rejected alternative: Manual DNS — does not scale for multiple projects
Decision log
What I chose, what I rejected, and why.
Next.js 16 with static export instead of SSR
Why: An institutional site does not need server-side rendering. Static export guarantees Lighthouse 98+, zero infrastructure cost on Cloudflare Pages and instant loading on any connection.
Rejected alternatives: We evaluated SSR with Next.js and WordPress with headless CMS, but the infrastructure cost and operational complexity were not justified for institutional content.
Tailwind CSS v4 with shadcn/ui instead of custom CSS
Why: Tailwind v4 with shadcn/ui guarantees visual consistency, accessible components and fast maintenance. The navy blue and gold palette was defined via CSS variables, allowing dark mode without rework.
Rejected alternatives: Custom CSS would give more visual freedom, but would sacrifice consistency, accessibility and development speed.
17 independent pages instead of a single page
Why: Each service, segment and journey deserves a dedicated page for SEO, Google indexing and clarity in the user journey. A single institutional page loses indexing and confuses navigation.
Rejected alternatives: A single landing page would be faster to build, but would drastically limit Google indexing and content depth per service.
Security and access
Security and compliance
-
Static export: no server, no attack surface
-
Contact form with client-side validation via Zod
-
Privacy policy and terms of use published
-
No database, no authentication, no sensitive data stored
-
Deployment via Cloudflare Pages with automatic SSL and DDoS protection
-
LGPD compliance in the contact form
Lessons learned
Not everything went as planned.
— The biggest lesson was that an institutional site is not a brochure — it is a digital product. Each page needs purpose, CTA and structured content. The information architecture with 17 Google-indexed pages generates qualified leads that a single landing page would never generate. Static export with Next.js 16 proved that SSR is not needed for a high-level corporate site. And Tailwind CSS v4 with shadcn/ui accelerated development without sacrificing accessibility or visual consistency.
See also other products
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.
View 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.
View 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.
View case →Want a product like this?
I can do the same for your business. Let's talk.