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

# Driving School Website

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

## Brief
Build a clear, upbeat one-page site for [BRAND], an invented driving school in [CITY] serving [AUDIENCE]. The identity is road-sign yellow on warm white with navy accents, rounded confident type, and code-drawn road-marking motifs (dashed center lines, route dots, curve arrows). The page anchors on a friendly car photograph, lays out four lesson packages with per-lesson sample pricing, runs a five-question practice theory quiz with instant feedback and a score readout, introduces three fictional instructors with generated portraits, then adds test-prep tips, service-area chips, and a lesson-booking sample saved locally.

- Audience: [AUDIENCE] — and the parents who usually pay for the packages. Also freelancers and local academies adapting the layout for any coached-session business with packages and a practice test.
- Goal: Get a nervous visitor smiling and booked: win them with the car and the promise in one screen, let the quiz prove the teaching tone in ninety seconds, price the packages plainly, and let them hold a lesson slot in the browser without any signup.
- Tone: Plain, warm, and lightly funny — a patient instructor on a quiet street. Short lines, real prices, no jargon, no fear tactics. Confident about safety basics without lecturing, and honest that the quiz is practice, not the official test.

## 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/fredoka (OFL-1.1), @fontsource/figtree (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', and build.sourcemap: false. No router, no backend, no server code.
  - Install Tailwind CSS 3.4 with PostCSS and Autrefixer. Extend the theme with the exact palette below and fontFamily.display 'Fredoka' and fontFamily.body 'Figtree'.
  - Self-host Fredoka weights 500 and 600 and Figtree weights 400, 600, and 700 through @fontsource/fredoka and @fontsource/figtree, imported in src/main.tsx. Never load fonts from a CDN.
  - Use Motion from 'motion/react' (motion, AnimatePresence, useReducedMotion) for quiz feedback, chip pops, and reveals; gate every animation on useReducedMotion().
  - Keep all copy and data in src/content.ts: brand strings, the promise line, packages, quiz questions with options, correct indexes and explanations, instructors, tips, service areas, booking day and slot chips, FAQ. When variable values change, rewrite the dependent copy there and derive storage keys and slugs from [BRAND] so no default-brand remnants remain.
  - Implement the quiz as an explicit state machine: intro, question (locked after answering), results. Store per-question answers in React state only; 'Retake quiz' resets everything.
  - Draw the road-marking motifs in code as reusable inline SVG components: a dashed center-line divider (26px dashes, 34px gaps) and a route-dot line for the tips list. Never photograph them.
  - Persist the booking request to localStorage with the key [BRAND_SLUG] + '-lesson-request'; validate restored JSON and recover silently from malformed data.
  - Use only these lucide-react icons: Car, Star, Check, X, ChevronDown, MapPin, RotateCcw, ArrowRight, CalendarCheck, Award, Clock, Users.
  - 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 (a yellow circle with a navy Car glyph) are enough; no meta descriptions, Open Graph tags, JSON-LD, or sitemaps.

## Variables
- [BRAND] — Brand (default: "Greenlight Driving School"). Invented school name; a road-sign logomark is derived from it in code.
- [CITY] — City (default: "Riverbend"). The town the school serves; appears in the hero badge, tips, service areas, and footer.
- [AUDIENCE] — Audience (default: "first-time teen drivers and adults getting back behind the wheel"). A plain-language phrase for who the lessons are for.
- [PROMISE] — Promise (default: "Patient instructors, calm cars, no yelling. Ever."). The school's one-line pledge; appears as its own sentence in the hero and again in the footer.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/driving-school-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.

## Design
### Colors
- Warm white `#FFFCF4` — Page ground
- Card white `#FFFFFF` — Cards, quiz panel, booking form
- Sign yellow `#FFC72C` — Primary accent: CTAs, selected chips, check icons, popular card
- Soft yellow `#FFF4D3` — Bands, badges, and tint chips
- Navy `#1E3A6E` — Buttons, links, logomark ring, footers
- Ink navy `#17294D` — Headings and body text
- Slate `#3B4358` — Secondary text and meta
- Dash gray `#CDD3E0` — Hairlines, dashes, and idle borders
- Quiz green `#2F9E63` — Correct-answer fill and recap dots
- Quiz red `#D94848` — Wrong-answer fill and error text

### Typography
- Display: headlines, package names, quiz headings: Fredoka (OFL), weights 500/600
- Body: paragraphs, answers, chips, forms: Figtree (OFL), weights 400/600/700

