Nakaar Air Conditioning — Local Service Landing Page
A single-file HTML landing page for Nakaar Ar Condicionado, an air-conditioning installation service in Maringá (PR). The page is engineered as a conversion tool, not a brochure: it leads with the one thing that sets the business apart — the electrical point and the appliance installation done by the same professional, in one visit, on one quote. A bold Anton/DM Sans type system on a charcoal-and-yellow palette drives a heavy-display hero, a side-by-side "common way vs. Nakaar" comparison, a four-service grid, three Google-review testimonials, and a contact block. Every CTA routes straight to WhatsApp with a pre-filled message, and a fixed bottom action bar keeps the primary conversion one thumb-tap away on mobile. Zero dependencies, zero build step — one self-contained HTML file, delivered from public Google Maps information as a demonstration page.
Project metrics
4 key metricsElectrical point and appliance installation by the same pro — one visit, one quote
16 reviews on Google, all five stars — used as first-screen social proof
Full installation, cleaning & sanitizing, preventive maintenance, and repair
Self-contained single HTML file — zero dependencies, zero build step
Problem statement
A local air-conditioning installer needed a link it could send on WhatsApp that turns a curious lead into a booked quote in seconds — not a generic services brochure. The whole page had to be built around one insight: the business does the electrical point and the installation in a single visit, something most competitors split across two professionals and two quotes.
Most HVAC pages bury the real differentiator under a generic list of services — the "electrical + install in one visit" advantage had to be the headline, not a footnote
The primary channel is WhatsApp, so every CTA needed to open a chat with a pre-filled message, not route to a form or an email
On mobile — where most of the traffic lands from a shared link — the conversion action had to stay reachable without scrolling back up
Trust had to be established fast: a strong 5.0 Google rating and real review quotes needed to appear high on the page
The whole thing had to ship as a single HTML file that renders instantly, with no build step and no framework
Constraints
- Zero external dependencies beyond web fonts — no npm, no bundlers, no CSS frameworks
- Single-file delivery — the entire page must be one self-contained .html file
- No backend — every conversion is a WhatsApp deep link or a tel: link
- Demonstration page built from public Google Maps data — marked noindex, nofollow and clearly labeled as not the official site
Approach & modules
A single-file landing page with a high-contrast editorial identity — charcoal (#0D0D0F) + paper (#FAFAF7) + a single signal yellow (#FFD400) — and a heavy Anton display face over DM Sans body text. The structure is a conversion funnel: a differentiator-led hero, a two-column comparison that makes the "one visit" advantage obvious, a service grid, social proof, and a contact block. WhatsApp deep links with pre-filled messages carry every CTA, and a fixed bottom bar keeps the primary action pinned on mobile.
Differentiator-Led Hero
A heavy Anton headline — "Elétrica e instalação no mesmo dia" — over a charcoal hero with a radial yellow glow, a region kicker, the 5.0★ rating inline as social proof, and paired WhatsApp / call CTAs above the fold
"2-in-1" Comparison
The signature section: a side-by-side of "the common way" (two hires, two quotes, nobody owns the problem) against the Nakaar column (one visit, one quote, one responsible pro) — the highlighted column inverts to charcoal-on-yellow to win the eye
Services & Social Proof
A four-cell service grid (installation, cleaning, preventive maintenance, repair) on a hairline-gap background, followed by three real Google-review quotes rendered as yellow-topped testimonial cards
WhatsApp-First CTAs
Every action is a wa.me deep link with a context-specific pre-filled message, plus tel: links for direct calling and a fixed bottom action bar that stays pinned on mobile and hides at the 760px breakpoint
System design
Single-file delivery with no build step and no runtime dependencies beyond Google Fonts. HTML structure, CSS custom properties, and responsive rules all live in one document — markup and styles co-located for maximum portability and instant render.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Identify the single differentiator worth leading with: electrical point + installation done by one pro in one visit
Define the high-contrast identity — charcoal + paper + one signal yellow (#FFD400) — and the Anton / DM Sans type system
Build the differentiator-led hero: heavy display headline, radial glow, inline 5.0★ rating, paired WhatsApp / call CTAs
Author the two-column "common way vs. Nakaar" section — the highlighted column inverts to charcoal-on-yellow
Add the four-service grid, three Google-review testimonial cards, and the contact block with map and coverage area
Wire every CTA to a pre-filled WhatsApp deep link, pin the fixed mobile action bar, and export as one self-contained .html file
Project journey
Key milestones and phases throughout the project lifecycle.
Find the One Message
Distilled the entire offer down to a single conversion-driving claim — "electrical and installation in one visit, one quote" — and structured the page as a funnel around it
Charcoal & Yellow Identity
Established the high-contrast palette (charcoal, paper, one signal yellow), the Anton display / DM Sans body pairing, and a fluid clamp()-based type scale for the hero and section headings
Hero & Comparison
Built the differentiator-led hero with a radial glow and inline rating, then the signature two-column comparison with the inverted charcoal-on-yellow highlight column
Services, Proof & Contact
Assembled the four-service hairline-gap grid, three Google-review testimonial cards, and the contact block with WhatsApp, address, map link, and coverage area
WhatsApp CTAs & Mobile
Wired every CTA to a context-specific pre-filled WhatsApp message, pinned the fixed mobile action bar (hidden at 760px+), added reduced-motion handling, and exported the single-file page
Find the One Message
Distilled the entire offer down to a single conversion-driving claim — "electrical and installation in one visit, one quote" — and structured the page as a funnel around it
Charcoal & Yellow Identity
Established the high-contrast palette (charcoal, paper, one signal yellow), the Anton display / DM Sans body pairing, and a fluid clamp()-based type scale for the hero and section headings
Hero & Comparison
Built the differentiator-led hero with a radial glow and inline rating, then the signature two-column comparison with the inverted charcoal-on-yellow highlight column
Services, Proof & Contact
Assembled the four-service hairline-gap grid, three Google-review testimonial cards, and the contact block with WhatsApp, address, map link, and coverage area
WhatsApp CTAs & Mobile
Wired every CTA to a context-specific pre-filled WhatsApp message, pinned the fixed mobile action bar (hidden at 760px+), added reduced-motion handling, and exported the single-file page
Dive into the documentation
Detailed implementation guides, architecture decisions and technical specifications for this project.