Pardal Air Conditioning — Photo-Log Service Landing Page
A single-file HTML landing page for Pardal Ar Condicionado, an installation, maintenance, and deep-cleaning service in Nova Esperança (PR). Air-conditioning work happens behind the unit, inside the wall, and on the roof — places the customer never sees — so the page turns that blind spot into the offer: you get photos of each phase in your WhatsApp, even if you are not home. The signature is a four-frame record strip (before, during, finish, test) built from pure-CSS placeholder frames with a diagonal-stripe pattern and oversized ghost numerals, explicitly labeled in the footer as reserved space for real job photos. A paper-gray canvas with a single strong blue, a Manrope / Inter type system, a 5.0-star / 70-review badge, three five-star Google quotes, a three-service grid, and WhatsApp-first CTAs with a fixed mobile bar complete the page. Zero dependencies, zero build step, one self-contained file, built from public Google Maps information as a demonstration.
Project metrics
4 key metricsBefore, during, finish, and test — the photo log that anchors the whole page
Customers who live away or work all day track the job from WhatsApp
70 reviews on Google, all five stars — the largest review count in the set
Self-contained single HTML file — no dependencies, no build step
Problem statement
The service's real differentiator — photographing every phase and sending it over WhatsApp — is a process, not a product, and processes are invisible on a landing page. It had to be shown, not claimed, on a demonstration page with no real job photos available, while proving a 70-review perfect rating and routing every visitor to WhatsApp as one self-contained HTML file.
The differentiator is a process — photos of every phase — which is invisible unless the page makes it visual
Air-conditioning work happens where the customer cannot see it: behind the unit, inside the wall, on the roof
A large share of clients live away or work all day, so "follow along remotely" is the actual value being sold
The demonstration had to show the photo-log layout without real job photos, and say so honestly
A 5.0-star / 70-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, no image assets
- 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, labeled as not the official site, with the image areas declared as placeholders for real photos
Approach & modules
A single-file landing page on a paper-gray canvas with a single strong blue and a Manrope / Inter type system. The signature is a four-frame service record — before, during, finish, test — rendered entirely in CSS: aspect-ratio frames with a diagonal-stripe pattern and oversized ghost numerals stand in for real job photos. A three-service grid, a 5.0-star / 70-review badge, three five-star Google quotes, and a WhatsApp-first contact block with a fixed mobile bar complete the page.
Four-Frame Service Record
The signature element: a four-up strip of framed placeholders (01 before, 02 during, 03 finish, 04 test) that shows what the customer receives during the job. Each frame is pure CSS — a fixed 4:3 aspect-ratio box with a repeating diagonal-stripe overlay and an oversized ghost numeral — so the layout communicates without a single image file
Remote-Client Promise
The strip closes with a blue-ruled note aimed at the real audience: clients who live away or work all day receive everything on WhatsApp and follow the job from a distance — the offer stated as a benefit, not a feature
Honest Placeholder Labeling
The footer states plainly that the image areas are reserved space for real photos of the work, alongside the demonstration and noindex disclosure — the page never passes stand-in graphics off as job documentation
Three-Service Grid & Proof
Installation, deep cleaning, and maintenance as three carded services in plain language, a 5.0★ / 70-review badge above the headline, and three five-star Google quotes — with every CTA a wa.me deep link and a fixed bottom bar on mobile
System design
Single-file delivery with no build step and no runtime dependencies beyond Google Fonts — and no image assets at all. HTML and CSS custom properties live in one document; the photo frames are generated with aspect-ratio, a repeating-linear-gradient stripe overlay, and a ghost numeral, so the entire page ships as one text file.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Identify the blind spot — the work happens where the customer cannot see — and make the photo log the page's central promise
Define the paper-gray canvas with a single strong blue and the Manrope / Inter type system
Build the four-frame service record in pure CSS with stripe-patterned placeholders and ghost numerals
Lay out the three carded services and the 5.0★ / 70-review proof badge with three Google quotes
Declare the placeholder image areas and the demonstration status explicitly in the footer
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.
Sell What Is Never Seen
Framed the service's blind spot — work done behind the unit, inside the wall, on the roof — and made the phase-by-phase photo log the page's central promise
Paper Gray & One Blue
Established the paper-gray canvas with white cards, a single strong blue for action, and the Manrope / Inter type system
The Service Record
Built the four-frame record strip entirely in CSS — aspect-ratio frames, a diagonal-stripe overlay, and oversized ghost numerals standing in for real job photos
Services & Proof
Assembled the three-service grid, the 5.0★ / 70-review badge, and three five-star Google quotes as carded testimonials
Disclosure & Mobile
Declared the placeholder frames and demonstration status in the footer, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
Sell What Is Never Seen
Framed the service's blind spot — work done behind the unit, inside the wall, on the roof — and made the phase-by-phase photo log the page's central promise
Paper Gray & One Blue
Established the paper-gray canvas with white cards, a single strong blue for action, and the Manrope / Inter type system
The Service Record
Built the four-frame record strip entirely in CSS — aspect-ratio frames, a diagonal-stripe overlay, and oversized ghost numerals standing in for real job photos
Services & Proof
Assembled the three-service grid, the 5.0★ / 70-review badge, and three five-star Google quotes as carded testimonials
Disclosure & Mobile
Declared the placeholder frames and demonstration status in the footer, 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.