Trueflow Plumbing Co.

Build a polished, standalone one-page lead-generation website for the residential plumbing company below. Follow every rule literally.

### STACK

Single self-contained build: React + TypeScript + Vite + Tailwind CSS + Framer Motion + Lucide React icons. Responsive, mobile-first, semantic HTML (`header`, `nav`, `main`, `section`, `footer`). Perfect English (en-US); little text per screen; no lorem ipsum.

### BUSINESS — DEMONSTRATION

- Name: Trueflow Plumbing Co.
- Category: Residential plumbing — emergency repairs, drains, water heaters
- City: San Rafael, California — serving Marin County
- Purpose: service calls and quote requests; emergency angle first, trust always

FICTIONAL DEMONSTRATION BUSINESS — replace name, city, and details with the real company before any public use.

### PLACEHOLDER MAP — READ FIRST

- Contact: [PHONE], [EMAIL], [ADDRESS — shop], [HOURS]
- Credentials: [LICENSE], [YEARS IN BUSINESS]
- Pricing: [PRICING MODEL] — a supplied description of how pricing works (e.g. "flat-rate, quoted in writing before work begins"); render ONLY as supplied
- Proof: [PROJECTS] (each with [PROJECT PHOTO] and [PROJECT NEIGHBORHOOD]), [TESTIMONIALS], [RATING]
- Coverage: [SERVICE AREA], [EMERGENCY AVAILABILITY] — a supplied availability line (e.g. "24/7 emergency line"); render ONLY as supplied

CRITICAL RULES: never state prices, "starting at" figures, response-time promises ("we arrive in 30 minutes"), years in business, job counts, a license number, or ratings on your own — each renders ONLY from its placeholder. An emergency-availability claim renders ONLY from [EMERGENCY AVAILABILITY]; if unfilled, the site speaks of "emergency repairs" as a service category without promising hours or response times. Testimonials render ONLY verbatim from [TESTIMONIALS]. Omit unfilled fields entirely. Never render bracket text.

### DESIGN SYSTEM — WORKWEAR PREMIUM

- Colors: warm off-white canvas `#F7F5F1`, deep petrol ink and primary `#123140`, copper accent `#C47B4A` (rules, numerals, the emergency strip, hover states), pale aqua tint bands `#E4EBE8`; card borders `rgba(18,49,64,0.12)`
- Fonts (Google Fonts): `Barlow Condensed` (600, 700) for display headings — tall, direct, trade-literate; `Barlow` (400, 500, 600) for body and UI
- Signature elements: 1px copper hairlines, letter-spaced uppercase eyebrows (`tracking: 0.18em`, 11–12px, copper or petrol/60), pipe-elbow corner detail (an inline-SVG right-angle pipe joint) reused on cards and the logo, large numerals in Barlow Condensed copper
- Buttons: slightly rounded (`rounded-md`), petrol fill with canvas text; the emergency action in copper fill; secondary buttons transparent with a petrol 1px border
- Logo: wordmark "Trueflow Plumbing Co." in Barlow Condensed with a minimal copper pipe-elbow inline-SVG mark; reuse it as favicon

### 1. HERO + EMERGENCY STRIP

A thin copper strip sits above everything, rendered from [EMERGENCY AVAILABILITY] verbatim if filled; if unfilled, the strip reads exactly: "Plumbing emergency? Start with the form below — we reply during business hours." (a process line, not an availability promise).

Full-viewport hero with a bespoke cinematic background video, highest-quality model available, at least 1080p, regenerated if flawed: a plumber's hands tightening a polished fitting under a bright kitchen sink, water beading on copper pipe, a tidy tool roll beside — craft and water, no faces close-up. `autoPlay muted loop playsInline`, poster frame, soft petrol gradient overlay (`#123140` at 50% up top, clearing downward).

