Anderson Roofing build vs Thelen Mechanical (modeled comp)
Section-by-section scorecard per the web-design-intelligence QA process. Thelen (revision-1 tournament champion) was captured hero-only in the 2026-07-01 run, so hero and mobile-fold are judged head-to-head; below-fold sections are scored Uncontested (no comp evidence), following the Straightline convention. Pattern implemented: retro-badge brand device + dual-action CTA row, re-expressed in Anderson's real logo colors (red #ea1b23 / sky #6acef3) on Thelen's warm cream ground.
Desktop hero
Mobile fold
Scorecard
| Section | Verdict | Why |
|---|---|---|
| Utility bar | TIE | Thelen runs a promo offer + locations; Anderson runs family-owned positioning + live rating + hours. Both single-line, both on-brand navy. Different jobs, equal execution. |
| Header brand identity | TIE | Round 2 implemented Thelen's signature move: the brand now sits on a red-bordered cream plate that breaks below the header line. Still scored a tie, not a win, because Thelen's badge is a designed trademark while ours frames their existing logo; matching that fully needs a real brand-mark redesign (vector logo request is queued). |
| Hero typography & layout | WIN | Same winning grammar (script eyebrow, giant cream display, photo-through-scrim) but in Zilla Slab matched to Anderson's slab logo genre, plus a proof row and small-keyword H1 / big-persuasive H2 SEO structure Thelen lacks. |
| Dual-action CTA row | TIE | Thelen's exact pattern implemented: solid booking pill + phone action at equal visual weight, chunky with hard offset shadows. Equal execution of their winning move. |
| Above-fold lead capture | WIN | Anderson runs Search + LSA; paid clicks need an instant form. Thelen's hero has zero capture; ours has a 4-field inspection form with trust microcopy, without crowding the headline. |
| Trust merchandising | WIN | Thelen's hero shows no ratings, certs, or reviews. Anderson's fold carries 4.9/90+ Google, BBB A+, Google Guaranteed, Est. 1997, then a dedicated 5-item trust bar. All real, all verifiable. |
| Mobile fold | WIN | Both stack cleanly, but Anderson adds a sticky Call + Free Estimate bar (Thelen's mobile fold has no persistent CTA) and full-width thumb-sized buttons. |
| Mobile navigation | UNCONTESTED | Full-screen branded flyout drawer with one-at-a-time accordions, in-drawer estimate CTA + click-to-call + hours, scrim, and scroll-lock. No Thelen mobile-nav capture exists to compare against. |
| Services / projects / process | UNCONTESTED | 6 service cards with real job photos, 3 real projects, 4-step process. No comp evidence below the fold. |
| Differentiation content | UNCONTESTED | Storm-chaser comparison table (8 rows), hail/insurance band, team section with the real owners' photo and named roster, 3 verbatim Google reviews. This is the conversion depth the current andersonroofingne.com lacks entirely. |
| Footer | UNCONTESTED | Exit CTA band, badge strip, 4-column grid, service-area coverage block, back-to-top. No comp footer capture. |
Net: 4 wins, 3 ties, 0 losses on contested sections; 4 uncontested. The build keeps every element of Thelen's winning pattern and adds the conversion infrastructure (form, sticky bar, trust bar) that the Search + LSA pitch requires.
Alignment measurement (not eyeballed)
Left-edge bounding boxes measured via
getBoundingClientRect():
- Desktop (1265px vp): brand 81 / hero eyebrow 80 / service card 81 / process step 81 / footer brand 81 — one shared edge (±1px subpixel rounding).
- Mobile (375px vp): brand, hero, trust bar, section labels, FAQ, area pills, footer all at 20px — single gutter token. Service scroll-strip snap initially pulled cards to 0; fixed with
scroll-padding-inline-start: var(--gutter). - Horizontal scroll: initial 4px overflow at 375px (header CTA cluster) fixed via mobile gap/padding +
overflow-x:clipon html. Now scrollWidth = clientWidth exactly.
Mobile QA pass
- Round 2: header plate initially re-introduced a 12px overflow at 375px (hamburger clipped); plate padding/border and logo width reduced on mobile, re-measured to scrollWidth = clientWidth = 375 with the hamburger at 355px right edge.
- Utility bar wrapped to 2 lines at 375px → lead phrase hidden on mobile (
.util-lead), now single-line (21px). - 6 service cards → horizontal snap strip (even count, no orphans); 3 project cards → last card spans full width at tablet, single column on phones.
- Drawer exercised programmatically: opens, accordion one-at-a-time (panel 187px, 4 links), close restores scroll. Hamburger hidden while open.
- FAQ accordion verified open/close. Stat counters fire on scroll into view.
Honest gaps
- Logo resolution: the scraped logo is 326×147px. Fine at header size; a vector original from the client would allow hero-scale brand moments (and a proper header badge like Thelen's).
- Owners photo placement (round 2): background position and scrim retuned so Dave reads in the seam between copy and form and both faces sit above the card edge. A photo shot with copy space would still be the ideal endgame.
- Trust numbers to verify before the pitch: 4.9★/90+ is from Josh's research notes; site itself says "since 1997" and "more than 25 years." Confirm the live Google profile count on pitch day.