KS Soluções — Electrical & HVAC Renovation Landing Page
A single-file HTML landing page for KS Soluções, an electrical and air-conditioning contractor in Marialva (PR) that works 24 hours a day. The pitch is that one team handles both trades and follows the build from the first outlet drawing to the final finish, talking to the drywall, cabinetry, and construction crews along the way. The page turns that into a numbered four-stage track — planning, electrical execution, site coordination, install and finish — that answers the renovating homeowner's real question: when do I call these people? A restrained editorial identity of navy on white with a single copper signal, a Fraunces serif display with italic accents over an Inter body, a 5.0-star / 43-review proof line, three Google quotes, a 24-hour availability band, 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 metricsElectrical and air conditioning handled by the same crew — the core differentiator
A numbered track showing exactly where the contractor enters a renovation
Round-the-clock service, Monday through Saturday — a full-bleed band on the page
43 reviews on Google, all five stars — shown as first-screen proof
Problem statement
A contractor who covers two trades at once had a real advantage that reads as a bland list on most local-business sites. The page had to make "we plan the electrical before the wall closes" feel valuable to someone mid-renovation, prove a perfect 5.0 reputation, sell 24-hour availability, and route every visitor to WhatsApp — as one instantly-loading HTML file.
The differentiator is sequencing, not a service list: the electrical has to be planned before the wall closes, and a static bullet list cannot convey that
The audience is mid-renovation and anxious about rework — the page had to name that fear and answer it
Coordination with the drywall, cabinetry, and construction crews is invisible work that had to be made explicit
24-hour availability is a second differentiator that deserved its own moment rather than a line in the footer
A perfect 5.0-star / 43-review reputation had to appear as first-screen proof, and every CTA had to open 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 or a 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 restrained editorial identity — navy on white with one copper signal, a Fraunces serif display with italic accents over an Inter body. The signature is a numbered four-stage renovation track that places the contractor inside the build timeline instead of listing services. A 24-hour availability band, a four-service grid, a 5.0-star proof line with three Google quotes, and a WhatsApp-first contact block with a fixed mobile bar complete the page.
Four-Stage Renovation Track
The signature element: a numbered vertical track — planning, electrical execution, coordination with the site crews, install and finish — introduced by the fear it removes ("badly planned wiring shows up later, when the wall is already closed"). It answers when to call rather than what is sold
Two-Trades Positioning
The hero states the whole pitch in one line — "from the wiring to the cold air, with one person" — with an italic copper accent on the differentiator, a live availability pill, and the 5.0★ / 43-review proof line directly beneath it
24-Hour Availability Band
A full-bleed navy band that gives round-the-clock service its own moment: electrical faults and dead units do not pick an hour, so the page says so in the visitor's own words
WhatsApp-First Contact Block
A bordered info table (WhatsApp, hours, address with a Google Maps link, service area) followed by a wa.me CTA carrying a pre-filled message, plus a fixed bottom action bar 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 and CSS custom properties live in one document — markup and styles co-located for instant render and maximum portability, with a fluid clamp()-based type scale and a single 760px breakpoint carrying the whole responsive layout.
Process visualization
Step-by-step workflow showing how data and operations flow through the system.
Reduce two trades to one promise — the same team from the wiring to the cold air — and lead the hero with it
Define the editorial navy-on-white identity with one copper signal and the Fraunces / Inter type system
Build the signature four-stage renovation track and frame it with the rework fear it removes
Lay out the four-service grid and give 24-hour availability its own full-bleed band
Add the 5.0★ / 43-review proof line and three five-star Google quotes as copper-ruled blockquotes
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 Team, Two Trades
Framed the contractor's real advantage — electrical and air conditioning by the same crew, planned before the wall closes — as the single message the whole page would carry
Editorial Navy & Copper
Established the restrained navy-on-white identity with one copper signal and the Fraunces serif / Inter body pairing for a considered, professional feel
The Renovation Track
Built the numbered four-stage track that places the contractor inside the build timeline, introduced by the rework fear it removes
Services & 24-Hour Band
Assembled the four-service grid, the full-bleed 24-hour availability band, and the three copper-ruled Google quotes
Contact & Mobile
Built the bordered contact table with a Maps link, wired the WhatsApp deep links, pinned the fixed mobile bar, and exported the single-file page
One Team, Two Trades
Framed the contractor's real advantage — electrical and air conditioning by the same crew, planned before the wall closes — as the single message the whole page would carry
Editorial Navy & Copper
Established the restrained navy-on-white identity with one copper signal and the Fraunces serif / Inter body pairing for a considered, professional feel
The Renovation Track
Built the numbered four-stage track that places the contractor inside the build timeline, introduced by the rework fear it removes
Services & 24-Hour Band
Assembled the four-service grid, the full-bleed 24-hour availability band, and the three copper-ruled Google quotes
Contact & Mobile
Built the bordered contact table with a Maps link, 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.