### Layout & motion
- Spacing: 8px base grid. Content shell max-width 1120px with 32px desktop and 20px mobile side padding. Header 72px. Desktop sections 96px vertical padding, mobile 64px. Package grid gap 24px. Prose max 62 characters per line.
- Radius: Everything friendly: 999px pills for buttons, chips, and badges; 20px for cards, photos, and the quiz panel; 12px for inputs. Road-marking SVG dividers are square 3px lines with 26px dashes and 34px gaps.
- Motion: Quiz: a chosen answer settles with a 160ms scale pop; a wrong pick shakes 6px twice over 240ms; the explanation panel slides up 180ms; the results score fills a small drawn dial over 600ms.
- Motion: Road-marking dividers drift slowly left on an 8px-per-second loop — decorative only, and fully static under prefers-reduced-motion.
- Motion: Cards lift 4px on hover (180ms); chips pop to 1.06 on selection; sections reveal once on scroll with a 14px rise and a 420ms ease-out fade, staggered 60ms.
- Motion: With prefers-reduced-motion: reduce, every animation above becomes a 100ms opacity change at most and every interaction stays fully functional. No page parallax, no cursor effects, no autoplay.
- Imagery: One photographic set in a consistent warm-morning grade: a cheerful unbranded yellow compact car on quiet suburban streets — a front three-quarter hero view, a cockpit detail, a curb-side drop-off — plus three studio-quality fictional instructor portraits taken outdoors in the same soft light, varying age and ethnicity, depicting no real people. Cars carry no visible badges or readable plates; no bystanders. Road markings, sign-shaped chips, and route doodles are drawn in SVG, never photographed.

## Pages & Sections
### [BRAND] — Driving lessons in [CITY] (`index.html`)
1. **Header and hero** — Header (72px, warm white at 92% with backdrop blur): code-drawn logomark — a yellow circle with a 3px navy ring holding a navy Lucide Car glyph — beside [BRAND] in Fredoka 600; nav anchors Packages, Practice quiz, Instructors, Tips, Areas; right-aligned navy pill 'Book a lesson'. Hero: soft-yellow badge pill 'Now serving all of [CITY]'; H1 'Green lights ahead.'; paragraph 'We teach [AUDIENCE]. [PROMISE] Pick a package, meet your coach, and roll out of the parking lot on day one.'; primary yellow pill 'Book your first lesson' (navy text) and a navy-outline pill 'Try the 5-question quiz'. Proof row beneath: '4.9 stars · 620 learners taught · 92% first-try road-test pass*' with a 12px slate footnote '*sample figures for this demo'. Right: the hero car photograph in a 20px-radius frame, with a drawn dashed road-line SVG trailing from beneath the photo toward the left edge, ending in a small curve arrow.
   Layout: 12-column grid: copy in columns 1–6, photo in columns 7–12 at 16:9 with object-cover. H1 in Fredoka at clamp(44px, 5vw, 68px), ink navy. The proof row uses yellow Star icons and slate text on one line, wrapping to two on mobile. The road-line SVG is absolutely positioned under the photo's bottom edge, cropped by the section. Mobile: copy stacks first, photo full-width below at 16:9; every tap target at least 44px.
   Motion: The photo settles from scale 1.03 over 600ms; the badge, H1, paragraph, buttons, and proof line rise 14px in an 80ms stagger; the dashed road line draws in over 900ms (a stroke-dashoffset transition), static under reduced motion.
2. **Lesson packages** — A full-width road-marking divider sits above this section: a 3px dash-gray dashed center line on soft yellow, with the dashes drifting slowly. Eyebrow 'LESSON PACKAGES'; title 'Pick a lane.' Four cards: 'First-Timer' — '$480 · 6 lessons' — '$80 a lesson — controls, parking lots, and your first quiet street.' features 'Six 60-minute lessons', 'Pickup anywhere in the service area', 'A syllabus card for parents'; 'Confident Commuter' with a navy 'Most popular' tag — '$730 · 10 lessons' — '$73 a lesson — traffic, merges, and the school-run route.' features 'Ten 60-minute lessons', 'Two evening lessons in real traffic', 'Free re-test briefing'; 'Road-Test Ready' — '$980 · 14 lessons' — 'Fourteen lessons plus a mock test on the real test routes.' features 'Fourteen lessons', 'Mock road test', 'School car on test day'; 'Refresher' — '$225 · 3 lessons' — 'For licensed drivers rebuilding calm after a break.' features 'Three 60-minute lessons', 'Highway module', 'Written progress note'. Each card footer is a 'Book this package' link that sets that package in the booking form's select and scrolls to the booking section.
   Layout: 4-column grid on desktop, 2-by-2 on tablet, single column on mobile. Cards are white (20px radius, 1px dash-gray border) with a yellow Check icon per feature; the popular card fills sign yellow with ink-navy text, carries the tag pill at its top, and sits 8px higher than its neighbors. Price line in Fredoka 600; the per-lesson breakdown in slate. Footer links use an ArrowRight.
   Motion: Cards reveal in a 60ms stagger; hover lifts 4px; the popular card's tag pops in after the reveal. The divider dashes drift left on the slow decorative loop.
