The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Private Tutor 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], the invented one-person tutoring practice of [TUTOR_NAME], offering [SUBJECTS] to [AUDIENCE] in [LOCATION] and online. Combine subject and level guidance, a transparent teaching process, clearly labeled sample student progress, packages derived from [HOURLY_RATE], an interactive availability calendar, and a free intro-call request in one cohesive experience. Use the exact default copy below, but rewrite every subject, level, tutor bio, outcome, package description, availability detail, FAQ, and contact detail when variable values change.

- Audience: Students and families comparing a one-person tutor's subject fit, teaching style, likely commitment, cost, and availability before making an inquiry, plus independent tutors adapting the site to their own practice.
- Goal: Help a visitor move from initial interest to a suitable subject and a completed client-side free intro-call request with a selected sample date and time, while keeping all outcomes and availability explicitly illustrative.
- Tone: Warm, calm, intelligent, and practical. Write like a thoughtful tutor who explains the next step clearly. Use specific educational details, avoid pressure, and never promise grades, admissions, or guaranteed improvement.

## 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 Lora through @fontsource-variable/lora and Manrope through @fontsource-variable/manrope; import only the required axes and weights.
  - Keep all visible copy, subject and level records, sample outcomes, prices, tutor details, FAQs, and contact information in src/content.ts. Derive content from [BRAND], [TUTOR_NAME], [SUBJECTS], [AUDIENCE], [LOCATION], and [HOURLY_RATE], and rewrite all dependent copy when values change.
  - Parse the numeric amount and currency symbol from [HOURLY_RATE], calculate the four-session total as exactly four times that amount, and format all dependent prices from one pricing helper rather than duplicating hard-coded totals.
  - Use Motion for React for reveals, subject-tab changes, mobile navigation, and form states; 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 selected slots, validation summaries, and form confirmation. Store only the latest booking draft in localStorage.
  - Use America/New_York for the default tutor time zone and choose an appropriate IANA time zone in src/content.ts when [LOCATION] changes. Generate the rolling sample calendar locally without external APIs.

## Variables
- [BRAND] — Tutoring practice name (default: "Mara Ellison Tutoring"). An invented one-person practice name; never a real tutoring business or VibeFather.
- [TUTOR_NAME] — Tutor name (default: "Mara Ellison"). An invented tutor identity whose name is used consistently in the hero, biography, and contact copy.
- [SUBJECTS] — Subjects taught (default: "mathematics and physics"). Two or three related subjects; provide subject tabs and level-specific lesson content for each.
- [AUDIENCE] — Learner audience (default: "high school students preparing for exams"). A concise phrase describing who the tutor serves; adapt levels, examples, and parent guidance accordingly.
- [LOCATION] — Tutor location (default: "Cambridge, Massachusetts"). City and state or region used for in-person details and the tutor's local time-zone copy.
- [HOURLY_RATE] — Single-session price (default: "$68"). Price in USD for one private 60-minute session; calculate the four-session total from this value.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/private-tutor-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
- Chalk `#F7F4EC` — Main page background and quiet editorial sections
- Midnight `#172A3A` — Headlines, body text, borders, primary buttons, and dark footer
- Periwinkle `#5B6BB2` — Subject tabs, selected calendar states, links, and focus rings
- Apricot `#D89A3D` — Small notebook-inspired accents and highlight rules with Midnight text
- Mist `#DDE7E0` — Secondary panels, availability washes, and progress tracks
- Paper `#FFFDF8` — Cards, forms, image captions, and text on Midnight or Periwinkle

### Typography
- Display, tutor quotations, and section headlines: Lora (OFL), weights 500/600/700
- Body, navigation, prices, calendar, and forms: Manrope (OFL), weights 400/500/600/700

