The live demo was built from exactly this text — nothing added. The other cases only change the values of the [VARIABLES].

# Veterinary Clinic Website

Build this website exactly as described below. Replace the [VARIABLES] with your own values; keep everything else.

## Brief
A two-page website for [BRAND], a small-animal veterinary clinic in [CITY], reachable at [PHONE] and open since [FOUNDED]. It must feel like a good clinic smells: calm, warm, competent. Home: hero with the promise, an emergency band that is impossible to miss and impossible to panic at, six services, three vet profiles, four evergreen care tips. Visit: hours with an open-now indicator, a drawn mini-map, out-of-hours detail and the new-patient form (client-side). Pages: index.html, visit.html. Everything runs in the browser; nothing is submitted anywhere.

- Audience: Pet owners within a short drive: families with dogs and cats, the occasional rabbit, first-time adopters panicking slightly. They want services, hours, an emergency number and a vet they can picture — in that order, quickly, usually on a phone.
- Goal: Book first visits and be the number saved for emergencies. Within ten seconds a visitor sees the care promise, the hours status and the emergency line.
- Tone: Warm, plain, unhurried — the receptionist everyone hopes for. Short sentences, no jargon without a translation, gentle humor about pets (never about owners).

## Stack
- Framework: Vite 5 + React 18 + TypeScript
- Styling: Tailwind CSS 3.4
- Libraries: react (MIT), react-dom (MIT), motion (motion.dev, import from 'motion/react') (MIT), lucide-react (MIT), tailwindcss (MIT), postcss (MIT), autoprefixer (MIT), vite (MIT), @vitejs/plugin-react (MIT), typescript (Apache-2.0), @fontsource/comfortaa (OFL-1.1), @fontsource-variable/albert-sans (OFL-1.1)
- Build: `npm run build` → static files in `dist/`. No backend, no server code, no external APIs.
- Setup:
  - Scaffold with npm create vite@latest using the react-ts template. Two real HTML pages at the project root: index.html (entry src/main-home.tsx) and visit.html (entry src/main-visit.tsx).
  - vite.config.ts: base './', plugins [react()], build { outDir 'dist', sourcemap false, assetsInlineLimit 0, rollupOptions { input { index: resolve(__dirname, 'index.html'), visit: resolve(__dirname, 'visit.html') } } }. Do not copy src/ into dist/.
  - Tailwind 3.4 through PostCSS, content ['./index.html', './visit.html', './src/**/*.{ts,tsx}']. In tailwind.config.ts add every color under Design to theme.extend.colors with kebab-case keys (warm-white, mist, card, teal, teal-deep, teal-mist, ink, slate, honey, honey-deep, coral-alert, rule) and fontFamily display ['Comfortaa', 'Georgia', 'serif'], sans ['Albert Sans Variable', 'system-ui', 'sans-serif']. Set borderRadius DEFAULT to 16px and add maxWidth { container: '1160px' }.
  - In src/fonts.ts import '@fontsource/comfortaa/500.css', '@fontsource/comfortaa/700.css' and '@fontsource-variable/albert-sans'; import src/fonts.ts and src/index.css from both entry files.
  - File layout: src/content.ts (every string, service, vet, tip, hour, emergency line, form label and image path, typed), src/lib/brand.ts (brandSlug = [BRAND] lowercased with every run of non-alphanumeric characters replaced by '-', phoneDigits = [PHONE] digits only for tel:, emailDomain = brandSlug without hyphens + '.com'), src/lib/storage.ts (safe localStorage get/set wrapped in try/catch, keys prefixed with brandSlug + ':'), src/lib/useOpenNow.ts (open-now from the hours table and the client clock).
  - State: src/store/patient.ts is a tiny external store (useSyncExternalStore) holding the form draft { petName, species, age, reason, ownerName, ownerPhone } and the submitted flag, persisted to localStorage key brandSlug + ':patient'. A saved registration renders a confirmation card; 'Start another' clears it.
  - Components in src/components/: Header.tsx, MobileMenu.tsx, Reveal.tsx (Motion whileInView wrapper), Eyebrow.tsx, PawIcon.tsx (drawn SVG paw), Footer.tsx; home: Hero.tsx, EmergencyBand.tsx, Services.tsx (ServiceCard.tsx), Vets.tsx (VetCard.tsx), CareTips.tsx; visit: HoursCard.tsx (OpenNowPill.tsx), MiniMap.tsx (inline SVG), OutOfHours.tsx, PatientForm.tsx (SpeciesPicker.tsx, ConfirmationCard.tsx). src/pages/Home.tsx and Visit.tsx compose them; both pages render Header and Footer.
  - Before the first build, download every image listed under Assets into public/images/ with curl -L -o using the exact file names given. The build itself never fetches anything.
  - public/favicon.svg as described under Assets. Both HTML files: lang en, <meta name='theme-color' content='#FDFBF7'>, <link rel='icon' href='./favicon.svg' type='image/svg+xml'>. Titles: index.html '<title>[BRAND] — Gentle care for [CITY]''s pets</title>', visit.html '<title>Visit us — [BRAND]</title>'. (Keep the apostrophe entity correct.)
  - Write ASSETS.md at the project root as described under Assets.
  - dist/ holds the two HTML files, hashed JS/CSS, the woff2 fonts, favicon.svg and the six images. Keep it under 10 MB.

