# Homepage Mockup Spec — shared by all 4 variants

> Static HTML mockups (look only). Each variant is ONE self-contained `.html` file: inline `<style>` + `<script>`, Google Fonts via `<link>` allowed. Placeholder content below — owner refines later. **Build the homepage only.**

## Hard rules (ALL variants must pass — from house style guide)
- **Self-contained:** single `.html` file, runs by double-click. No build step, no external CSS/JS files (Google Fonts `<link>` is fine).
- **Logo (KEEP — do not redesign):** use `../assets/legacy/logos/Belgrave-Chiropractic-header-logo.png` (1102×322 transparent) in the header. Square mark `../assets/legacy/logos/Belgrave-Chiropractic-Just-Logo-with-Title-Transparent-1.png` for footer/favicon if wanted.
- **Light + dark mode:** both, with a WORKING toggle button (JS, `data-theme` on `<html>`, respects `prefers-color-scheme` on first load). Test both look right.
- **Accessibility (vision-impaired defaults — non-negotiable):** body text ≥18px (prefer 20px on primary reading surfaces), never below 16px. Body weight 500–600. Headings 700–900. Line-height 1.5–1.7. Body contrast ≥7:1, large text ≥4.5:1. Light mode = near-black (#0a0a0a/#111) on off-white (#fafafa/#f5f5f5). Dark mode = near-white on #0a0a0a/#111 (never pure #000). All colours via CSS variables.
- **Font:** NEVER Inter/Roboto/Arial/Open Sans/Lato. Each variant uses its assigned font (below). Use weight extremes and 3x+ size jumps.
- **States (mandatory):** `:focus-visible` on every interactive element (visible ring), `:hover` on buttons/links/cards, `:disabled` style shown on at least one element. Include a styled form (contact) showing `:focus` and an error state example.
- **Motion:** staggered reveal on load (CSS), respect `@media (prefers-reduced-motion: reduce)`.
- **Atmosphere:** layered CSS gradients/patterns — NOT flat solid backgrounds. No `border-radius: 8px` on everything; no cookie-cutter equal card grid; no `border-radius: 9999px` by default. Every element earns its place.
- **Mobile-first responsive:** works 360px → 1440px. Real hamburger nav on mobile.
- **Icons:** ≥24px, stroke ≥2px (use inline SVG; Lucide-style is fine).

## Brand / contact facts (use verbatim)
- Name: **Belgrave Chiropractic**
- Tagline: **"Experience the Difference with Gonstead Chiropractic"**
- Since: **2002** (20+ years)
- **NEW address (physical):** Shop 5 / 5 Bayview Road, Belgrave VIC 3160
- Phone: **(03) 9752 5886** (tel: `+61397525886`)
- Email: info@belgravechiropractic.com.au
- Book Online (all booking buttons link here): `https://belgrave-chiropractic.cliniko.com/bookings#service`
- Facebook: `https://www.facebook.com/belgravechiro` · Instagram: `https://www.instagram.com/belgravechiro`

## SEO framing (drives the words, not just looks)
- **Belgrave = primary** (brand, location, and existing patients all align here).
- **Belgrave/Tecoma/Dandenong Ranges = legacy/retention** (brand + existing patients).
- Lead with Belgrave; weave the Dandenong Ranges catchment (Tecoma, Upwey) into visible copy.

## Page sections (in order)

1. **"We've moved" ribbon/banner** (dismissible look): "📍 We've moved! Now at Shop 5 / 5 Bayview Road, Belgrave VIC 3160 — still caring for our Tecoma & Dandenong Ranges patients."

2. **Header / nav:** logo (left) · nav: Home · About · Chiropractic · Massage · Contact · **Book Online** (button, → Cliniko) · theme toggle. Sticky. Mobile hamburger.

3. **Hero:**
   - H1: **"Gonstead Chiropractic in Belgrave"**
   - Sub-line: **"Proudly serving Belgrave, Tecoma & the Dandenong Ranges since 2002."**
   - Supporting: "Experience the difference with specific, gentle Gonstead adjustments. Onsite X-ray, remedial massage & Biolight therapy under one roof."
   - CTAs: **[Book Online]** (primary → Cliniko) and **[Call (03) 9752 5886]** (secondary).
   - Atmosphere via CSS (gradient/pattern). A hero photo can be swapped in later (Imagen) — for now use designed CSS atmosphere, optional spine/wellness motif.

4. **"What we treat" — 4 problem categories** (icon + title + blurb):
   - **Head & Shoulders** — migraines, dizziness, neck & shoulder soreness.
   - **Mid Back & Lumbar** — shoulder-blade tightness, restricted movement.
   - **Extremities** — pain in hands, elbows, fingers, knees, ankles.
   - **Radiating Pain & Numbness** — nerve pain, sciatica, pins & needles.

5. **Services** (4): 
   - **Gonstead Chiropractic** — "A precise system of analysis and specific adjustment — correcting only the problem segment, nothing else."
   - **Onsite X-Ray** — "Full spine & lumbar X-ray onsite to guide safe, specific care."
   - **Remedial Massage** — "Deep-tissue & remedial work to release tension and restore balance. HICAPS rebates on the spot."
   - **Biolight Therapy** — "Infrared light therapy to accelerate healing of soft-tissue injuries."

6. **Why choose us** (4): **Qualified & Experienced** · **HICAPS & Health Funds** (Private rebates, Work Cover, TAC, GP Care Plans, DVA — claim on the spot) · **Friendly Team** · **Easy Access & Parking** (ground-level access, wheelchair access).

7. **Stats strip** (fix old broken counters — use these): **20+ years caring** · **Open 7 days** · **3 practitioners** · **1000s of happy visits**. (Placeholder — owner confirms.)

8. **Meet the team** (teaser, real photos):
   - Dr **Patrick Sunstrom** — Gonstead Chiropractor — `../assets/legacy/team/Patrick.jpg`
   - **Hayley Tegg** — Remedial Massage Therapist — `../assets/legacy/team/Hayley-Tegg-Pic.jpg`
   - **Lisa Mamone** — Remedial Massage Therapist — `../assets/legacy/team/belgravechiro-lisa.jpg`

9. **Contact + map:** address (Shop 5 / 5 Bayview Road, Belgrave VIC 3160), phone, email, hours (placeholder: "Open 7 days — call for hours"). Include a **styled contact form** (Name, Email, Message + submit) purely to show `:focus` + error + disabled states (no backend). A map area can be a styled placeholder box labelled "Map — Shop 5 / 5 Bayview Road, Belgrave".

10. **Final CTA band:** "Experience the Difference with Gonstead Chiropractic" + **[Book Online]** + **[Call us]**.

11. **Footer:** logo/mark, quick nav, address, phone, email, social icons (FB/IG), "© 2026 Belgrave Chiropractic", small "Serving Belgrave, Tecoma & the Dandenong Ranges".

## Notes
- Do NOT use `../assets/legacy/photos/Belgrave-Front.png` (that's the OLD Tecoma building).
- Clean up old typos in any copy you reuse.
- Keep it a polished, modern, trustworthy health-clinic feel — not generic AI slop.
