Conceito Air Conditioning — Trust-First Landing Page
A single-file HTML landing page for Conceito Ar Condicionados, an air-conditioning installer in Sarandi (PR). The whole page is a trust argument: the price is closed before the work starts, the material is good, and the house is left clean. A crisp cobalt-on-white identity with an Archivo / Inter type system carries a hero paired with a receipt-style "what's included" spec card — the signature element that itemizes exactly what a standard install covers — followed by a numbered service grid, a plain three-step "how it works" flow, two five-star Google quotes, and a WhatsApp-first contact block with payment methods and 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 metricsA receipt-style "what's included" card itemizing a standard install
Message → closed quote → scheduled day — no surprises, stated plainly
Installation, preventive maintenance, cleaning & filter, and repair
Self-contained single HTML file — zero dependencies, zero build step
Problem statement
An installer whose whole pitch is trust — a closed price, good material, a clean job — needed a page that proves those claims instead of just asserting them. The answer had to make the intangible ("we won't surprise you") tangible, and route to WhatsApp, all as a single instant-loading HTML file.
"Trust me" is the weakest possible sales line — the promises of a closed quote and quality material needed to be shown as concrete, itemized deliverables
Customers fear the hidden-cost surprise and the messy install — the page had to pre-empt both anxieties visibly
The buying process had to feel simple and low-risk, removing any fear of commitment before a quote
The primary channel is WhatsApp, so every CTA needed to open a chat with a pre-filled message
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
- 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 crisp cobalt-on-white identity and an Archivo / Inter type system. The signature is a receipt-style "what's included" spec card that itemizes a standard install with check ticks, making trust concrete. It sits beside a hero, above a numbered service grid, a plain three-step process, five-star testimonials, and WhatsApp-first CTAs with a fixed mobile bar.
Included-Spec Card
The signature element: a receipt-style card with a dark header ("what's included / standard install") and four check-ticked line items — visit & measurement, quality material, organized install, test in front of you — turning the trust pitch into an itemized deliverable
Trust-First Hero
An Archivo headline leads with the closed-quote promise ("a closed quote before the work starts") on a clean white base, paired with the spec card and WhatsApp / call CTAs above the fold
Numbered Services & 3-Step Flow
A hairline-divided service grid numbered 01–04, followed by a plain three-step "how it works" flow (message → closed quote → scheduled day) that removes commitment fear before a quote
WhatsApp-First CTAs
Every action is a wa.me deep link with a context-specific pre-filled message, plus tel: links and a listed set of payment methods, with a fixed bottom action bar pinned on mobile that 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.
Decide to prove the trust pitch — closed price, good material, clean job — with concrete itemized deliverables instead of adjectives
Define the crisp cobalt-on-white identity and the Archivo / Inter type system
Build the trust-first hero leading with the closed-quote promise, paired with the spec card and WhatsApp / call CTAs
Author the receipt-style "what's included" card with check-ticked line items for a standard install
Add the numbered service grid and the plain three-step "how it works" flow, plus two five-star Google quotes
Wire every CTA to a pre-filled WhatsApp deep link, list payment methods, pin the fixed mobile bar, and export as one .html file
Project journey
Key milestones and phases throughout the project lifecycle.
Make Trust Tangible
Framed the whole page as proof of a trust pitch — a closed price, good material, a clean install — rather than a list of adjectives
Crisp Cobalt on White
Established the bright cobalt-on-white identity and the Archivo / Inter type system for a precise, contract-like feel
Hero & Spec Card
Built the trust-first hero and the receipt-style "what's included" spec card with check-ticked line items
Services & 3-Step Flow
Assembled the numbered 01–04 service grid, the plain three-step process, and two five-star Google quotes
WhatsApp CTAs & Mobile
Wired every CTA to a pre-filled WhatsApp message, listed payment methods, pinned the fixed mobile bar, and exported the single-file page
Make Trust Tangible
Framed the whole page as proof of a trust pitch — a closed price, good material, a clean install — rather than a list of adjectives
Crisp Cobalt on White
Established the bright cobalt-on-white identity and the Archivo / Inter type system for a precise, contract-like feel
Hero & Spec Card
Built the trust-first hero and the receipt-style "what's included" spec card with check-ticked line items
Services & 3-Step Flow
Assembled the numbered 01–04 service grid, the plain three-step process, and two five-star Google quotes
WhatsApp CTAs & Mobile
Wired every CTA to a pre-filled WhatsApp message, listed payment methods, 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.