# Get Back Physiotherapy — Website

## Project Structure

```
getback-physio/
├── index.html              ← Main HTML file (all sections)
│
├── css/
│   └── style.css           ← All styles (custom CSS, responsive, animations)
│
├── js/
│   └── main.js             ← All JavaScript (navbar, FAQ, reveal, counter, lightbox)
│
├── images/                 ← Replace all placeholder images here
│   ├── logo.webp           ← Clinic logo (already placed)
│   ├── hero-poster.jpg     ← Hero video fallback poster
│   ├── about-clinic.jpg    ← About section clinic photo
│   ├── therapist-1.jpg     ← Dr. Priya Sharma headshot
│   ├── therapist-2.jpg     ← Dr. Rahul Sen headshot
│   ├── therapist-3.jpg     ← Dr. Ananya Das headshot
│   ├── gallery-reception.jpg
│   ├── gallery-treatment-1.jpg
│   ├── gallery-treatment-2.jpg
│   ├── gallery-equipment.jpg
│   ├── gallery-exercise.jpg
│   ├── gallery-team.jpg
│   ├── service-manual-therapy.jpg
│   ├── service-sports.jpg
│   ├── service-dry-needling.jpg
│   ├── service-neuro.jpg
│   ├── service-posture.jpg
│   ├── service-home.jpg
│   ├── location-saltlake.jpg
│   ├── location-newtown.jpg
│   ├── location-ballygunge.jpg
│   ├── blog-back-pain.jpg
│   ├── blog-posture.jpg
│   ├── blog-sports-injury.jpg
│   ├── patient-1.jpg
│   ├── patient-2.jpg
│   └── patient-3.jpg
│
├── videos/
│   └── hero.mp4            ← Hero background video (replace with real footage)
│
├── fonts/                  ← (Optional) Local font files if not using Google Fonts CDN
│
└── bootstrap/              ← (Optional) Local Bootstrap files if not using CDN
```

---

## Brand Colours

| Token       | Hex       | Usage                        |
|-------------|-----------|------------------------------|
| Navy        | `#1a3a5c` | Primary text, backgrounds    |
| Navy Dark   | `#0f2440` | Footer, dark sections        |
| Cyan        | `#00b4d8` | Brand accent, CTAs, links    |
| Cyan Light  | `#48cae4` | Hover states, gradients      |
| Cyan Pale   | `#caf0f8` | Backgrounds, icon fills      |

---

## CDN Dependencies

The project uses the following CDNs (no local install required):

- **Bootstrap 5.3.2** — `https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/`
- **Font Awesome 6.5.1** — `https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/`
- **Google Fonts** — Playfair Display + DM Sans

---

## Customisation Checklist

### Before Going Live:

1. **Replace all `images/` placeholders** — Use real clinic and team photos.
2. **Add hero video** — Place `hero.mp4` in `/videos/`. Recommended: 10–20 second loop of clinic interior or patient activity.
3. **Update contact details** — Search for `XXXXXXXXXX` and replace with real phone numbers and address.
4. **Update Google Maps embed** — Replace the placeholder iframe `src` in the Contact section with your real Maps embed URL.
5. **Add WhatsApp number** — Replace `91XXXXXXXXXX` in the WhatsApp links.
6. **Update email** — Replace `info@getbackphysio.com` with real email.
7. **Schema.org data** — Update the JSON-LD block in the `<head>` with real address, phone, and URL.
8. **Staff details** — Update team member names, qualifications and specialisms.
9. **Insurance providers** — Update the insurance logos/names to reflect actual accepted providers.
10. **Location pages** — Update the three location cards with real addresses and phone numbers.

---

## Features Included

- ✅ Full-width hero section with background video + overlay
- ✅ Fixed transparent navbar → solid on scroll
- ✅ Mobile hamburger menu with slide-in overlay
- ✅ Animated counter stats
- ✅ Scroll-reveal animations on all sections
- ✅ Conditions treated grid (12 conditions)
- ✅ Services grid with hover effects
- ✅ Team profiles with social overlay
- ✅ 4-step treatment process
- ✅ Why Choose Us section (dark)
- ✅ Testimonials with verified badges
- ✅ Gallery with lightbox
- ✅ FAQ accordion
- ✅ Blog / Educational hub
- ✅ Inline booking CTA form
- ✅ Insurance providers section
- ✅ 3 location cards
- ✅ Contact form + embedded map
- ✅ WhatsApp floating button
- ✅ Scroll-to-top button
- ✅ Footer with all links
- ✅ Schema.org structured data
- ✅ Fully responsive (desktop/tablet/mobile)
- ✅ SEO-optimised meta tags
- ✅ Semantic HTML5 markup

---

## Browser Support

Chrome, Firefox, Safari, Edge (all modern versions). IE is not supported.