## Variables
- [BRAND] — Clinic name (default: "Pinebrook Animal Clinic"). Invented clinic name. Used in the wordmark, titles, footer, email (hello@ + brandSlug without hyphens + .com) and localStorage keys. Never a real clinic or franchise.
- [CITY] — City (default: "Asheville, North Carolina"). Where the clinic is. Used in the hero, the mini-map label, directions copy and the footer. Real cities are fine; the street stays invented.
- [PHONE] — Phone (default: "(828) 555-0143"). The main line, formatted with a 555 exchange. Used in the header, emergency band (main line), footer and tel: links. The out-of-hours line is a second invented number in content.ts.
- [FOUNDED] — Year opened (default: "2009"). Four-digit year. Drives the wordmark line 'Caring since [FOUNDED]', the story line and one vet's tenure.
- [CREDIT] — keep a small "Template by VibeFather" link to https://vibefather.ai/t/veterinary-clinic-website in the footer (default: yes; delete this line to remove it)

The copy under Pages & Sections is written for the default values. If your values differ, rewrite every headline, paragraph, label and image for them — same length, tone and structure. Layout, colors, type and motion stay as described.
Keep all copy, image paths and links in one content file (for example `src/content.ts`), keyed by section, so the content can be swapped later without touching components.

## Design
### Colors
- Warm White `#FDFBF7` — Page background on both pages.
- Mist `#F0EFE9` — Alternate section background (Services, Care tips), hover fill.
- Card `#FFFFFF` — Cards, the form panel, confirmation, hours card.
- Teal `#2C6E63` — Primary: headlines' accents, primary buttons, service icons, open-now dot, focus ring.
- Teal Deep `#1F5349` — Primary hover, footer background, emergency band text.
- Teal Mist `#E3EEEA` — Selected chips, vet avatar circles, service icon wells.
- Ink `#22302C` — Headlines and body text, icon color.
- Slate `#5E6B66` — Secondary text, captions, eyebrows, hours labels.
- Honey `#D9A441` — The warm accent: prices-free highlights, star moments, paw prints, care-tip icons, 'new patient' chip.
- Honey Deep `#B8862F` — Honey hover states, form focus ticks.
- Coral Alert `#C75146` — Emergency band only: the band border, phone figure and pulse dot — calm, sparing, never flashing.
- Rule `#E4E1D8` — 1px hairlines, card borders, input borders, map contour lines.

### Typography
- Display: H1, H2, H3, service and vet names, the wordmark, form headings: Comfortaa (OFL), weights 500/700
- Text and UI: body, eyebrows, buttons, forms, captions, hours (tabular numerals for times): Albert Sans (OFL), weights 400/600/700