### Layout & motion
- Spacing: Use an 8px base grid, a 1240px maximum content width, 32px desktop gutters and 20px mobile gutters. Sections have 104px vertical padding on desktop and 68px on mobile. Use a 12-column desktop grid, 24px card gaps, and 32–48px internal padding for major interactive panels. Keep paragraphs near 62 characters per line.
- Radius: Use 20px card radii, 28px image-frame radii, 10px input radii, and fully rounded buttons and tabs. Major surfaces have a 1px Midnight border at 16% opacity and a restrained 0 12px 36px Midnight shadow at 6% opacity only on the booking panel.
- Motion: On hero load, rise the eyebrow and two headline lines 26px with a 600ms ease-out and stagger them by 80ms; settle the photograph from scale 1.035 to 1 over 850ms.
- Motion: Reveal section headings and card groups once with opacity 0 to 1 and y 22 to 0 over 500ms, staggered by 65ms; content remains visible if JavaScript or IntersectionObserver is unavailable.
- Motion: Crossfade and slide subject-level panels by 16px over 220ms, move the active tab underline with a layout transition, and preserve keyboard focus on the selected tab.
- Motion: Animate selected calendar slots with a 180ms background and border transition; expand the booking summary with opacity and height over 220ms without shifting the calendar unexpectedly.
- 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 four supplied warm editorial documentary photographs as one coherent shoot featuring the same fictional tutor: chalk-white plaster, light oak, midnight-blue shelving, restrained periwinkle clothing, small apricot accents, soft late-afternoon window light, natural skin texture, and subtle 35mm grain. The hero is a spacious working scene rather than a tight face close-up. The tutor and any student are fictional people who do not resemble any real individual. Use no readable text, logos, famous landmarks, branded products, or real student imagery.

## Pages & Sections
### Tutor home, subjects, sample progress, and intro-call request (`index.html`)
1. **Sticky header and mobile navigation** — Use a text wordmark [BRAND] beside a small original code-drawn open-book line motif with one apricot dot. Desktop anchor links are Subjects, How it works, Sample progress, Pricing, and Availability; the primary button is Book a free intro. 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 a 76px height, Chalk background at 95% opacity, subtle blur, and a bottom border. Inside the 1240px container, place the wordmark left, navigation centered, and CTA right. Below 940px, show only wordmark, a compact Free intro button, and Menu.
   Motion: Expand the mobile panel with a 220ms opacity and height transition; do not animate the sticky header's position.
2. **Personal photographic hero** — Eyebrow: ONE-TO-ONE [SUBJECTS] TUTORING · [LOCATION] + ONLINE. H1: Patient tutoring. Clear next steps. Body: Personal [SUBJECTS] support for [AUDIENCE], built around clear explanations, thoughtful practice, and a plan you can see. Primary CTA: Book a free intro call. Secondary CTA: Explore subjects. Beneath the CTAs show three operational facts: 60-minute sessions · Weekly progress note · No long-term contract. Use hero-tutor.webp with alt 'A fictional tutor preparing a lesson at a sunlit oak table'. Add a small floating Paper card over the image: Free 20-minute intro / Talk through goals / No preparation needed.
   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(54px, 5.3vw, 78px) with 1.01 line height and a maximum of two lines at desktop. The image has a 4:3 crop and 28px radius. On mobile, order eyebrow, H1, image, body, and CTAs; use a 210px-high image crop so the visual appears within the first 844px, and make both CTAs full width without covering the photograph.
   Motion: Use the specified hero entrance. The floating card fades in after the headline; no looping bob, parallax, or cursor effect.
3. **Subject and level finder** — Heading: Find the right starting point. Intro: Choose a subject to see how [TUTOR_NAME] breaks down support by level. Every path starts with the student's current work, not an assumed syllabus. Provide one accessible tab per subject derived from [SUBJECTS]. For the default Mathematics tab show: Foundations · Grades 8–9 — Fractions, linear equations, and turning word problems into workable steps; Core high school · Grades 9–11 — Algebra I and II, geometry, functions, and clear written reasoning; Advanced and exam prep · Grades 11–12 — Precalculus, calculus readiness, and timed mixed-problem practice. For Physics show: Foundations · Grades 8–9 — Measurement, graphs, and scientific reasoning; Core high school · Grades 10–11 — Forces, energy, circuits, and diagram-first problem solving; Advanced and exam prep · Grades 11–12 — Momentum, fields, and structured exam-style problems. Each level card includes Best for, a three-topic list, and Ask about this level. That action preselects subject and level in the request form and scrolls to Availability. Rewrite all levels and examples to fit changed [SUBJECTS] and [AUDIENCE].
   Layout: Place the heading and intro in a 5-column left block and subject tabs in a 7-column right block. Below, use three equal level cards with a large Lora level title, a small grade chip, aligned topic rows, and a bottom action. The active subject tab is Periwinkle with Paper text; inactive tabs use Paper. Stack cards on mobile and make the tab row wrap rather than scroll horizontally.
   Motion: Use the specified subject-panel transition. On level selection, briefly highlight the booking form's subject field instead of adding a toast.
