Lucas Batista
Landing PageCliente Real2026

Mais Clean

Site de 9 rotas em Next.js 16 com uma página por serviço, SEO local e 8 vídeos do processo

Ver projeto ao vivo6 fluxos em vídeo
Next.js 16React 19TypeScriptTailwind CSS v4
Roda emWeb (SSG)PWA instalávelWhatsApp como canal de orçamento
www.maiscleanhigienizacao.com.br
rotas pré-renderizadas no build
9
serviços com página e FAQ próprios
6
vídeos do processo carregados sob demanda
8
perguntas de FAQ divididas por serviço
30

01

Visão Geral

Projeto desenvolvido para a Mais Clean, empresa da Baixada Santista com +1.000 clientes e 5★ no Google (280 avaliações), especializada em higienização de estofados a domicílio com o método exclusivo Mais Clean UP. O site não é uma landing page única: são 9 rotas pré-renderizadas (/, /sofas, /colchoes, /cadeiras, /carpete, /persianas, /impermeabilizacao, /contato e a política de privacidade), cada serviço com hero, benefícios, vídeos, FAQ e Schema.org próprios. A prova do trabalho é visual — comparativos antes/depois, 8 vídeos gravados nos atendimentos e os depoimentos dos clientes — e todo caminho termina no WhatsApp, que é o canal real de orçamento da empresa.

Meu papel

Desenvolvimento full-stack solo — arquitetura Next.js App Router, design system, SEO técnico, conteúdo por serviço, configuração de Analytics, Clarity e Google Ads, PWA e deploy.

Categoria

Landing Page

Ano

2026

Status

Cliente Real

Plataformas

Web (SSG)PWA instalávelWhatsApp como canal de orçamento

Não há back-end próprio: o conteúdo mora no repositório, o build gera as 9 rotas prontas e a Vercel serve tudo do edge. O que é dinâmico acontece fora do site — a conversa vai para o WhatsApp da empresa e a medição para GA4, Clarity e Google Ads.

Next.js 16

App Router · React 19

Tailwind v4Framer Motionnext/dynamicnext/og

Vercel

SSG + edge

9 rotas no buildAVIF/WebPCache imutávelHeaders de segurança

WhatsApp Business

canal de orçamento

Botão flutuanteCTA por serviçoMensagem pré-preenchidaEvento no GA4

Medição

GA4 · Clarity · Ads

IP anonimizadoHeatmapsEventos própriosSó em produção

Sincronização: Os depoimentos são os reviews do Google Business da empresa, mantidos no código como conteúdo — sem chave de API nem chamada em tempo de execução.

02

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á'. E o serviço é difícil de vender por texto: quem contrata quer ver o resultado antes de chamar.

03 — A Solução

Site multi-página com rota dedicada para cada serviço (SEO por intenção de busca), Schema.org LocalBusiness com aggregateRating, 30 perguntas de FAQ divididas por serviço, comparativos antes/depois e 8 vídeos do processo com carregamento sob demanda. PWA instalável, eventos de conversão no GA4/Clarity/Google Ads e otimizações de LCP (hero em CSS puro, seções abaixo da dobra via next/dynamic).

04

Por dentro do produto

O sistema em funcionamento, gravado da aplicação real com uma loja de demonstração — nenhuma tela é mockup.

01

Home

A home leva do problema à prova em uma rolagem

Hero com o método Mais Clean UP e os números da empresa, os seis serviços em cartões, os vídeos do processo, o antes e depois, os depoimentos e a chamada final. Tudo acima da dobra é renderizado pelo servidor com animação em CSS puro; o resto entra por next/dynamic conforme aparece.

  • Hero sem JS no caminho do LCP, animado por @keyframes
  • Barra de bônus fixa que reserva a própria altura no body
  • Botão de WhatsApp flutuante acompanha a página inteira
Home
02

SEO

Cada serviço tem a própria página — e a própria busca

