AR Cim — Service-Glossary HVAC Landing Page
A single-file HTML landing page for AR Cim, an installation, deep-cleaning, and maintenance service in Marialva (PR). Its positioning is honesty about scope: nothing is done before explaining what is needed, why, and what it costs. The page proves that instead of asserting it, with a four-card glossary that maps each service — cleaning, refrigerant recharge, preventive maintenance, repair — to the symptom that calls for it ("you need this when: it smells bad on start-up", "when the fan runs but the air no longer gets cold"). A deep pine-green identity with a mint accent, an Outfit / Inter type system, a 5.0-star / 35-review badge, a three-service grid, three Google quotes, and WhatsApp-first CTAs with a fixed mobile bar complete the page. Zero dependencies, zero build step, one self-contained file, built from public Google Maps information as a demonstration.
Project metrics
4 key metricsEach mapped to the symptom that calls for it — the page's signature section
Visitors self-diagnose from what they observe, not from a service menu
35 reviews on Google, all five stars — shown as first-screen proof
Self-contained single HTML file — no dependencies, no build step
Problem statement
"We explain everything before we start" is the most common and least believable claim in local services. The page had to demonstrate that transparency in its own content — teaching enough for a visitor to self-diagnose before they message — while proving a perfect 5.0 rating and routing every conversion to WhatsApp as one self-contained HTML file.
Transparency is a claim every competitor makes — it only lands if the page itself teaches something before asking for anything
Customers do not know the vocabulary: cleaning, refrigerant recharge, preventive maintenance, and repair blur together
That confusion has a cost in both directions — paying for unnecessary work, or skipping work that was needed
People describe symptoms, not services, so the content had to be indexed by what they observe
A 5.0-star / 35-review reputation had to appear as first-screen proof, with every CTA opening WhatsApp
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 on a deep pine-green base with a mint accent and an Outfit / Inter type system. The signature is a four-card service glossary indexed by symptom rather than by service name, each card pairing a short definition with a "you need this when" line drawn from what the customer actually observes. A three-service grid, a 5.0-star / 35-review badge, three five-star Google quotes, and WhatsApp-first CTAs with a fixed mobile bar complete the page.
Symptom-Led Service Glossary
The signature element: four cards — cleaning, refrigerant recharge, preventive maintenance, repair — each with a plain definition and a mint-highlighted "you need this when" line describing observable symptoms (bad smell on start-up, fan runs but no cold air, water dripping down the wall, breaker tripping). The visitor self-diagnoses before messaging
Transparency as Structure
The section is framed by the problem it solves — "many people pay for a service they did not need, or skip the one they did" — and closes with an invitation to describe the symptom on WhatsApp, including the promise to say so when none of the four services is the answer
Pine & Mint Identity
A deep pine-green base with a second darker-green surface for the glossary band, cream text, and a single mint accent reserved for action, tags, and rules — an Outfit display over an Inter body, with pill-shaped buttons and rounded cards throughout
Services, Proof & WhatsApp CTAs
A hairline-separated three-service grid, a 5.0★ / 35-review badge, three five-star Google quotes, and a bordered contact table with hours, address, and a Maps link — every CTA a wa.me deep link, plus a fixed bottom action bar on mobile that hides at 760px
System design
Single-file delivery with no build step and no runtime dependencies beyond Google Fonts. HTML and CSS custom properties live in one document — the dark palette, the hairline borders drawn as translucent cream, and the fluid clamp() type scale are all token-driven, with a single 760px breakpoint carrying the responsive layout.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Turn "we explain before we start" from a claim into content the page actually delivers
Define the deep pine-green identity with a single mint accent and the Outfit / Inter type system
Write the four service cards and index each one by the observable symptom that calls for it
Lay out the hairline three-service grid and the 5.0★ / 35-review proof badge with three Google quotes
Build the bordered contact table with hours, address, Maps link, and service area
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.
Teach, Then Ask
Decided the transparency pitch would only be credible if the page taught the visitor enough to self-diagnose before any CTA asked for a message
Pine Green & Mint
Established the deep pine-green base with a second darker surface, cream text, a single mint accent, and the Outfit / Inter type system
The Service Glossary
Built the four-card glossary indexed by observable symptom, each card pairing a plain definition with a mint-highlighted "you need this when" line
Services & Proof
Assembled the hairline-separated three-service grid, the 5.0★ / 35-review badge, and three five-star Google quotes
Contact & Mobile
Built the bordered contact table with a Maps link, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Teach, Then Ask
Decided the transparency pitch would only be credible if the page taught the visitor enough to self-diagnose before any CTA asked for a message
Pine Green & Mint
Established the deep pine-green base with a second darker surface, cream text, a single mint accent, and the Outfit / Inter type system
The Service Glossary
Built the four-card glossary indexed by observable symptom, each card pairing a plain definition with a mint-highlighted "you need this when" line
Services & Proof
Assembled the hairline-separated three-service grid, the 5.0★ / 35-review badge, and three five-star Google quotes
Contact & Mobile
Built the bordered contact table with a Maps link, wired the WhatsApp deep links, 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.