Vibe Code a Music School Website

Build a one-page music school / private music teacher 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
═══════════════════════════════════════════════════════════════
- School name: [SCHOOL NAME]
- Founder / lead teacher: [NAME], [INSTRUMENT(S)], [CREDENTIALS]
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + YouTube (open in new tab, rel="noopener")
- Instruments offered: piano, guitar, voice, drums, violin (pick 4-5)
- Ages served: 5 to 17 + adults
- Hours: weekday afternoons + Saturday mornings
- Booking: free trial lesson form + click-to-call
- Founded year: [YEAR]

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: rich plum (#5a2f6e), mustard accent (#dca22a), off-white
 (#faf6ed), deep navy text (#1a1929). Override if user provides; derive
 variants for AA contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Energetic, considered, slightly editorial. NOT childish, NOT cold-academy.
 Should appeal both to parents booking for kids AND adult learners.
- Type pairing: high-contrast display serif for headings (Fraunces, PP
 Editorial New alternative) + Inter for body. ONE italic accent in italic
 serif. NO script fonts.
- Eyebrow labels: uppercase, tracked .20em, plum, prefixed by a 28px CSS
 ::before line in mustard.
- Headlines: short with ONE italic accent ("Real music. *Real teachers.*
 Real progress."). Italic words in mustard.
- Subtle SVG musical note / staff line decorative elements as section
 dividers (NOT inline emojis, NOT clip-art, clean geometric lines).
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.6, round caps. Cover: note (treble clef geometric),
 piano-keys, guitar-shape, microphone, drum, violin, calendar, clock,
 pin, phone, mail, check, star, play.
- Icon containers: 48x48 rounded squares with plum-tinted bg, flip to
 filled plum with off-white icon on hover.
- Motion: scroll fade-ins, hover lifts (4-6px) on cards. No bouncy notes.

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

1. FIXED NAV (glass off-white translucent + backdrop blur)
 - Wordmark (serif) left | anchor nav center | "Book free trial lesson"
 mustard pill CTA right

2. HERO
 - Two-column: text left, photo right (Unsplash: "kid at piano" or
 "guitar lesson", natural, not staged) rounded 28px with plum
 gradient overlay bottom-right
 - Left: eyebrow with line marker, headline ("Real music. *Real
 teachers.* Real progress."), 2-line subhead, primary "Book free trial
 lesson" CTA + secondary "Meet our teachers"
 - Floating pill on photo: "Lessons start at $[X]" with note icon

3. INSTRUMENTS
 - Eyebrow + headline ("Choose your *instrument*")
 - 5-card horizontal row (stack mobile): Piano / Guitar / Voice / Drums
 / Violin
 - Each: 48x48 plum-tinted icon badge + instrument name (serif) +
 levels chip (Beginner / Intermediate / Advanced) + 2-line description
 + price-per-30/45/60-min in monospace

4. TEACHERS
 - Eyebrow + headline ("Your *teachers*")
 - 6 teacher cards in auto-fit grid (stack mobile)
 - Each: portrait photo (rounded 20px), name (serif), primary instrument
 (small uppercase chip), credentials ("Conservatory degree, [Yrs] years
 teaching"), performance experience 1-line, "View schedule →" link
 - Real Unsplash portraits, natural, not staged

5. PROGRAMS
 - Eyebrow + headline ("How we *teach*")
 - 4-card grid (stack mobile): Kids (5-12) / Teens (13-17) / Adults /
 Summer Camps
 - Each: 48x48 mustard-outline icon badge + program name (serif) +
 2-line description in prose + "Learn more →" link

6. RECITALS & PERFORMANCES
 - Two-column: text left, photo right (Unsplash: "student recital piano"
 , wide shot) rounded 24px
 - Left: eyebrow, headline ("Stages, *not just lessons*"), 2-paragraph
 description (twice-yearly recitals, optional competitions, community
 concerts), "Watch student performances →" YouTube link

7. PRICING
 - Eyebrow + headline ("Simple, *honest pricing*")
 - 3-tier pricing table: 30 min / 45 min / 60 min (stack mobile)
 - Each: duration (serif), price-per-lesson (large serif mustard),
 4-feature list in prose with check icons, CTA button
 - Middle tier (45 min) highlighted with "Most Popular" mustard tag
 - Below table: "Sibling discount 15% off second lesson. Bulk packages
 available."

8. FREE TRIAL FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Try a *free trial lesson*"), 3-bullet
 reassurance ("No commitment", "Meet your teacher", "Try the
 instrument")
 - Right: off-white card with plum border (1px)
 • Fields: student name, student age, parent name (if minor), email,
 phone, instrument (select), current level (select: New / Some
 experience / Intermediate / Advanced), preferred day/time
 • Submit mustard button, full-width
 • Inline JS success message (preventDefault)

9. TESTIMONIALS
 - 4 quote cards in 2x2 grid (stack mobile)
 - Each: oversized opening quotation in muted plum, quote body (specific
 instrument, specific milestone, "Maya passed her ABRSM Grade 3 in
 8 months", varied lengths), 5 mustard SVG stars, separator,
 gradient-circle initials avatar + parent name OR adult student name
 + instrument
 - NO photos of fake students/parents

10. HOURS + MAP
 - Two-column: hours table left, Google Maps embed right (rounded 24px)
 - Map iframe via Google Maps embed URL (no API key)
 - Floating overlay: school name, address, "Get directions →"

11. FAQ
 - 6 collapsible <details>: "Do you provide instruments?", "Are online
 lessons available?", "What's your missed-lesson policy?", "Do you
 prepare students for ABRSM/RCM exams?", "Recital required?", "Do
 adults learn here too?"

12. NEWSLETTER
 - Centered card on off-white, mustard radial blob accents
 - Eyebrow "STUDENT WINS", headline ("Monthly updates + *student
 recital recordings*"), inline email input + plum submit + inline
 success

13. FOOTER (deep navy)
 - Centered wordmark off-white serif
 - Italic serif tagline (NOT handwritten, e.g., "Where new musicians
 begin")
 - Social row: mustard-bordered glass circles (Instagram + YouTube
 primary)
 - Bottom: address + hours + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `EducationalOrganization` + `EducationalOrganization` schema in <head> with
 name, address, telephone, hasCourse list
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- tel:/mailto: links; mailto with prefilled subject ("Free trial lesson")
- Responsive at 900px and 500px breakpoints
- Semantic HTML5; aria-labels on icon-only links
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (treble clef or note mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Warm, encouraging, specific. Speaks to parents AND adult learners. Specific
over generic ("Twelve weeks to your first song, twenty-four to your first
recital", not "watch your child shine"). Headlines short with ONE italic
word. Testimonials feel like real Google reviews, specific instrument,
specific milestone, mix of parent and student voices.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including music notes, piano, guitar emojis)
- No cartoon characters, clip-art instruments, or musical-note
 decorations as section dividers (use SVG line drawings only)
- No "passion for music", "unlock your child's potential" filler
- No script/handwritten fonts (no Pacifico, no Caveat)
- No animated bouncing notes or rainbow piano keys
- No fake stock photos of overly-happy kids with parents and pianos
- No real conservatory or ABRSM logos as images, typeset names
- No exclamation marks in body copy


═══════════════════════════════════════════════════════════════
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: "EducationalOrganization" 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 (~70-80KB), production-ready. Include JSON-LD
schema. Show the file as a single code block and briefly summarize the
design decisions made.