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

# Home Services Quote Landing Page

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

## Brief
A single-page lead-generation website for [BRAND], a [TRADE] company serving [CITY], reachable 24/7 at [PHONE]. It must convert like a real trades landing page: a sticky emergency call bar that survives scrolling, an instant quote estimator above the fold (job type, home size, urgency) that computes a live price range, six service cards with flat-rate from-prices, a service-area ZIP checker with an invented neighborhood list, a guarantees strip, homeowner reviews, a four-step process strip and a call-now finale. One page: index.html. Everything runs in the browser; nothing is submitted anywhere.

- Audience: Homeowners in an emergency (burst pipe, dead boiler, no hot water) searching on a phone at 9pm, plus planners comparing quotes for renovations. Skewed 35–70, price-sensitive but primed by urgency; they want a price range, a real human on the phone and proof the company is licensed and local.
- Goal: Produce phone calls and booked estimate visits. Within ten seconds a visitor should see the emergency number, the arrival promise and the start of the estimator; within two minutes, a price range for their job.
- Tone: Plain, fast and honest, like a good dispatcher. Short declarative sentences, concrete numbers (minutes, dollars, years), no exclamation marks, no 'family owned and operated' clichés without specifics.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (ISC), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource/barlow-condensed (OFL-1.1), @fontsource/barlow (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. One HTML page at the project root: index.html (entry src/main.tsx).
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0 }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS (tailwindcss + postcss + autoprefixer), content ['./index.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts add every color under Design to theme.extend.colors with kebab-case keys (paper, mist, navy, navy-soft, ink, slate-blue, rule, orange, orange-deep, orange-pale, good) and fontFamily display ['Barlow Condensed', 'Arial Narrow', 'sans-serif'], sans ['Barlow', 'system-ui', 'sans-serif']. Set borderRadius DEFAULT to 10px and add maxWidth { container: '1200px' }.
  - In src/fonts.ts import '@fontsource/barlow-condensed/600.css', '@fontsource/barlow-condensed/700.css' and '@fontsource/barlow/400.css', '@fontsource/barlow/600.css'; import src/fonts.ts and src/index.css from the entry file.
  - File layout: src/content.ts (every string, number, service, price band, ZIP, neighborhood, review, step and FAQ answer, typed), src/lib/brand.ts (brandSlug = [BRAND] lowercased with every run of non-alphanumeric characters replaced by '-', phoneDigits = [PHONE] digits only for tel: links, emailDomain = brandSlug without hyphens + '.com'), src/lib/storage.ts (safe localStorage get/set wrapped in try/catch, keys prefixed with brandSlug + ':'), src/lib/estimate.ts (pure function estimate(jobType, homeSize, urgency) → { low, high, minutes } from the price bands in content.ts).
  - State: src/store/lead.ts is a tiny external store (useSyncExternalStore) holding the estimator choices { jobType, homeSize, urgency }, the ZIP input and result, and the saved lead { name, phone, problem } after the final form, persisted to localStorage key brandSlug + ':lead'.
  - Components in src/components/: EmergencyBar.tsx (sticky), Header.tsx, MobileMenu.tsx, Reveal.tsx (Motion whileInView wrapper), Eyebrow.tsx, Footer.tsx; Hero.tsx (with estimator card), Estimator.tsx (JobPicker.tsx, SizePicker.tsx, UrgencyPicker.tsx, EstimateResult.tsx), Guarantees.tsx (BadgeShape.tsx), Services.tsx (ServiceCard.tsx), ZipChecker.tsx, AreaMap.tsx (inline SVG), Reviews.tsx, Process.tsx, LeadForm.tsx, Faq.tsx. src/pages/Home.tsx composes them with Header and Footer.
  - Before the first build, download every image listed under Assets into public/images/ with curl -L -o using the exact file names given. The build itself never fetches anything.
  - public/favicon.svg as described under Assets. index.html: lang en, <meta name='theme-color' content='#13293F'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>, <title>[BRAND] — [TRADE] in [CITY] · 24/7</title>.
  - Write ASSETS.md at the project root as described under Assets.
  - dist/ holds index.html, hashed JS/CSS, the woff2 fonts, favicon.svg and the six images. Keep it under 10 MB.

## Variables
- [BRAND] — Company name (default: "Trueflow Plumbing & Heating"). Invented trade company name. Used in the wordmark, title tag, footer, email (dispatch@ + brandSlug without hyphens + .com) and localStorage keys. Never a real franchise or company.
- [TRADE] — Trade (default: "Plumbing & Heating"). What the company does. Drives the six service cards, the estimator's job list, the process strip wording and the FAQ. Keep the same counts: 6 services, 8 job types, 3 sizes, 3 urgencies.
- [CITY] — City (default: "Columbus, Ohio"). Where the company works. Used in the title, hero, area map label and footer. Neighborhoods and ZIP prefixes stay invented-sounding; only the city may be real.
- [PHONE] — Phone (default: "(614) 555-0184"). The 24/7 line, formatted like a local number with a 555 exchange. Used in the emergency bar, hero, CTA buttons (tel: links built from digits) and the footer.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/home-services-quote-landing-page 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
- Paper `#FFFFFF` — Page background, cards, estimator panel.
- Mist `#F1F4F8` — Alternate section background (Services, Process), input fill, chips.
- Navy `#13293F` — Hero background, header surface, footer, emergency bar text, photo overlays (as rgba(19,41,63,x)).
- Navy Soft `#1D3A57` — Hover surface on Navy, selected estimator step fill, deep borders.
- Ink `#17222E` — Headlines and body text on light backgrounds, icon color.
- Slate `#5B6B7B` — Secondary text, captions, eyebrows, disabled states (at 45% opacity).
- Rule `#DCE2EA` — 1px hairlines, card borders, input borders, map contour lines.
- Orange `#E8622A` — The one accent: emergency bar background, primary CTAs, price figures, selected chips, focus ring, map pin.
- Orange Deep `#C94E1D` — Primary button hover and pressed state.
- Orange Pale `#FBE3D6` — Estimate result background, badge fills, hover tint for service cards.
- Good `#2E7D5B` — Success states: ZIP covered check, form saved check, guarantee check marks.

### Typography
- Display: H1, H2, H3, service names, price figures, the wordmark, phone numbers in large sizes: Barlow Condensed (OFL), weights 600/700
- Text and UI: body, eyebrows, buttons, nav, form fields, captions, numbers (font-variant-numeric tabular-nums for prices and estimates): Barlow (OFL), weights 400/600

### Layout & motion
- Spacing: 8px base unit. Container max-width 1200px, centered, side padding 48px desktop, 32px tablet, 20px under 640px. 12-column grid, column gap 24px. Section vertical padding 104px desktop, 80px under 1024px, 64px under 640px. Type scale: H1 clamp(46px, 7vw, 96px) Barlow Condensed 700, line-height 0.98, uppercase, letter-spacing 0.005em; H2 clamp(34px, 4.4vw, 58px) Barlow Condensed 700 uppercase; H3 24px Barlow Condensed 700; lead Barlow 400 18px / 1.65; body Barlow 400 16px / 1.7 (max-width 64ch); eyebrow Barlow 600 12px uppercase letter-spacing 0.16em Slate, preceded by a 24px x 2px Orange line with 12px gap; caption Barlow 400 13px Slate. Buttons: height 54px, padding 0 28px, Barlow 600 15px uppercase letter-spacing 0.08em. Primary: Orange fill, Paper text. Secondary: 1px Ink border, Ink text (on Navy: 1px Paper border, Paper text). Small buttons 40px high. Inputs: height 52px, 1px Rule border, Mist fill, 16px Barlow, focus border Orange. Phone links: Barlow Condensed 700 26px, tabular-nums. Focus ring everywhere: 2px Orange outline with 3px offset.
- Radius: 10px on cards, buttons, inputs, chips, photos and the estimator panel. 999px only for chips, badges and the pulse dot.
- Motion: Easing: --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for reveals and result changes; --ease-io cubic-bezier(0.65, 0, 0.35, 1) for accordion and picker swaps. Confident, never playful.
- Motion: Reveal: blocks wrapped in <Reveal> start at opacity 0, translateY(16px) and animate to rest over 600ms --ease-out when 15% visible (Motion whileInView, viewport once). Siblings stagger by 70ms (index prop).
- Motion: Emergency bar: a small Orange pulse dot beside '24/7' (scale 1 to 1.3, 1400ms loop, pauses under reduced motion); the bar itself slides down 100% into place 300ms after load.
- Motion: Estimator: each picker choice fills the chip over 120ms and slides the estimate panel's numbers to the new range — the price counts between old and new values over 500ms --ease-io, the minutes badge crossfades. Switching steps slides the panel content 16px horizontally, 260ms --ease-io (AnimatePresence mode 'wait').
- Motion: ZIP checker: on submit, a spinner (drawn CSS ring) spins for a fixed 700ms, then the result card slides up 12px — Good check and 'Covered — [neighborhood]' for served prefixes, Orange 'Call us' card otherwise.
- Motion: Service cards: hover lifts 4px and the price ticks up 2px; the Orange 'from' rule grows from 0 to 24px width.
- Motion: Area map: when scrolled into view, the radius circle draws (stroke-dashoffset to 0) over 900ms, then van pins pop with 100ms stagger; the covered ZIP dots fade in.
- Motion: Reviews: cards rise 8px on hover; the star row fills Orange left to right over 400ms on first view.
- Motion: Header: transparent over the Navy hero with Paper text; after 40px of scroll it gets Paper at 96% opacity, Ink text, a 1px Rule border and a small Orange 'Call' button, 250ms transition. The emergency bar stays above it (two stacked sticky rows, emergency bar first).
- Motion: Links: .link-draw grows a 1px currentColor underline from 0% to 100% width over 250ms --ease-out on hover and focus-visible.
- Motion: prefers-reduced-motion: reduce — disable the bar slide, pulse, count-ups, draws, staggered pins and layout animations (render at rest). Color and border hover changes stay. Use CSS @media in index.css plus Motion's useReducedMotion in components.
- Imagery: Real photography only, documentary and workmanlike, all six made for this template in one consistent style: natural daylight, navy and white with orange tool accents, clean job sites, fine grain. Never a person: vans, tools, installs, parts and details — no faces, no hands. No readable text, logos or branding on vans, tools or parts. Every photo uses object-fit cover with the object-position given under Assets, 10px corners, no shadow; photos on Mist get a 1px Rule outline. Captions under photos in Barlow 13px Slate. Drawn in code: the favicon, the wordmark (type only), the invented guarantee badges (plain geometric shapes — shield, ring, check, clock — never a real certification body's logo), the area map, chips and the estimator panel. Icons: lucide-react only, stroke width 1.75.

## Pages & Sections
### Home (`index.html`)
1. **Content file and copy rules** — All copy below is written for the default values ([BRAND] = Trueflow Plumbing & Heating, [TRADE] = Plumbing & Heating, [CITY] = Columbus, Ohio, [PHONE] = (614) 555-0184). Put every string, number and list in src/content.ts and render from it. If any variable value differs, rewrite every headline, service, price band, job list, ZIP list, neighborhood, review, step and FAQ answer so it is specific and believable for the new trade, keeping the same structure and counts (6 services, 8 estimator jobs, 3 sizes, 3 urgencies, 5 ZIP prefixes, 3 reviews, 4 steps, 5 FAQs). All people, prices, streets and figures are invented. Company facts used throughout: address 2210 Foundry Road, [CITY]; phone [PHONE], answered 24/7 by a person, not a menu; average emergency arrival 47 minutes; 12 technicians, 6 vans; licensed and insured (invented license 'OH-88412'); flat-rate pricing quoted before work starts; 2-year warranty on repairs; no overtime, weekend or holiday surcharges; since 2009. Served ZIP prefixes (invented neighborhoods): 43012 Ashcroft, 43054 Bellwood, 43214 Foundry District, 43219 Millrace, 43230 Quarry North. Next-available slots: emergency 'today', estimate visits 'tomorrow 8am–10am'.
   Layout: n/a
   Motion: n/a
2. **Emergency bar (sticky)** — Orange bar, tallest priority layer (sticks above the header). Left: Lucide PhoneCall 16px and '24/7 emergency line — answered by a person' (Barlow 600 14px). Center/right: the pulse dot and '24/7' badge, the phone '[PHONE]' as a tel: link (Barlow Condensed 700 20px Paper) and 'Average arrival: 47 min' (Barlow 400 13px Paper at 85%). Under 640px: just the badge, phone link and arrival note, centered.
   Layout: Position sticky top 0, z-50, height 44px, full-width. All internal anchors (index.html#services etc.).
3. **Header** — Left: wordmark '[BRAND]' (Barlow Condensed 700 22px uppercase) with a second line 'Licensed & insured · [CITY]' (Barlow 600 10px uppercase letter-spacing 0.2em), linking to ./index.html. Center nav (Barlow 600 14px): 'Services' → #services, 'Pricing' → #pricing, 'Estimate' → #estimate, 'Reviews' → #reviews, 'FAQ' → #faq. Right: small Orange button 'Call [PHONE]' (tel: link) and the hamburger (Lucide Menu 22px, under 820px) opening MobileMenu: full-screen Navy panel, links at Barlow Condensed 700 28px uppercase Paper, the call button at the bottom, close icon top right.
   Layout: Position sticky top 44px (below the emergency bar), height 72px, container-aligned, transparent over the hero then Paper after 40px scroll. Mobile menu covers the viewport with a 300ms slide from the right.
4. **Hero with estimator** — Navy background. Left (6 cols): eyebrow (Orange line) 'Plumbing & Heating · [CITY]', H1 'BURST PIPE? BOILER DOWN? *WE''RE ON THE WAY.*' Lead (Paper at 85%, max-width 520px): 'Trueflow answers [PHONE] twenty-four hours a day — a dispatcher, not a menu. Flat-rate quotes before we touch a wrench, and a technician at your door in under an hour when it matters.' Three trust rows with Lucide icons (ShieldCheck 'Licensed & insured, OH-88412'; Timer 'Average arrival 47 minutes'; BadgeCheck '2-year warranty on every repair'). Secondary-on-navy button 'See flat-rate prices' → #pricing. Right (5 cols, offset 1): the Estimator card (see next section) on Paper. Bottom ledger inside the hero: '12 technicians · 6 vans · 15 years on the road' (Barlow 600 14px Paper at 75%).
   Layout: Vertical padding 128px top under the header and 96px bottom. Photo hero-van.webp as a full-bleed background at 18% opacity over Navy with a linear-gradient(180deg, rgba(19,41,63,0.92), rgba(19,41,63,0.96)). Under 1024px: single column, estimator below the trust rows.
5. **Instant quote estimator** — Paper card, id='estimate'. Card head: eyebrow 'Instant estimate' and H3 'What will it run me?' with caption 'A honest range before anyone visits. Three questions, no email.' Step chips inside the card: 1) Job — 8 options as a 2x4 grid of chips: 'Burst pipe / leak' (emergency band), 'Blocked drain', 'Water heater', 'Boiler / furnace', 'Toilet or faucet', 'Radiators', 'Sump pump', 'Renovation quote'. 2) Home size — 'Apartment', 'House up to 2,000 sq ft', 'House over 2,000 sq ft'. 3) Urgency — 'Emergency (now)', 'This week', 'Planning ahead'. Result panel on Orange Pale (always visible, updates live): 'Estimated: $180 – $420' (Barlow Condensed 700 40px Ink, tabular-nums, counting between changes), the line 'Typical fix: 60–90 minutes at the house' and 'Final flat rate confirmed before work starts.' Buttons: primary 'Book a visit' → #lead (stores the estimate with the lead) and ghost 'Or call [PHONE]' (tel:). Caption: 'Ranges from 2,400 jobs in the last two years. Your wall stays closed until you agree the number.'
   Layout: Paper card 10px radius with a 1px Rule border, 32px padding. Chips: Mist fill, 1px Rule border, 999px radius, selected fills Navy with Paper text; hover border Orange. Result panel 20px radius, padding 24px. Estimate maths (bands × size multipliers 1 / 1.15 / 1.3, urgency +60% / +0% / −5%, rounded to $10) lives in src/lib/estimate.ts with the bands in content.ts.
