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

# Language School Website

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

## Brief
Build a polished single-page website for [BRAND], an invented neighborhood language school offering [COURSE_LANGUAGES] to [AUDIENCE] in [LOCATION], with in-person and live-online options. Combine course discovery, an accurate ten-question placement quiz, recurring schedules, transparent prices, teacher profiles, and an enrollment request in one cohesive experience. Use the exact default copy below, but rewrite every course, question bank, teacher bio, schedule, testimonial, address, and contact detail when variable values change.

- Audience: Prospective language learners who want to understand the right level, weekly time commitment, teaching approach, and cost before enrolling, plus the educators or small school team adapting the site.
- Goal: Help a visitor move from initial interest to a suitable course and a completed client-side enrollment request without hiding the schedule or price.
- Tone: Warm, articulate, encouraging, and practical. Use concise educational language, concrete class details, and no guarantees about fluency, accreditation, or outcomes.

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), vite (MIT), tailwindcss (MIT), motion (MIT), lucide-react (ISC)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Create a Vite React TypeScript app with base './' in vite.config, sourcemaps disabled, and npm run build producing static files in dist/.
  - Configure the Tailwind theme with the specified colors and font families; keep global keyframes, focus styles, reduced-motion overrides, and selection colors in src/index.css.
  - Self-host Fraunces through @fontsource-variable/fraunces and DM Sans through @fontsource-variable/dm-sans; import only the required axes and weights.
  - Keep all visible copy, course records, schedule rows, prices, teacher bios, quiz banks, FAQs, and contact details in src/content.ts. Derive content from [BRAND], [COURSE_LANGUAGES], [AUDIENCE], [LOCATION], and [BASE_PRICE], and rewrite all dependent copy when values change.
  - Use Motion for React for reveals, filter layout changes, quiz transitions, and the mobile menu; use Lucide icons rather than manually imitating any existing icon set.
  - Use accessible React components with semantic buttons, fieldsets, radio groups, labels, focus management, and aria-live for quiz results and form confirmation. Store only the latest quiz result and enrollment draft in localStorage.

## Variables
- [BRAND] — School name (default: "Cedar & Verb"). An invented language school name; never a real school or VibeFather.
- [COURSE_LANGUAGES] — Languages taught (default: "Spanish, French, and Italian"). Three languages; provide courses and a ten-question quiz bank for each.
- [AUDIENCE] — Learner audience (default: "adults learning for travel, work, and connection"). A concise phrase describing who the classes serve.
- [LOCATION] — School location (default: "Portland, Oregon"). City and state or region used in the hero, visit details, and time-zone copy.
- [BASE_PRICE] — Group course price (default: "$240"). Price in USD for one eight-week group course; update dependent pricing copy when changed.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/language-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
- Paper `#F7F3EA` — Main page background and quiet section fills
- Ink `#19352F` — Headlines, body text, borders, and dark footer
- Persimmon `#E76F51` — Primary buttons, active quiz states, and small editorial accents
- Cobalt `#3157D5` — Secondary links, level chips, and focus rings
- Sage `#B7C9A8` — Course-card washes, progress tracks, and decorative shapes
- Chalk `#FFFCF7` — Cards, form surfaces, and text on Ink or Persimmon

