` of every page - State licensing authority: `VBA` (Victorian Building Authority) · MUST appear in trust-bar OR about-body OR footer · use exact wording like "Licensed by the VBA" or "VBA registered" - ABN: `69 622 718 361` · MUST appear in footer legal sentence - Address: `Shed 3/31 Icon Dr, Delacombe VIC 3356` · MUST appear in footer and contact page - City: `Ballarat` and state: `VIC` · must appear in every page title meta and at least once in body Other hard rules: - ZERO customer-visible internal language (no "demo", "mockup", "placeholder", "audit", "verified", "internal", "Resend", "hi@profitslocal.com") - Use the 9 real photos in `assets/` — must reference at least one image per page hero / service section - Phone CTA in hero AND in final-CTA section AND in header AND in footer (visible, tap-to-call) - Quote form OR explicit form link in hero AND final-CTA section - Email link (mailto:) MUST be present in footer and contact page - At least 3 services rendered as scannable cards (use service_list from facts.json verbatim) - Block accent color ONLY on primary CTAs and active links · never as a section background - All testimonials must be verbatim from facts.json (do not paraphrase or shorten) - Do not invent licence numbers, founding year, customer counts, or warranty terms beyond "10-year workmanship warranty" - LocalBusiness JSON-LD schema in `<head>` of every page · include name / phone / email / address / city / state / postal / `areaServed` ## Family aesthetic (read `references/family-DESIGN.md` for full) - Family: `industrial-trade-credible` · industrial / trade-credible / no-luxury-real-estate styling - Brand color: `#0F1115` (near-black) · accent `#C5A572` (muted gold) - Strong roof geometry imagery · real Australian daylight · no stock-photo handshakes ## Pages overview (full detail in `site-architecture.json`) - **/home** (9 blocks): hero · trust-bar · services-grid · why-us · proof-strip · gallery · service-areas · reviews · cta-band - **/roof-replacements** (10 blocks): hero · spec-callout · process · product-spotlight · case-study · comparison-table · warranty-detail · reviews · faq · lead-form - **/new-roofs** (7 blocks): hero · spec-callout · process · product-spotlight · case-study · faq · lead-form - **/gutters** (6 blocks): hero · spec-callout · product-spotlight · gallery · faq · lead-form - **/builders-commercial** (7 blocks): hero · stats-band · spec-callout · safety-insurance · proof-strip · faq · lead-form - **/projects** (5 blocks): hero · gallery · before-after · case-study · cta-band - **/about** (7 blocks): hero · about-body · team-grid · stats-band · about-timeline · safety-insurance · cta-band - **/service-areas** (5 blocks): hero · service-areas · case-study · map-embed · cta-band - **/contact** (5 blocks): hero · contact-form · process · map-embed · service-areas - **/careers** (6 blocks): hero · team-grid · why-us · gallery · faq · contact-form ## PRODUCTION-GRADE PAGE STANDARDS (must meet ALL · audit will check) Each HTML page must be a COMPLETE production page, not a sketch or wireframe: - **Word count per page:** ≥ 600 words of real customer-facing copy (excluding nav/footer chrome). Hero block alone ≥ 80 words. Each service block ≥ 100 words. - **Forms:** every page MUST contain at least 1 working `<form>` element for quote/contact. Form fields: name (required), phone (required, tel input), suburb (required), service-type (select with options from facts.service_list), message (textarea). Submit button has primary CTA styling. - **Phone presence:** the string `0403 554 592` AND a `<a href="tel:0403554592">` link must appear in: (a) header (b) hero block (c) every form's "or call us" line (d) sticky mobile call bar (e) footer. Minimum 4 occurrences per page. - **Email presence:** `info@vicwestroofing.com.au` with a `<a href="mailto:info@vicwestroofing.com.au">` mailto link must appear in BOTH the footer AND the contact page. - **VBA licensing:** the exact wording "Licensed by the VBA" or "VBA registered" or "Victorian Building Authority (VBA)" must appear in the trust-bar block on home AND in the footer of every page. - **ABN footer sentence:** every page footer must include `Vicwest Roofing is a trading name of VICWEST GROUP PTY LTD · ABN 69 622 718 361 · GST registered.` - **Address:** the full address `Shed 3/31 Icon Dr, Delacombe VIC 3356` must appear in the footer of every page AND on the contact page (with a Google Maps link). - **Hours:** display the weekly hours table (Mon-Fri 8:00am-5:00pm · Sat by appointment · Sun closed) in the footer. - **Photos:** EVERY page MUST reference at least 3 images from the `assets/` folder. Hero block uses `assets/hero-roof.jpg` or `assets/hero-aerial.jpg`. Service blocks use the corresponding `service-*.jpg`. The home page must reference ≥ 6 distinct image files (hero + service-replacement + service-new-roofs + service-gutters + service-storm-damage + about-team + gallery). DO NOT use only the logo. - **Testimonials:** every page that has a "reviews" or "testimonials" block must use ≥ 2 verbatim quotes from facts.json testimonials array, each with the author's full name AND location (e.g. "Roland Peacock · Hamilton"). - **Suburb mentions:** the suburb names `Wendouree`, `Creswick`, `Hamilton`, `Geelong`, `Bendigo` must each appear at least once across the site (in service-areas block, project gallery captions, or copy). - **Owner mention:** `Hayden` must appear in: the about page (as the customer-facing principal) AND the testimonials section (the reviews mention him). - **Warranty wording:** `10-year workmanship warranty` (exact phrase) must appear in: the hero proof-chips AND a dedicated warranty section AND the footer trust strip. - **Multi-page output:** produce ALL 10 pages listed in site-architecture.json. Do not collapse them into a single index.html. The 10 page files are: `index.html`, `roof-replacements.html`, `new-roofs.html`, `gutters.html`, `builders-commercial.html`, `projects.html`, `about.html`, `service-areas.html`, `contact.html`, `careers.html`. - **Hero variant per page (per DESIGN.md · STRICT):** ONLY the home page (index.html) uses the `fullbleed-with-form` hero (left-anchored text + right-anchored form on a dark photo background). EVERY OTHER PAGE must use a `compact-banner` hero pattern: full-width photo backdrop with text+CTAs only (no form inside the hero). The form, if needed on the page, is a separate section BELOW the hero. Do NOT replicate the home page's split hero layout on contact/about/projects/service-areas/careers/service pages. The two-column hero layout with align-items: end + a tall form overflows visually — never use it for inner pages. - **NO META-COPY · STRICT:** Customer-facing copy must speak TO the visitor about the business · NEVER about the section itself or about the design intent. The following phrasings are FORBIDDEN in any visible page copy: - "This section keeps..." / "This page is for..." / "This block shows..." - "kept visible so..." / "displayed because..." / "shown so customers can..." - "The people visitors deal with..." / "What visitors see..." / "Where customers find..." - "deserves clear business details" / "without adding names that were not supplied" - Any sentence that describes WHY a section exists rather than WHAT the business offers. - Any phrasing that reads as instructions to a content writer (e.g. "use real names", "avoid vague brand copy"). Source phrasing: write headings, subheads and paragraphs as IF you are the business addressing a homeowner or builder visitor directly. Example correct headings for the about page team section: "Meet the Vicwest Roofing crew" or "Two trade teams across Western Victoria" — NOT "The people visitors deal with before and during roof work". - **Shared header/footer:** the header and footer MUST be byte-identical across all pages (same logo / nav / CTA / footer columns). Use a consistent `<header>` and `<footer>` block. - **LocalBusiness schema:** every page `<head>` must include a `<script type="application/ld+json">` with LocalBusiness schema (name, telephone, email, address, areaServed, openingHours, sameAs[social], aggregateRating). - **Google Fonts (REQUIRED):** every page `<head>` must include this exact pair of `<link>` tags BEFORE any other stylesheet: ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> ``` Specifying `font-family: 'Inter Tight', ...` in CSS WITHOUT actually loading the font means the browser falls back to system sans-serif and the design language collapses. The fonts MUST be loaded. ## OUTPUT CHECKLIST (self-verify before finishing) - [ ] 10 HTML files written - [ ] Each ≥ 600 words customer-facing copy - [ ] Each has ≥ 1 `<form>` element - [ ] Each has `tel:0403554592` link - [ ] Footer of each has `mailto:info@vicwestroofing.com.au` - [ ] "VBA" appears in trust-bar AND footer of every page - [ ] Each page references ≥ 3 distinct images from `assets/` - [ ] Hayden mentioned on about + reviews - [ ] LocalBusiness JSON-LD in every `<head>` Start with `brief-summary.md` to absorb the customer, then read `site-architecture.json` for the page-by-page plan, then build all 10 pages meeting the standards above. DO NOT take shortcuts. DO NOT produce a sketch.

