A fictional Puget Sound residential and light commercial roofing contractor — Cascade Crest Roofing — built to argue that WordPress is the right stack for the local-trades request without the bundled-with-the-CRM marketing site every roofing company gets sold. Tenth demo on the platform and the second of the Tier 1 batch. Live at roofing.wp.philiprehberger.com.
The challenge
Local roofing contractors get sold on the bundled marketing site that came with their CRM at $200–400/month, or on a hosted “contractor website” service that ages badly. The market assumption is that trades sites need lead-capture maximizers, “starting at” pricing, and badge-of-the-month trust signals — not a credible technical description of what the company actually does. That assumption produces the worst contractor sites on the web, the ones where every page is some variation of “GET YOUR FREE QUOTE” and the only differentiation between any two firms is the photo of the truck.
The narrative confuses “homeowner shopping for a re-roof” with “homeowner in a panic during a windstorm.” For the former — which is most of the work a roofing company actually wants — the right site looks more like a credible technical brochure than a lead funnel: what the firm does, what the firm refuses to do, the specific materials and procedures, the actual cost ranges for the typical job. Cascade Crest is the worked example.
The approach
A per-demo theme (roofing) on the platform chassis with no new shared block — second time this batch we’ve made that call. The theme owns its identity: charcoal primary (#1F2937), safety orange accent (#EA580C), bone background (#F5F1E8), Manrope sans for headings and body alike. It’s the only demo on the platform without a serif, and the only one whose accent reads as “high-visibility” rather than “tasteful” — that’s the genre. The header carries the four-item nav plus an inline phone-CTA button (the affordance trades customers actually use), and the footer carries the WA contractor license number plus the 24/7 storm-response line.
The block decision worth lingering on is the one we declined. The tempting move was a new sfp-blocks/before-after-slider — a draggable curtain reveal between two images, reusable for any service that shows transformation (cleaning, landscaping, painting, dental cosmetic, real-estate staging). We considered it and deferred. The slider would need drag interaction logic across touch + mouse + keyboard, an accessible label, a prefers-reduced-motion fallback, and a sensible mobile breakpoint — meaningful work for an animation that competes for attention with the substantive prose we wanted between the before/after pairs. We built the gallery as static side-by-side images instead and wrote three paragraphs of tear-off prose between them, the part of a real roof job that’s actually interesting. Promotion to a shared block is clean future work once a demo needs the curtain effect to carry a page.
What’s on the site
- Home. Charcoal cover hero with firm name + tagline (“Roofs that survive the Sound.”), four service cards with brass-orange top borders, a
sfp-blocks/trust-stackresults bar (17 years · 2,400+ roofs installed · 4-hour storm response · 18-yr workmanship warranty), a 3-up portfolio-grid of recent jobs, and three left-bordered testimonial cards with first names + neighborhoods (the way trades testimonials actually read) - /services/. Four alternating image-text rows for Full re-roof, Emergency repair, Gutters & downspouts, Moss treatment. Each row carries a substantive description and a typical-cost paragraph in italics — the question the homeowner actually has, answered without making them call
- /before-after/. Three case-study sections with side-by-side before/after image pairs, headed by the property + scope description and three paragraphs of tear-off prose. “We pulled the cedar in two days and found two valley sections where the original installer had used 15-lb felt where ice-and-water was specified” — the interesting part, which generic contractor sites never write about
- /service-area/. Service-area map graphic + two columns: primary service area (same-day estimates / four-hour storm response / no travel surcharge) and extended service area (next-day estimates / eight-hour response / modest travel). Plus an “outside the map?” callout that signals the work the firm refers out
- /estimate/. Phone + email columns plus a “what happens next” callout box doing the actual screening work — no “starting at” pricing, fixed-price after the site visit, 45-minute residential inspections. Treats the estimate page as a pre-engagement filter, not a lead-capture maximizer
- Demo banner across the top making it explicit that Cascade Crest is fictional
The stack in detail
_chassisparent theme — templates, parts, patterns, gotcha-busting CSS, filemtime-based stylesheet enqueue. Inherited from the platform via symlinkroofingper-demo theme (this repo) — declaresTemplate: _chassis, ships the charcoal + safety orange + bonetheme.json, Manrope for both sans and serif slots (no serif in this demo, on purpose), customparts/header.htmlwith inline phone-CTA andparts/footer.htmlwith WA license # + 24/7 storm-response linesfp-blocks/trust-stackon the home page for the results bar;sfp-blocks/portfolio-gridfor the home page’s recent-jobs grid. No new block authored, deliberately- Four
sfp-*mu-plugins inherited from the platform;roofing-banner-config.phpfilters the demo banner copy for local-trades - WordPress 6.x · PHP 8.3 · MySQL 8 on Apache 2.4 (the same EC2 t3.small that hosts every other demo on the hub)
.scripts/seed-pages.sh— idempotent five-page seed. Generates a wide charcoal-orange hero, four service tiles, six before/after tiles (BEFORE/AFTER labels with green/orange accent bands), a service-area map with orange dots clustered around Seattle, and two crew/truck wide shots via ImageMagick. Uploads viawp media importwith the standard<name>-imageattachment-slug rename; creates or refreshes all five pages; pins Home as the front- Standard repo additions documented in the platform guide:
needed-images.mdin the repo root specifying every image slot the demo expects, and.scripts/capture-portfolio-screenshots.shexposed asnpm run capture:portfoliothat drops the four philiprehberger-nextjs surfacing screenshots into the personal site’s public images directory
Where we made tradeoffs
Deferring the before-after-slider block. Same call we made on lawfirm with the person-card block, for the same reason. The before-after-slider would be a sharper differentiator visually — nobody else in the boutique-WordPress portfolio space ships one — but a static side-by-side pair with three paragraphs of tear-off prose between them does the actual work of selling a roofing company better than the curtain reveal would. The story matters more than the gesture. Block promotion stays on the deferred list with the person-card; we’ll build whichever lands first in a real client engagement.
Specific trades content in the placeholder copy. Same approach we took on lawfirm. The roofing-copy temptation is “we are passionate about quality roofing”; we wrote it as if a real PNW roofer would have to defend it — synthetic underlayment, ice-and-water at penetrations and valleys, 60-mil mechanically-attached TPO, specific cost ranges (\$18–24K composite re-roof on 2,400 sf, \$1,600–2,200 seamless gutter run, \$350–650 annual moss treatment), specific operational details (four-hour windstorm response, no power-washing because of granule loss). Two extra hours of writing; the site reads like the work of a roofer who exists. Documenting it again here so the dental and coach builds inherit the “domain-substance over generic-marketing” discipline.
Estimate page as filter, not funnel. Every contractor SaaS site ships a “Get an Instant Quote!” form that captures phone + address + roof type with no commitment from either side. We did the opposite: phone + email columns, a “what happens next” callout that explicitly says no “starting at” pricing, no instant quote, fixed-price after a 45-minute site visit. The page screens out the kind of lead a small contractor doesn’t want (shopping by price across ten firms, no real intent to hire) and qualifies the kind they do (specific property, specific scope, ready for a real conversation). Treating the contact page as a filter is the move; the “more leads is better” instinct is the trap.
Outcomes
- Five-page local-trades site live at roofing.wp.philiprehberger.com, end-to-end provisioned via the platform’s
provision-demo.shscript - Lighthouse: 99 / 96 / 100 / 92 (perf / a11y / best-practices / SEO) with placeholder photography. Matches the lawfirm Lighthouse score and the platform’s ceiling, without per-demo perf tuning
- Greenfield-to-live in approximately four hours including the per-demo theme, the full five-page seed with substantive trades-domain content, the case-study writeup, the hub Project registration, and the portfolio surfacing — under the lawfirm build by an hour, consistent with the platform compounding
- Second consecutive Tier 1 demo to ship without a new shared block (after lawfirm). Establishes “use core composition” as the standard move when the genre-specific affordance is design + copy rather than novel block primitive; the deferred shared blocks (person-card, before-after-slider) are queued for promotion in whichever order a real client engagement lands first
- First demo on the platform without a serif — Manrope sans for both heading and body slots. Bold/utilitarian palette (charcoal + safety orange) visually distinct from every prior demo’s warm/earthy treatment; useful proof that the chassis carries genres that didn’t fit the original architecture/hospitality/SaaS aesthetic
- Confirms the per-demo-theme split as the standard pattern across the platform now (shop, pulsar, hillcrest, winebar, saltcedar, bench, blockset, northbound, lawfirm, roofing — ten for ten). Identity lives in the demo, primitives live in the platform, neither side has to compromise