4. **How sessions work** — Heading: A lesson is only one part of the progress. Intro: A simple four-part rhythm keeps student, tutor, and family aligned. Steps: 01 Free intro — A 20-minute conversation about current work, goals, and fit. 02 Personal starting plan — [TUTOR_NAME] identifies two priorities and agrees on a manageable weekly rhythm. 03 Focused 60-minute session — Work through one concept, guided examples, and increasingly independent practice. 04 Short weekly recap — Receive what clicked, what needs another look, and one concrete practice priority. Use session-progress.webp with alt 'A fictional tutor and student working through a lesson at a wooden table' and caption: Enough structure to move forward, enough room to ask why.
   Layout: Use a 7/5 grid with a 16:9 photograph on the left and four numbered steps stacked on the right. Each step has an Apricot number, a strong Manrope title, and two lines of copy separated by thin rules. On mobile, stack the photograph followed by steps with no overlap.
   Motion: Reveal the photograph with a subtle clip inset and the four steps with a short stagger; no parallax that crops the participants.
5. **Meet the tutor** — Eyebrow: YOUR TUTOR, FROM FIRST CALL TO FINAL SESSION. Heading: Clear explanations, without the performance. Default first-person bio for [TUTOR_NAME]: 'I start by finding the exact step where a problem stops making sense. Then we rebuild it with plain language, a visual example, and practice that gradually removes my help.' Second paragraph: 'Sessions are calm and focused. You leave with a short recap, one priority for the week, and practice matched to what happened in the lesson.' Use tutor-portrait.webp with alt '[TUTOR_NAME], a fictional private tutor, in a warm home studio'. Add three practical facts: One tutor throughout · Online or in person in [LOCATION] · Reschedule up to 24 hours ahead. Add a small caption: Demo profile with a fictional portrait placeholder. Rewrite the biography in the same first-person structure for a changed tutor and subject.
   Layout: Use a 5/7 grid with a 3:4 portrait left and biography right. Place a 64px-high Apricot quotation rule beside the first-person quote, then the second paragraph and three facts in a wrapped chip row. Keep the caption below the image rather than over the face. On mobile, use a 360px-max portrait and stack biography beneath it.
   Motion: Use a single gentle portrait reveal and stagger the three facts; do not hide biography content behind hover.
6. **Clearly labeled sample student progress** — Eyebrow: ILLUSTRATIVE EXAMPLES. Heading: Progress you can discuss in plain language. Intro: These fictional samples show how [BRAND] would report a starting point, a focus, and a change. They are not verified outcomes or promises. Card 1: Algebra II · 8 weekly sessions · Practice-set accuracy 61% → 79% on equivalent mixed sets · Focus: functions and multi-step setup · Next step: timed practice without a worked example. Card 2: Physics · 6 weekly sessions · Five-problem check 2 → 4 correct · Focus: drawing and labeling force diagrams before calculating · Next step: mixed force and energy problems. Card 3: Study routine · 4 weekly sessions · Planned review blocks 0 → 3 completed per week · Focus: a short weekly plan and closed-book recall · Next step: protect the routine during a busy assessment week. Render the before/after values as accessible text plus simple CSS bars, not a chart that implies measured live data. Rewrite every sample for changed subjects and audience while keeping the ILLUSTRATIVE label and disclaimer visible.
   Layout: Use a Midnight section with the heading and disclaimer across the top, followed by three equal Paper cards. Each card has an Apricot ILLUSTRATIVE chip, subject and duration metadata, large before/after figures, two restrained Mist bars with numeric labels, and aligned focus and next-step rows. Stack cards on mobile; never rely on bar length alone to convey values.
   Motion: Reveal cards together with a 60ms stagger. Animate bars from 0 to their final widths only once over 600ms; show final widths immediately with reduced motion.