### Layout & motion
- Spacing: 8px base unit. Container max-width 1160px, centered, side padding 48px desktop, 32px tablet, 20px under 640px. 12-column grid, column gap 24px. Section vertical padding 104px desktop, 80px under 1024px, 64px under 640px. Type scale: H1 clamp(42px, 6vw, 76px) Comfortaa 700, line-height 1.05; H2 clamp(30px, 4vw, 48px) Comfortaa 700; H3 22px Comfortaa 700; lead Albert Sans 400 18px / 1.7 Ink at 90%; body 16px / 1.7 (max-width 64ch); eyebrow Albert Sans 700 12px uppercase letter-spacing 0.16em Slate with a small drawn paw before it in Teal; caption 13px Slate. Buttons: height 52px, Albert Sans 700 15px. Primary: Teal fill, Card text. Secondary: 1px Teal border, Teal text. Emergency CTA: Coral Alert outline, Coral Alert text (never a fill — calm). Inputs: height 50px, 1px Rule border, Card fill, focus Teal border. Focus ring everywhere: 2px Teal outline with 3px offset.
- Radius: 16px on cards, buttons, inputs, chips, photos, the form panel. 999px only for pills, the open-now dot, vet initials and paw dots.
- Motion: Easing: --ease-out cubic-bezier(0.22, 0.61, 0.36, 1) for reveals; --ease-io cubic-bezier(0.65, 0, 0.35, 1) for the form swap and accordion. Gentle, unhurried — a waiting-room pace.
- Motion: Reveal: blocks wrapped in <Reveal> start at opacity 0, translateY(14px) and settle over 700ms --ease-out when 15% visible (Motion whileInView, viewport once). Siblings stagger 80ms.
- Motion: Hero photo: scales 1.05→1.0 over 2400ms on load; a drawn paw print trail (three small SVG paws) fades in along the hero's bottom edge, staggered 200ms (off under reduced motion).
- Motion: Emergency band: the pulse dot breathes (scale 1→1.2, 1800ms loop, off under reduced motion); the band itself is static — urgency without alarm.
- Motion: Service cards: hover lifts 3px and the icon well fills Teal Mist; the icon's stroke re-draws once per hover.
- Motion: Vet cards: hover lifts the avatar 2px and swaps the specialty line to the bedside quote (a 240ms crossfade).
- Motion: Form: species chips fill Teal Mist on select (150ms); invalid submit shakes 4px once with inline hints; submitting slides the panel to the ConfirmationCard (280ms --ease-io) with a drawn heart-plus-paw stamp scaling in; 'Start another' reverses.
- Motion: Hours: the open-now dot pulses only while open; the today-row carries a 2px Teal left rule that slides between days at midnight (crossfade).
- Motion: MiniMap: on view, the road lines draw (900ms), then the pin bobs in with one soft overshoot; the park block fills last.
- Motion: Links: .link-draw grows a 1px currentColor underline over 280ms on hover and focus-visible.
- Motion: prefers-reduced-motion: reduce — no pulses, draws, staggers or scales; color/border hovers stay. Use CSS @media in index.css plus Motion's useReducedMotion in components.
- Imagery: Warm real photography, all six made for this template in one consistent style: soft daylight, warm whites and wood with teal accents, animals relaxed, vet portraits are AI-generated fictional people shown at work with animal patients (consistent warm clinic light); they are placeholders a real clinic swaps for its own staff photos; all other photos stay animal-and-room only. Every photo uses object-fit cover with the object-position given under Assets, 16px corners, no shadow; photos on Warm White get a 1px Rule outline. Captions in Albert Sans 13px Slate. Drawn in code: the paw prints, service icons stay lucide, the heart-paw stamp, the mini-map, chips and the favicon. Icons: lucide-react only, stroke width 1.75.

