Vibe Code a Therapist Website

Build a one-page therapist / counselor private practice 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
═══════════════════════════════════════════════════════════════
- Therapist name: [FULL NAME, LCSW / PsyD / LMFT / LPC]
- License: [#], state: [STATE], NPI: [#] (optional)
- Practice city: [CITY]
- Modes: in-person + telehealth
- Phone: [PHONE]
- Email: [EMAIL]
- Hours: [WEEKDAY EVENINGS / SAT MORNINGS]
- Specialties: anxiety, depression, trauma, relationships, life
 transitions, identity (pick 4-6)
- Fees: per-session $[X], sliding scale available
- Insurance: in-network with [LIST] / OON with superbill
- Booking: intake inquiry form + free 15-min consult

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: soft sage (#a8b89a), warm beige (#e8d9c4), deep navy text
 (#1a2238), muted terracotta accent (#c87a4c). Override if user provides;
 derive variants for AA contrast.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Warm, grounded, never clinical-cold. Editorial calm. NOT spiritual-
 woo-woo, NOT corporate-mental-health-app.
- Type pairing: high-contrast serif for headings (Lora, Cormorant
 Garamond) + Inter for body. ONE italic accent. NO script fonts.
- Eyebrow labels: uppercase, tracked .18em, sage, prefixed by a 24px CSS
 ::before line in terracotta.
- Headlines: short and quiet with ONE italic accent ("Therapy that *meets
 you* where you are."). Italic words in terracotta.
- Generous white space, soft rounded corners (16-28px), no harsh shadows,
 slow visual pacing. Imagery: hands, nature, soft window light, NOT
 stock-photo therapists with clipboards.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.5, round caps. Cover: leaf, breath-arc, heart-line,
 shield, lock, chair (line drawing), calendar, clock, pin, phone, mail,
 check.
- Icon containers: 44x44 rounded squares with sage-tinted bg, flip to
 filled sage with beige icon on hover.
- Motion: very slow scroll fade-ins (0.7s ease-out), no Ken Burns, no
 parallax, no hover transforms beyond opacity changes.

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

1. CRISIS BAR (top, dismissible)
 - Beige background, navy text
 - "If you are in crisis, please call 988 (Suicide & Crisis Lifeline) - 
 this practice is not for emergencies."
 - Small × dismissible (state persisted in sessionStorage)

2. FIXED NAV (glass beige translucent + backdrop blur)
 - Wordmark (serif, lowercase) left | anchor nav center | "Schedule
 consult" terracotta pill CTA right (small, not loud)

3. HERO
 - Two-column: text left, photo right (Unsplash: "therapist office plant
 window" or "two chairs facing each other") rounded 24px with sage
 gradient overlay bottom-right
 - Left: eyebrow with line marker, headline ("Therapy that *meets you*
 where you are."), 2-line subhead, primary "Schedule a free 15-min
 consult" CTA + secondary "Fees & insurance"
 - Small floating pill on photo: "Now accepting telehealth + in-person"

4. ABOUT
 - Two-column: portrait left (rounded 16px), text right
 - Right: eyebrow, headline ("I'm *[FIRST NAME]*"), 3-paragraph bio
 (warm, professional, credentials, years of practice, why this work),
 small list of training/certifications in monospace ("LCSW • EMDR
 trained • IFS L2 • Trauma-informed")
 - Real Unsplash portrait, natural, NOT staged with notepad-and-glasses

5. SPECIALTIES
 - Eyebrow + headline ("What I *focus on*")
 - 6-card grid (auto-fit minmax 260px)
 - Each: 44x44 sage-tinted icon badge + specialty name (serif) + 2-line
 description in prose
 - Specialties: Anxiety / Depression / Trauma & PTSD / Relationships /
 Life Transitions / Identity & Self

6. APPROACH
 - Two-column: text left, photo right (Unsplash: "hands holding warm
 mug" or "soft window light")
 - Right: small photo (rounded 16px)
 - Left: eyebrow, headline ("My *approach*"), 3 paragraphs explaining
 modalities in plain language (CBT, EMDR, IFS, somatic, described
 not just listed)

7. FEES & INSURANCE
 - Eyebrow + headline ("Fees & *insurance*")
 - 3-column card row (stack mobile)
 - Each card: heading (serif) + body in prose
 1. Standard session fee + duration ($[X] for 50 min)
 2. Insurance, in-network panels (list as typeset names), OON
 superbill explanation
 3. Sliding scale, describe how to request, no questions asked
 - Below: small note in muted text about cancellation policy

8. WHAT TO EXPECT
 - 4-step horizontal timeline (stack mobile)
 - Each: outlined sage numeral (01-04) + step title + 1-sentence
 description
 - Steps: Reach out → Free 15-min consult → First session → Ongoing care
 - Thin sage connector between steps on desktop

9. FAQ
 - 2-column: 8 collapsible <details> total (4 per column desktop, stack
 mobile)
 - Questions: "How long does therapy take?", "Is telehealth as effective?",
 "What if we're not a fit?", "Confidentiality, how does it work?",
 "Do you treat couples / families?", "Missed sessions and cancellation",
 "Can I use my HSA/FSA?", "Are you accepting new clients?"

10. CRISIS RESOURCES CARD (full-width)
 - Beige tinted card, navy text, calm not alarming
 - Eyebrow "CRISIS SUPPORT", headline ("If you need *help right now*")
 - 4-line list with shield icons:
 • 988, Suicide & Crisis Lifeline (24/7)
 • Crisis Text Line, text HOME to 741741
 • [LOCAL HOSPITAL] Psychiatric Emergency: [PHONE]
 • Emergency: 911
 - Below: small text "I am not available for crisis support. These
 resources can help right now."

11. CONTACT / INQUIRY FORM
 - Two-column: pitch left, form right
 - Left: eyebrow, headline ("Schedule a *free 15-min consult*"), 3
 bullets with check icons ("Confidential", "No commitment", "Phone
 or video, your choice")
 - Right: beige card with sage border (1px)
 • Fields: full name (or initials if preferred), email, phone,
 preferred contact method (select: Email / Phone / Either), brief
 description of what brings you (textarea, optional), telehealth
 or in-person preference (select)
 • Submit terracotta button, full-width
 • Inline JS success message (preventDefault)
 - Below form: small text about privacy + confidentiality + that this
 form is encrypted but NOT a substitute for emergency help

12. OFFICE & TELEHEALTH
 - Two-column: text left, photo right
 - Left: eyebrow, headline ("Office + *telehealth*"), description of
 the office (location, accessibility, parking), telehealth platform
 info (HIPAA-secure)
 - Right: photo of office interior (Unsplash: "therapist office chair
 window")

13. FOOTER (deep navy)
 - Centered wordmark beige serif
 - Italic serif tagline below (NOT handwritten, e.g., "Therapy in
 [CITY] + telehealth in [STATE]")
 - Social row: LinkedIn only (if user provides, clinical practices
 avoid social)
 - Bottom: license # + state + privacy/HIPAA notice link + No Surprises
 Act link + copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step
- JSON-LD `MedicalBusiness` schema in <head> with name, address,
 telephone, medicalSpecialty: "Psychiatry" (or "Psychotherapy"),
 acceptedPaymentMethod
- CSS custom properties for palette at top
- Smooth scroll with scroll-padding-top to clear crisis bar + nav
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- tel: links; mailto with prefilled subject ("Therapy inquiry")
- Crisis resources accessible from every screen via crisis bar + footer
- Responsive at 900px and 500px breakpoints
- WCAG AAA contrast on body text where possible
- All form submissions over HTTPS (note prominently to client)
- Favicon: inline SVG data URI (leaf or chair-line mark)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Calm, grounded, plain-English. Speaks as the therapist to a person
considering reaching out. Specific over generic ("Six to ten sessions for
acute anxiety; longer for trauma", not "comprehensive mental health
care"). Avoids "journey", "wellness", "self-care" buzzwords. Headlines
short and quiet. Body copy reads like a thoughtful note. NO testimonials
section (ethical conflict, patient testimonials are often discouraged by
licensing boards).

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including hearts, lotus, sparkles)
- No "journey of self-discovery", "transform your life", "find your
 purpose" filler
- No script/handwritten fonts
- No fake stock photos of "therapy", two people on couch with notepad,
 or a hand on shoulder
- No client testimonials section (clinical-ethics standard)
- No "Voted Best Therapist" badge graphics
- No bouncing brain icons or therapy-cliche imagery
- No "Click here to heal!" exclamation CTAs
- No animated particle effects on the crisis bar (must be calm)
- No bright corporate gradients reminiscent of mental-health apps


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