Saltar al contenido
Lucas Batista
Landing pageCliente real2026

Mais Clean

Sitio de 9 rutas en Next.js 16 con una página por servicio, SEO local y 8 videos del proceso

Ver proyecto en vivo6 flujos en video
Next.js 16React 19TypeScriptTailwind CSS v4
Funciona enWeb (SSG)PWA instalableWhatsApp como canal de presupuestos
www.maiscleanhigienizacao.com.br
rutas prerenderizadas en el build
9
servicios con página y FAQ propios
6
videos del proceso cargados bajo demanda
8
preguntas de FAQ divididas por servicio
30

01

Visión General

Proyecto desarrollado para Mais Clean, empresa de la Baixada Santista con más de 1.000 clientes y 5★ en Google (280 reseñas), especializada en la limpieza de tapizados a domicilio con el método exclusivo Mais Clean UP. El sitio no es una landing page única: son 9 rutas prerenderizadas (/, /sofas, /colchoes, /cadeiras, /carpete, /persianas, /impermeabilizacao, /contato y la política de privacidad), y cada servicio tiene su propio hero, beneficios, videos, FAQ y Schema.org. La prueba del trabajo es visual — comparativos de antes y después, 8 videos grabados en los servicios y los testimonios de los clientes — y todo camino termina en WhatsApp, que es el canal real de presupuestos de la empresa.

Mi rol

Desarrollo full-stack en solitario — arquitectura Next.js App Router, design system, SEO técnico, contenido por servicio, configuración de Analytics, Clarity y Google Ads, PWA y deploy.

Categoría

Landing page

Año

2026

Estado

Cliente real

Plataformas

Web (SSG)PWA instalableWhatsApp como canal de presupuestos

No hay back end propio: el contenido vive en el repositorio, el build genera las 9 rutas listas y Vercel sirve todo desde el edge. Lo dinámico ocurre fuera del sitio — la conversación va al WhatsApp de la empresa y la medición a GA4, Clarity y Google Ads.

Next.js 16

App Router · React 19

Tailwind v4Framer Motionnext/dynamicnext/og

Vercel

SSG + edge

9 rutas en el buildAVIF/WebPCaché inmutableHeaders de seguridad

WhatsApp Business

canal de presupuestos

Botón flotanteCTA por servicioMensaje prellenadoEvento en GA4

Medición

GA4 · Clarity · Ads

IP anonimizadaMapas de calorEventos propiosSolo en producción

Sincronización: Los testimonios son las reseñas de Google Business de la empresa, guardadas en el código como contenido — sin clave de API ni llamadas en tiempo de ejecución.

02

El Problema

La empresa operaba con una presencia digital mínima y perdía clientes que buscan limpieza de sofás y colchones en línea. Sin páginas dedicadas por servicio, el sitio no posicionaba para términos específicos como "limpieza de colchón" o "impermeabilización de sofá". Y el servicio es difícil de vender por texto: quien lo contrata quiere ver el resultado antes de llamar.

03 — La Solución

Sitio multipágina con una ruta dedicada para cada servicio (SEO por intención de búsqueda), Schema.org LocalBusiness con aggregateRating, 30 preguntas de FAQ divididas por servicio, comparativos de antes y después y 8 videos del proceso con carga bajo demanda. PWA instalable, eventos de conversión en GA4/Clarity/Google Ads y optimizaciones de LCP (hero en CSS puro, secciones bajo el pliegue con next/dynamic).

04

Por dentro del producto

El sistema en funcionamiento, grabado de la aplicación real con una tienda de demostración — ninguna pantalla es un mockup.

01

Home

La home lleva del problema a la prueba en un solo scroll

Hero con el método Mais Clean UP y los números de la empresa, los seis servicios en tarjetas, los videos del proceso, el antes y después, los testimonios y la llamada final. Todo lo que está sobre el pliegue se renderiza en el servidor con animación en CSS puro; el resto entra con next/dynamic a medida que aparece.

  • Hero sin JS en el camino del LCP, animado con @keyframes
  • Barra de bonos fija que reserva su propia altura en el body
  • El botón flotante de WhatsApp acompaña toda la página
Home
02

SEO

Cada servicio tiene su propia página — y su propia búsqueda

Sofás, colchones, sillas, alfombras, persianas e impermeabilización no comparten una sección: cada uno es una ruta con hero, beneficios, proceso, videos y FAQ escritos para ese servicio, con metadata, canonical y Schema.org propios. Es lo que hace que la página aparezca para "limpieza de colchón" y no solo para "limpieza de tapizados".

  • El menú de servicios abre el mismo conjunto en cualquier página
  • 30 preguntas de FAQ divididas entre la home y los servicios
  • Sitemap con 9 URL y prioridades según la profundidad