6. **Guarantees strip** — Mist band with four invented badge shapes (drawn SVG, Orange on Orange Pale, never real certification logos): ShieldCheck 'Licensed & insured' — 'State license OH-88412, $2M coverage, both current.'; Receipt 'Flat-rate quotes' — 'The number we quote is the number you pay. No hourly meter running.'; Wrench '2-year warranty' — 'Repairs warranted two years, parts and labor, in writing.'; Clock 'No overtime rates' — 'Nights, weekends and holidays cost the same as Tuesday at noon.'
   Layout: Four equal columns, 24px gap, badge 64px circle + title Barlow Condensed 700 20px + two-line body Barlow 14px. Under 768px: 2x2, then one column.
7. **Services** — Section id='services'. Eyebrow 'What we fix' and H2 'Six jobs, flat rates, no surprises.' Six cards, each with a photo top, name (Barlow Condensed 700 24px), one-line description, and a bottom row 'from $89' (Barlow Condensed 700 24px Orange) + 'Typical: 60–90 min' (Barlow 13px Slate): 1) photo tools-flat.webp — 'Emergency leaks & bursts' — 'Water where it shouldn''t be. We shut it off, dry it out and fix the line.' — from $129. 2) photo boiler-install.webp — 'Boilers & furnaces' — 'Repairs, service and replacements, all makes we can still get parts for.' — from $210. 3) photo pipe-work.webp — 'Drains & blockages' — 'Camera inspection first, so we fix the pipe, not a guess.' — from $99. 4) photo kitchen-sink.webp — 'Kitchens & bathrooms' — 'Faucets, toilets, sinks and the pipes behind the walls.' — from $89. 5) photo hero-van.webp (reused) — 'Water heaters' — 'Tank and tankless, same-day swaps when the shower goes cold.' — from $240. 6) photo technician-belt.webp — 'Radiators & sump pumps' — 'Bleeding, balancing and the pump that keeps the basement dry.' — from $150. Each card button 'Get an estimate' → #estimate (scrolls up and preselects the matching job chip).
   Layout: Paper background. 3x2 grid (24px gap), cards on Mist 10px radius with a 1px Rule border; photo aspect 4:3, 10px radius top corners only. Under 900px: 2 columns, under 640px: one.