7. **Transparent tutoring packages** — Heading: Start with a conversation, then choose the rhythm. Intro: No registration fee, no payment on this demo, and no long-term contract. Card 1: Free intro · $0 · 20 minutes · Talk through current work and goals, ask about fit, and decide whether to continue. Button: Book free intro. Card 2: Single session · [HOURLY_RATE] · 60 minutes · One tailored lesson, a short session note, and three targeted practice prompts. Button: Choose single session. Card 3: Four-session plan · $272 by default, calculated as 4 × [HOURLY_RATE] · Four weekly 60-minute lessons · Includes everything in Single session plus a weekly recap and one agreed practice plan. Button: Choose four sessions. Every button scrolls to Availability and preselects the matching Package interest value; the paid choices still begin with the free intro call. Note: Prices are in USD. Rescheduling is available up to 24 hours before a session. Update every dependent price and package description when variables change.
   Layout: Use three equal cards, with the Single session card slightly emphasized by a Periwinkle top border rather than a Most popular badge. Align price, duration, feature list, and button rows. Display the four-session total and multiplication formula together. Stack on mobile and keep all buttons at least 48px high.
   Motion: Lift package cards only 3px on hover and use a 180ms border-color transition; do not animate prices or invent savings.
8. **Sample availability and free intro-call request** — Heading: Pick a time for a first conversation. Intro: Choose a sample slot, then tell [TUTOR_NAME] what you would like help with. This demo saves the request only in this browser; it does not send information or book a real appointment. Build a rolling seven-day calendar with week label, Previous week and Next week controls, and four weeks of forward navigation. Generate dates in the tutor's local time zone. Default sample availability is Tuesday and Thursday at 16:00, 17:00, and 18:00, plus Saturday at 09:00, 10:00, and 11:00. Disable past dates, all other weekdays, and dates beyond four weeks. Label the calendar Sample availability · Tutor local time. Selecting an available date reveals its time chips; selecting a time creates a read-only summary with day, date, time, 20-minute duration, and a Change time button. The request form fields are Your name, Email, Student level, Subject derived from [SUBJECTS], Format with Online and In person radios, Package interest synchronized from Pricing, and What would you like help with? textarea. Require a selected slot, name, plausible email, level, subject, format, package, and a goals message of at least 20 characters. Submit button: Request free intro call. Success state: Thanks, [first name]. Your demo request is saved in this browser. Nothing has been sent and no real appointment is booked. Include Copy request summary with a local fallback, Edit request, and Start over. Save and restore the latest draft locally, including the selected slot.
   Layout: Use a 7/5 grid with the calendar left and a Paper booking panel right. The calendar uses seven equal columns with 44px-minimum day buttons and selected-day slots below. On mobile, retain seven compact columns with two-letter day labels and numeric dates; never introduce horizontal page overflow. Form fields use two columns only for name/email and level/subject above 640px, then one column. Give inputs 48px minimum height, visible labels, inline errors, and a Periwinkle focus ring. Replace the form with the success panel in place and move focus to its heading.
   Motion: Use the specified slot and summary transitions. Fade errors in without shaking fields; on success use a 220ms opacity transition and announce it through aria-live.
