# Fletcher Physiotherapy Website
## Setup & Image Replacement Guide

---

## 📁 Folder Structure

```
fletcher-physiotherapy/
│
├── index.html              ← Main homepage
│
├── css/
│   └── style.css           ← All custom styles + CSS variables
│
├── bootstrap/
│   ├── bootstrap.min.css   ← Bootstrap 5 CSS (local copy)
│   └── bootstrap.bundle.min.js  ← Bootstrap 5 JS + Popper
│
├── js/
│   └── main.js             ← Animations, scroll effects, form handling
│
└── images/                 ← ⚠️ REPLACE ALL IMAGES HERE
    ├── logo.png             ← ✅ Already added (your uploaded logo)
    ├── hero-poster.jpg      ← Static poster shown before video loads
    ├── hero-video.mp4       ← Hero background video (autoplay)
    ├── hero-video.webm      ← Hero video (WebM format, smaller size)
    ├── hero-fallback.jpg    ← Fallback if video fails to load
    ├── about-clinic.jpg     ← "Why Choose Us" section (clinic interior/exterior)
    ├── cta-bg.jpg           ← CTA section background
    ├── og-image.jpg         ← Social media share image (1200×630px)
    ├── favicon.png          ← Browser tab icon (32×32 or 64×64px)
    │
    ├── service-physiotherapy.jpg
    ├── service-massage.jpg
    ├── service-chiropractic.jpg
    ├── service-rehab.jpg
    ├── service-acupuncture.jpg
    ├── service-orthotics.jpg
    │
    ├── team-member-1.jpg    ← Physiotherapist
    ├── team-member-2.jpg    ← Massage Therapist
    ├── team-member-3.jpg    ← Chiropractor
    ├── team-member-4.jpg    ← Rehab Specialist
    │
    ├── avatar-1.jpg         ← Patient testimonial photo
    ├── avatar-2.jpg
    └── avatar-3.jpg
```

---

## 🎬 Hero Video Requirements

The hero section uses a **self-hosted HTML5 video** (not YouTube/Vimeo) for best performance:

- **Format:** MP4 (H.264) + WebM (VP9) for cross-browser support
- **Resolution:** 1920×1080 recommended (1280×720 minimum)
- **Duration:** 15–30 seconds, looped
- **File size:** Keep under 10MB for fast loading
- **Content ideas:** Clinic walkthrough, treatment sessions, patient recovery, team in action

**To replace the video**, simply drop your files into the `images/` folder:
- `images/hero-video.mp4`
- `images/hero-video.webm`

---

## 🖼️ Image Specifications

| Image | Recommended Size | Notes |
|-------|-----------------|-------|
| logo.png | Any (height ≤ 80px displayed) | Already added |
| hero-poster.jpg | 1920×1080 | Shown before video loads |
| service-*.jpg | 800×500 | 6:4 ratio, shown at 210px height |
| about-clinic.jpg | 800×600 | Any tall/square works well |
| team-member-*.jpg | 500×600 | Portrait orientation preferred |
| avatar-*.jpg | 100×100 | Circular crop applied automatically |
| cta-bg.jpg | 1920×800 | Full-width background |
| og-image.jpg | 1200×630 | For social media previews |
| favicon.png | 64×64 | Browser tab icon |

---

## 🎨 Brand Colors

Edit these CSS variables in `css/style.css` (`:root` block):

```css
--primary:   #1a3a5c;   /* Deep navy blue */
--secondary: #2e86c1;   /* Medical blue */
--accent:    #27ae60;   /* Health green */
```

---

## 📞 Contact Details (already configured)

- **Phone:** (905) 692-0602
- **Email:** rahimbatada@gmail.com
- **Address:** 1808 Rymal Rd E, Hamilton, ON L0R 1P0, Canada

---

## 🗺️ Google Maps Embed

In `index.html`, find the `<iframe>` inside the `#contact` section and replace the `src` attribute with your actual Google Maps embed URL:

1. Go to [maps.google.com](https://maps.google.com)
2. Search: `1808 Rymal Rd E, Hamilton, ON`
3. Click **Share** → **Embed a map** → Copy the `src` URL from the iframe code
4. Replace the existing `src` in `index.html`

---

## 🚀 How to Open / Deploy

**Locally:** Open `index.html` in any browser — no server needed.

**Web Hosting:** Upload the entire `fletcher-physiotherapy/` folder to your hosting provider (cPanel, FTP, or drag-and-drop).

**Recommended hosts:** SiteGround, Bluehost, Hostinger, or any shared hosting.

---

## ✏️ Customisation Tips

- **Team names/roles:** Edit directly in `index.html` (search "team-name" and "team-role")
- **Testimonials:** Edit the testimonial text blocks in `index.html`
- **Services:** Add/remove service cards in the `#services` section
- **Business hours:** Update the hours table in `#contact` section
- **Insurance providers:** Edit the `.insurance-logo-item` items in the billing banner
- **Animations:** Adjust speed via `transition` in `css/style.css`

---

*Built for Fletcher Physiotherapy — Hamilton, ON*