## Pages & Sections
### Home (`index.html`)
1. **Content file and copy rules** — All copy below is written for the default values ([BRAND] = Pinebrook Animal Clinic, [CITY] = Asheville, North Carolina, [PHONE] = (828) 555-0143, [FOUNDED] = 2009). Put every string and number in src/content.ts and render from it; both pages share one content file. If any variable value differs, rewrite the hero, services, vets, tips, hours, emergency lines and form copy so they are specific and believable for the new clinic, keeping the same structure and counts (6 services, 3 vets, 4 tips, 5 emergency steps). All vets, staff and stories are invented. Facts: address '47 Fernbrook Lane, [CITY]'; hours Mon–Fri 8:00–18:00, Sat 9:00–14:00, Sun closed; out-of-hours line '(828) 555-0190' (invented); cats, dogs and small pets (rabbits, guinea pigs); three vets: Dr. Ana Reyes (cats and senior care), Dr. Owen Baptiste (dogs and surgery), Dr. Priya Nair (small pets and dentistry); new-patient visits 40 minutes; treats at the front desk, 'freeze-dried liver, the good stuff'. Vet portraits are AI-generated fictional people matching the default roster (not resembling any real individuals); alt stays 'A fictional veterinarian at work'.
   Layout: n/a
   Motion: n/a
2. **Header (all pages)** — Left: the wordmark — a drawn paw glyph in Teal + '[BRAND]' (Comfortaa 700 18px) over 'Caring since [FOUNDED] · [CITY]' (Albert Sans 600 10px uppercase letter-spacing 0.18em) — linking to ./index.html. Right nav (Albert Sans 600 14px): 'Services' → ./index.html#services, 'Our vets' → ./index.html#vets, 'Visit us' → ./visit.html, and a small Teal 'New patient' button → ./visit.html#register. Under 820px: hamburger opening a full-screen Mist menu (Comfortaa links 26px, the button pinned bottom).
   Layout: Sticky top, height 76px, Warm White/92% blur with a Rule border. Mobile menu slides from the right.
3. **Hero** — Two columns. Left: eyebrow paw 'SMALL-ANIMAL CARE IN [CITY]'; H1 'They''re family.' / '*We treat them that way.*'; lead (max-width 520px): 'Cats, dogs and the small furry friends in between — seen gently, explained clearly, and sent home with a treat they didn''t earn but deserve. Independent and neighborhood-run since [FOUNDED].'; buttons: primary 'Book a first visit' → ./visit.html#register, secondary 'Call [PHONE]' (tel:). Trust row: three short items with drawn checks — '40-minute first visits'; 'Fear-free handling, treats first'; 'Same-day sick appointments'. Right: hero-clinic.webp (4:3, the clinic cat asleep on the reception counter) with the caption 'Buttercup, head of greetings'.
   Layout: Warm White background, vertical padding 112px top. Left 6 cols, right 5 cols offset 1. Trust row as a hairline-topped row of three, 16px gaps.
4. **Emergency band** — A full-width band between hero and services: a 2px Coral Alert left border on Card, a breathing Coral Alert dot, 'Emergencies: don''t wait, don''t Google' (Comfortaa 700 20px), and the two lines: 'In hours: call [PHONE] — we hold space every day for emergencies.' / 'Out of hours: call (828) 555-0190 — the answering service pages the on-call vet.' Right side: a small link 'What counts as an emergency →' → ./visit.html#emergency. Calm typography, no red fills, nothing flashing.
   Layout: Container-aligned band, 20px vertical padding, Card fill, 1px Rule border with the 2px Coral left rule; under 768px the link wraps below.
5. **Services** — Section id='services'. Eyebrow 'WHAT WE DO' and H2 'Six things, done gently.' Cards (icon, title Comfortaa 700 18px, two lines): 1) Stethoscope 'Wellness exams' — 'Nose-to-tail once a year, longer for seniors; you leave with a plan, not a pamphlet.' 2) Scissors 'Dentistry' — 'Cleanings, extractions and the breath conversation, handled kindly both ways.' 3) Syringe 'Surgery & recovery' — 'Routine to complex, with soft warm blankets and a call the moment they''re awake.' 4) Microscope 'Diagnostics in-house' — 'Bloodwork and x-rays on site — answers while you wait, not next week.' 5) HeartHandshake 'Senior care' — 'Comfort-first plans for gray muzzles: joints, kidneys, and quality of Tuesday.' 6) Plane 'Travel papers' — 'Health certificates for trips, minus the paperwork panic.'
   Layout: Mist background. 3x2 grid 20px gap; cards on Card 1px Rule border 20px padding; icons 22px Teal in 44px Teal Mist rounded squares. Under 860px: 2 columns, under 640px: one.