8. **ZIP checker and area map** — Section id='pricing'. Eyebrow 'Where we roll' and H2 'In [CITY] and forty minutes around it.' Left: the ZIP checker — input (placeholder 'Your ZIP code'), submit 'Check'; on a served prefix (43012, 43054, 43214, 43219, 43230) a Good result card: check icon, 'Covered — that''s [neighborhood].' and 'Next estimate slots: tomorrow 8am–10am. Emergencies: today.'; any other 5-digit entry gets an Orange card: 'Not on our regular routes — but call [PHONE]; we cover most of the metro and we''ll tell you straight.'; invalid input shows an inline hint 'Five digits, like 43214.' Right: the AreaMap SVG — a Rule-contour street grid, an Orange pin at the center labeled '[BRAND] HQ', a dashed Orange radius circle labeled '40 min', five Good dots labeled with the neighborhoods, a small north arrow; caption 'Routes as the crow drives, not as the crow flies.'
   Layout: Mist background. Two columns: checker 5 cols, map 6 cols offset 1. Map SVG viewBox 0 0 720 520, width 100%. Under 900px: stacked, checker first.
9. **Reviews** — Section id='reviews'. Eyebrow 'Neighbors, quoted' and H2 'Three of 412 reviews.' Cards: 1) five Orange stars — '"Sunday night, water heater died, water everywhere. Trueflow answered on the second ring and the tech was pulling in at minute fifty-one. Quoted before he touched anything."' — Dana K., Foundry District — 'Emergency water heater swap'. 2) five stars — '"The camera found the blockage was roots, not toys (two kids, both innocent). Flat rate, clean up better than they found it, warranty in writing."' — Marcus and Jo T., Quarry North — 'Drain line repair'. 3) four-and-a-half stars (drawn half star) — '"Booked an estimate for a bathroom redo. The quote came in three parts — must, should, someday — which is the most honest document I''ve received from a trades company."' — Priya S., Bellwood — 'Renovation estimate'.
   Layout: Paper background. Three equal columns, 24px gap, cards on Mist 1px Rule border 28px padding; quote Barlow 400 16px / 1.7, attribution Barlow 600 13px Slate with the job in Orange. Under 860px: stacked.
