# DEMO handoff — SMB pipeline batch 001 (Cape Town trades) **Date:** 2026-09-17 (Design Gate updates 2026-09-18) **Kit path:** `/workspace/smb-pipeline/demos/` **Source pack:** `/workspace/smb-pipeline/batch-001-cape-town-trades.md` **Status:** Static HTML demos only. Not contacted. Not deployed to prospect domains. ## How to serve ```bash npx --yes serve /workspace/smb-pipeline/demos -p 4173 ``` Then open `http://localhost:4173/` for the index, or any `ct-xxx-…/` path below. Shared styles: `demos/shared/styles.css` Editable source for each lead: `demos/ct-xxx-slug/index.html` --- ## Per-lead notes ### CT-001 — Berg en See Elektries (Bellville Electricians) 1. **Preview:** `demos/ct-001-berg-en-see/` 2. **What changed:** Replaces the unfinished 2022 WordPress rebuild (leftover “Master Pass” FAQ, stock icons, form-as-CTA) with a mobile one-pager. Sticky call/WhatsApp, Gazania Street and Andre van Niekerk named honestly. Services list matches pack (COCs, smart metering, audits, inverters/generators). 3. **Editable source:** `demos/ct-001-berg-en-see/index.html` + page-local `demos/ct-001-berg-en-see/styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell A (photo-proof).** Dropped shared kit. Local `assets/logo.png`, `bellville.jpg`, `tygervalley.jpg`. Page-local CSS — leaf green `#4a8c1a` + sea blue `#3a9bc5` from logo (not Zalin orange/charcoal), **Archivo + Public Sans**. Full-bleed hero on bellville.jpg; gallery of area photos. Skipped `home.jpeg` (leftover sewing-template WP asset). Sticky Call + WhatsApp. ### CT-002 — Zalin Electrical 1. **Preview:** `demos/ct-002-zalin-electrical/` 2. **What changed:** Their live site is a “Hello world” / under-maintenance stub. Demo leads with Bark proof (43 reviews 5/5, 50 hires), Wimpie/Willem Vorster, Helderberg positioning, and three real Bark job photos. **No phone invented** — CTA is email (`info@zalinelectrical.co.za`) and Bark profile only. 3. **Editable source:** `demos/ct-002-zalin-electrical/index.html` + page-local `demos/ct-002-zalin-electrical/styles.css` 4. **Visual fix (2026-09-17):** Bark CloudFront hotlinks were dead (`NoSuchKey`). Logo + 3 job photos downloaded from live Bark S3 into `demos/ct-002-zalin-electrical/assets/`. Bark stats re-checked live: 43 reviews · 5/5 · 50 hires — kept. 5. **Design Gate rebuild (2026-09-17):** **Shell A (photo-proof).** Dropped `../shared/styles.css` / navy card-stack kit. New page-local CSS — charcoal + bright orange from logo, Outfit + Source Sans 3. Full-bleed hero on `assets/job-3.jpg` with overlay copy; gallery of job-1/job-2; Bark stats proof block; sticky Email + Bark CTA bar. Local images only; no `tel:` invented. ### CT-003 — AMCUR Electrical 1. **Preview:** `demos/ct-003-amcur-electrical/` 2. **What changed:** amcur.co.za is broken (500). Demo is a thin-asset, phone-first page from directory data: Bisset Street, hours Mon–Fri 08:00–17:00, COC/prepaid/call-out services. Typography mark (no logo). No invented reviews or email. 3. **Editable source:** `demos/ct-003-amcur-electrical/index.html` + page-local `demos/ct-003-amcur-electrical/styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell C (phone-first thin).** Dropped shared kit. Page-local CSS — near-black + volt yellow `#e8f04a`, **Space Grotesk + Inter**. Giant “AMCUR” typography mark; single Call CTA; honest thin-pack note. Sticky Call bar. Empty `assets/` by design. ### CT-004 — Gridline Power 1. **Preview:** `demos/ct-004-gridline-power/` 2. **What changed:** Collapses the duplicated Elementor homepage into one clean mobile story. Keeps Edgemead workshop, published rates (R550/hr · R750 after hours), sales/support emails on grdline.co.za, Bark/SolarZA pointers. Sarel Pieterse named from pack. 3. **Editable source:** `demos/ct-004-gridline-power/index.html` + page-local `demos/ct-004-gridline-power/styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell A (photo-proof).** Dropped shared kit / hotlinks. Local `assets/logo.png`, `job-wa.jpg`, `gallery-1.jpg`, `gallery-2.jpg`. Page-local CSS — deep indigo `#12124a` + electric blue `#2563eb` (not Zalin orange, not Grandmark teal), **Manrope + Karla**. Hero on rooftop solar job-wa; rates cards; Bark as link only (no fake counts). Sticky Call + Email. ### CT-005 — R&R Solar & Electrical Solutions 1. **Preview:** `demos/ct-005-rr-solar-electrical/` 2. **What changed:** Website is 404. Demo is an honest phone-only one-pager for 6 Joubert Crescent (Stikland/Bellville): hours Mon–Sat 08:00–18:00, solar/COC/geyser/heat-pump services from Snupit/inverters listings. No invented email or reviews. 3. **Editable source:** `demos/ct-005-rr-solar-electrical/index.html` + page-local `demos/ct-005-rr-solar-electrical/styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell C (phone-first thin).** Dropped shared kit. Page-local CSS — warm cream + espresso + solar amber `#d97706` (distinct from AMCUR black/volt), **Unbounded + Onest**. “R&R” typography mark; single Call CTA; honest thin-pack note. Sticky Call bar. Empty `assets/` by design. ### CT-006 — No. 1 Plumber 1. **Preview:** `demos/ct-006-no1-plumber/` 2. **What changed:** Moves off the ancient The7 / SA-flag brochure look. Simone Street, both numbers (021 + 074), email, PIRB/SABS marks, est. 1982 and free call-out in Parow/Bellville kept. Area chips from their named suburbs. No fake job photos. 3. **Editable source:** `demos/ct-006-no1-plumber/index.html` + page-local `styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell B (local trust).** Dropped shared kit. Local `assets/logo.jpg`, `pirb.jpg`, `sabs.png`. Page-local CSS — sky blue `#0b9ad8` / `#0670a0` from logo (**not** Grandmark teal), **Sora + Nunito Sans**. Soft colour-field hero with Simone Street place card + logo panel; PIRB/SABS proof row; suburb chips; map-weight contact. Sticky Call + WhatsApp. Contemporary whitespace, not rustic. ### CT-007 — Grandmark Plumbing 1. **Preview:** `demos/ct-007-grandmark-plumbing/` 2. **What changed:** Deliberately **not** an SEO mill: leads with 36 Kingfisher Walk / Sunbird Park / Kuils River, hours 07:00–20:00, and both phones. Named Google reviewers from the pack listed lightly as plain text (no fake star widget). Logo only for imagery — no Pexels stock farm. 3. **Editable source:** `demos/ct-007-grandmark-plumbing/index.html` + page-local `demos/ct-007-grandmark-plumbing/styles.css` 4. **Design Gate rebuild (2026-09-17):** **Shell B (local trust).** Dropped shared kit / hotlinked logo. Local `assets/logo.jpeg`. Page-local CSS — deep teal/cyan from logo (distinct from Zalin orange/charcoal), Plus Jakarta Sans + Figtree. Soft colour-field hero with address chip + logo mark; hours strip; named reviewers (Fred Saayman, Manuel Muzungu, Shauneen Theys, Peter Simpson, Christopher Rixon); map-weight contact. Sticky Call + WhatsApp CTA; extra hero top padding so sticky demo banner doesn’t clip H1. ### CT-008 — Plumb Leak Cape (PlumbLeak) 1. **Preview:** `demos/ct-008-plumb-leak-cape/` 2. **What changed:** Replaces twin 2010s CMS sites with one mobile page. Leak-detection story first (acoustic / tracer-gas / thermal), IOPSA link, Unit 1 Arum Lily / 17 Stillewater Road, Marcelle 082 + office 021. Local logo + commercial/toilet stills — **no GIF**. 3. **Editable source:** `demos/ct-008-plumb-leak-cape/index.html` + page-local `styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell B.** Dropped shared kit / hotlinks. Local `assets/logo.png`, `commercial.jpg`, `toilet.jpg`. Page-local CSS — logo blue `#1e6bb8` + green `#2f9e41`, **Syne + DM Sans**. Leak-detection methods lead; IOPSA strip; photo pair; Arum Lily address chip. Sticky Call + WhatsApp. ### CT-009 — Cape Plumbing and Electrical 1. **Preview:** `demos/ct-009-cape-plumbing-electrical/` 2. **What changed:** Beats the 2024 WP site on mobile clarity: three numbers (office / Colwyn / Deven) in hero phone stack and sticky CTA, dual-trade service blocks, hours + 24h emergency, logo + three Google review screenshot assets. Notes honestly that no street address is on the live site. Instagram/Facebook linked. 3. **Editable source:** `demos/ct-009-cape-plumbing-electrical/index.html` + page-local `styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell B.** Dropped shared kit. Local `assets/logo.png`, `review-1.jpg`, `review-2.jpg`, `review-3.jpg`. Page-local CSS — dual-trade blue `#1f5fa8` + brick red `#b83a3a`, **Lexend + Atkinson Hyperlegible**. Phone stack above the fold; honesty callout on missing street; dual trade cards; review screenshot grid. Sticky Office / Colwyn / Deven bar. ### CT-010 — Pipewright Plumber 1. **Preview:** `demos/ct-010-pipewright-plumber/` 2. **What changed:** Thin-asset honest build for 38 Franklin Rd, Claremont. Keeps 060 016 5369 as sole CTA (call + WhatsApp), address/map pin, services and payment methods from their template site. No invented email, reviews, face or job photos — bold typography mark only (`assets/` empty). 3. **Editable source:** `demos/ct-010-pipewright-plumber/index.html` + page-local `styles.css` 4. **Design Gate rebuild (2026-09-18):** **Shell C (phone-first thin).** Dropped shared kit. Page-local CSS — warm slate `#2a3340` + copper `#c56a2d` on cream (distinct from AMCUR ink/amber and R&R deep/gold), **Bricolage Grotesque + IBM Plex Sans**. Giant “Pw.” typography mark; mega Call/WhatsApp CTAs; honest thin-pack note. Sticky Call + WhatsApp. ### AL-001 — Alston Plumbing Services 1. **Preview:** `demos/al-001-alston-plumbing/` 2. **What changed vs dual WP sites:** Collapses apsplumbing.co.za + alstonplumbing.co.za into one Shell B one-pager. Drops form-as-CTA, 2019 stock plumber icons, typos, and dual-brand bounce. Leads with **Alston Plumbing Services** (APS Plumbing mentioned once as trading style). Phone-first Call / WhatsApp only to **+27 21 180 4556**. No Maps reviews/photos (none exist). Does **not** lead with admin@apscape.co.za. Footer notes demo is not a live replacement for either domain. 3. **Editable source:** `demos/al-001-alston-plumbing/index.html` + page-local `demos/al-001-alston-plumbing/styles.css` 4. **Design Gate build (2026-09-18):** **Shell B (local trust, typography-first / thin assets).** Empty `assets/` by design (no logo, no job photos, no 2019 icons). Page-local CSS — slate + soft sage `#4a7c6f` / `#355a50` on `#f4f7f5` (**not** Grandmark cyan/teal `#006d87`/`#00a2c7`), **Fraunces + Red Hat Text** (not Outfit/Source Sans, not Plus Jakarta/Figtree). Soft colour-field hero with Priory Park address chip + typography “AP” mark; honest services list; suburb chips (Mowbray, Rondebosch, Claremont, Observatory, CBD, Southern Suburbs); **Leaflet + OSM** interactive map centred ~−33.948, 18.475 with ~16 km approximate service-radius circle + Open in Google Maps link. Sticky demo banner + sticky Call/WhatsApp. No contact form. --- ## Design kit notes (for Builder) - Batch-001 default: remaining ungated pages may still share `shared/styles.css` with theme classes: `theme-elec-*` / `theme-plumb-*`. - **Design Gate (2026-09-17):** CT-002 Shell A + CT-007 Shell B — page-local CSS, local assets. - **Design Gate (2026-09-18):** CT-001 Shell A + CT-003 Shell C + CT-004 Shell A + CT-005 Shell C; also CT-006 / CT-008 / CT-009 Shell B + CT-010 Shell C — page-local CSS, local assets only (or typography marks); no shared kit; distinct font pairs and palettes (not Zalin Outfit/Source Sans/orange, not Grandmark Plus Jakarta/Figtree/teal). CT-002 / CT-007 untouched. **AL-001 Shell B** (sage/slate + Fraunces/Red Hat Text; Leaflet OSM map; thin assets). - Every gated page has sticky **Demo preview — not the live website** banner + sticky mobile CTA bar. - Hero top padding keeps sticky banner from clipping H1. - Tel links use `tel:+27…`; WhatsApp uses `https://wa.me/27…`. - Gated demos: local assets only (no hotlinks, no GIFs). Thin packs stay thin. - `noindex, nofollow` on all demos. ## Out of scope (do not do from this kit) - Contacting prospects - Deploying to their domains - Inventing phones, emails, reviews or job photos - Git init / push unless asked ### AL-001 — Alston Plumbing Services (Copy Gate reskin 2026-09-18) 1. **Preview:** https://smb-demos.pages.dev/al-001-alston-plumbing/ (after Pages redeploy) 2. **Source of truth:** `leads/AL-001/content.md` — all visible body copy from Writer only 3. **Editable source:** `demos/al-001-alston-plumbing/index.html` + `styles.css` 4. **What changed:** Stripped brief/pipeline body language (APS dual-brand aside, “honest/demo/2019 icon” lines). Hero/services/about/areas/contact match content.md. Demo banner chrome-only. Map + suburb chips + Call/WhatsApp retained (Design Gate).