Vibe Code a Pediatric Clinic Website

Build a one-page pediatric clinic 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
═══════════════════════════════════════════════════════════════
- Clinic name: [CLINIC NAME]
- Lead pediatrician(s): [NAME, M.D., F.A.A.P.]
- Ages served: newborn through 18
- Services: well-child visits, vaccinations, sick visits, adolescent care,
 nutrition counseling, behavioral health, lactation support, telehealth
- Address: [FULL ADDRESS]
- Phone: [PHONE]
- After-hours line: [PHONE]
- Email: [EMAIL]
- Hours: [WEEKDAY / SAT / SUN]
- Insurance + Medicaid policy in one sentence
- Booking: form + click-to-call

═══════════════════════════════════════════════════════════════
BRAND
═══════════════════════════════════════════════════════════════
- Brand colors: soft teal (#2fa39b), warm cream (#f8f1e6), deep navy text
 (#0d2438), single sunny-yellow accent (#f5c14b) for CTAs. Override if user
 provides hex values.
- All body copy must reach WCAG AA contrast on cream background. Darken brand
 hues for text use when needed.

═══════════════════════════════════════════════════════════════
DESIGN DIRECTION
═══════════════════════════════════════════════════════════════
- Warm, reassuring, professional. Reads to parents, not to children.
- Type pairing: rounded humanist sans for headings (Nunito, Quicksand, or
 Outfit) + Inter for body. NO script fonts. NO cartoon-comic fonts.
- Eyebrow labels: uppercase, tracked .16em, teal, prefixed by a 24px CSS
 ::before line.
- Headlines: warm with ONE italic accent ("Caring for *every milestone*").
 Italic word uses a teal-to-yellow gradient text fill.
- Generous whitespace, soft rounded corners (16-28px), no harsh shadows.
- Icon system: 24x24 line icons, fill="none", stroke="currentColor",
 stroke-width 1.7, round caps. Inline <symbol>. Cover at minimum: stethoscope,
 shield, syringe, heart, baby-figure, smile-curve, calendar, clock, pin,
 phone, mail, check, star, leaf.
- Icon containers: 48x48 rounded squares, teal-tinted bg, flip to filled teal
 with cream icon on hover.
- Motion: scroll fade-ins, soft 4-6px hover lifts. No bouncing characters.

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

1. ANNOUNCEMENT BAR (top)
 - "Accepting new patients • Same-day sick visits • Telehealth available"
 in compact cream text on teal gradient bar

2. AFTER-HOURS CARD (sticky on mobile only)
 - Small floating yellow card bottom-right: "After-hours nurse line:
 [PHONE]", tel: link, dismissible

3. FIXED NAV (glass effect cream translucent bg + blur)
 - Wordmark left | anchor nav center | "Book Visit" yellow pill right

4. HERO
 - Two-column: text left, photo right (Unsplash search: "parent and child
 doctor" or "pediatric clinic interior") rounded 28px, soft teal gradient
 overlay bottom-right
 - Left: eyebrow with line marker, headline ("From first breath to *first
 job*"), 2-line subhead, primary "Book Visit" + secondary "Call [number]"
 - Floating pill on image: "AAP-Certified Pediatricians" with check icon

5. SERVICES
 - Eyebrow + headline + subhead
 - Auto-fit grid (minmax 280px) of 8 service cards
 - Each: 48x48 teal-tinted icon badge + service title + 2-line description
 in prose + small uppercase tag chip ("Wellness", "Sick visit", "Telehealth")
 - One card highlighted in teal gradient with cream text: "Same-day sick
 visits"

6. AGES & STAGES
 - Horizontal age-bracket cards: Infant (0-1), Toddler (1-3), Child (3-12),
 Teen (13-18)
 - Each: large age range numeral in serif yellow + 2-3 line description of
 what care looks like at that stage

7. MEET THE PEDIATRICIANS
 - 2-3 doctor cards
 - Each: portrait photo (rounded 20px), name (display sans), credentials
 ("M.D., F.A.A.P."), years in practice, languages spoken, 2-sentence
 warm bio
 - Real Unsplash portraits, no obviously staged stock photos

8. NEW PATIENT WELCOME
 - Two-column: image left (clean exam room with toys), text right
 - Right: eyebrow, headline, 4-step checklist with check-circle icons
 (call or book online → complete new-patient forms → bring ID + insurance
 card → arrive 10 minutes early)
 - "Download new-patient packet (PDF)" anchor link

9. PARENT RESOURCES
 - Eyebrow + headline ("From our *exam room* to your home")
 - 3-column grid of article cards
 - Each: small thumbnail (rounded 16px), category tag, title (serif/sans),
 2-line excerpt, "Read more →" link

10. TESTIMONIALS
 - 3 quote cards
 - Each: oversized quotation mark in muted teal, quote body (specific to a
 child's care moment, varied lengths), 5 yellow stars, separator,
 gradient-circle initials avatar + parent first name + last initial +
 child's age in parentheses ("Sarah M., mom of 2")

11. INSURANCE & BILLING
 - Thin cream section with borders top/bottom
 - "INSURANCE ACCEPTED" label + horizontal row of plaintext provider names
 (typeset, no logos)
 - Below: 1-line on self-pay rates and payment plans

12. BOOKING FORM
 - Two-column: reassurance left, form right
 - Left: eyebrow, headline ("Reserve your visit in *under a minute*"),
 3 bullets with check icons
 - Right: cream card with teal border
 • Fields: child's first name, child's date of birth, parent's full name,
 parent's email, parent's phone, reason for visit (select), urgency
 (well visit / sick visit / urgent), preferred date, preferred time
 window, current insurance carrier
 • Yellow submit button
 • Inline JS success message on submit (preventDefault)

13. EMERGENCIES & AFTER-HOURS
 - Calming yellow-tinted card, NOT alarming red
 - Eyebrow "WHEN TO CALL 911", headline
 - 4-item list with shield icons: signs of stroke, severe breathing,
 anaphylaxis, unconsciousness
 - Below: 1-line about local children's hospital + nurse line phone

14. HOURS + MAP
 - Two-column: hours table left, Google Maps embed right (no API key)
 <iframe src="https://www.google.com/maps?q=[ENCODED+ADDRESS]&z=15&output=embed">
 - Floating overlay card top-left: clinic name, address, "Get directions →"

15. FAQ
 - 6 collapsible <details>: "Do you accept Medicaid?", "What if my child
 needs a vaccine schedule different from CDC?", "Telehealth, is it
 covered by insurance?", "Can I switch from another pediatrician?",
 "What's your sick-child visit policy?", "Do you do school physicals?"

16. FOOTER (deep navy)
 - Newsletter card top: "Monthly parenting tips from pediatricians" +
 email input + yellow button + inline success
 - Centered wordmark + italic serif tagline (NOT handwritten)
 - Social row (only platforms user provides)
 - Bottom: address + phone + after-hours line + HIPAA notice link +
 copyright

═══════════════════════════════════════════════════════════════
TECHNICAL REQUIREMENTS
═══════════════════════════════════════════════════════════════
- Single index.html, no build step, no JS frameworks
- JSON-LD `MedicalBusiness` + `MedicalClinic` schema in <head> with name,
 address, telephone, openingHours, medicalSpecialty: "Pediatrics", availableService
- CSS custom properties for palette/gradients at top
- Smooth scroll with scroll-padding-top to clear announcement bar + nav
- Real Unsplash images via CDN with ?w=900&q=80&auto=format&fit=crop
- Hero loading="eager", everything else "lazy"
- tel:/mailto: links throughout; mailto subject prefilled
- Responsive breakpoints at 900px and 500px; no horizontal scroll
- Semantic HTML5; aria-labels on icon-only links
- WCAG AA contrast on body text
- Favicon: inline SVG data URI (stethoscope or heart mark)
- Print stylesheet for "Parent Resources" articles (`@media print`)

═══════════════════════════════════════════════════════════════
COPY VOICE
═══════════════════════════════════════════════════════════════
Warm, plain-language, reassuring, never condescending. Speak to the parent;
the child is the patient. Specific over generic ("We schedule longer first
visits so your toddler can warm up to the room", not "We love kids").
Avoid medical jargon unless immediately defined. Testimonials should feel like
real Google reviews from parents, specific moments (first ear infection,
vaccine fears, school physical), varying lengths.

═══════════════════════════════════════════════════════════════
ANTI-PATTERNS TO AVOID
═══════════════════════════════════════════════════════════════
- No emojis (including baby emojis or smiles) anywhere
- No cartoon characters, no clip-art teddy bears, no rainbow gradients
- No script/handwritten fonts
- No fake stock photos of overly happy families
- No alarming red EMERGENCY banners
- No real hospital or insurance logos (typeset names only)
- No bullet-list formatting in card copy (write as prose)
- No "we love your kids" / "passion for pediatrics" filler


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