Vibe Code a Plumber Website

Build a one-page plumbing / handyman emergency service website as a single
self-contained HTML file (inline CSS and JS, no external dependencies except
Google Fonts and Unsplash images via their CDN).

═══════════════════════════════════════════════════════════════
BUSINESS DETAILS
═══════════════════════════════════════════════════════════════
- Business name: [BUSINESS NAME]
- Owner: [NAME], licensed plumber #[LICENSE NUMBER]
- Years experience: [N]+
- Service area: [CITY + SURROUNDING ZIP CODES / NEIGHBORHOODS]
- Phone (24/7): [PHONE]
- Email: [EMAIL]
- Address: [FULL ADDRESS]
- Hours: 24/7 emergency, business hours [WEEKDAY / SAT / SUN]
- Insured + licensed + bonded
- Services: leak repair, drain cleaning, water heater, toilet, faucet,
 garbage disposal, pipe replacement, sewer line, sump pump
- Booking: quick quote form + click-to-call (call is primary)

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: deep blue (#0d3b66), urgent red (#e63946) for emergency
 CTAs, warm white (#faf8f3), graphite text (#1a1a1a). Override if user
 provides hex values.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Mobile-first, function over form. The user is a homeowner panicking on
 their phone, they need to CALL fast. Phone number is visually the
 largest element on every screen.
- Type pairing: bold sans for headings (Inter, DM Sans, or Bricolage
 Grotesque) + Inter for body. NO script fonts.
- Eyebrow labels: uppercase, tracked .18em, blue, prefixed by a 24px CSS
 ::before line.
- Headlines: short, urgent, with ONE italic accent ("Burst pipe? We're
 *on the way*."). Italic word in urgent red.
- High contrast (AA at minimum, AAA where possible). Large tap targets
 (≥56px on mobile). Generous spacing.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.8, round caps. Cover: drop, pipe, wrench, faucet, toilet,
 heater, drain, sewer, shield, clock, phone, mail, pin, check, dollar.
- Icon containers: 48x48 rounded squares (8-12px corners) with blue-tinted
 bg, flip to filled blue with white icon on hover.
- Motion: minimal. Only scroll fade-ins and 4px hover lifts. The pulse on
 the emergency phone number is the only animated element.

═══════════════════════════════════════════════════════════════
SECTIONS (in this exact order)
═══════════════════════════════════════════════════════════════

1. EMERGENCY BAR (top, fixed)
 - Red gradient bar, full width
 - "24/7 EMERGENCY" label + HUGE click-to-call phone button on right
 - Pulsing white dot before "24/7 EMERGENCY"
 - Sticky on scroll, always visible

2. FIXED NAV (below emergency bar)
 - White translucent bg + backdrop blur
 - Wordmark left | anchor nav center | "Get a quote" blue pill CTA right
 - On mobile: simpler nav, hamburger menu

3. HERO
 - Large left-aligned: eyebrow ("WE'RE OPEN NOW"), HUGE headline ("Burst
 pipe? *We're on the way.*"), 2-line subhead, two CTAs (red "Call
 [phone]" full-width on mobile, blue-outline "Request quote")
 - Right (desktop): photo (Unsplash: "plumber under sink" or "wrench in
 hand") rounded 12px
 - Below CTAs: trust strip, "Licensed #[NUMBER] • Insured • [YEARS]+
 years • Same-hour response"
 - Mobile: hide photo, stack CTAs full-width, phone number remains
 unmissable

4. SERVICES
 - Eyebrow + headline ("What we *fix*")
 - Auto-fit grid (minmax 240px) of 8 service cards
 - Each: 48x48 blue-tinted icon badge + service name (sans) + 2-line
 description as prose + price-from chip in monospace ("From $89")
 - One card highlighted (red gradient, white text): "Emergency Leak Repair"

5. EMERGENCY CARD (full-width)
 - Red gradient background, white text
 - Eyebrow "AVAILABLE 24/7" with pulsing white dot
 - Massive headline "Burst pipe right now? Call [PHONE]"
 - Sub-headline: response time pledge ("Most calls answered within
 [N] minutes. On-site within [N] hours.")
 - HUGE click-to-call button (red on white) full-width on mobile

6. SERVICE AREA
 - Two-column: text left, simple list right
 - Left: eyebrow, headline ("Serving *[CITY] + surrounding*"), short
 paragraph
 - Right: list of 10-12 neighborhoods / zip codes in 2-column compact
 grid (clickable, anchors to # for now)

7. ABOUT THE OWNER
 - Two-column: owner photo left, text right
 - Right: eyebrow, headline ("[FIRST NAME] has *plumbed [CITY]* since
 [YEAR]"), 2-paragraph story (apprenticeship, family business,
 license prominent), license + insurance details displayed
 prominently in a small card

8. WHY US (TRUST)
 - Eyebrow + headline ("Why [CITY] *trusts us*")
 - 4-column row (stack mobile)
 - Each: 48x48 blue-outline icon badge + bold heading + 1-line subhead
 - Pillars: Licensed & Bonded, Upfront Pricing, Satisfaction Guarantee,
 Locally Owned

9. CUSTOMER REVIEWS
 - 4 quote cards in 2x2 grid
 - Each: oversized opening quotation in muted blue, quote body (specific
 emergency, specific time of day, specific repair, "called at 11pm,
 here by midnight, fixed by 2am", varied lengths), 5 red SVG stars,
 separator, gradient-circle initials avatar + first name + last initial
 + neighborhood ("Westend resident")

10. QUICK QUOTE FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Non-emergency? *Request a quote*"), 3
 bullets with check icons ("Free estimate", "No charge if you don't
 approve", "Most jobs same-day")
 - Right: warm-white card with blue border (2px)
 • Fields: full name, phone (LARGEST field, most critical),
 property address, problem description (textarea), photo upload
 (optional, single image), preferred contact time
 • Submit blue button, full-width
 • Inline JS success message (preventDefault)
 - Below form: "For burst pipes or no water, please CALL, we respond
 faster than we read forms."

11. HOURS & SCHEDULING
 - Two-column: hours table left, FAQ-style 24/7 callout right
 - Left: business hours table for non-emergency scheduling
 - Right: red card "24/7 EMERGENCIES: any time, any day, any season"
 with HUGE click-to-call number below

12. FAQ
 - 6 collapsible <details>: "What's the after-hours rate?", "Do you
 give estimates over the phone?", "Are you licensed and insured?",
 "Do you do commercial?", "How quickly can you arrive?", "Payment
 methods?"

13. STICKY MOBILE BOTTOM BAR
 - One HUGE red click-to-call button: "Call now [PHONE]", full width

14. FOOTER (deep blue)
 - Centered wordmark + license number prominently
 - Below: HUGE phone number (click-to-call) for mobile users
 - Italic serif tagline (NOT handwritten, e.g., "Local plumbers since
 [YEAR]")
 - Bottom: address + license # + "Licensed, Bonded, Insured" + BBB
 typeset name + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `Plumber` schema in <head> with name, address, telephone,
 openingHours: ["Mo-Su 00:00-23:59"], areaServed (list of zips/cities)
- Lighthouse Performance score MUST be 95+. Critical CSS inlined, minimal
 JS, no external libraries.
- Real Unsplash images via CDN with ?w=800&q=75&auto=format&fit=crop
 (lower q for performance)
- Hero loading="eager", everything else "lazy"
- tel: links on EVERY phone occurrence; phone visually 60-72px on mobile,
 always tappable
- Sticky bottom mobile bar with single Call CTA
- Responsive at 900px and 500px breakpoints
- Tap targets ≥56px (panicked thumbs)
- Semantic HTML5; aria-labels on icon-only links
- WCAG AAA contrast on emergency text where possible
- Favicon: inline SVG data URI (wrench or drop mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Direct, urgent, plain. Speak as a calm professional to a panicking
homeowner. Use clear time pledges ("Within the hour", "Same day"). Specific
over generic ("Sewage backup, frozen pipe, no hot water, call us first" - 
not "any plumbing problem"). Headlines short and active. Body copy short
sentences. Testimonials should feel like real Google reviews, specific
time of day, specific repair, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including the wrench / water-drop / fire emojis)
- No script/handwritten fonts
- No cartoon plumber mascots or comic illustrations
- No fake stock photos of "happy homeowner" + "smiling plumber"
- No "Award-winning plumber" Yelp-badge graphics, use typeset names
- No "passion for plumbing" or "love what we do" filler
- No animated dripping faucets or bouncing icons
- No bullet lists in card copy (write as prose)
- No exclamation marks except in emergency callouts
- No bright corporate-blue gradients that look like utility company sites


═══════════════════════════════════════════════════════════════
SEO & DISCOVERABILITY
═══════════════════════════════════════════════════════════════
Implement all of the following so the page ships production-ready for search
engines and social sharing. This is not optional; treat it as part of the
build, not an afterthought.

DO NOT INVENT DATA: never fabricate business names, addresses, phone or email, license or certification numbers, coordinates, prices, reviews or ratings, team members, photos, press mentions, or results and stats. If a detail is not provided, leave a clearly labeled {{TODO: ...}} placeholder — never a plausible-looking fake. Any form must POST to a real endpoint (Formspree, Web3Forms, Basin, or similar) or fall back to a mailto:/tel: link — never show a fake "success" message with no backend. Wrap every motion effect in @media (prefers-reduced-motion: reduce), and make sure any accent color used for text, links, or prices meets WCAG 2.2 AA contrast against its background.

1. TITLE TAG & META DESCRIPTION
   - <title> tag: "[Business Name] - [Primary Service] in [City]" (under 60 chars)
   - <meta name="description"> 150-160 chars, include the city/area, primary
     service, and a call to action (e.g., "Book online" / "Call now")
   - <meta name="robots" content="index, follow">

2. OPEN GRAPH & TWITTER CARDS
   - og:title, og:description, og:image (hero image), og:url, og:type=website
   - twitter:card=summary_large_image, twitter:title, twitter:description,
     twitter:image
   - Place all OG/Twitter meta in <head>

3. STRUCTURED DATA (JSON-LD)
   - Insert a <script type="application/ld+json"> block in <head> with
     @type: "Plumber" schema
   - Include: name, description, url, telephone, email, address
     (streetAddress, addressLocality, addressRegion, postalCode,
     addressCountry), image. Add geo, openingHoursSpecification, and priceRange ONLY when the user supplied real values — never invent them; and do NOT output aggregateRating or Review markup unless the user provides real, verifiable reviews (fabricated ratings violate Google's structured-data spam policy)
   - Add BreadcrumbList schema: Home > [Category] > [Business Name]
   - If the page has a FAQ section, add FAQPage schema with every Q&A pair

4. HEADING HIERARCHY FOR SEO
   - Exactly ONE <h1> per page — use the real, human headline the design calls for; put keywords in the <title> and meta, not the visible H1
   - Logical H2 > H3 nesting for every section; never skip a level
   - Section headings should include secondary keywords naturally
     (keep the section's real, human label; put keywords in the title and meta, not stuffed into headings)

5. IMAGE SEO
   - Every <img> must have a descriptive alt attribute that includes
     relevant keywords (NOT just "image1.jpg")
   - Format: alt="[what the image shows] - [Business Name] in [City]"
   - Use the client's own images, or neutral solid/gradient placeholders with a visible "replace with your photo" note — never hardcode Unsplash photo IDs (they often resolve to the wrong or trademarked image). Always set width + height (or aspect-ratio) to prevent layout shift

6. LOCAL SEO SIGNALS
   - Include full NAP (Name, Address, Phone) in the footer, matching the
     schema data exactly
   - Add a link to Google Maps with the business address
   - Use location-specific keywords in at least 3 section headings
   - If the page has testimonials, include the reviewer's city/area

7. TECHNICAL SEO
   - Canonical tag: <link rel="canonical" href="[PAGE URL]">
   - Language: <html lang="en">
   - Charset: <meta charset="UTF-8"> + viewport meta (already required)
   - All internal anchor links use descriptive text (not "click here")
   - Loading performance: critical CSS inline, fonts via display=swap,
     hero image eager, everything else lazy
   - Keep the CSS and JS readable and editable — do NOT minify (this file is meant to be customized by the owner)

8. CONTENT SEO SIGNALS
   - Write real, useful body copy (not just headings and bullet points).
     Each major section should have at least one paragraph of 2-3 sentences
     that describes the offering in natural language a search engine can parse.
   - Use the primary keyword once or twice where it reads naturally; keep the rest in the title tag and meta description, never stuffed into copy.
   - Include a clear call-to-action with anchor text that includes the
     service keyword (e.g., "Book your appointment" not "Click here").

═══════════════════════════════════════════════════════════════
DELIVERABLE
═══════════════════════════════════════════════════════════════
One polished HTML file (~50-60KB, performance-optimized), production-ready.
Include JSON-LD schema. Phone number must be the most prominent element on
every viewport. Show the file as a single code block and briefly
summarize the design decisions made.