Build a production-quality multi-page website for Vicwest Roofing, a roofing business in Ballarat, VIC, Australia. ## Skip questions Use Open Design web-prototype workflow. Do not ask question forms. All decisions are pre-supplied in this seed. ## Files in this seed (read in this order) 1. `brief-summary.md` — compact customer brief (executive · services · voice · brand · CTA · personas) 2. `DESIGN-HANDOFF.md` — per-page block plan + header + footer + hard rules 3. `site-architecture.json` — machine-readable per-page block list with copy briefs 4. `facts.json` — locked verifiable facts · use verbatim · do not paraphrase 5. `references/family-DESIGN.md` — visual language (typography · spacing · component patterns) 6. `references/BEST-PRACTICES.md` — AU local-trade conversion standards 7. `references/niche-spec.md` — roofing-specific licensing + forbidden phrases 8. `brand/brand-spec.json` + logo SVGs — colors + logo variants 9. `assets/*.jpg` — curated real photos (use these · do not invent image paths) ## Output - 10 HTML files matching the page list in site-architecture.json (`index.html · roof-replacements.html · new-roofs.html · gutters.html · builders-commercial.html · projects.html · about.html · service-areas.html · contact.html · careers.html`) - Each page uses the block list specified for that page in site-architecture.json — DO NOT add or remove blocks - Block copy comes from the corresponding section of `brief-summary.md` and `facts.json` - Header is identical across all pages (uses `brand/logo-light.svg`, nav with Services dropdown, primary CTA = phone, secondary CTA = Free Quote) - Footer is identical across all pages (ABN legal sentence, full SEO suburb list, trust strip, social links) - Mobile-first responsive; sticky bottom call/quote bar on mobile - LocalBusiness JSON-LD in `` (from facts.json) ## Hard rules (audit will fail otherwise · explicit verbatim checks) CRITICAL · these EXACT strings MUST appear in the rendered HTML or the audit fails: - Phone: `0403 554 592` · in tel-link form `tel:0403554592` · MUST appear in header AND hero AND footer AND a mid-page CTA - Email: `info@vicwestroofing.com.au` · MUST appear in footer AND in the contact page · use a `mailto:info@vicwestroofing.com.au` link - Business name: `Vicwest Roofing` · in header logo area AND footer AND `` of every page - State licensing authority: `VBA` (Victorian Building Authority) · MUST appear in trust-bar OR about-body OR footer · use exact wording like "Licensed by the VBA" or "VBA registered" - ABN: `69 622 718 361` · MUST appear in footer legal sentence - Address: `Shed 3/31 Icon Dr, Delacombe VIC 3356` · MUST appear in footer and contact page - City: `Ballarat` and state: `VIC` · must appear in every page title meta and at least once in body Other hard rules: - ZERO customer-visible internal language (no "demo", "mockup", "placeholder", "audit", "verified", "internal", "Resend", "hi@profitslocal.com") - Use the 9 real photos in `assets/` — must reference at least one image per page hero / service section - Phone CTA in hero AND in final-CTA section AND in header AND in footer (visible, tap-to-call) - Quote form OR explicit form link in hero AND final-CTA section - Email link (mailto:) MUST be present in footer and contact page - At least 3 services rendered as scannable cards (use service_list from facts.json verbatim) - Block accent color ONLY on primary CTAs and active links · never as a section background - All testimonials must be verbatim from facts.json (do not paraphrase or shorten) - Do not invent licence numbers, founding year, customer counts, or warranty terms beyond "10-year workmanship warranty" - LocalBusiness JSON-LD schema in `<head>` of every page · include name / phone / email / address / city / state / postal / `areaServed` ## Family aesthetic (read `references/family-DESIGN.md` for full) - Family: `industrial-trade-credible` · industrial / trade-credible / no-luxury-real-estate styling - Brand color: `#0F1115` (near-black) · accent `#C5A572` (muted gold) - Strong roof geometry imagery · real Australian daylight · no stock-photo handshakes ## Pages overview (full detail in `site-architecture.json`) - **/home** (9 blocks): hero · trust-bar · services-grid · why-us · proof-strip · gallery · service-areas · reviews · cta-band - **/roof-replacements** (10 blocks): hero · spec-callout · process · product-spotlight · case-study · comparison-table · warranty-detail · reviews · faq · lead-form - **/new-roofs** (7 blocks): hero · spec-callout · process · product-spotlight · case-study · faq · lead-form - **/gutters** (6 blocks): hero · spec-callout · product-spotlight · gallery · faq · lead-form - **/builders-commercial** (7 blocks): hero · stats-band · spec-callout · safety-insurance · proof-strip · faq · lead-form - **/projects** (5 blocks): hero · gallery · before-after · case-study · cta-band - **/about** (7 blocks): hero · about-body · team-grid · stats-band · about-timeline · safety-insurance · cta-band - **/service-areas** (5 blocks): hero · service-areas · case-study · map-embed · cta-band - **/contact** (5 blocks): hero · contact-form · process · map-embed · service-areas - **/careers** (6 blocks): hero · team-grid · why-us · gallery · faq · contact-form ## PRODUCTION-GRADE PAGE STANDARDS (must meet ALL · audit will check) Each HTML page must be a COMPLETE production page, not a sketch or wireframe: - **Word count per page:** ≥ 600 words of real customer-facing copy (excluding nav/footer chrome). Hero block alone ≥ 80 words. Each service block ≥ 100 words. - **Forms:** every page MUST contain at least 1 working `<form>` element for quote/contact. Form fields: name (required), phone (required, tel input), suburb (required), service-type (select with options from facts.service_list), message (textarea). Submit button has primary CTA styling. - **Phone presence:** the string `0403 554 592` AND a `<a href="tel:0403554592">` link must appear in: (a) header (b) hero block (c) every form's "or call us" line (d) sticky mobile call bar (e) footer. Minimum 4 occurrences per page. - **Email presence:** `info@vicwestroofing.com.au` with a `<a href="mailto:info@vicwestroofing.com.au">` mailto link must appear in BOTH the footer AND the contact page. - **VBA licensing:** the exact wording "Licensed by the VBA" or "VBA registered" or "Victorian Building Authority (VBA)" must appear in the trust-bar block on home AND in the footer of every page. - **ABN footer sentence:** every page footer must include `Vicwest Roofing is a trading name of VICWEST GROUP PTY LTD · ABN 69 622 718 361 · GST registered.` - **Address:** the full address `Shed 3/31 Icon Dr, Delacombe VIC 3356` must appear in the footer of every page AND on the contact page (with a Google Maps link). - **Hours:** display the weekly hours table (Mon-Fri 8:00am-5:00pm · Sat by appointment · Sun closed) in the footer. - **Photos:** EVERY page MUST reference at least 3 images from the `assets/` folder. Hero block uses `assets/hero-roof.jpg` or `assets/hero-aerial.jpg`. Service blocks use the corresponding `service-*.jpg`. The home page must reference ≥ 6 distinct image files (hero + service-replacement + service-new-roofs + service-gutters + service-storm-damage + about-team + gallery). DO NOT use only the logo. - **Testimonials:** every page that has a "reviews" or "testimonials" block must use ≥ 2 verbatim quotes from facts.json testimonials array, each with the author's full name AND location (e.g. "Roland Peacock · Hamilton"). - **Suburb mentions:** the suburb names `Wendouree`, `Creswick`, `Hamilton`, `Geelong`, `Bendigo` must each appear at least once across the site (in service-areas block, project gallery captions, or copy). - **Owner mention:** `Hayden` must appear in: the about page (as the customer-facing principal) AND the testimonials section (the reviews mention him). - **Warranty wording:** `10-year workmanship warranty` (exact phrase) must appear in: the hero proof-chips AND a dedicated warranty section AND the footer trust strip. - **Multi-page output:** produce ALL 10 pages listed in site-architecture.json. Do not collapse them into a single index.html. The 10 page files are: `index.html`, `roof-replacements.html`, `new-roofs.html`, `gutters.html`, `builders-commercial.html`, `projects.html`, `about.html`, `service-areas.html`, `contact.html`, `careers.html`. - **Hero variant per page (per DESIGN.md · STRICT):** ONLY the home page (index.html) uses the `fullbleed-with-form` hero (left-anchored text + right-anchored form on a dark photo background). EVERY OTHER PAGE must use a `compact-banner` hero pattern: full-width photo backdrop with text+CTAs only (no form inside the hero). The form, if needed on the page, is a separate section BELOW the hero. Do NOT replicate the home page's split hero layout on contact/about/projects/service-areas/careers/service pages. The two-column hero layout with align-items: end + a tall form overflows visually — never use it for inner pages. - **NO META-COPY · STRICT:** Customer-facing copy must speak TO the visitor about the business · NEVER about the section itself or about the design intent. The following phrasings are FORBIDDEN in any visible page copy: - "This section keeps..." / "This page is for..." / "This block shows..." - "kept visible so..." / "displayed because..." / "shown so customers can..." - "The people visitors deal with..." / "What visitors see..." / "Where customers find..." - "deserves clear business details" / "without adding names that were not supplied" - Any sentence that describes WHY a section exists rather than WHAT the business offers. - Any phrasing that reads as instructions to a content writer (e.g. "use real names", "avoid vague brand copy"). Source phrasing: write headings, subheads and paragraphs as IF you are the business addressing a homeowner or builder visitor directly. Example correct headings for the about page team section: "Meet the Vicwest Roofing crew" or "Two trade teams across Western Victoria" — NOT "The people visitors deal with before and during roof work". - **Shared header/footer:** the header and footer MUST be byte-identical across all pages (same logo / nav / CTA / footer columns). Use a consistent `<header>` and `<footer>` block. - **LocalBusiness schema:** every page `<head>` must include a `<script type="application/ld+json">` with LocalBusiness schema (name, telephone, email, address, areaServed, openingHours, sameAs[social], aggregateRating). - **Google Fonts (REQUIRED):** every page `<head>` must include this exact pair of `<link>` tags BEFORE any other stylesheet: ```html <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> ``` Specifying `font-family: 'Inter Tight', ...` in CSS WITHOUT actually loading the font means the browser falls back to system sans-serif and the design language collapses. The fonts MUST be loaded. ## OUTPUT CHECKLIST (self-verify before finishing) - [ ] 10 HTML files written - [ ] Each ≥ 600 words customer-facing copy - [ ] Each has ≥ 1 `<form>` element - [ ] Each has `tel:0403554592` link - [ ] Footer of each has `mailto:info@vicwestroofing.com.au` - [ ] "VBA" appears in trust-bar AND footer of every page - [ ] Each page references ≥ 3 distinct images from `assets/` - [ ] Hayden mentioned on about + reviews - [ ] LocalBusiness JSON-LD in every `<head>` Start with `brief-summary.md` to absorb the customer, then read `site-architecture.json` for the page-by-page plan, then build all 10 pages meeting the standards above. DO NOT take shortcuts. DO NOT produce a sketch.