10. **Process and lead form** — Section id='lead'. Eyebrow 'How a visit goes' and H2 'Four steps, zero drama.' Strip: 1) Phone 'You call [PHONE]; a dispatcher answers, asks three questions and books a window.' 2) ClipboardList 'The tech arrives, diagnoses and quotes a flat rate — before any tool leaves the van.' 3) Wrench 'You agree the number; the work happens; the old parts go in a box, not the wall.' 4) Sparkles 'We clean up, you get the warranty in writing, and the invoice matches the quote.' Below, the lead form on a Paper card beside the strip (right column): name input, phone input, textarea 'What''s going on?' (optional), primary 'Request my visit' and caption 'We call back within 15 minutes during the day. Nothing is sent anywhere — this demo keeps your details in your browser.' On submit (name + valid phone required): the card swaps to a Good confirmation — check circle, 'Got it, [NAME].' 'A dispatcher will call [PHONE]. If it''s flooding, call now — don''t wait for us to click.' and the stored estimate line if one exists ('Your estimate: $180 – $420, Water heater, this week').
   Layout: Navy background, Paper text. Strip: four steps in a row with numbered Orange circles connected by 1px Paper/25% lines. Form 5 cols right offset 1; inputs Paper fill, Navy text. Under 1024px: strip becomes 2x2, form below.