### Typography
- Display and section headlines: Fraunces (OFL), weights 500/600/700
- Body, navigation, forms, and tables: DM Sans (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base grid, a 1280px maximum content width, 32px desktop gutters and 20px mobile gutters. Sections have 112px vertical padding on desktop and 72px on mobile. Use a 12-column desktop grid, 24px card gaps, and generous 40–56px internal padding for major interactive panels.
- Radius: Use 24px card radii, 32px image-frame radii, 12px input radii, and fully rounded buttons and filter chips. Major surfaces have a 1px Ink border at 18% opacity; avoid heavy drop shadows.
- Motion: On hero load, rise the two headline lines 32px with a 650ms ease-out and stagger them by 90ms; settle the photograph from scale 1.04 to 1 over 900ms.
- Motion: Reveal section headings and card groups once with opacity 0 to 1 and y 24 to 0 over 550ms, staggered by 70ms; never hide content while waiting for JavaScript.
- Motion: Crossfade and slide quiz questions by 20px over 240ms, animate the progress bar width over 300ms, and announce the final level through aria-live.
- Motion: Animate filtered course layouts with Motion layout transitions, lift course cards 4px on hover, and scale teacher portraits only to 1.025.
- Motion: Use reduced-motion hooks and a prefers-reduced-motion CSS override to remove transforms, smooth scrolling, and nonessential transitions while preserving every final state.
- Imagery: Use the six supplied warm editorial documentary photographs as one coherent shoot: creamy walls, forest-green furnishings, restrained persimmon accents, soft window light, natural 35mm texture, and diverse fictional adults. The hero is a spacious classroom scene rather than a face close-up. Teacher portraits are consistent half-length working portraits of fictional people who do not resemble any real individual. Do not add readable text, logos, famous landmarks, or recognizable real people to any image.

## Pages & Sections
### School home, course finder, quiz, and enrollment (`index.html`)
1. **Sticky header and mobile navigation** — Use a text wordmark [BRAND] beside a small original code-drawn pair of overlapping conversation circles. Desktop anchor links are Courses, Placement quiz, Schedule, Teachers, and FAQ; the primary button is Enroll now. Mobile uses a Menu button with an accessible expanded panel containing the same anchors and CTA. Every anchor scrolls to the corresponding section and closes the mobile panel.
   Layout: Sticky at the top with an 80px height, Paper background at 94% opacity, subtle blur, and a bottom border. Inside the 1280px container, place the wordmark left, navigation centered, and CTA right. Below 900px, show only wordmark, Enroll now, and Menu.
   Motion: Expand the mobile panel with a 220ms opacity and height transition; do not animate the sticky header's position.
2. **Photographic hero** — Eyebrow: IN PERSON IN [LOCATION] · LIVE ONLINE. H1: Speak beyond the classroom. Body: Practical [COURSE_LANGUAGES] classes for [AUDIENCE], with small groups, clear levels, and teachers who make time to talk. Primary CTA: Take the placement quiz. Secondary CTA: Browse courses. Beneath the CTAs show three operational facts: 8-week courses · Max 8 learners · 90-minute classes. Use hero-classroom.webp with alt 'Adult learners talking around a sunlit classroom table'. Add a small floating Chalk card over the image: Not sure of your level? / Answer 10 questions / Find your class.
   Layout: Within the first desktop screen after the header, use a 12-column hero with copy spanning 5 columns and the photograph spanning 7. Set the H1 to clamp(52px, 5.6vw, 82px) with 0.96 line height; keep body copy to 52 characters per line. The image has a 4:3 crop and 32px radius. On mobile, stack copy before a full-width 4:3 image and make both CTAs full width without covering the photograph.
   Motion: Use the specified hero entrance. The floating card gently fades in after the headline; no looping bob or cursor effect.
3. **Course finder** — Heading: Start where you are. Intro: Choose a language, then filter by level. Not sure? The placement quiz will point you here. Provide language pills generated from [COURSE_LANGUAGES] and level pills All levels, A1, A2, B1, B2. Default courses, all eight weeks, 90 minutes, maximum eight learners, and [BASE_PRICE]: Spanish A1 'Spanish from Hello' Tue/Thu 18:00; Spanish A2 'Spanish in Motion' Mon/Wed 19:00; Spanish B1 'Spanish at the Table' Sat 10:00; French A1 'French First Steps' Tue/Thu 19:30; French B1 'French Conversation Club' Sat 11:30; Italian A1 'Italian Day by Day' Mon/Wed 18:00. Each card includes a short outcome-focused description, schedule, teacher name, level chip, View details, and Enroll. View details expands three concrete lesson themes and a materials note; Enroll scrolls to the form and preselects that course. Show a useful empty state with Clear filters when no combination matches.
   Layout: Place the heading and intro in a 5-column left block and filter groups in a 7-column right block. Below, use a three-column card grid on desktop, two on tablet, and one on mobile. Cards have a Sage-tinted top strip, a large Fraunces course title, aligned metadata rows, and actions at the bottom. Expanded details push content down rather than opening a modal.
   Motion: Animate card reordering and opacity after filter changes. Rotate the View details chevron 180 degrees and animate its content height.
4. **Ten-question placement quiz** — Heading: Ten questions to your best-fit class. Intro: Choose a language and answer ten short questions. Your result is a course recommendation, not a certificate. Start with a required language selector containing every language in [COURSE_LANGUAGES]. Then show exactly one four-option question at a time with Back and Continue controls, Question N of 10, and a progress bar. Continue stays disabled until an answer is selected. Score one point per correct answer: 0–2 recommends A1, 3–5 A2, 6–8 B1, and 9–10 B2. The result panel says Your recommended level: [LEVEL], gives a one-sentence explanation, and offers See matching courses, Retake quiz, and Enroll at this level. See matching courses applies both language and level filters and scrolls to the course grid. Save the latest language, answers, score, and level locally. For Spanish use these exact questions and correct options, with the listed alternatives: 1 What does 'buenos días' mean? Good morning (correct), Good night, Thank you, See you later. 2 Complete 'Me ___ Elena.' llamo (correct), llamas, llaman, llaméis. 3 Which word means 'book'? libro (correct), mesa, calle, reloj. 4 Complete 'Nosotros ___ en una casa pequeña.' vivimos (correct), viven, vivo, vives. 5 Complete 'Ayer yo ___ café con Ana.' tomé (correct), tomo, tomaré, tomas. 6 Complete '¿A qué hora ___ la clase?' empieza (correct), empiezo, empiezas, empiecen. 7 Complete 'Si tengo tiempo este fin de semana, ___ a mis primos.' visitaré (correct), visitaría, visitara, visitado. 8 Complete 'Me gustaría ___ una mesa para dos.' reservar (correct), reserva, reservas, reservado. 9 Complete 'Para cuando llegamos, la película ya ___.' había empezado (correct), ha empezado, empezará, empieza. 10 Complete 'Si ___ más tiempo libre, aprendería otro idioma.' tuviera (correct), tengo, tendré, tenía. Write ten original, grammatically accurate four-option questions for each other selected language, mirroring this progression from greetings and present tense through past narration, future plans, polite requests, and the subjunctive or equivalent advanced structure. Keep every question, option, and answer key in src/content.ts.
   Layout: Use a 4/8 two-column section: heading, explanation, and a small code-drawn A1→B2 level rail on the left; a large Chalk quiz card on the right. The quiz card keeps a stable minimum height, puts progress above the question, answers in a 2×2 desktop grid, and navigation below. On mobile, answers and columns stack and the level rail becomes horizontal.
   Motion: Use the specified question and progress transitions. Move focus to the new question heading after Continue and to the result heading after question ten.
5. **Teaching method and classroom scene** — Heading: Learn it. Use it. Make it yours. Three numbered steps: 01 Warm up — Start with useful phrases from a real situation. 02 Guided practice — Build accuracy through short pair exercises and clear feedback. 03 Real conversation — Put the lesson together in unscripted, supportive exchanges. Use conversation-table.webp with alt 'Learners practicing conversation around a wooden table' and caption: A typical class: fewer lectures, more useful exchanges.
   Layout: Use a full-width 16:9 photograph followed by a three-column numbered row that overlaps the photograph's lower edge by 48px on desktop. Each step sits on Chalk with a colored number, concise copy, and top border. On mobile, remove the overlap and stack the steps beneath the image.
   Motion: Reveal the photograph with a subtle clip inset and the three steps with a short stagger; no parallax that crops faces or notebooks.
6. **Schedule and transparent pricing** — Heading: A week that works with your week. Subcopy: Recurring times, small groups, and no registration fee. Provide In person and Live online tabs. The schedule table columns are Course, Level, Days, Time, Format, and Price. Reuse the six course records, with online times labeled in the local [LOCATION] time zone and group-course prices set to [BASE_PRICE]. Beside it show three price rows: Eight-week group course [BASE_PRICE]; Four-week conversation club $96; One private 60-minute lesson $58. Note: All prices are in USD. Course materials are included. Add an Enroll in a group course button that preselects the first visible course.
   Layout: Use an 8/4 grid with the tabbed schedule on the left and an Ink-colored price card on the right. The table header remains visible above rows and each row has generous 18px vertical padding. On screens below 760px, transform each row into a labeled card instead of allowing horizontal page overflow. Keep the price card static on mobile.
   Motion: Crossfade schedule rows over 180ms when tabs change and move a small underline between tabs. Do not animate prices or count fabricated savings.
7. **Teacher profiles** — Heading: Teachers who make room for your voice. Default profiles: Amara Bennett — Spanish · A1–B2 — Uses neighborhood stories, food vocabulary, and short role-plays to get beginners speaking. Jonas Berg — French · A1–B1 — Breaks pronunciation into practical patterns and brings short radio excerpts into conversation lessons. Priya Nair — Italian · A1–B2 — Builds classes around travel scenarios, everyday rituals, and thoughtful error review. Pair them respectively with teacher-amara.webp, teacher-jonas.webp, and teacher-priya.webp. Use alt text 'Amara Bennett, a fictional Spanish teacher, in a sunlit classroom', 'Jonas Berg, a fictional French teacher, beside a classroom bookshelf', and 'Priya Nair, a fictional Italian teacher, seated in a language studio'. These are invented profiles and fictional portrait placeholders, not real staff.
   Layout: Three equal cards with 3:4 portraits, the name and language below rather than over the face, and two-line bios. Use subtle Sage, Paper, and Cobalt-tinted card backgrounds. Keep a single-column mobile layout with image crops no taller than 480px.
   Motion: Use the restrained portrait hover scale and reveal stagger only; do not hide bios behind hover.
8. **Student voices** — Heading: What practice feels like. Use three invented demo quotes without metrics or outcome claims: 'The class gives me just enough structure, then lets me try the conversation myself.' — Nora, Spanish A2. 'I finally understand what to practice between lessons instead of collecting random phrases.' — Theo, French A1. 'Making mistakes feels normal here, and that makes speaking much easier.' — Mina, Italian A1.
   Layout: An Ink section with a large Fraunces quotation treatment. Show the three quotes in a horizontal three-column row on desktop and a swipe-free vertical stack on mobile. Use Persimmon quote marks and Chalk text with strong contrast.
   Motion: Reveal the quotes together with a subtle opacity transition; no carousel or automatic rotation.
9. **Enrollment form and school details** — Heading: Your next conversation starts here. Body: Tell us what you want to learn and when you can join. The demo checks your details and saves the request only in this browser. Fields: Full name, Email, Language, Level, Preferred schedule, Format (In person or Live online), and an optional What would you like to say in your new language? textarea. Preselect course values arriving from any Enroll button. Validate required fields and a plausible email in the browser. Submit button: Request my place. Success state: Thanks, [first name]. Your request is saved for this demo. No information has been sent. Include buttons Edit request and Start another request. Beside the form use school-studio.webp with alt 'A welcoming language school studio with green chairs and warm wood' and details: 418 Alder Mews, [LOCATION]; hello@[BRAND-slug].example; (503) 555-0148; Mon–Thu 10:00–20:00, Fri 10:00–17:00, Sat 09:00–15:00. Derive the email slug and rewrite the invented street address, phone, and hours when variables change.
   Layout: Use a 5/7 grid: image and visit details left, form right in a Chalk card. Use two columns for name/email and language/level on desktop, then one column below 640px. Give inputs 48px minimum height, visible labels, inline error text, and a clear Cobalt focus ring. Replace the form with the success panel in place while preserving its height as much as possible.
   Motion: Shake no fields. Fade errors in, and on success move focus to the confirmation heading with a 240ms opacity transition.
10. **Frequently asked questions** — Heading: Before your first hello. Six accordions with concrete answers: Do I need any experience? — No. A1 assumes no prior study, and the quiz helps place everyone else. How accurate is the placement quiz? — It recommends a starting level from ten answers; a teacher can adjust it after a short conversation. Can I switch levels? — Yes. Speak with your teacher after the first class and the school will suggest a better-fit group. What should I bring? — A notebook and something to write with; all course materials are included. Are online classes live? — Yes. Online groups meet with a teacher at the listed recurring time and are not prerecorded. What is the refund policy? — A full refund is available up to seven days before the first class; after that, the school offers course credit. Rewrite policy and support copy for a changed school rather than implying universal terms.
   Layout: Use a 4/8 grid with the heading left and six full-width accordion rows right. Each question is a 56px minimum button with a plus icon and visible focus; only one answer needs to be open at a time.
   Motion: Animate answer height and opacity over 220ms and rotate the plus to an X. Keep all answers available with reduced motion.
11. **Footer** — Repeat [BRAND] and the line Practical language classes in [LOCATION] and online. Include Courses, Placement quiz, Schedule, Teachers, Enroll now, the invented address, email, phone, and hours from the enrollment section. End with © [BRAND] and the optional [CREDIT] link. Do not add social icons, external maps, a year, or fabricated accreditation badges.
   Layout: An Ink footer with a 5/3/4 desktop grid for brand statement, navigation, and visit details, separated from FAQ by a Persimmon top rule. Stack on mobile with 28px gaps and large tap targets.
   Motion: None beyond a simple link-color hover transition.

## Assets
- image: Download https://media.vibefather.ai/assets/b2e01ad5-88c0-4e5e-a7d0-1876a943e80b/hero-classroom.webp to public/images/hero-classroom.webp; alt: Adult learners talking around a sunlit classroom table; use in the hero. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/b2e01ad5-88c0-4e5e-a7d0-1876a943e80b/conversation-table.webp to public/images/conversation-table.webp; alt: Learners practicing conversation around a wooden table; use in Teaching method. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/b2e01ad5-88c0-4e5e-a7d0-1876a943e80b/teacher-amara.webp to public/images/teacher-amara.webp; alt: Amara Bennett, a fictional Spanish teacher, in a sunlit classroom; use in Teacher profiles. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/b2e01ad5-88c0-4e5e-a7d0-1876a943e80b/teacher-jonas.webp to public/images/teacher-jonas.webp; alt: Jonas Berg, a fictional French teacher, beside a classroom bookshelf; use in Teacher profiles. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/b2e01ad5-88c0-4e5e-a7d0-1876a943e80b/teacher-priya.webp to public/images/teacher-priya.webp; alt: Priya Nair, a fictional Italian teacher, seated in a language studio; use in Teacher profiles. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/b2e01ad5-88c0-4e5e-a7d0-1876a943e80b/school-studio.webp to public/images/school-studio.webp; alt: A welcoming language school studio with green chairs and warm wood; use beside Enrollment. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- font: Install and self-host @fontsource-variable/fraunces and @fontsource-variable/dm-sans, both OFL; bundle the required woff2 files locally and list the packages and licenses in ASSETS.md.
- icon: Use lucide-react (ISC) for menu, arrow, chevron, plus, check, clock, map-pin, and mail icons. Bundle locally, use consistent 20px strokes, and record the package and license in ASSETS.md. Draw only the original conversation-circle brand mark in SVG.

## Don'ts
- Do not add a backend, API routes, a database, authentication, analytics, external form submission, maps embeds, or third-party API calls. Quiz scoring, filtering, local persistence, and enrollment confirmation must run entirely in the browser.
- Do not hotlink images or load scripts, fonts, icons, or styles from a CDN. Download the six supplied images, self-host both fonts, and keep every runtime asset local with relative paths.
- Do not emit source maps, copy src/ into dist/, exceed 20 MB in dist/, or require more than npm run build. The single-page site must open from index.html and use hash anchors rather than bare-directory links.
- Do not scatter copy through components. Keep all editable text and records in src/content.ts, derive brand-dependent values from variables, and rewrite all default-only content when variables change.
- Do not use real school names, logos, slogans, branded visual systems, existing-school copy, custom commercial fonts, or page code from another website.
- Do not use real teacher identities, celebrity or public-figure likenesses, recognizable real people, or initials-only teacher cards. All teacher profiles and portraits are fictional placeholders and must vary naturally.
- Do not use Unsplash, Pexels, Pixabay, Google Images, CC BY-NC, CC BY-SA, placeholder-image services, or any asset with unclear redistribution rights. Do not add text, logos, famous landmarks, or branded products to the generated imagery.
- Do not claim accreditation, guaranteed fluency, verified student outcomes, real review counts, or fabricated performance statistics. Keep the placement result explicitly advisory rather than a certificate.
- Do not leave decorative or dead controls. Language and level filters, course details, both schedule tabs, all ten quiz steps and scoring, result-to-course filtering, retake, mobile navigation, accordions, enrollment preselection, validation, success, edit, and reset must all work.
- Do not use lorem ipsum, generic stock slogans, fake urgency, countdowns, unrelated brands, or VibeFather's own name, pricing, licensing, metrics, or membership content in the site UI.
- Do not compromise accessibility or responsiveness: no horizontal overflow at 390px, no table-only mobile layout, no missing labels or alt text, no focus traps, no hover-only information, and no console errors at 390×844 or 1440×900.
- Do not ignore prefers-reduced-motion, smooth-scroll users into motion they cannot disable, hide core content behind animation, or use unnecessary 3D, parallax, autoplay carousels, or looping decoration.

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