Sofás, colchões, cadeiras, carpetes, persianas e impermeabilização não dividem uma seção: cada um é uma rota com hero, benefícios, processo, vídeos e FAQ escritos para aquele serviço, com metadata, canonical e Schema.org próprios. É o que faz a página aparecer para 'higienização de colchão' e não só para 'limpeza de estofados'.

  • Menu de serviços abre o mesmo conjunto em qualquer página
  • 30 perguntas de FAQ divididas entre home e serviços
  • Sitemap com 9 URLs e prioridades por profundidade
SEO
03

Vídeo

Oito vídeos do processo, carregados só quando aparecem

Os vídeos são gravados nos próprios atendimentos e distribuídos entre a home e as páginas de serviço. Nenhum deles pesa na abertura: um IntersectionObserver alterna o preload de 'none' para 'metadata' quando o vídeo se aproxima da tela e só então dá play, pausando de novo ao sair do viewport.

  • preload='none' até o vídeo chegar perto da dobra
  • Autoplay mudo com legendas, sem exigir clique
  • Cache imutável de 1 ano para /videos e /images
Vídeo
04

Prova

Antes e depois, depoimentos e as dúvidas respondidas

O trio que decide a contratação: o comparativo antes/depois dos atendimentos, os depoimentos de clientes com nota e cidade, e o FAQ que responde as objeções reais — preço, tempo de secagem, produto usado e atendimento a domicílio.

  • Comparativos com marca d'água da empresa
  • Depoimentos com nota, cidade e tempo do atendimento
  • FAQ em acordeão, com marcação semântica
Prova
05

Conversão

Todo caminho termina no WhatsApp da empresa

A empresa fecha orçamento conversando, então o site não inventa um formulário que ninguém responde: cada CTA abre o WhatsApp com a mensagem já escrita, e o clique vira evento no GA4 e no Clarity. A página de contato reúne telefone, área de atendimento e horários.

  • Mensagem pré-preenchida por serviço de origem
  • Evento whatsapp_click e cta_click no GA4
  • Página de contato com área atendida e horários
Conversão
06

Celular

No celular, que é de onde vem a busca

Quem procura higienização de sofá procura do telefone. O menu vira gaveta, os cartões de serviço empilham, os vídeos continuam carregando sob demanda e o botão de WhatsApp fica fixo no canto. O manifest permite instalar o site como aplicativo, com ícones gerados via next/og.

  • Menu gaveta com os seis serviços
  • Manifest standalone com theme color navy
  • Ícones gerados no build, sem arquivo estático
Celular

05

6 fluxos em vídeo

Cada vídeo mostra uma tarefa completa, de ponta a ponta. Clique para assistir com controles.

06

Funcionalidades Principais

01

Uma página por serviço

Rota dedicada para sofás, colchões, cadeiras, carpetes, persianas e impermeabilização, além de contato — cada uma com metadata, canonical, Schema.org, hero, benefícios e FAQ próprios, para ranquear na intenção de busca específica.

02

Prova visual: antes/depois e 8 vídeos

Comparativos antes/depois dos atendimentos e 8 vídeos do processo distribuídos entre a home e as páginas de serviço, com marca d'água e legendas — a demonstração que texto nenhum substitui nesse mercado.

03

SEO local com Schema.org

JSON-LD LocalBusiness com telephone, areaServed (Mongaguá, Baixada Santista e São Paulo), openingHours e aggregateRating injetado no head de todas as páginas. Sitemap com 9 URLs e priorities configuradas.

04

Analytics e conversão

GA4 com IP anonimizado, Microsoft Clarity (heatmaps e gravações de sessão) e tag do Google Ads, carregados apenas em produção. Eventos próprios para clique no WhatsApp, clique em CTA, visualização de seção e reprodução de vídeo.

05

PWA instalável