11. **FAQ** — Section id='faq'. Eyebrow 'Straight answers' and H2 'Asked at the door, answered here.' Five accordions: 1) 'Do you charge extra at night or on weekends?' — 'No. Nights, weekends and holidays bill at the same flat rates as Tuesday at noon. The estimate you see is the estimate you pay.' 2) 'Are you licensed and insured?' — 'State license OH-88412 and $2M liability coverage, both current; both numbers are on every invoice and every van.' 3) 'What does the warranty cover?' — 'Repairs carry two years, parts and labor, in writing. Replacements carry the manufacturer''s term plus our first year of labor.' 4) 'Can I supply my own parts or fixtures?' — 'Yes. We install customer-supplied parts; the labor warranty still applies, the part warranty passes to the maker.' 5) 'What if the quote changes once you open the wall?' — 'It stops. Work pauses, you see photos of what we found, and nothing continues without a new number you agreed to.'
   Layout: Paper background, accordion rows with 1px Rule dividers, question in Barlow Condensed 700 22px uppercase, answer Barlow 16px / 1.7 max-width 66ch, Plus icon right. Container max-width 780px.
12. **Footer** — Navy background. Four columns: 1) wordmark '[BRAND]' (Barlow Condensed 700 24px Paper) over '[TRADE] · Est. 2009' and 'OH-88412 · $2M insured'. 2) 'Reach us': phone tel: '[PHONE]' 24/7, dispatch@ + emailDomain, address 2210 Foundry Road, [CITY]. 3) 'Hours': 'Phones: 24/7, humans only' / 'Office: Mon–Sat 7am–6pm' / 'Estimates: same week, usually tomorrow'. 4) 'This page': anchors Services, Pricing, Estimate, Reviews, FAQ. Bottom line under a 1px Paper/15% rule: '© [BRAND]. Fixed right, priced straight.'
   Layout: Vertical padding 72px, 4 equal columns, bottom line 40px below the rule. Under 768px: two columns, then stacked.

