The live demo was built from exactly this text — nothing added.

# Roofing Company Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
Build a one-page site for [BRAND], the roofing company founded by [FOUNDER] and run out of [CITY], with [EXPERIENCE] of reroofing behind it. The page sells finished craft with a golden-hour hero, proves it with a before/after slider and a materials table, and wins the lead with two working tools: a roof cost estimator that computes a visible price range and days on site, and a storm damage checklist that grades what the homeowner saw. A license-and-warranty block, a drawn service-area map, sample financing note and an inspection request form close the page. Every price, rate and review is invented sample data.

- Audience: Primary: homeowners in and around [CITY] comparing roofers after a storm, an aging roof or a purchase — people who want a real number before they talk to anyone. Secondary: trades contractors adapting the layout and estimator to siding, windows or solar.
- Goal: Move a visitor from 'this company looks solid' to a submitted inspection request: earn trust with specifics in one screen, let the estimator answer the money question honestly without capture, then convert that momentum into the short form at the bottom.
- Tone: Confident, plainspoken trades talk — short sentences, exact numbers, no chest-thumping. Writes like the owner [FOUNDER] explaining the job across a kitchen table, never like an ad agency.

## Stack
- Framework: Vite 6 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), typescript (Apache-2.0), tailwindcss (MIT), motion (MIT), lucide-react (ISC), @fontsource/oswald (OFL-1.1), @fontsource/inter (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite 6 + React 18 + TypeScript project with base './', build.outDir 'dist', build.sourcemap: false. No router, no backend, no server code.
  - Install Tailwind CSS 3.4 with PostCSS and Autrefixer. Extend the theme with the exact palette below, fontFamily.display 'Oswald' and fontFamily.body 'Inter'.
  - Self-host Oswald weights 500, 600 and 700 and Inter weights 400, 500, 600 and 700 through @fontsource/oswald and @fontsource/inter, imported in src/main.tsx. Never load fonts from a CDN.
  - Use Motion from 'motion/react' (motion, useInView, useReducedMotion, animate) for section reveals, stat count-ups and slider handle spring; gate every animation on useReducedMotion().
  - Keep all copy, rates and data in src/content.ts: brand strings, hero copy, service cards, estimator config (pitch profiles with area factors and labor surcharges, material rate ranges, squares-per-day divisors, tear-off rates), checklist items with weights and tier copy, materials table rows, reviews, service towns with drive times, financing note, form town options. When variable values change, rewrite the dependent copy there and derive storage keys and the tel: link from [BRAND] and [PHONE] so no default-brand remnants remain.
  - Estimator math, exactly: squares = ceil(footprint × pitchAreaFactor ÷ 100) where pitchAreaFactor is 1.05 / 1.12 / 1.20 / 1.41 for the four profiles; installed rate per square is asphalt $425–515, metal $725–875, tile $950–1,150; steep surcharge adds 8% (Steep) or 15% (Very steep) to both bounds; tear-off, when on, adds $95–130 per square; days = ceil(squares ÷ divisor) + 1 if tear-off and squares over 18, divisor 15 asphalt / 12 metal / 9 tile, minimum 1, shown as 'N–N+1 days'; round both price bounds to the nearest $100. Every input, the chosen pitch name and material persist to localStorage under [BRAND_SLUG]-estimate.
  - Build the four pitch profiles as inline SVG gable cross-sections drawn in code (a right-triangle roof with the rise labeled by angle only — 4/12, 6/12, 9/12, 12/12 — no text beyond the name and pitch fraction), each in a selectable card that highlights in safety orange when active.
  - Build the service-area map as an inline SVG: a charcoal panel, [CITY] as an orange star with a 'Shop' label, six sky-blue town dots connected by thin dashed roads, one large dashed sky-blue circle labeled '40-mile service radius'. Invent the dot positions; towns and drive times come from content.ts.
  - The before/after slider uses two stacked images of the same 4:3 vantage with the after image clipped by inset(0 0 0 N%); a draggable orange handle with a left-right chevron, driven by pointer events, arrow keys when focused, and role='slider' with aria-valuenow.
  - Persist the storm checklist selections and the inspection request to localStorage under [BRAND_SLUG]-storm-check and [BRAND_SLUG]-inspection-request; validate restored JSON and recover silently from malformed data.
  - Use only these lucide-react icons: Phone, CalendarCheck, ShieldCheck, HardHat, Home, Wind, Droplets, CloudRain, Wrench, CheckCircle2, Star, MapPin, ChevronRight, ArrowRight, Clock, Menu, X, ChevronLeft.
  - Download the six generated photos to the exact public paths listed in Assets before building. Create ASSETS.md at the project root listing every file's path, source URL, author or generator, and license.
  - A plain <title> of [BRAND] and a favicon (the orange roofline mark) are enough; no meta descriptions, Open Graph tags, JSON-LD, or sitemaps.

## Variables
- [BRAND] — Brand (default: "Ironpeak Roofing Co."). Invented contractor name; an orange roofline chevron logomark is derived from it in code.
- [CITY] — City (default: "Harlow Springs"). Home town of the shop; appears in the hero eyebrow, service map, towns list and footer address.
- [FOUNDER] — Founder (default: "Ray Delgado"). The invented owner's name used in hero and warranty copy.
- [PHONE] — Phone (default: "(555) 214-8806"). The business line shown in the header, storm checklist result and mobile call bar; links as tel: with digits only.
- [EXPERIENCE] — Experience (default: "17 years"). Plain phrase like '17 years'; used in hero copy and the proof bar.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/roofing-company-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Slate charcoal `#2B2F36` — Hero ground, dark bands, header text-on-light, footer
- Charcoal deep `#22262C` — Footer and deepest panels on dark
- Safety orange `#FF6A13` — Primary signal: CTAs, active pitch card, slider handle, key numbers
- Orange tint `#FFE9DC` — Light accent chips and estimator highlights on white
- Sky blue `#8EC5FF` — Data accent: map dots, radius ring, links, secondary highlights
- Sky tint `#E7F0FC` — Info panels (financing note, estimator footnote)
- Warm white `#F7F5F1` — Light section band ground
- White `#FFFFFF` — Cards and content panels
- Ink `#1B1F25` — Headings and body on light
- Steel `#59626D` — Secondary text on light; use #A9B2BD on dark
- Hairline `#DCE0E5` — Hairline rules and card borders

### Typography
- Display: headlines, section titles, big numbers, nav: Oswald (OFL), weights 500/600/700
- Body: paragraphs, controls, table cells, meta: Inter (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Sections separated by 96px on desktop, 64px on mobile; section headers use a 14px letter-spaced orange eyebrow above an Oswald 600 title at clamp(30px, 3.4vw, 46px); cards carry 28px internal padding and 24px gaps in grids.
- Radius: Hard-edged: 2px on cards and chips, 0 on buttons and tables — square corners are the identity; only photos get 6px.
- Motion: Fade-rise reveals: sections and cards enter with a 16px rise and 500ms ease, children staggered 60–90ms, driven by useInView once.
- Motion: Stat numbers count up over 900ms when the proof bar enters view; the estimator price tweens over 150ms on change.
- Motion: Before/after handle follows the pointer directly while dragging and settles with a 200ms spring on release; checklist checks pop 1.15× over 150ms.
- Motion: Every animation is disabled instantly under prefers-reduced-motion; no parallax, no scroll-jacking, no autoplay media.
- Imagery: Golden-hour architectural photography from one shoot: finished roofs, roofline details and material textures, raking warm light, deep shadows, no crews, no tools, no vehicles, no readable text or signage anywhere. Charcoal shingles and warm terracotta tones echo the palette.

## Pages & Sections
### [BRAND] — Roofing in [CITY] (`index.html`)
1. **Header and hero** — Header (charcoal, 76px, becomes 92% opacity with backdrop blur on scroll): logomark — a safety-orange square holding a white roofline chevron — beside [BRAND] in Oswald 600 uppercase 20px; nav anchors Services, Estimator, Materials, Service area; right side a sky-blue phone line 'Phone' icon + [PHONE] (links tel: with digits only) and an orange pill 'Free inspection' scrolling to the form. At 390px the header shows logomark + brand mark, a phone icon button and a menu button on one line (44px targets, no wrapping); the anchors sit in a charcoal dropdown under the menu button. Hero: full-bleed hero-roof photo (finished charcoal-shingle roof of a two-story home at golden hour, 88vh desktop / 640px mobile, object-cover) with a left-to-right gradient scrim from #2B2F36 at 96% opacity over the left 55% fading to 30%; content bottom-left: eyebrow 'LICENSED ROOFING CONTRACTOR — [CITY] & 40 MILES AROUND' in sky blue; H1 in Oswald 700 uppercase 'A ROOF YOU NEVER THINK ABOUT AGAIN.'; paragraph '[FOUNDER]'s crews have reroofed [CITY] for [EXPERIENCE] — on schedule, yard left spotless, and a ten-year workmanship warranty in writing.'; primary orange pill 'Get a free inspection' (anchor to form) and white-outline pill 'Price my roof' (anchor to estimator); proof row of three chips in white 12px uppercase on translucent charcoal: '10-yr workmanship warranty' · 'License #RC-88412 · insured' · 'Same-week inspections'.
   Layout: Hero content in a 1200px max-width grid, copy in columns 1–7; chips wrap on two rows max at 390px. The scrim guarantees WCAG AA for all hero text.
   Motion: Photo scales from 1.05 to 1 over 900ms; eyebrow, H1, paragraph, buttons and chips rise 16px in an 80ms stagger; scrim is static.
2. **Proof bar** — White band with hairline top and bottom rules, four stats separated by vertical hairlines, each: a big Oswald 700 number in ink with an orange suffix, and a 13px steel label. '1,417' 'roofs completed' · '10-yr' 'workmanship warranty' · '48-hr' 'storm response promise' · '4.9' 'from 312 neighbor reviews' (last one with an orange star icon).
   Layout: Four equal columns on desktop, two-by-two on mobile with the hairlines becoming an outer border only.
   Motion: Numbers count up from 0 over 900ms when the band enters view (10-yr and 48-hr count through their digits); reduced-motion renders final values.
3. **Services** — Warm-white band. Eyebrow 'WHAT WE DO' (orange); title 'Four jobs, done roof-first.' Cards (white, 2px radius, hairline border, 28px padding): 'Full roof replacement' — 'from $13,900' — 'Tear-off, deck repair, ice-and-water shield, and a full architectural, metal or tile install. Most homes finish in two to four days.' with Home icon; 'Repair & leak tracing' — 'from $385' — 'Water tests, attic checks and infrared tracing to find the real entry point — then a fix that holds, documented with photos.' with Wrench icon; 'Storm damage & insurance' — 'inspection free' — 'Hail and wind assessments with a photo report you can hand straight to your adjuster. 48-hour response after a named storm.' with CloudRain icon; 'Gutters & ventilation' — 'from $1,150' — 'Seamless gutters, guards and ridge/soffit vent balancing so the new roof breathes the way it should.' with Wind icon. Each card footer: orange ChevronRight link 'Book it' anchoring to the form.
   Layout: Four cards in a 4-column grid (2×2 under 1024px, 1-column under 640px); price sits in an orange-tint chip top-right of each card.
   Motion: Cards rise 16px in a 70ms stagger on section entry.
4. **Roof cost estimator** — Charcoal band, the signature section. Eyebrow 'THE HONEST NUMBER' (orange); title 'Know the range before anyone knocks.'; sub-lead in #A9B2BD 'Answer four things — no email, no call. Sample regional rates; your written quote follows a free on-roof inspection.' Controls in a white 2px-radius panel (left, 7 columns): 1) 'Home footprint' — range slider 800–4,000 sq ft, default 1,800, live Oswald value '1,800 sq ft'; 2) 'Roof pitch' — four selectable cards, each an inline SVG gable cross-section with name and pitch: 'Low · 4/12', 'Medium · 6/12', 'Steep · 9/12', 'Very steep · 12/12', active card outlined in orange with an orange-tint wash; 3) 'Material' — three chips with 40px thumbs (shingle-macro, metal-roof-detail, tile-roof-detail): 'Architectural asphalt', 'Standing-seam metal', 'Clay tile'; 4) 'Existing layers to remove' — toggle switch, on by default, label 'Tear-off included'. Result panel (charcoal-deep, right, 5 columns, sticky on desktop): 'YOUR BALLPARK' eyebrow in sky blue; price range in Oswald 700 orange at clamp(38px, 4vw, 54px), e.g. '$15,200 – $18,400'; line items in 14px #A9B2BD with white values: 'Roof area 24 squares', 'Asphalt, installed $425–515 / square', 'Steep-pitch labor +8%', 'Tear-off $95–130 / square'; a hairline; 'Time on site 2–3 days'; footnote in 12px: 'Sample rates for a typical [CITY] job. Real number comes with the free inspection.'; orange pill 'Book the free inspection'. The estimate re-computes live on every change.
   Layout: Two-column 7/5 grid on desktop; on mobile the result panel stacks under the controls, non-sticky, and the price uses 38px.
   Motion: The price range and days update with a 150ms number tween; line-item rows fade 8px on change; no layout shift.
5. **Materials comparison** — White band. Eyebrow 'MATERIALS'; title 'Three rooflines, three budgets.' Table (Oswald 500 14px uppercase header row on charcoal with white text; rows Inter 15px on white with hairline dividers; first column a 56px material thumb): columns Material · Lifespan · Installed cost / square · Weight · Best for · Material warranty. Rows: 'Architectural asphalt' (shingle-macro thumb) — '25–30 yrs' — '$425–515' — 'Moderate' — 'Most homes and budgets' — '25–30 yr'; 'Standing-seam metal' (metal-roof-detail thumb) — '40–70 yrs' — '$725–875' — 'Light' — 'Snow country, low-pitch additions' — '50 yr'; 'Clay tile' (tile-roof-detail thumb) — '50+ yrs' — '$950–1,150' — 'Heavy — may need framing check' — 'Mediterranean looks, long-horizon homes' — 'Lifetime'. Under the table a sky-tint panel, 14px: 'Ranges are sample regional rates for side-by-side comparison, not quotes. Your written estimate reflects pitch, layers, deck condition and access.'
   Layout: Table scrolls horizontally inside a hairline-bordered panel under 900px with the first column sticky-left; the note panel spans full width beneath.
   Motion: Row hover raises a 2px orange left edge; no other motion.
6. **Before and after** — Warm-white band. Eyebrow 'PROOF'; title 'Same street. Three days apart.' Interactive slider, 16:9 max 1080px wide: before-roof (aged, cracked, moss-streaked shingles, flat overcast light) under after-roof (crisp new architectural shingles, warm golden light), same three-quarter roofline vantage; a vertical orange handle with white ChevronLeft + ChevronRight glyphs in a circle; labels 'BEFORE' and 'AFTER' in translucent charcoal chips at top corners. Caption under the slider, 14px steel: 'Alder Creek reroof — 2,150 sq ft, tear-off, 3 days on site. Photo taken from the same corner of the yard.'
   Layout: Slider centered with 24px side margins; pointer drag, click-to-position and arrow keys when the handle is focused; touch-friendly 44px handle.
   Motion: Handle follows pointer with a light 200ms spring on release; clip updates every frame with no transition while dragging.
7. **Storm damage checklist** — White band. Eyebrow 'AFTER A STORM'; title 'Check eight things. We'll tell you how urgent it is.' Intro 15px steel: 'Walk the yard with your phone. Tap everything you can see from the ground — no ladders.' Checklist (two columns of four white cards, each a CheckCircle2 that fills orange when tapped, 16px Inter label, 12px steel weight tag): 'Missing or lifted shingles' (high), 'Granules filling the gutters' (watch), 'Water stain on a ceiling or wall' (high), 'Dented gutters or downspouts' (high), 'Cracked or curling shingle edges' (watch), 'Daylight through the boards in the attic' (urgent), 'Sagging deck or dip in the roofline' (urgent), 'Roof is past 20 years old' (watch). Result card (charcoal, full width below, appears once one item is tapped): severity tier in Oswald 600 orange — 1 watch item 'Keep an eye on it' / any high 'Get an inspection this season' / any urgent 'Call today — active damage worsens with every rain'; a one-line steel explanation; an orange pill 'Call [PHONE]' (tel:) and a white-outline pill 'Book a free inspection' (anchor). Result text examples: watch — 'Recheck after the next big wind; book before winter if it worsens.'; high — 'A roofer should look within weeks — inspections are free and take 40 minutes.'; urgent — 'Active leaks compound fast. The storm line answers 24/7.'
   Layout: Cards grid 2×4 desktop, 1-column mobile; result card is sticky? no — flows below; selections persist to localStorage and restore on reload.
   Motion: Taps bounce the check 1.15× over 150ms; the result card expands with a 250ms height ease; tier upgrades flash the tier label orange once.
8. **Warranty, license and service area** — Charcoal band, two halves. Left: eyebrow 'THE PAPERWORK THAT MATTERS' (orange); title 'Ten years on the work. License on file.'; paragraph '[BRAND] fixes any workmanship failure free for ten years — parts, labor, and the trip. Materials carry the manufacturer's own coverage, 25 years to lifetime depending on what you pick. We operate under license #RC-88412 with workers' comp and $2M liability; ask the crew lead to see the binder any day on site.'; three chips (charcoal-deep, sky-blue text): 'License #RC-88412', 'Insured · workers' comp + $2M', 'Background-checked crews'. Right: the inline SVG service map on a charcoal-deep panel — [CITY] as an orange star labeled 'Shop', sky-blue dots for 'Alder Creek 12 min', 'Brookfield 18 min', 'Kestrel Park 22 min', 'Sawmill Flat 26 min', 'Two Bridges 31 min', 'Vesper Bay 38 min', thin dashed sky-blue roads between them, a large dashed circle labeled '40-mile service radius'; below the map a 13px #A9B2BD line: 'Outside the circle? Call anyway — full replacements travel.'
   Layout: 6/6 columns desktop, stacked mobile with the map at a 4:3 panel; town labels never overlap the radius ring (keep labels inside or leader-lined).
   Motion: Map dots pulse once (opacity 0.6→1, 600ms stagger) on section entry; roads draw in via stroke-dashoffset over 800ms; reduced-motion shows the static map.
9. **What neighbors say** — White band. Eyebrow 'NEIGHBORS'; title 'Reviewed by the people on the next street.' Three cards (warm-white ground, hairline border, orange-tint quote mark): five orange stars; quote 16px ink; footer 13px steel — name, town, job. 'They reroofed our 1962 ranch in three days and the yard was cleaner than they found it. The estimator was $600 over the final invoice — in our favor.' — Marion T., Alder Creek, full replacement. 'Hail took half the street. [BRAND] had a photo report to my adjuster in two days and the check covered everything they quoted.' — Devon R., Brookfield, storm claim. 'Leak three roofers couldn't find. Ray water-tested for an hour, found a nail pop by the chimney, fixed it, showed me photos.' — Priya S., Kestrel Park, repair.
   Layout: Three cards in a row (1-column under 900px); middle card lifts 12px on desktop for rhythm.
   Motion: Cards rise 16px in a 90ms stagger on entry.
10. **Financing note** — Warm-white band with a single sky-tint panel, 2px radius, centered max-width 860px: title in Oswald 600 'Want it in payments?' 15px ink paragraph 'Sample terms for illustration only: 0% APR for 12 months, or 9.9% APR across 60 months, through a third-party lender — subject to credit approval. This is not an offer of credit. Real options arrive with your written quote.' A small Droplets-to-Clock note row: 'Storm-damage jobs can often be scheduled first and financed after the adjuster settles.'
   Layout: Single centered panel; 32px padding; no grid.
   Motion: Panel fades in 12px on entry; no other motion.
11. **Inspection request** — Charcoal band. Eyebrow 'START HERE' (orange); title 'Free inspection. 40 minutes. Photo report yours to keep.' Form in a white 2px-radius panel (max-width 720px, 32px padding), fields Inter 15px with 6px-radius inputs and steel 13px labels: Name (text, required), Phone (tel, required, basic pattern check), Street address (text, required), Town (select: the seven service towns, [CITY] first), 'What's going on' (textarea, placeholder 'e.g. ceiling stain after Monday's storm, roof is ~22 years old'), Preferred window (segmented control: Morning / Afternoon / Either), one checkbox 'An insurance claim may be involved'. Orange pill submit 'Request my inspection'. Validation: on submit, missing required fields get a 2px orange border and a 13px orange note under the field; no browser-native popups. Success replaces the form (no reload): a CheckCircle2 in orange, 'Got it, [name].' in Oswald 600, 'The office calls within one business day — usually the same morning. Nothing was sent anywhere: this demo stores your request in this browser only.' and a white-outline pill 'Book another'. The request persists to localStorage.
   Layout: Two-column field rows on desktop (name+phone, address+town), textarea and window control full width; 1-column mobile. On mobile this section gets 96px bottom padding so the sticky bar never covers the submit button.
   Motion: Success state crossfades with a 12px rise; the check pops 1.15×; reduced-motion swaps instantly.
12. **Footer** — Charcoal-deep band. Grid: column 1 — logomark + [BRAND] in Oswald 600 white, then 13px #A9B2BD lines '118 Foundry Row, Unit 4, [CITY]', 'License #RC-88412 · insured', 'Mon–Sat 7a–6p · storm line 24/7'; column 2 — 'Jobs' anchor list (Services, Estimator, Materials, Service area); column 3 — 'Talk to us' with phone [PHONE] (tel:) in sky blue and 'Free inspection' orange pill. Bottom row under a hairline: '[BRAND] · Sample site for a template — all rates, towns and reviews invented' in 12px #7C858F, and the optional [CREDIT] link in sky blue. Mobile sticky bar (visible under 768px only): fixed bottom, charcoal 96% opacity with backdrop blur, two pills filling the width: orange 'Call [PHONE]' (tel:) and white-outline 'Free inspection' (anchor to form); includes safe-area-inset-bottom padding.
   Layout: Footer grid 4/4/4 desktop stacking to 1-column mobile; sticky bar height 64px; page body gets padding-bottom 80px under 768px so nothing hides behind it.
   Motion: None.

## Assets
- image: Hero finished roof. Download https://media.vibefather.ai/assets/25ee36a4-c2f6-445b-88f9-2cb6f77604a2/hero-roof.webp to public/images/hero-roof.webp. Alt: 'A finished charcoal-shingle roof on a two-story home at golden hour.' Used as the hero's full-bleed visual anchor. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Asphalt shingle macro. Download https://media.vibefather.ai/assets/25ee36a4-c2f6-445b-88f9-2cb6f77604a2/shingle-macro.webp to public/images/shingle-macro.webp. Alt: 'Close view of architectural asphalt shingles.' Used as the estimator's asphalt thumb and the materials table's asphalt row. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Standing-seam metal detail. Download https://media.vibefather.ai/assets/25ee36a4-c2f6-445b-88f9-2cb6f77604a2/metal-roof-detail.webp to public/images/metal-roof-detail.webp. Alt: 'Standing-seam metal roof panels catching warm light.' Used as the estimator's metal thumb and the materials table's metal row. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Clay tile detail. Download https://media.vibefather.ai/assets/25ee36a4-c2f6-445b-88f9-2cb6f77604a2/tile-roof-detail.webp to public/images/tile-roof-detail.webp. Alt: 'Overlapping terracotta clay roof tiles.' Used as the estimator's tile thumb and the materials table's tile row. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Before photo. Download https://media.vibefather.ai/assets/25ee36a4-c2f6-445b-88f9-2cb6f77604a2/before-roof.webp to public/images/before-roof.webp. Alt: 'An aged roof with cracked, curling shingles and moss streaks.' The before layer of the proof slider. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: After photo. Download https://media.vibefather.ai/assets/25ee36a4-c2f6-445b-88f9-2cb6f77604a2/after-roof.webp to public/images/after-roof.webp. Alt: 'The same roofline with new architectural shingles in warm light.' The after layer of the proof slider, matching the before vantage. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- icon: Lucide (ISC) via the lucide-react package, restricted to the icon list in setup. No other icon source.
- font: Oswald (OFL) and Inter (OFL) self-hosted through @fontsource/oswald and @fontsource/inter; no CDN font loading.

## Don'ts
- No real roofing manufacturers, product lines, shingle color names or warranty programs — materials are described generically as architectural asphalt, standing-seam metal and clay tile.
- No real contractors, franchises, certification badges or inspection seals; [BRAND], license #RC-88412, reviews, towns and the address are invented sample data.
- Photos must show roofs, rooflines and materials only — no crews, no faces, no vehicles, no readable text, signage, license plates or brand marks anywhere.
- All prices, rates, financing terms and drive times are labeled sample data for illustration; never present them as quotes or an offer of credit, and never call the financing section a lender's terms.
- No dates anywhere on the page: no year in the footer, no '© 2026', no date pickers tied to the real clock; time references stay relative ('same-week', '48-hour response').
- Forms are local-only samples: no submit to any server, no APIs, no analytics, no email or calendar services. Persist to localStorage only and validate restored data.
- No backend, server code, databases or auth. Static output in dist/ from the single build command, under 20 MB, with Vite's base relative.
- Self-host fonts through the Fontsource packages only; never load Google Fonts, Adobe Fonts or any CDN stylesheet or script.
- No source maps in production and no src/ copied into dist/.
- No Unsplash, Pexels, Pixabay, Google Images, placeholder-image services or hotlinked files; use only the six generated photos and code-drawn SVG art.
- No SEO work: no meta descriptions, Open Graph tags, JSON-LD, sitemaps or keyword-stuffed headings. A plain title with [BRAND] and a favicon are enough.
- The estimator must never guess silently: keep the rate table and every surcharge visible in content.ts and reflected in the on-screen line items.
- No scroll-jacking, page parallax, custom cursor or autoplay media; motion limited to the specified reveals, count-ups, tweens and the slider spring, all respecting prefers-reduced-motion.
- Keep the mobile header on one line at 390px (logomark, call button, menu button) and never let the sticky bottom bar cover the inspection form's submit button.
- Build brand-derived strings (storage keys, tel: link, slugs) from [BRAND] and [PHONE] so alternate variable values never leave default-brand remnants.
- Every internal link is a file name or in-page anchor, never a bare directory; the site stays one index.html.

---
— Prompt by VibeFather · https://vibefather.ai/t/roofing-company-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.