Vibe Code a Yoga Studio Website

Build a one-page yoga studio 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
═══════════════════════════════════════════════════════════════
- Studio name: [STUDIO NAME]
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + (optional) YouTube (open in new tab, rel="noopener")
- Class types: Vinyasa, Yin, Hatha, Restorative, Hot 26, Prenatal (pick 5-6)
- Hours: typical day starts 6am, ends 8:30pm
- Founded year: [YEAR]
- Intro offer: $49 for unlimited yoga for 2 weeks (or override)
- Booking: form + click-to-call

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: muted sage (#9aae8c), off-white (#f7f3ec), terracotta accent
 (#c87a4c) for italic + CTAs, deep navy text (#1a2238). Override if user
 provides hex values; derive variants for AA contrast on body.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Serene, slow, mindful. Nature-inspired. NOT hippie-cliche, NOT
 corporate-wellness-cold.
- Type pairing: high-contrast serif for headings (Cormorant Garamond,
 Fraunces) + Inter for body. NO script fonts.
- Eyebrow labels: uppercase, tracked .20em, sage, prefixed by a 28px CSS
 ::before line in terracotta.
- Headlines: short and breath-paced with ONE italic accent ("Find your
 *breath*. Find your *strength*."). Italic words in terracotta.
- Generous whitespace, slow-feeling rhythms, soft rounded corners (16-32px),
 no harsh shadows. Subtle SVG leaf/branch decorative elements as section
 dividers (NOT emojis, NOT clip-art).
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5 (thin and quiet), round caps. Cover: lotus, leaf,
 breath-arc, sun, moon, heart-outline, calendar, clock, pin, phone, mail,
 check, star.
- Icon containers: 44x44 rounded squares with sage-tinted bg, flip to filled
 sage with off-white icon on hover.
- Motion: slow scroll fade-ins (0.7s ease-out), subtle Ken Burns on hero,
 gentle hover lifts (4px). No bouncy motion.

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

1. FIXED NAV (glass effect off-white translucent + backdrop blur)
 - Wordmark (serif) left | anchor nav center | "Try first class free"
 terracotta pill CTA right

2. HERO
 - Two-column: text left, photo right (Unsplash: "sunrise yoga pose" or
 "yoga studio interior wood floor") rounded 32px with sage gradient
 overlay bottom-right
 - Left: eyebrow with line marker, headline ("Find your *breath*. Find
 your *strength*."), 2-line subhead, primary "Book a class" CTA +
 secondary "Intro offer, 14 days for $49"
 - Floating pill on photo: "Now offering livestream classes" with leaf icon

3. CLASS SCHEDULE
 - Eyebrow + headline ("This week's *schedule*")
 - Weekly table grid (Mon-Sun across top, time slots down side, 6am-8:30pm)
 - Each cell: class name + teacher's first name in compact text
 - Color-code by class type (subtle, accessible, sage / cream / terracotta
 tinted backgrounds)
 - Below table: legend row with class-type swatches
 - Mobile: collapse to list of today's classes only with "View full week →"
 link

4. CLASS TYPES
 - Eyebrow + headline ("Find your *practice*")
 - Auto-fit grid (minmax 280px) of 6 class type cards
 - Each: 44x44 sage-tinted icon badge + class name (serif) + level chip
 (Beginner/All Levels/Advanced) + duration in monospace + 2-line
 description in prose

5. TEACHERS
 - Eyebrow + headline ("Your *teachers*")
 - 5 teacher cards (auto-fit grid)
 - Each: portrait photo (rounded 20px), name (serif), lineage/training
 ("RYT-500, Iyengar lineage"), specialty, 2-sentence philosophy
 - Real Unsplash portraits, natural, not staged

6. PRICING
 - Eyebrow + headline ("Simple *pricing*")
 - 4-column grid: Drop-in / 5-pack / 10-pack / Unlimited monthly (stack
 mobile)
 - Each: tier name (serif), price (large serif terracotta), 3-4 benefits
 in prose with check icons, CTA button
 - Below grid: 1-line note "Student & senior 20% off, bring ID"

7. INTRO OFFER (featured)
 - Centered card on cream section, terracotta gradient accents
 - Eyebrow "NEW STUDENT SPECIAL"
 - Large headline ("Two weeks of *unlimited* yoga"), price ($49 in serif
 terracotta), "What's included" 4-bullet list, "Claim your offer"
 terracotta CTA button

8. WORKSHOPS & RETREATS
 - Eyebrow + headline ("Beyond *the mat*")
 - 3 upcoming events as horizontal cards
 - Each: date block left (large day + 3-letter month in serif), event name
 + teacher + 1-line description right, price + "RSVP →" link

9. STUDIO + AMENITIES
 - Two-column: photo left (rounded 24px), text right
 - Right: eyebrow, headline ("Your *space*"), 4 amenities listed with check
 icons (mat rental, showers, tea bar, lockers), small list of "What to
 bring on your first visit"

10. TESTIMONIALS
 - 3 quote cards in grid
 - Each: oversized opening quotation mark in muted sage, quote body
 (specific class, specific teacher, varied lengths), separator,
 gradient-circle initials avatar + first name + last initial + how
 long they've practiced ("Practicing here for 3 years")
 - NO fake stock photos

11. BOOKING FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Reserve your *spot*"), 3-bullet reassurance
 - Right: cream card with sage border (1px)
 • Fields: full name, email, phone, class (select), preferred date,
 preferred time, is this your first class (yes/no), notes
 • Submit terracotta button, full-width
 • Inline JS success message

12. 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: studio name, address, "Get directions →"

13. FAQ
 - 6 <details>: "What if I've never done yoga?", "What to bring?", "Are
 walk-ins okay?", "Can I cancel a booking?", "Do you offer prenatal?",
 "Do you have a livestream option?"

14. NEWSLETTER
 - Centered card, sage radial blob accents
 - Eyebrow "WEEKLY INSPIRATION", headline ("Sequences + reflections,
 *every Sunday*"), inline email input + terracotta submit + inline
 success

15. FOOTER (deep navy)
 - Centered wordmark cream serif
 - Italic serif tagline (NOT handwritten)
 - Social row: terracotta-bordered glass circles
 - Bottom: address + studio hours + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `SportsActivityLocation` schema in <head> with name, address,
 telephone, openingHours, priceRange
- 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"
- Schedule table semantic with proper <th scope>; aria-label clear
- tel:/mailto: links; mailto with prefilled subject
- Responsive at 900px and 500px breakpoints
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (lotus or leaf mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Calm, grounded, specific. Avoids "namaste energy" cliches. Specific over
generic ("Slow-flow Vinyasa with a 4-count breath, 75 minutes", not
"transformative practice"). Headlines short with ONE italic word.
Testimonials should feel like real reviews, specific teacher, specific
class, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including lotus, om, prayer-hands emojis)
- No "namaste" or "good vibes only" filler
- No script/handwritten fonts
- No animated om symbols or floating mandala backgrounds
- No fake stock photos of overly flexible models in white outfits
- No real yoga-certification logos as images, typeset names only
- No bright neon palettes or rainbow chakra gradients
- No exclamation marks in body copy
- No bullet-list formatting in card copy (write as prose)


═══════════════════════════════════════════════════════════════
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: "HealthClub" 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. Show the file as a
single code block and briefly summarize the design decisions made.