Mais Clean
Site multi-página em Next.js 16 com PWA, SEO local, Google Places API e analytics LGPD-compliant
01
Visão Geral
Projeto desenvolvido para a Mais Clean, empresa com +1.000 clientes e avaliação 5★ (280 avaliações no Google), especializada em higienização de estofados com o método exclusivo Mais Clean UP. O site não é uma landing page simples — são 8 rotas SSG independentes (/, /sofas, /colchoes, /cadeiras, /carpete, /persianas, /impermeabilizacao, /contato), cada uma com metadata, Schema.org e sitemap próprios. Depoimentos são integrados via Google Places API no server-side. Analytics respeita a LGPD com cookie banner e não carrega scripts em desenvolvimento. Framer Motion somente abaixo da dobra para preservar LCP; hero animado com CSS puro.
Meu papel
Desenvolvimento full-stack solo — arquitetura Next.js App Router, design system, SEO técnico, integração Google Places API, configuração Analytics + Clarity, LGPD, PWA e deploy.
Categoria
Landing Page
Ano
2026
Status
Cliente Real02
O Problema
A empresa operava com presença digital mínima, perdendo clientes que buscam higienização de sofás e colchões online. Sem páginas dedicadas por serviço, o site não ranqueava para termos específicos como 'higienização de colchão' ou 'impermeabilização de sofá'. Sem analytics LGPD-compliant, não era possível medir conversões.
03 — Solução
Site multi-página com rota dedicada para cada serviço (SEO por intenção de busca), Schema.org LocalBusiness com aggregateRating real, depoimentos integrados via Google Places API, PWA instalável, analytics com consentimento explícito e otimizações de performance (LCP, video lazy loading, cache imutável de 1 ano).
04
Funcionalidades Principais
8 Páginas SSG por Serviço
Rota dedicada para cada serviço (sofás, colchões, cadeiras, carpetes, persianas, impermeabilização e contato) com metadata, canonical, Schema.org Service e hero customizado — cada uma ranqueia para sua intenção de busca específica.
Depoimentos via Google Places API
Avaliações reais de clientes carregadas server-side via Google Places API — 5★ com 280 avaliações. Sem depoimentos falsos: os dados vêm diretamente do Google Business da empresa.
SEO Local com Schema.org
JSON-LD LocalBusiness com telephone, areaServed (Mongaguá, Baixada Santista, São Paulo), openingHours e aggregateRating injetado no head de todas as páginas. Sitemap dinâmico com 8 URLs e priorities configuradas.
Analytics LGPD-Compliant
GA4 + Microsoft Clarity (heatmaps e gravações de sessão) carregados somente após consentimento explícito via cookie banner. Scripts bloqueados em NODE_ENV !== 'production'. IP anonimizado no GA4.
PWA Instalável
Web App Manifest com display standalone, theme color navy (#090832), ícones gerados dinamicamente via next/og ImageResponse — sem arquivos estáticos. Instalável em Android e iOS.
Otimização de Performance
Hero animado com CSS @keyframes puro (sem JS no LCP). Seções abaixo da dobra via next/dynamic. 8 vídeos com lazy loading por IntersectionObserver. Imagens em AVIF/WebP automático. Cache imutável de 1 ano para assets estáticos.
05
Tecnologias
Front-end
Deploy
Integrações
Bibliotecas
06
Demonstração
07
Decisões de Design
Paleta navy (#090832) + bronze/gold (#b59b72) para transmitir premium e confiança — rompe com o azul e branco genérico de empresas de limpeza. Três fontes distintas com papéis claros: Montserrat para interface, Playfair Display para títulos, Cormorant Garamond para destaques especiais. Botão WhatsApp flutuante com animação pulse em verde #25D366 sempre visível no scroll.
08
Desafios Técnicos
Preservar o LCP com uma página que tem hero full-screen, animações e múltiplos assets. Solução em três camadas: (1) hero animado com CSS puro sem JS; (2) seções below-fold via next/dynamic para reduzir bundle inicial; (3) 8 vídeos com IntersectionObserver para carregar apenas o que está visível. Resultado: HTML do servidor já contém o conteúdo animado, sem esperar hidratação do React.
09
Resultados
- Cliente com +1.000 clientes satisfeitos e 5★ no Google (280 avaliações) com presença digital estruturada
- 8 páginas SSG indexáveis, cada uma otimizada para a intenção de busca do seu serviço
- Analytics LGPD-compliant com heatmaps (Clarity) e eventos customizados (cliques em WhatsApp, reprodução de vídeo, visualização de seção)
10
Aprendizados
- LCP em Next.js App Router: CSS @keyframes para animações above-the-fold garante que o conteúdo seja renderizado pelo servidor antes de qualquer JS executar — Framer Motion somente abaixo da dobra
- Google Places API server-side: depoimentos reais sem manutenção manual — novos reviews aparecem automaticamente no próximo build
- LGPD na prática: scripts de analytics em componente separado que só monta após consentimento no localStorage, com guarda de NODE_ENV para não poluir dados em desenvolvimento
- Video lazy loading sem biblioteca: IntersectionObserver com rootMargin='50px' alterna preload='none' → 'metadata' e ativa autoplay só ao entrar no viewport, eliminando requisições de rede desnecessárias
Gostou desse projeto?
Tem uma ideia parecida ou quer construir algo diferente? Vamos conversar.