9. **Practical frequently asked questions** — Heading: Before we meet. Six accordions with concrete answers: What happens on the free intro call? — We discuss current work, what feels difficult, and what a useful first month could look like. There is no sales script and no obligation to continue. Do sessions include homework? — Only when it helps. The tutor suggests a short, specific practice task rather than an automatic worksheet pile. Can a parent join? — A parent or caregiver is welcome for the first few minutes of an intro call and can receive the agreed weekly recap; adapt this answer for an adult [AUDIENCE]. What should we have ready? — A recent assignment, practice test, or piece of work is useful, but not required for the intro. What is the rescheduling policy? — Sessions can be moved without charge up to 24 hours before the agreed start time; later changes are discussed case by case. Are the student results real? — No. The progress cards are illustrative samples for this demo, not verified claims or guarantees. Rewrite policy and support copy for a changed tutor 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.
10. **Footer and invented contact details** — Repeat [BRAND] and the line Personal [SUBJECTS] tutoring in [LOCATION] and online. Include Subjects, How it works, Sample progress, Pricing, Availability, and Book a free intro. Contact details are hello@[BRAND-slug].example and (617) 555-0136 for the default; derive the email slug and choose a reserved 555 number appropriate to a changed location. Availability note: Intro calls Tuesday, Thursday, and Saturday by request. End with © [BRAND] and the optional [CREDIT] link. Do not add social icons, external maps, a year, accreditation badges, or review counts.
   Layout: A Midnight footer with a 5/3/4 desktop grid for brand statement, navigation, and contact details, separated from FAQ by an Apricot 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/5abc010d-2f28-4b7e-a3bc-504315ecaf19/hero-tutor.webp to public/images/hero-tutor.webp; alt: A fictional tutor preparing a lesson at a sunlit oak 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/5abc010d-2f28-4b7e-a3bc-504315ecaf19/session-progress.webp to public/images/session-progress.webp; alt: A fictional tutor and student working through a lesson at a wooden table; use in How sessions work. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/5abc010d-2f28-4b7e-a3bc-504315ecaf19/tutor-portrait.webp to public/images/tutor-portrait.webp; alt: [TUTOR_NAME], a fictional private tutor, in a warm home studio; use in Meet the tutor. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- image: Download https://media.vibefather.ai/assets/5abc010d-2f28-4b7e-a3bc-504315ecaf19/study-space.webp to public/images/study-space.webp; alt: A quiet tutoring studio with an oak table and midnight-blue shelves; use as an optional quiet visual beside the pricing introduction on wide screens only, never replacing any content. Generated by VibeFather with qwen-image-3.0-pro, redistributable with this template; record in ASSETS.md.
- font: Install and self-host @fontsource-variable/lora and @fontsource-variable/manrope, 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, calendar, and mail icons. Bundle locally, use consistent 20px strokes, and record the package and license in ASSETS.md. Draw only the original open-book brand motif 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. Calendar generation, local persistence, pricing calculations, validation, clipboard fallback, and confirmation must run entirely in the browser.
- Do not hotlink images or load scripts, fonts, icons, or styles from a CDN. Download the four 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 and package totals from variables, and rewrite all default-only content when variables change.
- Do not use real tutoring business names, logos, slogans, branded visual systems, existing-site copy, custom commercial fonts, or page code from another website.
- Do not use real tutor or student identities, celebrity or public-figure likenesses, recognizable real people, real testimonials, or initials-only tutor presentation. The tutor profile and all photographed people are fictional placeholders.
- 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 readable text, logos, famous landmarks, or branded products to generated imagery.
- Do not claim accreditation, verified student outcomes, guaranteed grades, admissions results, real review counts, or fabricated performance statistics. Keep every progress card and the availability calendar explicitly labeled as illustrative sample content.
- Do not imply that a real appointment has been booked or that personal information was transmitted. The confirmation must say that the request was saved only in this browser and nothing was sent.
- Do not leave decorative or dead controls. Subject tabs, level-to-form preselection, package-to-form synchronization, calendar navigation, disabled dates, time selection, Change time, mobile navigation, accordions, validation, local draft restore, copy, 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 hover-only information, no missing labels or alt text, no focus traps, no color-only calendar states, and no console errors at 390×844 or 1440×900.
- Do not ignore prefers-reduced-motion, hide core content behind animation, or add unnecessary 3D, parallax, autoplay carousels, looping decoration, or smooth scrolling that cannot be disabled.

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