## Assets
- image: Template photos made for this design (free to redistribute with the template). Download each with curl -L -o into public/images/: https://media.vibefather.ai/assets/a0691ecf-c44e-4489-a4a2-9d11c6fc7a8c/hero-van.webp → public/images/hero-van.webp (Hero background at 18% opacity over Navy, Services card 5; alt 'A clean white service van parked on a quiet residential street'); https://media.vibefather.ai/assets/a0691ecf-c44e-4489-a4a2-9d11c6fc7a8c/tools-flat.webp → public/images/tools-flat.webp (Services card 1; alt 'Plumbing tools laid out neatly on a workbench'); https://media.vibefather.ai/assets/a0691ecf-c44e-4489-a4a2-9d11c6fc7a8c/boiler-install.webp → public/images/boiler-install.webp (Services card 2; alt 'A new wall-mounted boiler installed on a clean utility wall'); https://media.vibefather.ai/assets/a0691ecf-c44e-4489-a4a2-9d11c6fc7a8c/pipe-work.webp → public/images/pipe-work.webp (Services card 3; alt 'Copper pipe fittings and a valve arranged after a repair'); https://media.vibefather.ai/assets/a0691ecf-c44e-4489-a4a2-9d11c6fc7a8c/kitchen-sink.webp → public/images/kitchen-sink.webp (Services card 4; alt 'The cabinet under a kitchen sink with fresh white PVC trap and shutoff valves'); https://media.vibefather.ai/assets/a0691ecf-c44e-4489-a4a2-9d11c6fc7a8c/technician-belt.webp → public/images/technician-belt.webp (Services card 6; alt 'A loaded tool belt hung on a pegboard wall'). Six files in total.
- image: Write ASSETS.md at the project root with a table: path, source URL, author, license — one row for each photo (source 'media.vibefather.ai, made for this template', author 'VibeFather', license 'Distributed with the template'), plus rows for @fontsource/barlow-condensed and @fontsource/barlow (OFL-1.1) and lucide-react (ISC). Never replace photos with stock sites (Unsplash, Pexels, Pixabay) or images with people, faces or readable branding.
- icon: lucide-react only: PhoneCall, Phone, Menu, X, Plus, Check, ShieldCheck, BadgeCheck, Timer, Clock, Receipt, Wrench, Sparkles, MapPin, Star, StarHalf, ClipboardList, ArrowRight. Stroke width 1.75, 16–24px, color inherits. public/favicon.svg hand-written: viewBox 0 0 32 32, a 32x32 rect rx 7 filled #E8622A, a Paper (#FFFFFF) wrench glyph. No other logo: the company name is always set as type; the guarantee badges are drawn as plain geometric shapes (shield, ring, check, clock) and never imitate any real certification body's mark.
- font: Install @fontsource/barlow-condensed and @fontsource/barlow and import them in src/fonts.ts as listed in Setup. Vite bundles the woff2 files into dist/.
- image: Drawn in code: the area map (inline SVG streets, radius circle, pins and dots), the invented guarantee badges, chips, the estimator result panel, the pulse dot, stars (including the half star) and the favicon. No other bitmaps, no illustrations, no map tiles.

