Page demos

Every page, side by side.

Four full-page compositions assembled from the section catalog. The flagship homepage plus three service-line landings — heating, plumbing, electrical. Each one is standalone-runnable: open it in a browser and it should look complete.

Gallery

Four pages.

Click any card to open the full page. Each composition leans only on tokens and components from _shared.css.

Homepage hero — Genz-Ryan techs

Homepage

Tri-color hero with "I Love These Guys" stamp · 4-trade service grid · Twin Cities map heritage · 5-step process · "I Love These Guys" block · value tiles · coupon · reviews · CTA band.
Heating landing — tech by van

Landing 1 · Heating

When your furnace quits, we don't. Page hero with red emergency CTAs · 4 value tiles · tune-up coupon · 3-tier pricing · 5-step process · "I Love These Guys" · FAQ · CTA band.
Plumbing landing — Minneapolis experts

Landing 2 · Plumbing

Water in the wrong place? Master-plumber backed. Page hero · 4 value tiles · water-heater coupon · 6-cell expertise matrix · 5-step process · family heritage map · FAQ · CTA band.
Electrical service-category landing

Landing 3 · Electrical (parent template)

Service-category parent — matches live /electrical/ 1:1. Breadcrumb · .hero-serv-lp with 7 sub-service cards · two-col content-form lead capture · guarantee band · two-col-reversed family heritage · 30-city service-areas grid · 3-up articles feed · 5-Q FAQ · image-led CTA banner.
Electrical Repair service-detail landing

Landing 3a · Electrical Repair (child template)

Service-detail child — matches live /electrical/repair/ 1:1. Breadcrumb · .hero-single (2 highlights + yellow Book Appointment) · content-form lead capture · .two-col-full with 4-item .service-menu-list · 8-card .reviews-carousel with scroll-snap · two-col-reversed credentials · service-areas grid · articles feed · repair FAQ · CTA banner.
Reference System Overview

Index · System overview

The kit's front door. File list, characterizations, voice anchors, forbidden moves, mood keywords. Read first.
Reference Design System

Design System · Tokens + components

Every color (4-swatch tri-tone + ink/bg), type spec, button variant, card, signature pattern. The kitchen-sink reference page.
Catalog Sections

Sections · Pattern catalog

Every reusable block rendered in Genz-Ryan's voice with real copy. TOC sidebar for jumping between patterns.
Source Brand Spec

Brand spec · Markdown source

Source-of-truth narrative. Voice anchors verbatim, color tokens with semantic mapping, signature patterns, forbidden moves, mood keywords.