Gustavo Automotive A/C — Vent-Temperature Landing Page
A single-file HTML landing page for Gustavo Ar Condicionado Automotivo, a car air-conditioning specialist in Mandaguaçu (PR). The page answers one complaint — "it blows warm air" — and its signature is a dark instrument panel that animates the vent reading from 46°C down to 5°C, with a gradient scale, a moving pin, and a state label that shifts from "Aquecido" to "Resfriando" to "Gelando". Around it sit a four-step service flow (symptom, on-vehicle test, plain-language quote, final measurement in front of the customer), a six-service grid, a 4.9-star / 110-review proof bar, and review themes drawn from the public Google profile. Concrete and ink with one signal blue, an Archivo / Barlow / Barlow Condensed type system, WhatsApp-first CTAs, and a fixed mobile bar. Zero dependencies, zero build step, one self-contained file, built from public Google Maps information as a demonstration.
Project metrics
4 key metricsAnimated temperature readout — the page's signature element
Symptom, on-vehicle test, plain-language quote, final measurement with the customer present
110 reviews on Google — shown as a proof bar right under the hero
Self-contained single HTML file — no dependencies, no build step
Problem statement
A driver with a warm car does not want a service menu — they want to know why it stopped cooling and what it will cost. The page had to dramatize the outcome in the first screen, explain that "not cooling" is three different problems with three different prices, and route every conversion to WhatsApp as one self-contained HTML file.
The complaint is always the same sentence — "it blows warm air" — but the cause can be low refrigerant, a dirty filter, or a leak
Those three causes carry three very different prices, so quoting before diagnosing would be dishonest
The promise is physical, not verbal: the page had to show cold air rather than claim it
Drivers arrive on mobile from a Google Maps listing, often already parked somewhere hot
A 4.9-star / 110-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 with a pre-filled message
- 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 concrete-and-ink base with one signal blue. The signature is a dark dashboard panel that animates the vent reading from 46°C to 5°C when it scrolls into view, with a gradient scale, a moving pin, and a live state label. A numbered four-step service flow makes the diagnosis-before-price promise concrete, a six-service grid covers the work, and a 4.9-star / 110-review bar carries the proof.
The Animated Vent Panel
The signature element: a dark instrument panel whose temperature counts down from 46°C to 5°C on an eased requestAnimationFrame ramp, with a pin sliding along a cold-to-hot gradient scale and a state label switching between "Aquecido", "Resfriando" and "Gelando". An IntersectionObserver defers the run until the panel is on screen; prefers-reduced-motion renders the cold end immediately with no animation
Diagnosis Before Price
A numbered four-step flow — send the symptom, on-vehicle pressure and temperature test, plain-language explanation with the amount, then a final measurement taken with the customer standing there. The panel footnote names the three possible causes and their different costs, which is what makes the "no work starts before you agree" line credible
Concrete & Signal Blue
A concrete surface with ink-black structure and a single blue signal reserved for action, plus a rust accent for kickers. Archivo carries the heavy display, Barlow the body, and Barlow Condensed the uppercase micro-labels — an industrial, workshop-floor system rather than a consumer one
Services, Proof & WhatsApp CTAs
A hairline six-service grid (gas charge, leak repair, sanitizing, cabin filter, compressor and condenser), a proof bar with the 4.9★ / 110-review rating and hours, a four-cell block of recurring review themes, and a bordered contact list — 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. The palette, the hairline rules, and the fluid clamp() type scale are all CSS custom properties in one document. The only JavaScript is the vent-panel ramp: an eased requestAnimationFrame loop started by an IntersectionObserver, with a reduced-motion guard that skips straight to the final value.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Lead with the outcome the driver wants — cold air — instead of a list of shop services
Define the concrete-and-ink industrial system with one signal blue and the Archivo / Barlow type pairing
Build the animated 46° → 5° readout with the gradient scale, moving pin, live state label, and reduced-motion fallback
Write the numbered four-step flow that puts diagnosis and an agreed price before any work
Assemble the 4.9★ / 110-review bar, the six-service grid, and the recurring review themes
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.
Show The Cold
Decided the hero would demonstrate the result physically — a falling temperature — rather than describe the service in words
Concrete & Signal Blue
Established the concrete surface, ink structure, single blue signal, and the Archivo / Barlow / Barlow Condensed type system
The Vent Panel
Built the animated readout with an eased rAF ramp, gradient scale, sliding pin, live state label, IntersectionObserver trigger, and reduced-motion fallback
Flow & Services
Laid out the numbered four-step service flow, the six-service grid, and the 4.9★ / 110-review proof bar with recurring review themes
Contact & Mobile
Built the contact block with address, hours, and service area, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Show The Cold
Decided the hero would demonstrate the result physically — a falling temperature — rather than describe the service in words
Concrete & Signal Blue
Established the concrete surface, ink structure, single blue signal, and the Archivo / Barlow / Barlow Condensed type system
The Vent Panel
Built the animated readout with an eased rAF ramp, gradient scale, sliding pin, live state label, IntersectionObserver trigger, and reduced-motion fallback
Flow & Services
Laid out the numbered four-step service flow, the six-service grid, and the 4.9★ / 110-review proof bar with recurring review themes
Contact & Mobile
Built the contact block with address, hours, and service area, 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.