3. **Practice theory quiz** — Band on soft yellow. Eyebrow 'PRACTICE THEORY'; title 'Five questions. No grades, no pressure.'; intro 'Sample questions written by our instructors — a warm-up, not the official test bank.' The quiz card: a progress dot row plus 'Question X of 5', the question, four answer buttons, and instant feedback — a correct pick fills quiz green with a Check and 'Right! {explanation}'; a wrong pick fills the chosen button quiz red with an X, outlines the correct button green, and shows 'Not quite — {explanation}'. A 'Next question' button appears once answered. Questions: (1) 'A solid yellow line on your side of the road means:' A 'Pass only when the lane is clear' B 'Do not cross it to pass' C 'The lane ends ahead' D 'Parking is allowed after dark' — correct B — 'Solid yellow on your side means no passing — wait for a broken line on your side.' (2) 'You reach a stop sign and the intersection is empty. You:' A 'Roll through slowly' B 'Stop only if another car appears' C 'Come to a complete stop before the line' D 'Tap the horn and proceed' — correct C — 'A full stop behind the line, every time — even for empty streets.' (3) 'A safe following distance in clear daylight is at least:' A 'Half a second' B 'One second' C 'Three seconds' D 'Ten seconds' — correct C — 'Count three seconds from the moment the car ahead passes a landmark.' (4) 'A pedestrian steps into an unmarked crosswalk. You:' A 'Honk and keep moving' B 'Stop and let them cross' C 'Slow only if they look at you' D 'Drive around behind them' — correct B — 'Marked or not, a crosswalk belongs to the person in it.' (5) 'The car starts to hydroplane. You:' A 'Brake hard' B 'Ease off the accelerator and steer straight' C 'Accelerate to regain grip' D 'Turn sharply toward the shoulder' — correct B — 'Ease off, hold the wheel steady, and let the tires find the road again.' Results screen: 'You scored {n} / 5' with tier copy — 5 'Perfect run — you're road-ready!'; 4 'Strong cruise — peek at the one that got away.'; 2–3 'Cruising — a couple more rounds will lock it in.'; 0–1 'Green light soon — add a theory session to any package.' A five-dot recap (green per right, red per wrong) and a RotateCcw 'Retake quiz' button.
   Layout: Centered quiz card 640px wide on white (20px radius, 1px dash-gray border). Answer buttons are full-width 56px pills with an A–D letter disc; states: idle white with navy border, hover soft yellow, correct green with white text and Check, wrong red with white text and X, and the revealed correct answer outlined green. Progress dots sit top-left, the counter top-right. Buttons disable after answering; the feedback panel is aria-live='polite' and the quiz is fully keyboard-operable. Mobile: the card keeps 20px padding, buttons stay 56px.
   Motion: A chosen answer settles with a 160ms scale pop; a wrong pick shakes 6px twice over 240ms; the explanation slides up 180ms; the score dial fills over 600ms on the results screen; retake resets with a 200ms crossfade.
4. **Instructor profiles** — Eyebrow 'YOUR COACHES'; title 'Three people you'll genuinely like.' Cards with portrait, name, role, one-liner, and a years chip: 'Maya Okafor — Lead instructor' — 'Parallel parks on the first try. Teaches you to.' — '12 years teaching'; 'Daniel Reyes — Highway specialist' — 'Ex-long-haul trucker. Merges and interstates are his happy place; after him, nothing will rattle you.' — '23 years driving'; 'Ingrid Halvorsen — Returning-adult specialist' — 'Took her own license at 34. Specializes in drivers starting again at any age.' — '9 years teaching'. Footnote under the grid: 'Portraits are fictional, generated for this demo — friendly placeholders you can swap for your own team.'
   Layout: 3-column grid of white cards (20px radius, 1px dash-gray border): 3:4 portrait at 20px radius on top, name in Fredoka 600, role in slate, one-liner, and a soft-yellow years chip. Mobile: single column with the portrait capped at 320px wide and centered.
   Motion: One-time staggered reveal (14px rise, 60ms stagger); no hover animation beyond the standard 4px card lift.
