Só Ar — Equipment-Picker Refrigeration Landing Page
A single-file HTML landing page for Só Ar, a refrigeration and climate-control shop in Cianorte (PR) working on automotive air conditioning, truck cabs, thermoking and refrigerated boxes, and agricultural machine cabins. Four audiences with almost nothing in common share one page, so the signature is an equipment picker: a keyboard-navigable ARIA tablist where each tab rewrites the panel copy and the CTA's pre-filled WhatsApp message for that machine. A field-green and bone identity with one yellow signal, an Oswald / Work Sans / Roboto Mono type system, a six-service grid, a four-number proof strip, review themes from the public Google profile, 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 metricsCar, truck, refrigerated box, farm machine — the page's signature element
Each tab rewrites the CTA's pre-filled WhatsApp text
97 reviews on Google — shown in the four-number proof strip
Self-contained single HTML file — no dependencies, no build step
Problem statement
A fleet manager, a soybean farmer, and someone whose hatchback stopped cooling need completely different reassurance from the same page. It had to serve all four audiences without diluting into a generic "we do everything" pitch, and route each one into WhatsApp with the right message already written — as one self-contained HTML file.
Four audiences — passenger cars, trucks, refrigerated transport, and farm machinery — share one shop but not one concern
A generic list of everything the shop does convinces nobody in particular
The stakes differ sharply: a warm cabin annoys, a warm refrigerated box ruins the cargo, a broken tractor cab stops the harvest
Writing four separate pages was out of scope; the single page had to adapt
A 4.9-star / 97-review reputation had to appear as 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 machine-specific 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 field-green base with a bone body and one yellow signal. The signature is a four-tab equipment picker in the hero: selecting car, truck, refrigerated box, or farm machine rewrites the panel title, the description, and the CTA's WhatsApp message. A six-service grid covering fleets and rural operations, a four-number proof strip, and review themes complete the page.
The Equipment Picker
The signature element: four tabs with inline SVG machine icons, built as a proper ARIA tablist with aria-selected state and arrow-key roving focus. Each selection swaps the panel heading and body copy and rewrites the CTA href with an encodeURIComponent-built WhatsApp message specific to that machine, so the visitor self-selects and the shop receives the context
Four Audiences, One Page
Copy written per machine addresses what each owner actually fears: a tiring cabin on a long haul, cargo warming up before delivery, an operator who has to sit inside the machine all day during harvest. The stakes change with the equipment, and the panel text changes with them
Field Green & Yellow
A deep field-green hero with a diagonal repeating-linear-gradient texture, a bone page body, and one yellow signal for action and tabs. Oswald carries the uppercase display, Work Sans the body, and Roboto Mono the micro-labels — an agricultural-machinery register rather than a consumer-electronics one
Services, Proof & WhatsApp CTAs
A hairline six-service grid (cooling diagnosis, refrigerant charge, thermoking and box maintenance, farm-cabin work, compressor and condenser replacement, scheduled fleet preventives), a four-number strip with the 4.9★ / 97-review rating and hours, four review themes on yellow-ruled cards, and a contact block — every CTA a wa.me deep link, plus a fixed bottom action bar on mobile that hides at 780px
System design
Single-file delivery with no build step and no runtime dependencies beyond Google Fonts. The palette and type scale are CSS custom properties in one document. The only JavaScript is the picker: a small data object holds the four machines' titles, descriptions, and WhatsApp messages, and a select function toggles aria-selected, swaps text nodes, and rebuilds the CTA href with encodeURIComponent — with keydown handlers implementing arrow-key roving focus across the tablist.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Accept the four-audience reality and design the page to adapt instead of generalize
Define the field-green and bone identity with one yellow signal and the Oswald / Work Sans / Roboto Mono type system
Build the four-tab ARIA tablist with SVG icons, roving arrow-key focus, and per-machine copy and CTA rewriting
Write the four machine-specific panels around what each owner actually stands to lose
Lay out the hairline six-service grid, the four-number proof strip, and the 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.
One Page, Four Machines
Decided the page would let visitors self-select their equipment rather than average four audiences into one generic pitch
Field Green & Yellow
Established the field-green hero with diagonal texture, the bone body, one yellow signal, and the Oswald / Work Sans / Roboto Mono system
The Picker
Built the four-tab ARIA tablist with inline SVG icons, roving arrow-key focus, and per-machine copy plus CTA message rewriting
Services & Proof
Assembled the hairline six-service grid spanning fleets and rural work, the four-number proof strip, and the 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
One Page, Four Machines
Decided the page would let visitors self-select their equipment rather than average four audiences into one generic pitch
Field Green & Yellow
Established the field-green hero with diagonal texture, the bone body, one yellow signal, and the Oswald / Work Sans / Roboto Mono system
The Picker
Built the four-tab ARIA tablist with inline SVG icons, roving arrow-key focus, and per-machine copy plus CTA message rewriting
Services & Proof
Assembled the hairline six-service grid spanning fleets and rural work, the four-number proof strip, and the 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.