# Used Car Dealership Website

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

## Brief
Build a single-page app for [BRAND], the independent used-car dealership run by [FOUNDER] in [CITY], [EXPERIENCE] in the business. The site is a working storefront: a 24-car inventory of fictional makes with live filters and sort, a detail view per vehicle with gallery, specs and a payment calculator, compare for up to three cars, saved cars, a trade-in estimator and a financing explainer. Graphite and white with signal yellow as the only loud color; bright showroom photography of generic, badge-free cars. All vehicles, prices, values and terms are invented sample data.

- Audience: Primary: used-car shoppers around [CITY] comparing listings on their phone at night — people who want the monthly number, the mileage and the return policy without talking to anyone first. Secondary: RV, boat, bike and equipment dealers re-pointing the inventory fields.
- Goal: Move a visitor from browsing to a saved car and a submitted trade-in or test-drive request: make the inventory genuinely filterable, make the money question answerable in the calculator, and make the purchase risk feel small (inspection count, return window, warranty months).
- Tone: Calm, specific, zero pressure — spec-sheet English with tabular numbers. Never a countdown, never ALL-CAPS urgency, never 'deal of the day'.

## 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/space-grotesk (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 backend, no server code.
  - Install Tailwind CSS 3.4 with PostCSS and Autoprefixer. Extend the theme with the exact palette below, fontFamily.display 'Space Grotesk' and fontFamily.body 'Inter'; use Inter's tabular-nums (font-variant-numeric) for every price, mileage and spec number.
  - Self-host Space Grotesk weights 500 and 700 and Inter weights 400, 500, 600, 700 through @fontsource/space-grotesk and @fontsource/inter, imported in src/main.tsx. Never load fonts from a CDN.
  - Hand-roll a tiny hash router in src/router.ts: useHashRoute() returns the current path ('' , 'car', 'compare', 'saved', 'trade-in') and navigate() sets location.hash. Routes: '' (home + inventory), '#/car/<id>' (vehicle detail; an unknown or missing id falls back to vehicle #1, never an empty state), '#/compare', '#/saved', '#/trade-in'. Scroll to top on route change.
  - Use Motion from 'motion/react' (motion, AnimatePresence, useReducedMotion) for view transitions, card reveals and the compare tray; gate every animation on useReducedMotion().
  - Keep all copy and data in src/content.ts: brand strings, hero copy, value props, the full 24-vehicle inventory (fields: id, year, make, model, trim, body, fuel, transmission, miles, price, oneLineNote, inspectionScore), body-type photo mapping, calculator defaults, trade-in config, financing steps, how-buying-works steps, FAQ. 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.
  - The inventory, exactly 24 vehicles with these fields (prices USD, all makes fictional): 2021 Avera Lumen SL sedan gas auto 38,400mi $18,900 'One owner, dealer-serviced since new'; 2022 Avera Lumen SE sedan gas auto 24,900mi $16,400 'Still on original tires'; 2020 Avera Vale GT hatchback gas manual 51,200mi $12,800 'Last of the manual hatches'; 2019 Avera Terran LX SUV gas auto 67,500mi $15,700 'Third-row delete, cleaner cabin'; 2022 Avera Terran Hybrid SUV hybrid auto 29,300mi $23,900 'Hybrid battery report in the glovebox'; 2020 Bexley Ardor sedan gas auto 44,800mi $27,600 'Loaded trim, head-up display'; 2023 Bexley Ardor EV sedan electric auto 12,600mi $41,900 'Battery health 96%, home charger included'; 2019 Bexley Wren coupe gas auto 58,900mi $21,400 'Two-door, glass roof, adult owned'; 2021 Bexley Meridian SUV gas auto 39,700mi $31,800 'Tow package, never towed'; 2018 Bexley Holt wagon diesel auto 72,100mi $17,900 'Diesel torque, highway miles'; 2021 Corvin Harlan Crew pickup diesel auto 61,300mi $28,400 'Work truck, bed liner, no rust'; 2022 Corvin Harlan Shortbed pickup gas auto 33,000mi $25,100 'Half the miles of its twin on the lot'; 2020 Corvin Cadence minivan gas auto 64,700mi $13,900 'Soccer-team spec, doors all work'; 2023 Corvin Cadence EV minivan electric auto 9,800mi $34,600 'Nearly new, remaining factory warranty'; 2021 Dunmore Fable coupe gas manual 36,200mi $19,700 'Manual, limited color'; 2022 Dunmore Fable Turbo coupe gas auto 19,400mi $24,300 'Turbo under certified pre-owned'; 2020 Dunmore Rill hatchback hybrid auto 47,500mi $15,900 'Hybrid commuter, 41 mpg lifetime'; 2023 Dunmore Rill EV hatchback electric auto 11,200mi $29,800 'EV hatch, still on its first brake pads'; 2019 Elna Piccolo hatchback gas manual 73,800mi $9,400 'The cheap one that runs forever'; 2021 Elna Piccolo Plus hatchback gas auto 42,100mi $11,600 'City car, parking sensors added'; 2020 Elna Sonder sedan gas auto 55,600mi $10,900 'Basic, honest, cold-air kings'; 2022 Elna Sonder Hybrid sedan hybrid auto 26,800mi $16,900 'Hybrid sedan, commuter math done'; 2020 Fennec Otter SUV gas auto 59,400mi $14,800 'Small SUV, big sunroof'; 2021 Fennec Otter Adventure SUV hybrid auto 35,600mi $19,900 'Roof rack, hitch, hybrid'. Makes: Avera, Bexley, Corvin, Dunmore, Elna, Fennec.
  - Map photos by body type in content.ts: sedan and coupe → car-sedan.webp; SUV → car-suv.webp; hatchback and wagon → car-hatch.webp; pickup and minivan → car-pickup.webp; every detail gallery additionally shows car-interior.webp and showroom-hero.webp as its second and third slides. Cards use the body-type photo at 4:3.
  - Payment calculator, exactly: monthly = P × r(1+r)^n ÷ ((1+r)^n − 1) where P = price − down payment, r = APR ÷ 1200, n = term months; controls are price (prefilled from the car, editable), down payment slider $0–$15,000 step $500 (default 10% of price), term chips 36 / 48 / 60 / 72 (default 60), APR slider 3.9%–14.9% step 0.1 (default 7.9%); output shows monthly in Space Grotesk 700 signal yellow, amount financed, total interest and total of payments, each rounded to whole dollars; footnote 'Estimate only — not an offer of credit.'
  - Trade-in estimator, exactly: inputs year (2005–2023), make (the six fictional makes), model (text), mileage slider 5,000–180,000, condition chips Excellent / Good / Fair; base = 32,000 − (current year constant 2026 − year) × 1,150 − miles × 0.09, floored at 2,000, × multiplier Excellent 1.1 / Good 1.0 / Fair 0.82, rounded to nearest $250, shown as a range of ±8% with the line items used ('age adjustment', 'mileage adjustment', 'condition multiplier'); footnote 'Sample figures to set expectations — the walkaround sets the real number.' Persist the submission to localStorage under [BRAND_SLUG]-trade-in.
  - Saved cars: a Heart toggle on every card and detail page persists the vehicle id array to localStorage under [BRAND_SLUG]-saved-cars; '#/saved' lists them with the same cards and an empty state ('Nothing saved yet — tap the heart on a car.') that links back to the inventory.
  - Compare: a 'Compare' toggle on cards adds to a compare array capped at 3; a fixed bottom tray (graphite, appears when ≥1 selected) shows thumbnails with remove buttons and a 'Compare 3' button routing to '#/compare'; the compare page renders a side-by-side table (price, year, miles, body, fuel, transmission, inspection score, oneLineNote) where differing values in a row are marked with signal-yellow text and matching values stay ink; removing below 2 returns to the tray state.
  - Inventory filters: make chips (multi), body chips (multi), fuel chips (multi), price max slider ($8k–$45k), mileage max slider (10k–80k), year min slider (2018–2023); sort dropdown: 'Price: low to high' (default), 'Price: high to low', 'Mileage: low to high', 'Year: newest'. Live result count 'Showing 14 of 24'. Any active filter shows a 'Clear all' chip; a filtered-to-zero state shows 'No cars match — loosen a filter.' with the clear chip, never an empty page.
  - Use only these lucide-react icons: Phone, Heart, Scale, Search, SlidersHorizontal, ChevronRight, ChevronLeft, ArrowRight, ArrowLeft, Menu, X, Check, CheckCircle2, Gauge, Fuel, CalendarCheck, ShieldCheck, MapPin, Calculator, Car, Star, Truck, FileCheck.
  - Persist saved cars, compare selection and the trade-in submission to localStorage, namespaced with [BRAND_SLUG]; validate restored JSON and recover silently from malformed data.
  - 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 graphite square with a signal-yellow key fob mark) are enough; no meta descriptions, Open Graph tags, JSON-LD, or sitemaps.

## Variables
- [BRAND] — Brand (default: "Cedar Row Motors"). Invented dealership name; a key-fob logomark is derived from it in code.
- [CITY] — City (default: "Bellhaven"). Where the lot is; appears in the hero, delivery copy and footer.
- [FOUNDER] — Dealer principal (default: "Ade Owolabi"). Invented owner, named in hero copy and the how-buying-works section.
- [PHONE] — Phone (default: "(555) 833-1277"). Text-and-call line; links as tel: with digits only.
- [EXPERIENCE] — Experience (default: "12 years"). Plain phrase like '12 years'; used in hero and about copy.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/used-car-dealership-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.