- Top nav: transparent over the hero; wordmark left; center links (hidden on mobile): Services, Problem Finder, Why Trueflow, Reviews; right: a petrol "Call" button using [PHONE] only if filled, otherwise a "Request Service" link to the form
- Eyebrow: "RESIDENTIAL PLUMBING — SAN RAFAEL · MARIN COUNTY"
- Heading (Barlow Condensed, canvas, two lines): "Water where it belongs." / "Fixed right, the first time."
- Subtitle (one sentence): "Emergency repairs, drains, and water heaters for Marin homes — diagnosed honestly, quoted in writing, and fixed to last."
- Two CTAs: copper pill "Request Service" → the service form; ghost pill "Find Your Fix" → the Problem Finder (Section 2)
- Small line under the hero content, rendered ONLY if [LICENSE] is filled: "Licensed in California — [LICENSE]". Never write a license line yourself.

### 2. PROBLEM FINDER — the signature interactive component

Heading: eyebrow "PROBLEM FINDER", title "What's going wrong?"

**Component spec:**
- A row of selectable symptom chips (buttons, `aria-pressed` states): "Dripping or leaking", "Clogged or slow drain", "No hot water", "Low water pressure", "Running toilet", "Sewer smell", "Burst or frozen pipe", "Not sure — something's off"
- Selecting a chip shows ONE calm result card: the likely service in plain words, one line on what a visit usually involves (process language only — never a diagnosis, never a price), and a copper button "Request This Service" that smooth-scrolls to the form (Section 8) with the service preselected in the form's service field. Mapping:
  - Dripping or leaking → **Leak Detection & Repair** — "We trace the source first, then show you the fix before any work begins."
  - Clogged or slow drain → **Drain Cleaning** — "We clear the line and check why it clogged, so it stays clear."
  - No hot water → **Water Heaters** — "We test the unit honestly — repair when it makes sense, replace when it doesn't."
  - Low water pressure → **Pressure Diagnosis** — "We measure at the source and work outward until the cause is clear."
  - Running toilet → **Fixture Repair** — "A running toilet wastes water all day — usually a small fix, done in one visit."
  - Sewer smell → **Sewer Line Check** — "We inspect the line with a camera and show you exactly what we find."
  - Burst or frozen pipe → **Emergency Repair** — "Shut off the water at the main valve first. Then send the form — burst pipes jump the queue." (safety-first copy, still no response-time promise)
  - Not sure → **Whole-Home Plumbing Check** — "We walk the system end to end and hand you a written list of what needs attention."
- One honest line under the component: "A chip is a starting point, not a diagnosis — the real answer comes from looking at your pipes in person."

### 3. SERVICES

Heading: eyebrow "SERVICES", title "What we fix and install". Six cards on canvas with a tint top wash, Lucide icon in copper, title, ONE line each — the language of the trade, no prices anywhere:

- **Emergency Repairs** (Siren) — "Burst pipes, major leaks, and backups — handled calmly and correctly."
- **Drain Cleaning** (Waves) — "Kitchen, bath, and main lines cleared and camera-checked."
- **Water Heaters** (Flame) — "Tank and tankless repair, replacement, and honest advice between the two."
- **Leak Detection** (Search) — "Acoustic and camera tracing that finds the leak without tearing up your home."
- **Repiping & Pipe Repair** (GitBranch) — "Copper and PEX work for aging lines, one section or the whole house."
- **Fixtures & Remodel Rough-In** (Wrench) — "Faucets, toilets, and showers installed clean — plus rough-in for remodels."

### 4. HOW IT WORKS

Heading: "From first call to fixed". Three steps on a horizontal stepper (desktop) / vertical timeline (mobile), each with a large copper Barlow Condensed numeral:

- **01 — You reach out** — "Call or send the form. Tell us what you see, hear, or smell — photos help."
- **02 — Diagnosis & written quote** — "We find the cause, show it to you, and quote the work in writing before anything starts." If [PRICING MODEL] is filled, render it verbatim as a small line under this step; otherwise omit.
- **03 — The fix, cleaned up** — "We protect floors and finishes, do the work, test everything, and leave the space cleaner than we found it."

### 5. WHY HOMEOWNERS CALL US

Heading: "Plumbers who show their work". Four trust points with Lucide icons — process promises only, no guarantees of outcome, no superlatives, no counts:

- **Written quotes before work** (FileText) — "The price is agreed in writing before a wrench turns — no surprises mid-job."
- **We show you the problem** (Camera) — "Camera footage and photos of what's wrong, explained in plain words."
- **Shoe covers & floor protection** (ShieldCheck) — "Your home is treated like a home, not a job site."
- **One accountable crew** (UserCheck) — "The person who diagnoses is the person who stands behind the fix."