SEO
03

Video

Ocho videos del proceso, cargados solo cuando aparecen

Los videos se graban en los propios servicios y se distribuyen entre la home y las páginas de servicio. Ninguno pesa en la carga inicial: un IntersectionObserver alterna el preload de 'none' a 'metadata' cuando el video se acerca a la pantalla y solo entonces le da play, pausándolo de nuevo al salir del viewport.

  • preload='none' hasta que el video se acerca al pliegue
  • Autoplay mudo con subtítulos, sin exigir clic
  • Caché inmutable de 1 año para /videos e /images
Video
04

Prueba

Antes y después, testimonios y dudas resueltas

El trío que decide la contratación: el comparativo de antes y después de los servicios, los testimonios de clientes con calificación y ciudad, y el FAQ que responde las objeciones reales — precio, tiempo de secado, producto usado y atención a domicilio.

  • Comparativos con la marca de agua de la empresa
  • Testimonios con calificación, ciudad y tiempo del servicio
  • FAQ en acordeón, con marcado semántico
Prueba
05

Conversión

Todo camino termina en el WhatsApp de la empresa

La empresa cierra los presupuestos conversando, así que el sitio no inventa un formulario que nadie responde: cada CTA abre WhatsApp con el mensaje ya escrito, y el clic se convierte en un evento en GA4 y en Clarity. La página de contacto reúne teléfono, zona de atención y horarios.

  • Mensaje prellenado según el servicio de origen
  • Eventos whatsapp_click y cta_click en GA4
  • Página de contacto con zona de atención y horarios
Conversión
06

Móvil

En el móvil, que es de donde viene la búsqueda

Quien busca limpieza de sofá busca desde el teléfono. El menú se convierte en un cajón lateral, las tarjetas de servicio se apilan, los videos siguen cargando bajo demanda y el botón de WhatsApp queda fijo en la esquina. El manifest permite instalar el sitio como aplicación, con íconos generados mediante next/og.

  • Menú tipo cajón con los seis servicios
  • Manifest standalone con theme color navy
  • Íconos generados en el build, sin archivo estático
Móvil

05

6 flujos en video

Cada video muestra una tarea completa, de principio a fin. Haz clic para verlo con controles.

06

Funcionalidades Principales

01

Una página por servicio

Ruta dedicada para sofás, colchones, sillas, alfombras, persianas e impermeabilización, además de contacto — cada una con metadata, canonical, Schema.org, hero, beneficios y FAQ propios, para posicionar en la intención de búsqueda específica.

02

Prueba visual: antes y después y 8 videos

Comparativos de antes y después de los servicios y 8 videos del proceso distribuidos entre la home y las páginas de servicio, con marca de agua y subtítulos — la demostración que ningún texto reemplaza en este mercado.

03

SEO local con Schema.org

JSON-LD LocalBusiness con telephone, areaServed (Mongaguá, Baixada Santista y São Paulo), openingHours y aggregateRating inyectado en el head de todas las páginas. Sitemap con 9 URL y priorities configuradas.

04

Analítica y conversión

GA4 con IP anonimizada, Microsoft Clarity (mapas de calor y grabaciones de sesión) y la etiqueta de Google Ads, cargados solo en producción. Eventos propios para clic en WhatsApp, clic en CTA, visualización de sección y reproducción de video.

05

PWA instalable