## Don'ts
- No backend, no form submission, no fetch to any API: the estimator, ZIP check and lead form all resolve in the browser only (localStorage); nothing is sent anywhere, and the form says so.
- All links on this single page are anchors (./index.html#services, #pricing, #estimate, #reviews, #lead, #faq) plus tel: links built from [PHONE].
- Self-host everything: fonts through Fontsource, icons as npm packages or inline SVG, images downloaded into public/images/. No CDN <script> or <link> tags, no Google Fonts, no analytics.
- Production build: minified, no source maps, no src/ copied into dist/, single command npm run build, output in dist/ under 10 MB.
- No real company or franchise names, no real license numbers or certification bodies (the badge shapes are invented geometry), no map tiles or embeds, no photos with faces, hands, people or readable branding on vans, tools or parts.
- No dates or years anywhere except 'Est. 2009'; the site never shows today's date.
- Never mention VibeFather or any other brand inside the site except the optional credit footer link; all copy is invented US English.
- Respect prefers-reduced-motion everywhere: disable the pulse, count-ups, draws, slides and staggered pins; keep color/border hovers.
- The site must work at 1440x900 desktop and 390x844 mobile with zero console errors; the estimator and ZIP checker work with keyboard only, and every interactive element has a visible focus ring.
- Keep copy concrete: no lorem, no filler, no unverifiable superlatives; every price, minute and warranty term comes from src/content.ts.

---
— Prompt by VibeFather · https://vibefather.ai/t/home-services-quote-landing-page · 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.