THS Refrigeration — Message-Composer Landing Page
A single-file HTML landing page for THS Refrigeração e Climatização, a washing-machine, refrigerator, and air-conditioning repair service in Rolândia (PR). Its positioning is the second opinion: much of what arrives has already been declared beyond repair by another technician. The signature is a message composer — appliance and symptom dropdowns that write a natural-sounding sentence into a live chat bubble and rebuild the WhatsApp link as you choose, with a concordance fix so "meu"/"minha" agree with the appliance. A powder-blue and navy identity with a cherry accent, a Fraunces / Nunito Sans type system, a six-card repair grid, a second-opinion block, review themes, 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 metricsAppliance + symptom build a live WhatsApp message — the signature element
Built for appliances another technician already gave up on
60 reviews on Google — shown in the navy proof strip
Self-contained single HTML file — no dependencies, no build step
Problem statement
A WhatsApp-first page still asks the visitor to write the first message, and a blank chat is where leads quietly disappear. The page had to compose that message for them, and at the same time make the case for a second opinion on an appliance someone already declared dead — as one self-contained HTML file with no backend.
The last step before conversion is the hardest one: knowing what to type in an empty chat
Vague first messages ("hi, is anyone there?") cost a round trip before the shop knows anything useful
The real differentiator is subtle — finding faults other technicians missed — and easy to state unbelievably
Three appliance families (washing machines, refrigerators, air conditioning) share one page and one voice
A 5.0-star / 60-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 — the composer only builds a wa.me deep link; nothing is stored or submitted anywhere
- 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 powder-blue canvas with a navy structure and a cherry accent. The signature is a message composer: two dropdowns — appliance and symptom — write a natural sentence into a navy chat bubble labeled "this is how it will arrive" and rebuild the WhatsApp link on every change. A second-opinion block, a six-card repair grid, a proof strip, and review themes complete the page.
The WhatsApp Message Composer
The signature element: two native selects (appliance, symptom) feed a function that assembles the sentence, applies a small Portuguese concordance fix so masculine appliances read "Meu" instead of "Minha", renders the result in a live chat bubble, and rewrites the send link with encodeURIComponent. The visitor sees exactly what the shop will receive before tapping send
The Second-Opinion Argument
A navy block asks the question directly — "already been told yours is beyond repair?" — and reframes the economics: the cost of finding out is far lower than the cost of replacing wrongly. It carries its own CTA with a dedicated pre-filled message, and the composer offers the same case as a symptom option ("already went to another technician and it was not solved")
Powder Blue & Cherry
A powder-blue canvas with white cards, a navy structure for the header, proof strip, and chat bubble, and a cherry accent reserved for action and the hero italic. Fraunces carries the display with an italic cut on the headline, Nunito Sans the body — a warm, domestic register that fits kitchen and laundry appliances rather than industrial equipment
Repairs, Proof & WhatsApp CTAs
A six-card grid (washing machines, refrigerators and freezers, split installation, air-conditioning sanitizing, parts sourced from Londrina when the city has none, quotes before authorization), a navy proof strip with the 5.0★ / 60-review rating, four review themes, and a contact block with address and coverage — 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, radii, and type scale are CSS custom properties in one document; the select chevron is an inline SVG data URI so no image file ships. The only JavaScript is the composer: change handlers on two selects rebuild a sentence, apply the concordance correction, write it into the preview bubble, and set the anchor href with encodeURIComponent — nothing is stored, sent, or persisted.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Lead with the second opinion — the differentiator hidden in the reviews — instead of a generic repair pitch
Define the powder-blue and navy identity with a cherry accent and the Fraunces / Nunito Sans type system
Build the two-select message composer with the live preview bubble, the concordance fix, and the encoded wa.me link
Write the navy block that reframes the cost of finding out versus the cost of replacing wrongly
Lay out the six-card repair grid, the proof strip, and the four 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.
Write The First Message
Decided the page would compose the visitor's opening WhatsApp message instead of leaving them in front of an empty chat
Powder Blue & Cherry
Established the powder-blue canvas, navy structure, cherry accent, and the Fraunces / Nunito Sans type system with an italic hero cut
The Composer
Built the two-select composer with the live chat-bubble preview, the Portuguese concordance fix, and the encodeURIComponent-built send link
Second Opinion & Repairs
Wrote the second-opinion block with its own CTA, laid out the six-card repair grid, the 5.0★ / 60-review 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
Write The First Message
Decided the page would compose the visitor's opening WhatsApp message instead of leaving them in front of an empty chat
Powder Blue & Cherry
Established the powder-blue canvas, navy structure, cherry accent, and the Fraunces / Nunito Sans type system with an italic hero cut
The Composer
Built the two-select composer with the live chat-bubble preview, the Portuguese concordance fix, and the encodeURIComponent-built send link
Second Opinion & Repairs
Wrote the second-opinion block with its own CTA, laid out the six-card repair grid, the 5.0★ / 60-review 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.