Web App Manifest con display standalone, theme color navy (#090832) e íconos generados en tiempo de build mediante next/og ImageResponse — sin archivos estáticos. Instalable en Android e iOS.

06

Optimización de rendimiento

Hero animado con CSS @keyframes puro (sin JS en el LCP). Secciones bajo el pliegue con next/dynamic. Videos con IntersectionObserver que alterna preload 'none' → 'metadata' y autoplay solo dentro del viewport. Imágenes en AVIF/WebP y caché inmutable de 1 año para videos e imágenes.

07

Pantallas del sistema

Capturas reales del producto, organizadas por módulo. Haz clic en cualquier pantalla para ampliarla.

Hero con el método Mais Clean UP y los números de la empresa
La barra de bonos entra después del pintado, sin empujar el contenido
Los seis servicios, cada uno con enlace a su propia página
Videos del proceso en la home, cargados bajo demanda
Quiénes somos, con el diferencial del método
Comparativos de antes y después de los servicios
Testimonios con calificación, ciudad y tiempo del servicio
Las seis dudas más comunes en un acordeón
Llamada final para pedir presupuesto por WhatsApp
Pie de página con servicios, contacto y zona de atención
El menú de servicios se abre en cualquier página del sitio
Limpieza de sofás: hero, beneficios y proceso propios

08

En el celular

La mayor parte de las búsquedas de limpieza de tapizados sale desde el móvil. El menú se convierte en un cajón lateral, las tarjetas se apilan, los videos siguen entrando bajo demanda y el botón de WhatsApp queda fijo — y el manifest permite instalar el sitio como aplicación.

Hero
Bonos
Menú
Servicios
Videos
Quiénes somos
Antes y después
Testimonios
FAQ
Sofás
Impermeabilización
Presupuesto
Contacto

09

Tecnologías

Front-end

Next.js 16React 19TypeScriptTailwind CSS v4

Despliegue

Vercel

Integraciones

Google Analytics 4Microsoft ClarityGoogle AdsWhatsApp Business

Bibliotecas

Framer Motion 12Lucide Reactclsxtailwind-merge

10

Decisiones de Diseño

Paleta navy (#090832) + bronce/dorado (#b59b72) para transmitir calidad premium y confianza — rompe con el azul y blanco genérico de las empresas de limpieza. Tres fuentes con roles claros: Montserrat para la interfaz, Playfair Display para los títulos, Cormorant Garamond para los destacados. Botón flotante de WhatsApp en verde #25D366 siempre visible al hacer scroll, y barra de bonos fija que compensa su propia altura en el padding del body para no cubrir nunca el pie de página.

11

Desafíos Técnicos

Preservar el LCP con una página que tiene hero a pantalla completa, animaciones y múltiples assets. Solución en tres capas: (1) hero animado con CSS puro sin JS; (2) secciones bajo el pliegue con next/dynamic para reducir el bundle inicial; (3) videos con IntersectionObserver para cargar solo lo que está visible. Resultado: el HTML del servidor ya contiene el contenido animado, sin esperar la hidratación de React.

12

Resultados

  • Cliente con más de 1.000 servicios realizados y 5★ en Google (280 reseñas), ahora con presencia digital estructurada
  • 9 rutas indexables, cada servicio con su propia página, FAQ y marcado Schema.org
  • Medición de conversión completa: mapas de calor y grabaciones en Clarity, eventos de WhatsApp, CTA, sección y video en GA4, y la etiqueta de Google Ads

13

Aprendizajes

  • LCP en Next.js App Router: usar CSS @keyframes para las animaciones sobre el pliegue garantiza que el contenido se renderice en el servidor antes de que se ejecute cualquier JS — Framer Motion solo bajo el pliegue
  • SEO por intención de búsqueda: una ruta por servicio, con FAQ y Schema.org propios, rinde más que una sola página larga que intenta cubrir todo
  • Carga diferida de video sin librería: IntersectionObserver con rootMargin alterna preload='none' → 'metadata' y activa el autoplay solo al entrar en el viewport, eliminando solicitudes de red innecesarias
  • En un servicio que se vende por el resultado, la prueba visual es la página: el antes y después y el video del proceso convierten más que cualquier texto descriptivo

¿Te gustó este proyecto?

¿Tienes una idea parecida o quieres construir algo diferente? Hablemos.

WhatsAppEnviar mensaje

Otros proyectos

Ver todos
Portada — VendaíVista previa en video

SaaS

Vendaí

Sistema completo de punto de venta para pet shops, tiendas de alimento para animales, almacenes y comercios de barrio: POS con lector de código de barras, caja, inventario, fiado (venta a crédito), cuentas por pagar, PIX (el sistema de pagos instantáneos de Brasil), más de 50 informes y Recepción Segura — todo funcionando sin internet, con sincronización a la nube y una app de gestión en el celular.

Portada — EA CentralVista previa en video

Sistema web

EA Central

Tienda B2B de accesorios para celulares: catálogo con 349 productos y filtro por dispositivo (293 modelos), precio progresivo por cantidad, carrito con elección de colores, flete real y un checkout que abre WhatsApp con el pedido listo. Panel completo para el comerciante, exportación a Excel/PDF y medición con Meta Pixel + Conversions API.

Portada — PetzaraVista previa en video

SaaS

Petzara

Sistema completo de gestión para petshops: agenda con estado en tiempo real mediante Socket.io, clientes, mascotas, finanzas, colaboradores y suscripción mensual/anual con Stripe — PWA instalable en el celular o en la computadora.