Skip to content
Lucas Batista
Landing pageClient project2026

Mais Clean

Next.js 16 site with 9 routes, one page per service, local SEO and 8 process videos

View live project6 video walkthroughs
Next.js 16React 19TypeScriptTailwind CSS v4
Runs onWeb (SSG)Installable PWAWhatsApp as the quoting channel
www.maiscleanhigienizacao.com.br
routes prerendered at build time
9
services with their own page and FAQ
6
process videos loaded on demand
8
FAQ questions split by service
30

01

Overview

Project built for Mais Clean, a company in the Baixada Santista region with 1,000+ clients and 5★ on Google (280 reviews), specializing in at-home upholstery cleaning with its exclusive Mais Clean UP method. The site is not a single landing page: it has 9 prerendered routes (/, /sofas, /colchoes, /cadeiras, /carpete, /persianas, /impermeabilizacao, /contato and the privacy policy), and each service has its own hero, benefits, videos, FAQ and Schema.org. The proof of the work is visual — before/after comparisons, 8 videos recorded during real jobs and customer testimonials — and every path ends at WhatsApp, which is the company's real quoting channel.

My role

Solo full-stack development — Next.js App Router architecture, design system, technical SEO, content for each service, Analytics, Clarity and Google Ads setup, PWA and deployment.

Category

Landing page

Year

2026

Status

Client project

Platforms

Web (SSG)Installable PWAWhatsApp as the quoting channel

There is no back end of its own: the content lives in the repository, the build generates the 9 ready-made routes and Vercel serves everything from the edge. Whatever is dynamic happens outside the site — the conversation goes to the company's WhatsApp and the measurement goes to GA4, Clarity and Google Ads.

Next.js 16

App Router · React 19

Tailwind v4Framer Motionnext/dynamicnext/og

Vercel

SSG + edge

9 routes at buildAVIF/WebPImmutable cacheSecurity headers

WhatsApp Business

quoting channel

Floating buttonCTA per servicePre-filled messageGA4 event

Tracking

GA4 · Clarity · Ads

Anonymized IPHeatmapsCustom eventsProduction only

Sync: The testimonials are the company's Google Business reviews, kept in the code as content — no API key and no runtime call.

02

The Problem

The company had a minimal digital presence and was losing customers who search online for sofa and mattress cleaning. Without dedicated pages per service, the site did not rank for specific terms like "mattress cleaning" or "sofa waterproofing". And the service is hard to sell through text: people who hire it want to see the result before they call.

03 — The Solution

A multi-page site with a dedicated route for each service (SEO by search intent), Schema.org LocalBusiness with aggregateRating, 30 FAQ questions split by service, before/after comparisons and 8 process videos loaded on demand. Installable PWA, conversion events in GA4/Clarity/Google Ads and LCP optimizations (hero in pure CSS, below-the-fold sections via next/dynamic).

04

Inside the product

The system in action, recorded from the real application with a demo store — no screen is a mockup.

01

Home

The home page takes you from problem to proof in one scroll

Hero with the Mais Clean UP method and the company's numbers, the six services as cards, the process videos, the before and after, the testimonials and the final call to action. Everything above the fold is rendered by the server with pure CSS animation; the rest comes in through next/dynamic as it appears.

  • Hero with no JS in the LCP path, animated by @keyframes
  • Fixed bonus bar that reserves its own height in the body
  • Floating WhatsApp button follows the whole page
Home
02

SEO

Each service has its own page — and its own search

Sofas, mattresses, chairs, carpets, blinds and waterproofing don't share a section: each one is a route with a hero, benefits, process, videos and FAQ written for that service, with its own metadata, canonical and Schema.org. That's what makes the page show up for "mattress cleaning" and not just for "upholstery cleaning".

  • Services menu opens the same set on any page
  • 30 FAQ questions split between the home page and services
  • Sitemap with 9 URLs and priorities by depth
SEO
03

Video

Eight process videos, loaded only when they appear

The videos are recorded during real jobs and distributed across the home page and the service pages. None of them weighs on the initial load: an IntersectionObserver switches preload from 'none' to 'metadata' when the video approaches the screen and only then starts playing, pausing again when it leaves the viewport.

  • preload='none' until the video gets close to the fold
  • Muted autoplay with captions, no click required
  • 1-year immutable cache for /videos and /images
Video
04

Proof

Before and after, testimonials and answered questions

The trio that decides the purchase: the before/after comparison from real jobs, customer testimonials with rating and city, and the FAQ that answers the real objections — price, drying time, product used and at-home service.

  • Comparisons with the company watermark
  • Testimonials with rating, city and time of service
  • FAQ as an accordion, with semantic markup
Proof
05

Conversion

Every path ends at the company's WhatsApp

The company closes quotes by talking, so the site doesn't invent a form nobody answers: each CTA opens WhatsApp with the message already written, and the click becomes an event in GA4 and Clarity. The contact page gathers the phone number, service area and opening hours.

  • Pre-filled message by originating service
  • whatsapp_click and cta_click events in GA4
  • Contact page with service area and opening hours
Conversion
06

Mobile

On mobile, which is where searches come from

People looking for sofa cleaning search from their phones. The menu becomes a drawer, the service cards stack, the videos keep loading on demand and the WhatsApp button stays fixed in the corner. The manifest lets you install the site as an app, with icons generated via next/og.

  • Drawer menu with the six services
  • Standalone manifest with navy theme color
  • Icons generated at build, no static file
