Maringá Frio — Buy-and-Install Landing Page
A single-file HTML landing page for Maringá Frio, an air-conditioning store in Maringá (PR) that sells, installs, and services in one place. The page leads with that convenience — no buying the unit in one shop and hunting for an installer in another — and then earns trust by answering the buyer's very first question with a "which BTU does your room need" reference guide (9k / 12k / 18k across room sizes). A clean, bright identity — snow white, navy, and a turquoise accent with a Sora / Inter type system — carries the hero, the capacity cards, a four-service list, a "open Monday–Saturday" band, three five-star Google quotes, and a WhatsApp-first contact block with a fixed mobile bar. Zero dependencies, zero build step — one self-contained file delivered from public Google Maps information as a demonstration.
Project metrics
4 key metrics9k / 12k / 18k capacity cards mapped to room sizes — the buyer's first question, answered
10 reviews on Google, all five stars — shown as first-screen proof
Purchase, installation, and service handled in one place — the core pitch
Self-contained single HTML file — zero dependencies, zero build step
Problem statement
A store that both sells and installs air conditioners needed a page that removes the two biggest points of friction before a purchase: "which size do I even need?" and "who installs it?". The answer had to be a link the store sends on WhatsApp that educates the buyer, proves the one-roof convenience, and routes to a chat — all as a single instant-loading HTML file.
Buyers hesitate because they do not know which BTU capacity their room needs — that uncertainty stalls the sale
The real differentiator is buying and installing in one place, but that convenience is easy to state and hard to make feel concrete
A strong 5.0 Google rating had to appear as first-screen proof
Being open Saturday — when most competitors are closed and units break — is a selling point that deserved its own moment
The whole thing had to ship as one self-contained HTML file with no build step
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
- Capacity guide is a general reference and is labeled as subject to a technical room calculation
Approach & modules
A single-file landing page with a clean, bright identity — snow white, navy, and a turquoise accent on a Sora / Inter type system. The hero states the one-roof pitch; the signature section is a three-tier BTU capacity guide (9k / 12k / 18k) that answers the buyer's first question; a four-service list, a navy "open Monday–Saturday" band, five-star testimonials, and WhatsApp-first CTAs with a fixed mobile bar complete the funnel.
BTU Capacity Guide
The signature section: three cards map 9k / 12k / 18k BTU to room sizes (up to 12m², 12–18m², 18–28m²) with plain-language use cases, plus an honest note that sun, ceiling height, and occupancy change the math — an invitation to send the room size on WhatsApp
One-Roof Hero
A Sora headline states the pitch — buy, install, and service in the same place — over a soft white-to-snow gradient, with the 5.0★ / 10-review badge and paired WhatsApp / call CTAs above the fold
Services & Saturday Band
A four-item service list from sale to assistance, followed by a navy full-bleed band that turns "open Monday–Saturday" into a differentiator — the day competitors close and units fail
WhatsApp-First CTAs
Every action is a wa.me deep link with a context-specific pre-filled message, plus tel: links, 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 live in one document — markup and styles co-located for instant render and maximum portability.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Identify the two pre-purchase blockers — "which size?" and "who installs?" — and design the page to remove both
Define the clean bright identity — snow, navy, turquoise accent — and the Sora / Inter type system
Build the one-roof hero with the 5.0★ badge and paired WhatsApp / call CTAs
Author the three-tier capacity guide (9k / 12k / 18k) mapped to room sizes, with an honest technical-calculation note
Add the four-service list, the navy "open Monday–Saturday" band, and three five-star Google quotes
Wire every CTA to a pre-filled WhatsApp deep link, pin the fixed mobile bar, and export as one self-contained .html file
Project journey
Key milestones and phases throughout the project lifecycle.
Remove the Blockers
Framed the page around the two things that stall an AC purchase — sizing uncertainty and the sell-then-find-an-installer gap — and led with the one-roof answer
Clean Navy & Turquoise
Established the bright snow-white identity with navy and a turquoise accent, and the Sora / Inter type system for a calm, retail-trustworthy feel
Hero & BTU Guide
Built the one-roof hero and the three-tier BTU capacity guide with plain-language use cases and an honest technical-calculation note
Services & Saturday Band
Assembled the four-service list, the navy "open Monday–Saturday" differentiator band, and three five-star Google quotes
WhatsApp CTAs & Mobile
Wired every CTA to a context-specific pre-filled WhatsApp message, pinned the fixed mobile bar, and exported the single-file page
Remove the Blockers
Framed the page around the two things that stall an AC purchase — sizing uncertainty and the sell-then-find-an-installer gap — and led with the one-roof answer
Clean Navy & Turquoise
Established the bright snow-white identity with navy and a turquoise accent, and the Sora / Inter type system for a calm, retail-trustworthy feel
Hero & BTU Guide
Built the one-roof hero and the three-tier BTU capacity guide with plain-language use cases and an honest technical-calculation note
Services & Saturday Band
Assembled the four-service list, the navy "open Monday–Saturday" differentiator band, and three five-star Google quotes
WhatsApp CTAs & Mobile
Wired every CTA to a context-specific pre-filled WhatsApp message, pinned the fixed mobile bar, and exported the single-file page
Dive into the documentation
Detailed implementation guides, architecture decisions and technical specifications for this project.