Web App Manifest com display standalone, theme color navy (#090832) e ícones gerados em tempo de build via next/og ImageResponse — sem arquivos estáticos. Instalável em Android e iOS.

06

Otimização de performance

Hero animado com CSS @keyframes puro (sem JS no LCP). Seções abaixo da dobra via next/dynamic. Vídeos com IntersectionObserver alternando preload 'none' → 'metadata' e autoplay só no viewport. Imagens em AVIF/WebP e cache imutável de 1 ano para vídeos e imagens.

07

Telas do sistema

Capturas reais do produto, organizadas por módulo. Clique em qualquer tela para ampliar.

Hero com o método Mais Clean UP e os números da empresa
A barra de bônus entra depois da pintura, sem empurrar o conteúdo
Os seis serviços, cada um com link para a própria página
Vídeos do processo na home, carregados sob demanda
Quem somos, com o diferencial do método
Comparativos antes e depois dos atendimentos
Depoimentos com nota, cidade e tempo do atendimento
As seis dúvidas mais comuns em acordeão
Chamada final para orçamento pelo WhatsApp
Rodapé com serviços, contato e área de atendimento
O menu de serviços abre em qualquer página do site
Higienização de sofás: hero, benefícios e processo próprios

08

No celular

A maior parte das buscas por higienização de estofado sai do celular. O menu vira gaveta, os cartões empilham, os vídeos continuam entrando sob demanda e o botão de WhatsApp fica fixo — e o manifest permite instalar o site como aplicativo.

Hero
Bônus
Menu
Serviços
Vídeos
Quem somos
Antes e depois
Depoimentos
FAQ
Sofás
Impermeabilização
Orçamento
Contato

09

Tecnologias

Front-end

Next.js 16React 19TypeScriptTailwind CSS v4

Deploy

Vercel

Integrações

Google Analytics 4Microsoft ClarityGoogle AdsWhatsApp Business

Bibliotecas

Framer Motion 12Lucide Reactclsxtailwind-merge

10

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 com papéis claros: Montserrat para interface, Playfair Display para títulos, Cormorant Garamond para destaques. Botão de WhatsApp flutuante em verde #25D366 sempre visível no scroll, e barra de bônus fixa que compensa a própria altura no padding do body para nunca cobrir o rodapé.

11

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) vídeos com IntersectionObserver para carregar apenas o que está visível. Resultado: o HTML do servidor já contém o conteúdo animado, sem esperar hidratação do React.

12

Resultados

  • Cliente com +1.000 atendimentos e 5★ no Google (280 avaliações) com presença digital estruturada
  • 9 rotas indexáveis, cada serviço com sua própria página, FAQ e marcação Schema.org
  • Medição de conversão completa: heatmaps e gravações no Clarity, eventos de WhatsApp, CTA, seção e vídeo no GA4 e tag do Google Ads

13

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
  • SEO por intenção de busca: uma rota por serviço, com FAQ e Schema.org próprios, rende mais que uma única página longa tentando cobrir tudo
  • Video lazy loading sem biblioteca: IntersectionObserver com rootMargin alterna preload='none' → 'metadata' e ativa autoplay só ao entrar no viewport, eliminando requisições de rede desnecessárias
  • Em serviço que se vende pelo resultado, a prova visual é a página: antes/depois e vídeo do processo convertem mais que qualquer texto descritivo

Gostou desse projeto?

Tem uma ideia parecida ou quer construir algo diferente? Vamos conversar.

WhatsAppEnviar mensagem

Outros projetos

Ver todos
Capa — VendaíPrévia em vídeo

SaaS

Vendaí

Sistema completo de ponto de venda para petshops, casas de ração, mercearias e lojas de bairro: PDV com leitor de código de barras, caixa, estoque, fiado, contas a pagar, PIX, 50+ relatórios e Recebimento Seguro — tudo funcionando sem internet, com sincronização para a nuvem e app de gestão no celular.

Capa — EA CentralPrévia em vídeo

Sistema Web

EA Central

Loja B2B de acessórios para celular: catálogo com 349 produtos e filtro por aparelho (293 modelos), preço progressivo por quantidade, carrinho com escolha de cores, frete real e checkout que abre o WhatsApp com o pedido pronto. Painel completo para o lojista, exportação Excel/PDF e medição Meta Pixel + Conversions API.

Capa — PetzaraPrévia em vídeo

SaaS

Petzara

Sistema completo de gestão para petshops: agenda com status em tempo real via Socket.io, clientes, pets, financeiro, colaboradores e assinatura mensal/anual via Stripe — PWA instalável no celular ou computador.