A credentials line renders ONLY from filled placeholders, exactly as supplied: [LICENSE], [YEARS IN BUSINESS], [RATING]. Omit each silently if unfilled.

### 6. RECENT WORK — ONLY FROM [PROJECTS]

Heading: eyebrow "RECENT WORK", title "Fixed lately, near you". Render ONLY from [PROJECTS]: each card shows [PROJECT PHOTO] and a caption of [PROJECT NEIGHBORHOOD] plus the service performed only if supplied with the project. If [PROJECTS] is unfilled, omit this section entirely — never stock-photo a fake job.

### 7. SERVICE AREA & TESTIMONIALS

**Service Area** — heading "Where we work": render ONLY from [SERVICE AREA] as chips on the tint band; if unfilled, one neutral line only: "Serving homeowners across Marin County."
**Testimonials** — heading "What neighbors say": render ONLY verbatim quotes from [TESTIMONIALS], attributed exactly as supplied (first name and neighborhood/city only); a [RATING] badge appears only if [RATING] is filled. If unfilled, omit the testimonials block entirely.

### 8. REQUEST SERVICE

Heading: "Request service". Two columns on desktop, stacked on mobile. Left: the form — name, phone, email, service (select: Emergency repair, Drain cleaning, Water heater, Leak detection, Repiping, Fixtures / remodel, Whole-home check, Not sure yet — preselected when arrived from the Problem Finder), city, message with the prompt "What's happening? (sounds, smells, where the water is)". Front-end demo only: on submit, validate required fields and show a thank-you state — "Thanks — your request is in. We reply during business hours." Right: contact card on tint with [PHONE] as a tap-to-call `tel:` link, [EMAIL] as `mailto:`, [HOURS], and [ADDRESS — shop] opening Google Maps directions — each line omitted if unfilled.

### 9. FINAL CTA BAND

Full-width petrol `#123140` band opened by a copper hairline. Heading (Barlow Condensed, canvas): "Water trouble doesn't wait. Neither should you." One line: "Tell us what's happening — the diagnosis is honest and the quote is in writing." Button (copper fill): "Request Service", scrolling to Section 8.

### 10. FOOTER

Canvas footer: wordmark, nav links, contact items only if filled, "Trueflow Plumbing Co. — San Rafael, California", a license line rendered ONLY from [LICENSE]: "California License [LICENSE]", and a copyright line. No fake social links or affiliations.

### MOTION

Framer Motion, easing `cubic-bezier(0.22, 1, 0.36, 1)` throughout. Hero poster fallback: slow Ken Burns scale (1.0 → 1.08 over 18s, alternate). Staggered fade-up for hero eyebrow, heading lines, subtitle, CTAs (0.5s, 0.08s stagger). Problem Finder result card fades/slides in on selection (0.3s). Stepper hairline fills as the section scrolls into view. Card hover: copper underline sweeps in. Reveal-on-scroll for headings. Under `prefers-reduced-motion`: no parallax, no Ken Burns, no fade-up — everything shown complete, finder and form fully functional.

### RESPONSIVE

Services grid: 3 columns desktop → 2 tablet → 1 mobile. Problem Finder chips wrap, tap targets at least 44px. Steps stack vertically on mobile. Sticky mobile bottom bar with two buttons: "Call" (only if [PHONE] is filled) and "Request Service" → the form.

### SEO & VERIFICATION

- Title: "Trueflow Plumbing Co. — Plumber in San Rafael & Marin County, CA"
- Meta description: "Trueflow Plumbing Co. handles emergency repairs, drains, and water heaters across Marin County — honest diagnosis and a written quote before any work begins. Request service today."
- OG image: the hero poster frame.
- Verify before returning: zero placeholder text visible; zero invented prices, response-time promises, license numbers, years, ratings, or testimonials; the Problem Finder maps every chip to its service and preselects the form correctly; the form shows its thank-you state; every link, `tel:`, `mailto:`, and anchor works; the video plays and loops on mobile and desktop. Deploy to a memorable business-based URL; return it with a three-line design summary.