Climatec — Height-Access HVAC Landing Page
A single-file HTML landing page for Climatec, an air-conditioning company in Maringá (PR) that installs and services units at any height via rope access — no scaffolding, no rented platform. That genuine differentiator drives everything: the hero claims "we install where scaffolding can't reach," and the signature element is a vertical "reach scale" that climbs from house-and-ground-floor through townhouse balcony and residential building up to commercial-tower facade maintenance. An industrial concrete-and-orange identity with an Oswald / Inter type system carries a strong 4.7-star / 93-review badge, a numbered service grid (including height installation), a three-audience block (homes, businesses, condos), 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 metricsInstallation and service at height via rope access — no scaffolding, no platform
A vertical scale from ground floor to commercial-tower facade
93 reviews on Google — the largest review count in the set
Self-contained single HTML file — zero dependencies, zero build step
Problem statement
Unlike a generic installer, Climatec has a genuine capability edge — rope-access installation at height — that most competitors simply cannot offer. The page had to make that edge the entire story, prove it with a strong 93-review reputation, and route to WhatsApp, all as a single instant-loading HTML file.
The rope-access capability is the real differentiator, but it is invisible in a generic "we install AC" services list — it needed to be the headline and a visual
The value only lands if the visitor immediately grasps the range of heights served, from a house wall to a tower facade
A strong 4.7-star / 93-review reputation — the largest in the set — had to appear as first-screen proof
Three distinct audiences (homes, businesses, condominiums) needed to see themselves addressed
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 an industrial concrete-and-orange identity and an Oswald / Inter type system. The hero leads with the rope-access edge; the signature is a vertical "reach scale" — a timeline-like axis with orange nodes — that climbs from ground floor to tower facade, making the range of served heights instantly legible. A numbered service grid, a three-audience block, five-star testimonials, and WhatsApp-first CTAs with a fixed mobile bar complete the page.
Vertical Reach Scale
The signature element: a vertical axis with orange node markers that climbs through four levels — house/ground floor, townhouse balcony, residential building (rope access on the facade), and commercial tower — making the rope-access edge legible at a glance
Edge-First Hero
An Oswald display headline claims "we install where scaffolding can't reach" on an industrial concrete base, with the 4.7★ / 93-review badge and paired WhatsApp / call CTAs above the fold
Services & Three Audiences
A numbered 01–04 service grid that includes height installation, plus a three-card audience block addressing homes, businesses, and condominiums so each visitor sees themselves served
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 pure-CSS vertical axis 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 genuine capability edge — rope-access installation at height — and make it the entire story
Define the industrial identity — concrete base, orange signal — and the Oswald / Inter type system
Build the edge-first hero with the 4.7★ / 93-review badge and paired WhatsApp / call CTAs
Author the vertical reach scale — a pure-CSS axis with orange nodes — from ground floor to tower facade
Add the numbered service grid and the three-audience block (homes, businesses, condos), plus three 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.
Own the Height Niche
Made the genuine rope-access capability the whole story instead of one line in a generic services list, and led with the 93-review reputation
Industrial Concrete & Orange
Established the concrete-and-orange industrial identity and the Oswald / Inter type system that fits work-at-height and technical trust
Hero & Reach Scale
Built the edge-first hero and the vertical reach scale — a pure-CSS axis with orange nodes climbing from ground floor to tower facade
Services & Audiences
Assembled the numbered 01–04 service grid including height installation, the three-audience block, 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
Own the Height Niche
Made the genuine rope-access capability the whole story instead of one line in a generic services list, and led with the 93-review reputation
Industrial Concrete & Orange
Established the concrete-and-orange industrial identity and the Oswald / Inter type system that fits work-at-height and technical trust
Hero & Reach Scale
Built the edge-first hero and the vertical reach scale — a pure-CSS axis with orange nodes climbing from ground floor to tower facade
Services & Audiences
Assembled the numbered 01–04 service grid including height installation, the three-audience block, 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.