5. **Test-prep tips and service areas** — White section, two parts. Left: eyebrow 'TEST-PREP TIPS'; title 'The calm checklist.' Six numbered tips on a drawn route line: '01 Book the test for a quiet weekday morning if you can — less traffic to think about.'; '02 Do one mock test on the actual test routes around downtown [CITY].'; '03 Practice the three-point turn in the empty lot on Fern Street until it's boring.'; '04 Say your mirror-signal-shoulder check out loud; examiners hear confidence.'; '05 Pack your permit, glasses, and a water bottle the night before.'; '06 Book a final lesson in the same week as the test — warm hands, warm habits.' Right: a service-area card with eyebrow 'WHERE WE PICK UP' and a MapPin: chips 'Downtown [CITY]', 'Northgate', 'Fair Oaks', 'Cedar Flats', 'Brookfield', 'Mill Race', and the line 'We pick you up anywhere inside the loop — home, school, or work.'
   Layout: Left 7 columns: tips as rows on a vertical dashed SVG route line, each tip a yellow circle numeral in navy text with the copy beside it. Right 5 columns: a soft-yellow card with wrapped chips (999px, navy border at 30%). Mobile: the tips stack with the route line along the left edge; the area card follows.
   Motion: The route line draws in over 800ms as the section reveals; numerals pop in sequence at 70ms intervals; reduced motion shows everything instantly.
6. **Lesson booking** — Navy band with warm-white text. Eyebrow 'BOOK A LESSON'; title 'Hold your slot — it takes a minute.'; copy 'Pick a weekday, a time, and your package. We meet students at home, school, or anywhere in the service area.' Inside a white card: day chips Monday–Saturday; slot chips 9:00, 11:00, 14:00, 16:30; a package select with the four package names plus 'Not sure yet'; name and email inputs (local only); submit pill 'Hold this slot'. Confirmation panel: 'Slot held — {day} at {time} · {package}. A live site would confirm by text; this demo keeps it in your browser.' with a 'Change my request' link that restores the form filled in. Note under the form: 'Every first lesson starts in a quiet lot — no traffic until you ask for it.'
   Layout: White card 720px wide (20px radius) centered on the navy band. Chips are 44px pills; selected day chips fill sign yellow with navy text, selected slot chips fill navy with white text. The package select is a 12px-radius pill-shaped select. Validate locally: name required, email must match a simple pattern; errors are inline quiz-red text, never alerts. Persist the request to localStorage keyed from [BRAND_SLUG] and restore it on reload; the confirmation is aria-live='polite'. Mobile: the card keeps 20px padding and chips wrap.
   Motion: Chips pop to 1.06 on selection (180ms); the confirmation crossfades in 240ms; reduced motion makes each change instant.
7. **FAQ and footer** — FAQ 'Asked at every kitchen table.' as five details/summary items: 'Do you pick me up?' — 'Yes — anywhere in the service area: home, school, or work. Your lesson starts from your driveway.'; 'Can I use the school car for my test?' — 'The Road-Test Ready package includes the car and a warm-up hour that morning.'; 'How many lessons will I need?' — 'Most learners take eight to twelve. We'll tell you honestly at lesson three, not lesson eleven.'; 'Are the quiz questions the real test?' — 'No — they're samples our instructors wrote for practice. The official test bank belongs to the licensing office, not us.'; 'What if I'm really nervous?' — 'Then you're our favorite student. Ingrid built our first-lesson plan around quiet streets and zero pressure.' Footer on ink navy with warm-white text: logomark and [BRAND], the [PROMISE] line, anchor nav (Packages, Quiz, Instructors, Tips, Book), the service-area line 'Serving [CITY] and the neighborhoods inside the loop', the note 'This school, its instructors, and its figures are fictional samples for a website template.', and the optional [CREDIT] link.
   Layout: FAQ in a single column of max-width 760px with 1px dash-gray dividers, 22px vertical padding per item, and a rotating ChevronDown. Footer: two rows on desktop — brand block with the promise line left and nav right; the service-area line, fictional note, and [CREDIT] on a second row in muted warm white; stacked on mobile. No social icons, no newsletter form.
   Motion: A 160ms chevron rotation on toggle with no height animation that could clip text; the footer is static.