Mobile

05

6 video walkthroughs

Each video shows a complete task, end to end. Click to watch with controls.

06

Key Features

01

One page per service

A dedicated route for sofas, mattresses, chairs, carpets, blinds and waterproofing, plus a contact page — each with its own metadata, canonical, Schema.org, hero, benefits and FAQ, so it can rank for that specific search intent.

02

Visual proof: before/after and 8 videos

Before/after comparisons from real jobs and 8 process videos spread across the home page and the service pages, with watermark and captions — the kind of demonstration no text can replace in this market.

03

Local SEO with Schema.org

LocalBusiness JSON-LD with telephone, areaServed (Mongaguá, Baixada Santista and São Paulo), openingHours and aggregateRating injected into the head of every page. Sitemap with 9 URLs and configured priorities.

04

Analytics and conversion

GA4 with anonymized IP, Microsoft Clarity (heatmaps and session recordings) and the Google Ads tag, loaded only in production. Custom events for WhatsApp clicks, CTA clicks, section views and video plays.

05

Installable PWA

Web App Manifest with standalone display, navy theme color (#090832) and icons generated at build time via next/og ImageResponse — no static files. Installable on Android and iOS.

06

Performance optimization

Animated hero with pure CSS @keyframes (no JS in the LCP). Below-the-fold sections via next/dynamic. Videos with IntersectionObserver switching preload 'none' → 'metadata' and autoplay only inside the viewport. Images in AVIF/WebP and a 1-year immutable cache for videos and images.

07

Product screens

Real screenshots of the product, organized by module. Click any screen to enlarge it.

Hero with the Mais Clean UP method and the company's numbers
The bonus bar comes in after paint, without pushing the content
The six services, each linking to its own page
Process videos on the home page, loaded on demand
About us, with the method's differentiator
Before and after comparisons from real jobs
Testimonials with rating, city and time of service
The six most common questions in an accordion
Final call to action to request a quote via WhatsApp
Footer with services, contact and service area
The services menu opens on any page of the site
Sofa cleaning: its own hero, benefits and process

08

On mobile

Most searches for upholstery cleaning come from mobile. The menu becomes a drawer, the cards stack, the videos keep loading on demand and the WhatsApp button stays fixed — and the manifest lets you install the site as an app.

Hero
Bonus
Menu
Services
Videos
About us
Before and after
Testimonials
FAQ
Sofas
Waterproofing
Quote
Contact

09

Technologies

Front-end

Next.js 16React 19TypeScriptTailwind CSS v4

Deployment

Vercel

Integrations

Google Analytics 4Microsoft ClarityGoogle AdsWhatsApp Business

Libraries

Framer Motion 12Lucide Reactclsxtailwind-merge

10

Design Decisions

Navy (#090832) + bronze/gold (#b59b72) palette to convey premium quality and trust — breaking away from the generic blue and white of cleaning companies. Three fonts with clear roles: Montserrat for the interface, Playfair Display for headings, Cormorant Garamond for highlights. A floating WhatsApp button in green #25D366 that stays visible while scrolling, and a fixed bonus bar that offsets its own height in the body padding so it never covers the footer.

11

Technical Challenges

Preserving the LCP on a page with a full-screen hero, animations and multiple assets. A three-layer solution: (1) animated hero in pure CSS with no JS; (2) below-the-fold sections via next/dynamic to reduce the initial bundle; (3) videos with IntersectionObserver to load only what is visible. Result: the server HTML already contains the animated content, without waiting for React hydration.

12

Results

  • Client with 1,000+ jobs and 5★ on Google (280 reviews) now with a structured digital presence
  • 9 indexable routes, each service with its own page, FAQ and Schema.org markup
  • Complete conversion tracking: heatmaps and recordings in Clarity, WhatsApp, CTA, section and video events in GA4, and the Google Ads tag

13

Learnings

  • LCP in Next.js App Router: CSS @keyframes for above-the-fold animations ensures the content is rendered by the server before any JS runs — Framer Motion only below the fold
  • SEO by search intent: one route per service, with its own FAQ and Schema.org, performs better than a single long page trying to cover everything
  • Video lazy loading without a library: IntersectionObserver with rootMargin switches preload='none' → 'metadata' and enables autoplay only when entering the viewport, eliminating unnecessary network requests
  • For a service that sells on results, the visual proof is the page: before/after and process videos convert better than any descriptive text

Liked this project?

Have a similar idea or want to build something different? Let's talk.

WhatsAppSend a message

More projects

View all
Cover — VendaíVideo preview

SaaS

Vendaí

A complete point-of-sale system for pet shops, feed stores, grocery stores, and neighborhood shops: POS with barcode scanner, cash register, inventory, customer tabs (fiado), accounts payable, PIX (Brazil's instant payment system), 50+ reports, and Secure Receiving — all working without internet, with cloud sync and a mobile management app.

Cover — EA CentralVideo preview

Web system

EA Central

B2B store for mobile phone accessories: a catalog of 349 products with filtering by device (293 models), progressive pricing by quantity, a cart with color selection, real shipping rates, and a checkout that opens WhatsApp with the order ready to send. Full admin panel for the store owner, Excel/PDF export, and Meta Pixel + Conversions API tracking.

Cover — PetzaraVideo preview

SaaS

Petzara

A complete management system for pet shops: a schedule with real-time status via Socket.io, clients, pets, finances, team members, and monthly/annual subscriptions via Stripe — an installable PWA for phone or computer.