Alex Air Conditioning — Always-On Technician Landing Page
A single-file HTML landing page for Alex Ar Condicionado, a solo air-conditioning technician in Paiçandu (PR) who works every day — weekends and holidays included. The page is built around immediacy: a live status pill in the hero reads the visitor's clock in a few lines of vanilla JavaScript and shows "attending now · until 5pm" during business hours or an out-of-hours message otherwise, with a pulsing dot when open. A calm teal-on-paper identity with a Space Grotesk / Inter type system carries the hero, a dark "Saturday, Sunday and holidays too" band, a two-column service list, a strong 5.0-star / 28-review proof line, 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 (plus one tiny inline script) delivered from public Google Maps information as a demonstration.
Project metrics
4 key metricsA status pill computed in-browser from the clock — pulsing dot when attending now
Attends daily 9am–5pm, weekends and holidays included — the core pitch
28 reviews on Google, all five stars — shown as first-screen proof
Self-contained single HTML file plus one tiny inline script — no dependencies
Problem statement
A solo technician whose entire advantage is availability — he answers when everyone else is closed — needed a page that conveys "reachable right now" the instant it loads. The answer had to feel alive without a backend, prove a perfect 5.0 reputation, and route to WhatsApp, all as a single instant-loading HTML file.
The pitch is immediacy — "the AC broke today, fixed today" — but a static page cannot feel present or reachable-right-now on its own
The weekend-and-holiday availability is the differentiator, most valuable exactly when competitors are closed
A perfect 5.0-star / 28-review reputation had to appear as first-screen proof
The primary channel is WhatsApp, so every CTA needed to open a chat with a pre-filled, name-personalized message
The whole thing had to ship as one self-contained HTML file — any interactivity kept to a tiny inline script
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 — the live status is computed client-side and every conversion is a WhatsApp deep link or 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 calm teal-on-paper identity and a Space Grotesk / Inter type system. The signature is a live status pill: a tiny inline script reads the clock and renders "attending now · until 5pm" with a pulsing dot during hours, or an out-of-hours message otherwise. A dark weekend-availability band, a two-column service list, a perfect-rating proof line, testimonials, and WhatsApp-first CTAs with name-personalized messages and a fixed mobile bar complete the page.
Live Status Pill
The signature element: a status pill whose text and pulsing dot are set client-side from the visitor's clock — "attending now · until 5pm" with a live pulse during 9am–5pm, or a muted out-of-hours message ("opens at 9am" / "message me and I'll reply") otherwise — all in a few lines of vanilla JavaScript, no backend
Weekend-Availability Band
A dark full-bleed band that turns "Saturday, Sunday and holidays too" into the core differentiator — availability precisely when the AC breaks and most companies are closed
Solo-Technician Services
A two-column service list (installation, cleaning, preventive maintenance, repair) written in the first person, plus a perfect 5.0★ / 28-review proof line and three five-star Google quotes
Name-Personalized WhatsApp CTAs
Every action is a wa.me deep link with a pre-filled message that greets the technician by name ("Olá Alex!"), plus tel: links, and 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, CSS custom properties, and one small inline script (which sets the live status from the clock) live in one document — markup, styles, and the only piece of behavior 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: make the page feel reachable-right-now with a live clock-driven status pill instead of a static hours line
Define the calm teal-on-paper identity and the Space Grotesk / Inter type system
Write the tiny inline script that sets the status text and pulsing dot from the visitor's clock
Build the hero with the perfect 5.0★ / 28-review proof line and the dark weekend-availability band
Add the first-person two-column service list and three five-star Google quotes
Wire every CTA to a name-personalized 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.
Sell Immediacy
Framed a solo technician's whole advantage — reachable now, weekends included — and decided a live status pill would make "present" felt, not just stated
Calm Teal on Paper
Established the calm teal-on-paper identity and the Space Grotesk / Inter type system for an approachable, personal-technician feel
Hero & Live Status
Built the hero with the perfect-rating proof line and the live status pill driven by a tiny clock-reading inline script, with a pulsing dot when open
Weekend Band & Services
Assembled the dark weekend-availability band, the first-person two-column service list, and three five-star Google quotes
Personalized CTAs & Mobile
Wired every CTA to a name-personalized ("Olá Alex!") WhatsApp message, pinned the fixed mobile bar, and exported the single-file page
Sell Immediacy
Framed a solo technician's whole advantage — reachable now, weekends included — and decided a live status pill would make "present" felt, not just stated
Calm Teal on Paper
Established the calm teal-on-paper identity and the Space Grotesk / Inter type system for an approachable, personal-technician feel
Hero & Live Status
Built the hero with the perfect-rating proof line and the live status pill driven by a tiny clock-reading inline script, with a pulsing dot when open
Weekend Band & Services
Assembled the dark weekend-availability band, the first-person two-column service list, and three five-star Google quotes
Personalized CTAs & Mobile
Wired every CTA to a name-personalized ("Olá Alex!") 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.