NATIN Air Conditioning — Seven-Day Availability Landing Page
A single-file HTML landing page for NATIN Ar Condicionado, an installation and maintenance service in Astorga (PR) that works seven days a week, from 8am to 9pm. The differentiator is availability, so the page makes it verifiable instead of decorative: a horizontal day-ruler renders the open window as an amber band and drops a live marker at the visitor's current time, updating every minute, with the status pill and the ruler label rewriting themselves as the day moves. A night-blue and cream identity with an amber signal, a Sora / Karla / JetBrains Mono type system, a six-service grid, a three-number band, review themes from the public Google profile, 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 metricsLive marker positioned from the visitor's clock — the page's signature element
Every day of the week, holidays included — the differentiator the page is built on
A perfect rating on Google, shown in the number band under the hero
Self-contained single HTML file — no dependencies, no build step
Problem statement
"We are open every day" is a line every listing carries and nobody checks. The page had to make the schedule provable at a glance — including at 8pm on a Sunday, which is exactly when this differentiator matters — while staying one self-contained HTML file with every conversion on WhatsApp.
Availability only sells at the moment it is needed: a broken unit on a Sunday night, not a Tuesday afternoon
A written "8am to 9pm, every day" is invisible — visitors skim past opening-hours text
The visitor needs to know if it is worth messaging right now, before they type anything
A perfect 5.0 rating had to be present without turning the page into a wall of testimonials
The whole page had to work with no backend and no clock other than the visitor's own device
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 night-blue hero with a cream body and one amber signal. The signature is a live day-ruler: the 8am–9pm window is drawn as an amber band, a marker sits at the visitor's current time and updates every minute, and the status pill above it rewrites between "open now · closes at 9pm" and "opens at 8am". A six-service grid, a three-number band, and review themes complete the page.
The Live Day Ruler
The signature element: a horizontal track where the open window is an amber gradient band and a cream marker — labeled with the actual current time — sits at today's position, clamping to the edges and dimming when the shop is closed. A setInterval refreshes it every minute, and the same tick rewrites the weekday label, the status line, and the hero pill
Availability As The Offer
The headline is written for the worst moment ("broke at 8pm on a Sunday?"), the chips under the ruler name the coverage (every day, holidays too, Astorga and nearby towns), and the number band states the schedule as arithmetic: 13 hours a day, 7 days a week. The claim is repeated as data, not adjectives
Night Blue & Amber
A deep night-blue hero with a soft radial amber glow, a cream page body, and a violet used only for off-hours states. Sora carries the headlines, Karla the body, and JetBrains Mono the uppercase micro-labels — a modern service identity that still reads clearly at 2am on a phone
Services, Proof & WhatsApp CTAs
A six-card service grid (new split install, urgent no-cooling calls, sanitizing, electrical point, refrigerant charge, removal and reinstall), a four-cell block of recurring review themes, and a contact list with address and coverage area — 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 and the fluid clamp() type scale live as CSS custom properties in one document. The only JavaScript is the ruler tick: a single function computes the open state from the visitor's Date, positions the marker as a percentage of the 8am–9pm window, and rewrites the day label, status line, and hero pill — re-run on a one-minute interval.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Turn the seven-day schedule from a line of fine print into the argument the whole page makes
Define the night-blue and cream identity with a single amber signal and the Sora / Karla / JetBrains Mono type system
Build the live ruler with the amber open band, the clock-driven marker, the minute tick, and the closed-state fallback
Lay out the six-card service grid and the three-number availability band
Assemble the recurring review themes from the public Google profile into a four-cell 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.
Prove The Calendar
Decided the page would demonstrate the schedule with a live instrument instead of stating opening hours in text
Night Blue & Amber
Established the night-blue hero with an amber radial glow, the cream body, and the Sora / Karla / JetBrains Mono type system
The Day Ruler
Built the horizontal ruler with the amber open band, a marker positioned from the visitor's clock, minute-by-minute updates, and dimmed off-hours state
Services & Numbers
Assembled the six-card service grid, the 5.0★ / 13-hours / 7-days number band, and the recurring review themes
Contact & Mobile
Built the contact block with address, hours, and coverage area, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Prove The Calendar
Decided the page would demonstrate the schedule with a live instrument instead of stating opening hours in text
Night Blue & Amber
Established the night-blue hero with an amber radial glow, the cream body, and the Sora / Karla / JetBrains Mono type system
The Day Ruler
Built the horizontal ruler with the amber open band, a marker positioned from the visitor's clock, minute-by-minute updates, and dimmed off-hours state
Services & Numbers
Assembled the six-card service grid, the 5.0★ / 13-hours / 7-days number band, and the recurring review themes
Contact & Mobile
Built the contact block with address, hours, and coverage 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.