## Assets
- image: Hero car photograph. Download https://media.vibefather.ai/assets/dee53dc0-575e-42c1-9ef2-04100f205a61/hero-car.webp to public/images/hero-car.webp. Alt: 'A cheerful yellow compact car parked on a quiet tree-lined street in morning light.' Used as the hero's visual anchor. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Cockpit detail. Download https://media.vibefather.ai/assets/dee53dc0-575e-42c1-9ef2-04100f205a61/cockpit.webp to public/images/cockpit.webp. Alt: 'The driver's seat and steering wheel of the school car in warm daylight.' Used beside the lesson packages as a small supporting visual. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Curb-side pickup. Download https://media.vibefather.ai/assets/dee53dc0-575e-42c1-9ef2-04100f205a61/curb-side.webp to public/images/curb-side.webp. Alt: 'The yellow school car waiting at a curb outside pastel houses.' Used as a small accent in the service-areas card or booking band. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Instructor portrait one. Download https://media.vibefather.ai/assets/dee53dc0-575e-42c1-9ef2-04100f205a61/coach-maya.webp to public/images/coach-maya.webp. Alt: 'Fictional portrait of Maya Okafor, lead instructor.' Used on the Maya Okafor instructor card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Instructor portrait two. Download https://media.vibefather.ai/assets/dee53dc0-575e-42c1-9ef2-04100f205a61/coach-daniel.webp to public/images/coach-daniel.webp. Alt: 'Fictional portrait of Daniel Reyes, highway specialist.' Used on the Daniel Reyes instructor card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Instructor portrait three. Download https://media.vibefather.ai/assets/dee53dc0-575e-42c1-9ef2-04100f205a61/coach-ingrid.webp to public/images/coach-ingrid.webp. Alt: 'Fictional portrait of Ingrid Halvorsen, returning-adult specialist.' Used on the Ingrid Halvorsen instructor card. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record that exact credit in ASSETS.md.
- image: Draw every road-marking motif in code as reusable inline SVG components: a dashed center-line divider (3px dash-gray line, 26px dashes, 34px gaps) used between sections, and a route-dot line (yellow circles, navy numerals) for the tips list. No generated or stock image is used for these motifs.
- icon: Install lucide-react and use only Car, Star, Check, X, ChevronDown, MapPin, RotateCcw, ArrowRight, CalendarCheck, Award, Clock, and Users. ISC license. Draw no brand logos and no traffic-sign replicas; the logomark is original code around the Car glyph. Record the package and license in ASSETS.md.
- font: Self-host Fredoka weights 500 and 600 through @fontsource/fredoka (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.
- font: Self-host Figtree weights 400, 600, and 700 through @fontsource/figtree (OFL-1.1). Record the package and license in ASSETS.md; do not use a font CDN.

## Don'ts
- No real driving schools, DMVs, licensing bodies, or official test banks. The school, instructors, routes, rates, pass figures, and stats are invented samples, and the footer says so.
- Instructor portraits must be AI-generated fictional people who do not resemble any real individual: vary age and ethnicity across the three, never imitate a celebrity or public figure, and keep consistent lighting and quality across the set.
- The quiz questions are invented practice samples: never claim they come from, match, or are endorsed by any official test, and never imply a passing score guarantees a license.
- Photos must show no visible car badges, no readable license plates or signs, no storefronts with branding, and no identifiable bystanders; the three instructor portraits are the only people in the set.
- Booking is local-only: no form submits, no APIs, no email or SMS services, no analytics. Persist to localStorage only and validate restored data.
- No dates tied to the real clock: weekday chips and static sample slots only; never render today's date, a countdown, or time-of-day logic against the visitor's clock.
- No backend, server code, databases, auth, or third-party scripts. Static output in dist/ from the single build command.
- Self-host fonts through the listed Fontsource packages only; never load Google Fonts, Adobe Fonts, or any CDN stylesheet or script.
- No source maps in production, no src/ copied into dist/, keep dist/ under 20 MB, and keep Vite's base relative.
- No Unsplash, Pexels, Pixabay, Google Images, placeholder-image services, or hotlinked files; use only the six generated photos and original code-drawn SVG/CSS art.
- No SEO work: no meta descriptions, Open Graph tags, JSON-LD, sitemaps, or keyword-stuffed headings. A plain title with [BRAND] and a favicon are enough.
- Do not let the quiz double-fire on rapid taps (lock after answering), trap keyboard focus, or animate in a way that ignores prefers-reduced-motion; keep the drifting road dashes purely decorative.
- No scroll-jacking, custom cursor, autoplay audio, or page parallax.
- Keep all copy in US English and build brand-derived strings (storage keys, slugs, alt text) from [BRAND] and [BRAND_SLUG] so alternate variable values never leave default-brand remnants.
- Every internal link is a file name or in-page anchor, never a bare directory; the site must render at 1440×900 and 390×844 with zero console errors.

---
— Prompt by VibeFather · https://vibefather.ai/t/driving-school-website · 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.