Vibe Code a Personal Trainer Website

Build a one-page personal trainer / fitness coach 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
═══════════════════════════════════════════════════════════════
- Coach name: [FULL NAME]
- Certifications: [e.g., NASM-CPT, CSCS, PN-L1] (list real ones)
- City + studio name (if any): [CITY], [STUDIO]
- Modes: in-person (1:1), online coaching, small-group bootcamp
- Phone: [PHONE]
- Email: [EMAIL]
- Social: Instagram + YouTube (open in new tab, rel="noopener")
- Specialty: strength / fat loss / mobility / running / postpartum (pick one)
- Years of experience: [N]+
- Booking: free intro call form + click-to-call

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: jet black (#0a0a0a), bright bone (#f4f1ec), electric yellow
 accent (#e7ff3a), single muted slate (#404654). Override if user provides
 hex values; derive variants that pass AA contrast for body text.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Bold, athletic, high-contrast. Action photography. Editorial energy without
 being a gym-bro cliche.
- Type pairing: heavy condensed display (Bebas Neue, Anton, or Druk
 alternative) for big headlines + Inter for body. Italic accent in a serif
 display (Fraunces italic) for tension.
- Eyebrow labels: uppercase, tracked .26em (extra-wide industrial), prefixed
 by a 32px CSS ::before line in electric yellow.
- Headlines: short, imperative, all caps in condensed sans with ONE italic
 serif accent ("GET STRONGER. *Stay stronger.*"). Italic word in yellow.
- Diagonal section dividers using CSS `clip-path: polygon()` for energy
 (subtle, not gimmicky).
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.8 (heavy for athletic feel), round caps. Cover: dumbbell,
 flame, lightning, target, chart-up, calendar, clock, pin, phone, mail,
 check, play, instagram-mark, youtube-mark.
- Icon containers: 48x48 rounded squares with yellow border (1.5px), flip
 to filled yellow with black icon on hover.
- Motion: scroll fade-ins, hover lifts 6px on cards, no parallax, no
 Ken Burns (action photos already have motion).

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

1. FIXED NAV (glass effect black translucent + backdrop blur)
 - Wordmark in bone (sans condensed) left | anchor nav | "Book free call"
 yellow pill CTA
 - Below nav line (thin yellow accent line, full width)

2. HERO
 - Full-bleed action photo (Unsplash search: "athlete kettlebell" or
 "barbell lift") with deep black gradient overlay top + bottom
 - Text overlay center: eyebrow with line marker, massive condensed
 headline ("GET STRONGER. *Stay stronger.*"), 2-line subhead, two CTAs
 (yellow "Book free intro call", bone-outline "View programs")
 - Below CTAs: 4 mini-stats inline (clients coached • years experience •
 average strength gain • PRs hit) separated by yellow dots

3. PROGRAMS
 - Eyebrow + headline ("Three *paths*. One goal.")
 - 3 program cards in horizontal grid (stack mobile)
 - Each: 48x48 yellow-outline icon badge + program name (condensed sans)
 + price-from (large serif italic, yellow) + 2-line description in prose
 + 5-item "what's included" list with check icons + "Start now" yellow
 button
 - Middle card visually elevated with subtle yellow glow

4. ABOUT COACH
 - Two-column: portrait photo left (rounded 12px, deep shadow), text right
 - Right: eyebrow, headline ("I'm *[FIRST NAME]*"), 3-paragraph bio
 including specific certifications, sport background, training
 philosophy, why this work
 - Below: small monospace credential strip "NASM-CPT • CSCS • PN-L1 •
 CrossFit-L2", typeset names, no logos

5. TRANSFORMATIONS
 - Eyebrow + headline ("Real *clients*. Real reps.")
 - 6 before/after card grid (auto-fit minmax 280px)
 - Each: side-by-side before/after photo pair (rounded 12px), client first
 name + last initial + age + goal achieved ("Marcus T., 34, 28kg in
 6 months"), weeks of training in monospace
 - Subtle yellow vertical divider between before/after photos
 - Use real Unsplash athlete photos (NOT obvious "transformation" stock
 pairs that look fake)

6. SAMPLE WEEK
 - Eyebrow + headline ("This week's *training*")
 - 7-day timeline cards in horizontal scroll on mobile, full row on desktop
 - Each day card: day name (condensed sans), 3-4 exercise items with
 sets×reps in monospace, recovery indicator
 - Below: italic note "Programs adapt weekly to your data + recovery"

7. TESTIMONIALS
 - 4 quote cards in 2x2 grid (stack on mobile)
 - Each: oversized opening quotation mark in muted slate, quote body in
 pull-quote-style (large serif italic for impact), specific (first
 pull-up, deadlift PR, return to sport after injury), 5 yellow SVG stars,
 separator, gradient-circle initials avatar + client first name + last
 initial + age + sport/goal

8. PRICING
 - Eyebrow + headline ("Choose your *commitment*")
 - 3-column pricing table (stack on mobile)
 - Each tier: name (condensed), price + frequency (large serif yellow),
 7-feature list with check icons (or x for "not included"), CTA button
 - Middle tier (most popular) highlighted with yellow border and "Most
 Popular" yellow tag in top corner

9. FAQ
 - Two-column: intro left, accordion right
 - Left: eyebrow, headline ("Common *questions*"), supporting copy,
 "Book a call instead →" yellow CTA
 - Right: 8 collapsible <details> elements: "I'm a beginner, is this
 for me?", "What if I miss a session?", "Online coaching, how does it
 work?", "Do you do nutrition coaching too?", "What equipment do I
 need?", "Cancellation policy?", "Do you take ClassPass/insurance?",
 "Can I switch programs?"

10. BOOK FREE INTRO CALL
 - Full-width section, black background
 - Two-column: pitch left, form right
 - Left: eyebrow yellow, headline ("Let's *talk*, no commitment"),
 3 reassurances with check icons
 - Right: bone-tinted card with yellow border (2px)
 • Form fields: name, email, phone, primary goal (select), current
 fitness level (select: New / Returning / Active), preferred contact
 time
 • Yellow submit button, full-width
 • Inline JS success message (preventDefault)

11. STICKY MOBILE BOTTOM BAR
 - Two split buttons: "Call" + "Book free call" yellow

12. FOOTER (jet black)
 - Newsletter card top: "Weekly programming tips" + email input + yellow
 submit + inline success
 - Centered wordmark in bone (condensed sans)
 - Italic serif tagline (NOT handwritten, e.g., "Train smart. Recover
 hard.")
 - Social row of yellow-bordered glass circles (only platforms user
 provides), Instagram + YouTube + Strava if user mentions
 - Bottom: studio address + license/cert numbers + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `Person` schema in <head> with name, jobTitle, knowsAbout, image,
 + `SportsActivityLocation` if a studio is named
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top to clear fixed nav
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop - 
 use action shots, NOT mirror selfies
- Hero loading="eager", everything else "lazy"
- tel:/mailto: links; mailto with prefilled subject ("Free intro call")
- Responsive at 900px and 500px breakpoints; sticky bottom CTA bar mobile
- Tap targets ≥48px (athletic, easy to tap during workout)
- Semantic HTML5; aria-labels on icon-only links
- Favicon: inline SVG data URI (dumbbell or lightning mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Direct, confident, athlete-to-athlete. Imperative voice ("Show up. Train
hard. Repeat."). Specific over generic ("Three sessions a week, 50 minutes
each, programmed around your sleep", not "intense workouts"). Headlines
short, blunt. Body copy avoids gym-bro cliches ("crush your goals", "no pain
no gain", "BEAST MODE"), uses programming/recovery language instead.
Testimonials should feel like real client reviews: specific lifts, specific
weeks, varied lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including the fire / lightning / muscle emojis)
- No "BEAST MODE", "NO PAIN NO GAIN", "GO HARD OR GO HOME" filler
- No fake mirror-selfie transformation photos
- No bouncing flame icons or pulsing red CTAs
- No script/handwritten fonts
- No "Voted #1 Trainer" badge graphics, use typeset names
- No real certification logos (NASM, etc.) as images, use plain typeset
- No exclamation marks in body copy (headlines may use ONE per page)
- No before/after photo pairs that look obviously photoshopped


═══════════════════════════════════════════════════════════════
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: "HealthAndBeautyBusiness" 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, that I can open in a
browser and immediately deploy. Show the file as a single code block and
briefly summarize the design decisions made.