6. **Our vets** — Section id='vets'. Eyebrow 'The vets' and H2 'Three people your pet will actually like.' Cards with AI-generated working portraits (4:3) — fictional veterinarians in the clinic's teal world: 1) vet-ana.webp, alt 'Dr. Reyes examining a tabby cat, a fictional veterinarian' — Dr. Ana Reyes — 'Cats · Senior care' — 'Twelve years of bribing cats into friendship; slow blinks preferred.' — quote '*"The exam starts in the carrier, not on the table."*' — 'Mon–Thu'. 2) vet-owen.webp, alt 'Dr. Baptiste with a golden retriever, a fictional veterinarian' — Dr. Owen Baptiste — 'Dogs · Surgery' — 'Ex-big-animal vet; still speaks fluent farm dog. Gentle hands, terrible dog jokes.' — '*"A wagging tail is vital data."*' — 'Tue–Fri'. 3) vet-priya.webp, alt 'Dr. Nair weighing a lop-eared rabbit, a fictional veterinarian' — Dr. Priya Nair — 'Small pets · Dentistry' — 'Rabbits, guinea pigs, and anyone whose teeth need diplomacy.' — '*"Small patients, small instruments, same respect."*' — 'Wed–Sat'.
   Layout: Warm White background. Three columns 24px gap; Card with 24px padding: working portrait top (aspect 4:3, 16px radius), name Comfortaa 700 20px, specialty Albert Sans 700 12px uppercase Honey Deep, line 14.5px Slate, quote Comfortaa 500 italic 15px Ink, days caption.
7. **Care tips and CTA** — Eyebrow 'FOUR HABITS' and H2 'The boring stuff that adds years.' Tip cards (Honey icon, title, 2 lines): 1) Scale 'Weight is the whole game' — 'Most pets live longer lean; your vet can show you the ribs-to-rub test in ten seconds.' 2) Smile 'Teeth before trouble' — 'Dental pain hides; if chewing changes or breath changes, that''s the appointment to make.' 3) Puzzle 'A tired pet is a good pet' — 'Ten minutes of sniffing beats an hour of treadmill — brains need walks too.' 4) Car 'Practice the carrier' — 'Leave it out, feed in it, make it furniture; then it isn''t a trap on visit day.' CTA band on Teal Deep: 'First visits take forty minutes and end with a treat.' + primary-on-dark 'Register your pet' → ./visit.html#register + caption 'Or call [PHONE] — a human answers.'
   Layout: Mist section with 2x2 tip grid (16px gap, Card tiles); CTA band full-width below, two columns, 72px padding.
8. **Footer (all pages)** — Teal Deep background, Card-toned text. Four columns: 1) paw wordmark + '[BRAND]' over 'Caring since [FOUNDED] · [CITY]'. 2) 'Find us': '47 Fernbrook Lane, [CITY]', [PHONE] tel:, hello@ + emailDomain. 3) 'Hours': Mon–Fri 8:00–18:00, Sat 9:00–14:00, Sun closed — 'Closed Sundays; emergencies page the on-call vet.' 4) 'Around': Services, Our vets, Visit us, New patient. Bottom line: '© [BRAND]. All patients, all treats.'
   Layout: Vertical padding 72px, 4 columns, bottom line 40px below a Card/15% rule. Under 768px: two columns, then stacked.

### Visit (`visit.html`)
1. **Masthead** — Solid header. Eyebrow paw 'VISIT US', H1 'Where we are, when we''re in.', lead: 'Hours, directions, what to do at 2am, and the new-patient form — everything for a first visit on one page.'
   Layout: Warm White background, vertical padding 136px top + 48px, bottom hairline. H1 max-width 720px.
