Digiar Air Conditioning — Service Landing Page
A single-file HTML landing page for Digiar Ar Condicionado e Refrigeração, an air-conditioning installer in Sarandi (PR). The identity is dark and technical — a deep teal ("breu") base, an amber signal color, and a Barlow Condensed / Inter / JetBrains Mono type system that reads like an instrument panel. Its signature element is an animated "thermostat" card: a 34° → 22° reading with a gradient bar that visibly fills on a loop, dramatizing the before/after of a serviced unit. The page pairs a strong 4.9-star / 46-review proof badge with a four-service grid, a three-stat "why us" block, three Google-review quotes, and a WhatsApp-first contact flow with a fixed mobile action bar. Zero dependencies, zero build step — one self-contained file delivered from public Google Maps information as a demonstration.
Project metrics
4 key metrics46 reviews on Google — used as the first-screen proof badge
Animated thermostat card that fills a cooling bar on a CSS loop
Installation, cleaning & sanitizing, preventive maintenance, and repair
Self-contained single HTML file — zero dependencies, zero build step
Problem statement
A residential-and-commercial HVAC installer needed a shareable link that feels precise and trustworthy at a glance, and that dramatizes the one thing customers actually want — a hot room turned cold. The page had to carry a strong 4.9-star reputation up front and route every action to WhatsApp, all as a single instant-loading HTML file.
A generic services list does not convey the before/after value of a serviced unit — the cooling result needed a visual, not a sentence
The 4.9-star / 46-review reputation is a real asset and had to appear high on the page as social proof
The primary channel is WhatsApp, so every CTA needed to open a chat with a pre-filled message
On mobile, where most shared-link traffic lands, the conversion action had to stay pinned and reachable
The whole thing had to ship as one self-contained HTML file 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 dark, instrument-panel identity — deep teal, amber signal, and a condensed Barlow display over Inter body with JetBrains Mono for technical labels. The signature is an animated thermostat card that fills a cooling bar on a CSS loop, dramatizing 34° → 22°. Around it: a proof badge, a service grid, a three-stat "why us" block, testimonials, and WhatsApp-first CTAs with a fixed mobile bar.
Animated Thermostat
The signature card reads 34° (amber, outside) → 22° (ice-blue, inside) with a gradient progress bar that fills on a 3.4s CSS loop; a reduced-motion block freezes it full. Mono labels frame it like a live instrument readout
Reputation-First Hero
A condensed Barlow headline over the deep-teal base, with the 4.9★ / 46-review badge set in mono type as the first thing the eye reads, plus paired WhatsApp / call CTAs above the fold
Services & Why-Us
A four-card service grid (installation, cleaning, preventive maintenance, repair) with amber hover borders, followed by a three-stat block that turns "4.9 · 2 · 1" into reputation, residential+commercial reach, and one-visit resolution
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 a single keyframe animation 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 the signature: dramatize the cooling result with an animated 34° → 22° thermostat instead of describing it
Define the instrument-panel identity — deep teal base, amber signal — and the Barlow / Inter / JetBrains Mono type system
Build the reputation-first hero with the 4.9★ / 46-review mono badge and paired WhatsApp / call CTAs
Author the animated thermostat card with a CSS-loop cooling bar and reduced-motion fallback
Add the service grid, the three-stat why-us block, three Google-review cards, and the contact block
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.
Dramatize the Result
Chose to visualize the cooling result — a hot room turned cold — as the page signature, and led the hero with the real 4.9-star reputation
Instrument-Panel Identity
Established the deep-teal-and-amber palette and the Barlow Condensed / Inter / JetBrains Mono type system that frames data like a readout
Hero & Thermostat
Built the reputation-first hero and the animated thermostat card with a CSS-loop cooling bar and a reduced-motion fallback
Services, Why-Us & Proof
Assembled the four-service grid, the three-stat why-us block, three Google-review cards, and the contact block with map and coverage area
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
Dramatize the Result
Chose to visualize the cooling result — a hot room turned cold — as the page signature, and led the hero with the real 4.9-star reputation
Instrument-Panel Identity
Established the deep-teal-and-amber palette and the Barlow Condensed / Inter / JetBrains Mono type system that frames data like a readout
Hero & Thermostat
Built the reputation-first hero and the animated thermostat card with a CSS-loop cooling bar and a reduced-motion fallback
Services, Why-Us & Proof
Assembled the four-service grid, the three-stat why-us block, three Google-review cards, and the contact block with map and coverage area
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.