Vibe Code an Auto Repair Website

Build a one-page auto repair shop 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
═══════════════════════════════════════════════════════════════
- Shop name: [SHOP NAME]
- Owner: [FULL NAME], ASE-certified, [N] years experience
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Hours: [WEEKDAY / SAT / SUN]
- Specialty: domestic / European / Asian / general (pick one)
- Services: oil change, brakes, tires, diagnostics, engine repair,
 transmission, suspension, AC service
- Booking: quick quote form + click-to-call
- Towing partner / shuttle service available: yes/no

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: deep blue (#1d3557), safety orange (#e76f1c), warm white
 (#faf8f3), graphite text (#1a1a1a). Override if user provides; derive
 variants for AA contrast on body text.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Industrial-clean, utility-first, no fluff. Trust signals dominate.
- Type pairing: bold condensed sans for headings (Roboto Condensed, Barlow
 Condensed) + Inter for body. NO script fonts. Monospace (JetBrains Mono)
 for prices and VIN/part numbers.
- Eyebrow labels: uppercase, tracked .24em, orange, prefixed by a 32px CSS
 ::before line in deep blue.
- Headlines: short, blunt, with ONE italic accent ("Honest mechanics. Done
 *right the first time*."). Italic word uses orange.
- Strong type hierarchy, grid-aligned, generous whitespace. Hard edges (not
 overly rounded). 8-12px corners only.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.8 (heavy, industrial), round caps. Cover: wrench, gear, oil,
 brake-disc, tire, battery, snowflake (AC), shield, clock, phone, mail,
 pin, dollar, check.
- Icon containers: 48x48 rounded squares (8-12px corners), deep-blue-tinted
 bg, flip to filled orange on hover.
- Motion: minimal scroll fade-ins, hover lifts (4px). NO bouncy animations,
 NO parallax, this is a trust-first site.

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

1. URGENT BAR (top, sticky on mobile)
 - Single line: "Same-day appointments • Free shuttle • [N]-year warranty"
 with click-to-call phone number on right
 - Orange background, white text

2. FIXED NAV (glass effect deep-blue translucent + backdrop blur, light text)
 - Wordmark (condensed sans) left | nav links | "Get a quote" orange pill
 CTA
 - Phone number always visible in nav, click-to-call

3. HERO
 - Two-column: text left, photo right (Unsplash: "mechanic engine bay" or
 "car lift garage") rounded 12px with subtle deep-blue overlay
 - Left: eyebrow with line marker, headline ("Honest mechanics. Done
 *right the first time*."), 2-line subhead, primary "Get a quote" CTA
 + secondary "Call [number]"
 - Trust strip below CTAs: 4 mini-stats inline (ASE certified • [N] years
 in [CITY] • [Warranty] warranty • [4.9]★ Google)

4. SERVICES GRID
 - Eyebrow + headline ("Services we do *every day*")
 - Auto-fit grid (minmax 240px) of 8 service cards
 - Each: 48x48 deep-blue-tinted icon badge + service name (condensed sans)
 + 2-line description as prose + price range chip in monospace
 ("$45 - $120")
 - One card highlighted (orange gradient bg, white text) for the shop's
 featured service

5. WHY US (TRUST SIGNALS)
 - Eyebrow + headline ("Why drivers in *[CITY]* trust us")
 - 4-column row of trust cards (stack mobile)
 - Each: 48x48 orange-outline icon badge + bold heading + 1-line subhead
 - Pillars: ASE Certified Technicians, Transparent Upfront Pricing,
 [N]-year/[N]-mile Warranty, Free Shuttle / Loaner

6. CERTIFICATIONS STRIP
 - Thin warm-white section, borders top/bottom
 - "CERTIFIED BY" label left + 5 typographic names right
 (ASE • AAA Approved Auto Repair • BBB A+ Rated • NAPA AutoCare •
 Bosch Service), NO real logos, just elegant typeset names

7. ABOUT THE OWNER
 - Two-column: owner photo left (rounded 12px, deep shadow), text right
 - Right: eyebrow, headline ("[FIRST NAME] has been *fixing cars* since
 [YEAR]"), 2-paragraph story (apprenticeship, took over shop, family-
 owned), small certifications strip in monospace

8. PROCESS
 - 4 horizontal step cards (stack mobile)
 - Each: large outlined orange numeral (01-04) + step title + 1-line
 description
 - Steps: Drop off / call → Diagnose → Approve estimate → Pick up
 - Thin orange connector line between steps on desktop

9. QUICK QUOTE FORM
 - Two-column: reassurance left, form right
 - Left: eyebrow, headline ("Quote in *60 seconds*"), 3-bullet
 reassurance with check icons ("Free estimate", "No charge if you
 don't approve", "Most repairs same-day")
 - Right: warm-white card with orange border (2px)
 • Fields: full name, phone, email, vehicle year, make, model, mileage,
 problem description (textarea), preferred drop-off date, photo
 upload (optional, single file)
 • Submit orange button, full-width
 • Inline JS success message (preventDefault)
 - Below form muted text: "We never share your info. Estimate by phone
 within 1 hour."

10. CUSTOMER REVIEWS
 - 4 quote cards in 2x2 grid (stack mobile)
 - Each: oversized opening quotation in muted deep-blue, quote body
 (specific repair, specific outcome, "diagnosed an alternator another
 shop missed", varied lengths), 5 orange SVG stars, separator,
 gradient-circle initials avatar + first name + last initial + vehicle
 type ("2018 Subaru Outback")
 - NO photos of fake customers

11. HOURS + MAP
 - Two-column: hours table left (with "Free after-hours drop-box"
 note + emergency tow partner info), Google Maps embed right (rounded
 12px, deep shadow)
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay top-left: shop name, address, "Get directions →"

12. FAQ
 - 6 collapsible <details>: "Do you take extended warranties?", "Do you
 offer financing?", "How long for a typical repair?", "Do you do tires
 and alignment?", "Loaner / shuttle policy?", "What forms of payment?"

13. STICKY MOBILE BOTTOM BAR
 - Two split buttons: "Call now" (orange) + "Get a quote" (orange outline)

14. FOOTER (deep blue)
 - Centered wordmark in warm-white condensed sans
 - Italic serif tagline below (NOT handwritten, e.g., "Same hands, same
 shop, same promise since [YEAR]")
 - Below tagline: HUGE click-to-call phone number (mobile only)
 - Bottom: address + hours + ASE/AAA/BBB typeset names + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `AutoRepair` schema in <head> with name, address, telephone,
 openingHours, areaServed, priceRange, hasOfferCatalog (services)
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top to clear urgent bar + nav
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- tel: links on EVERY phone occurrence (sticky bar, hero, footer, mobile bar)
- Phone link in nav is largest tap target on mobile (≥56px)
- Responsive at 900px and 500px breakpoints
- Page-weight under 300KB total (mechanic shop = mobile = budget conscious)
- Critical CSS inlined in <head>, no JS frameworks
- Favicon: inline SVG data URI (wrench mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Honest, blunt, no jargon. Plain-English. Specific over generic ("Most brake
pads $180-260 installed, including rotor inspection", not "competitive
pricing"). Headlines short and direct. Body copy avoids fluff. Speak as the
shop owner to a customer who doesn't know cars but wants honesty.
Testimonials should feel like real Google reviews, specific repair,
specific car, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including the car / wrench / fire emojis)
- No "passion for cars", "love what we do", "treat your car like our own"
 filler
- No script/handwritten fonts
- No animated checkered-flag waving or spinning wheels
- No real manufacturer logos (Ford, Toyota, BMW) as images
- No fake stock photos of overly-clean shop with models in coveralls
- No bouncing speech-bubbles or chat-popups
- No "Voted #1 Shop" badges as images, use typeset names


═══════════════════════════════════════════════════════════════
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: "AutoRepair" 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 (~65-75KB), production-ready, lightning fast on
mobile. Include JSON-LD schema. Show the file as a single code block
and briefly summarize the design decisions made.