2. **Hours and location** — Left: HoursCard (Card, 1px Rule) — OpenNowPill ('Open now · closes 6pm' / 'Closed · opens 8am Mon') and the table Mon–Fri 8:00–18:00 / Sat 9:00–14:00 / Sun Closed, today's row bold with the Teal left rule; caption 'Sick pets are seen same-day — call before noon when you can.' Right: MiniMap SVG — Fernbrook Lane as a curved Rule road with the Teal pin at the clinic, a park block in Teal Mist labeled 'Fernbrook Green', a small parking 'P' square, north arrow; caption '47 Fernbrook Lane · free parking behind the building · the treats jar is visible from the door.'
   Layout: Two columns 5/6 offset 1, 24px gap; map SVG viewBox 0 0 640 480 width 100%. Under 900px: stacked.
3. **Emergency detail** — Section id='emergency'. Eyebrow 'AT 2AM, READ THIS' and H2 'When it can''t wait until morning.' Five steps on Card rows: 1) PhoneCall 'Call the out-of-hours line' — '(828) 555-0190 — the answering service pages the on-call vet, usually within ten minutes.' 2) MessageCircle 'Describe, don''t diagnose' — 'What happened, when, and what''s different now; the vet will ask the right questions.' 3) Thermometer 'Bring the obvious things' — 'Any medicine bottles, the food bag, and a favorite blanket — calm travels well.' 4) Car 'Drive like it''s raining, not flooding' — 'You are no help in a ditch; the ten minutes you save, spend on breathing.' 5) Heart 'When in doubt, call' — 'Better a false alarm at 2am than a real one at 8. We mean it.' A closing line: 'Poison concerns: keep the packaging and call — the vet will triage from there.'
   Layout: Mist background. Rows on Card with hairline gaps, number circles in Coral Alert outline (no fills), 20px padding; container max-width 760px.
4. **New patient form** — Section id='register'. Eyebrow 'NEW PATIENTS' and H2 'Register your pet in two minutes.' Panel on Card: pet name input (placeholder 'Pet''s name'); SpeciesPicker chips — Cat / Dog / Rabbit / Guinea pig / Other (with an 'Other' free-text appearing when chosen); age input (placeholder 'Age (years, or ''about 4'')'); reason select (First check-up / Vaccines / Something minor / Something urgent / Second opinion); owner name + phone inputs; primary 'Save registration' with caption 'Saved in this browser — the real clinic page would send it to the front desk. Nothing is charged or sent here.' ConfirmationCard: a drawn heart-with-paw stamp scaling in, 'Registered!' (Comfortaa 26px), 'We can''t wait to meet [PETNAME].' summary lines (species · age · reason · owner), 'Bring: nothing but the pet (and any old paperwork if there is any).' and 'Start another' resetting the form. Persisted in localStorage.
   Layout: Warm White background; panel max-width 640px, 28px padding, 1px Rule border, 16px radius; species chips 999px; steps swap 280ms --ease-io. Under 480px padding 20px.
5. **Photos and close** — A three-photo strip under the form: cat-window.webp 'Buttercup supervises the waiting room', dog-wait.webp 'Bailey, pre-treat, mid-wiggle', vet-owen.webp 'Dr. Baptiste and his favorite patient (sample)'. Captions 13px Slate. A closing line centered: 'See you and yours soon — the kettle''s on and the treats are out.'
   Layout: Three equal columns 16px gap aspect 4:3, 16px radius; strip on Mist with 56px padding, closing line 40px below.

## Assets
- image: Template photos made for this design (free to redistribute with the template). Download each with curl -L -o into public/images/: https://media.vibefather.ai/assets/746cdbde-ca6e-4906-a7e2-24faa972b082/hero-clinic.webp → public/images/hero-clinic.webp (Home hero; object-position 50% 55%; alt 'A ginger cat asleep on a warm wooden reception counter'); https://media.vibefather.ai/assets/746cdbde-ca6e-4906-a7e2-24faa972b082/cat-window.webp → public/images/cat-window.webp (Visit strip; alt 'A tabby cat watching the waiting room from a window shelf'); https://media.vibefather.ai/assets/746cdbde-ca6e-4906-a7e2-24faa972b082/dog-wait.webp → public/images/dog-wait.webp (Visit strip; alt 'A golden retriever sitting expectantly on a waiting-room bench'); https://media.vibefather.ai/assets/746cdbde-ca6e-4906-a7e2-24faa972b082/vet-ana.webp → public/images/vet-ana.webp (Vet card Dr. Reyes; alt 'Dr. Reyes examining a tabby cat, a fictional veterinarian'); https://media.vibefather.ai/assets/746cdbde-ca6e-4906-a7e2-24faa972b082/vet-owen.webp → public/images/vet-owen.webp (Vet card Dr. Baptiste, Visit strip; alt 'Dr. Baptiste with a golden retriever, a fictional veterinarian'); https://media.vibefather.ai/assets/746cdbde-ca6e-4906-a7e2-24faa972b082/vet-priya.webp → public/images/vet-priya.webp (Vet card Dr. Nair; alt 'Dr. Nair weighing a lop-eared rabbit, a fictional veterinarian'). Six files in total.
- image: Write ASSETS.md at the project root with a table: path, source URL, author, license — one row for each photo (source 'media.vibefather.ai, made for this template', author 'VibeFather', license 'Distributed with the template'), plus rows for @fontsource/comfortaa and @fontsource-variable/albert-sans (OFL-1.1) and lucide-react (ISC). Never replace photos with stock sites or images with people, faces or hands — animals and empty clinic spaces only.
- icon: lucide-react only: Stethoscope, Scissors, Syringe, Microscope, HeartHandshake, Plane, PhoneCall, MessageCircle, Thermometer, Car, Heart, Scale, Smile, Puzzle, Menu, X, Check, ArrowRight, MapPin, Clock. Stroke width 1.75, 16–24px, color inherits. The paw prints, the heart-paw stamp and the favicon are hand-drawn SVG. public/favicon.svg: viewBox 0 0 32 32, a 32x32 rect rx 9 filled #2C6E63, a Warm White paw glyph (one big pad circle plus three toe circles). No other logo: the clinic name is always set as type.
- font: Install @fontsource/comfortaa and @fontsource-variable/albert-sans and import them in src/fonts.ts as listed in Setup. Vite bundles the woff2 files into dist/.
- image: Drawn in code: the paw prints and eyebrow glyph, the heart-paw stamp, the mini-map (roads, pin, park), chips, the open-now dot and the favicon. No other bitmaps beyond the six photos; no illustrations; no map tiles.

## Don'ts
- No backend, no form submission, no fetch to any API: the registration saves in the browser only (localStorage) and the form says so; tel: links are built from [PHONE].
- Every internal link points to a file name (./index.html, ./index.html#services, ./visit.html, ./visit.html#register, ./visit.html#emergency) — never to a bare directory.
- Self-host everything: fonts through Fontsource, icons as npm packages or inline SVG, images downloaded into public/images/. No CDN <script> or <link> tags, no Google Fonts, no analytics.
- Production build: minified, no source maps, no src/ copied into dist/, single command npm run build, output in dist/ under 10 MB.
- No real clinics, vets, franchises or pets of real people; no photos with human faces or hands — animals and empty clinic spaces only; care tips stay evergreen with no medical advice or dosages.
- No dates or years anywhere except 'since [FOUNDED]'; the site never shows today's date.
- Never mention VibeFather or any other brand inside the site except the optional credit footer link; all copy is invented US English.
- Respect prefers-reduced-motion everywhere: no pulses, draws, staggers or scales; color/border hovers stay; the emergency band never flashes.
- The site must work at 1440x900 desktop and 390x844 mobile with zero console errors; the form, chips and accordion work with keyboard only, and every interactive element has a visible focus ring.
- Keep copy concrete: no lorem, no medical jargon without translation; every hour, service and tip lives in src/content.ts.

---
— Prompt by VibeFather · https://vibefather.ai/t/veterinary-clinic-website · CC BY-NC 4.0 (non-commercial; commercial use needs a VibeFather Pro license) · Request removal: https://vibefather.ai/takedown

Free for personal projects under CC BY-NC 4.0. Commercial use comes with Pro.