# Eye Specialists Page — Design Spec

**Page file:** `html/eye-specialists.html`
**Page slug:** `eye-specialists.html`
**Nav label:** Find An Eye Specialist
**H1:** Eye Specialists Near You
**Component directory:** `html/eye-specialists-components/`

## Purpose

Directory/listing page for Centre for Sight eye specialists across India. Users can:
1. Search/filter specialists by location (dropdown), speciality (dropdown), and name (text)
2. Browse a paginated grid of doctor cards
3. Click through to a specialist's booking page
4. Learn about CFS's story, specialities, and why-choose propositions
5. Request a callback if they cannot find what they need

## Top-level sections (render order)

| # | Section | Component file | Shared? |
|---|---------|----------------|---------|
| 1 | Utility bar | `components/01-utility-bar.html` | Shared |
| 2 | Main nav | `components/02-main-nav.html` | Shared |
| 3 | Breadcrumb | `eye-specialists-components/01-breadcrumb.html` | Per-page |
| 4 | Hero banner | `eye-specialists-components/02-hero-banner.html` | Per-page |
| 5 | Search filter | `eye-specialists-components/03-search-filter.html` | Per-page |
| 6 | Doctor grid (4 cards, static) | `eye-specialists-components/04-doctor-card.html` (×4) | Per-page |
| 7 | Load More | `eye-specialists-components/05-load-more.html` | Per-page |
| 8 | Our Story and Vision | `eye-specialists-components/06-our-story.html` | Per-page |
| 9 | Specialities strip | `components/05-specialities.html` | Shared |
| 10 | Why CFS chips | `eye-specialists-components/07-why-cfs.html` | Per-page |
| 11 | FAQ accordion | `eye-specialists-components/08-faq.html` | Per-page |
| 12 | Callback form | `eye-specialists-components/09-callback-form.html` | Per-page |
| 13 | Footer | `components/15-footer.html` | Shared |
| 14 | Sticky bar | `components/16-sticky-bar.html` | Shared |

## Breakpoints

| Name | Width | Notes |
|------|-------|-------|
| Mobile | 375px | Single-column stack; hero right panel collapses above content |
| Tablet | 768px | 2-col doctor grid; search filter wraps to 2 rows |
| Desktop | 1440px | 4-col doctor grid; search filter single row; hero side-by-side |

Tailwind breakpoint in use: `lg:` = 1024px (project standard). Below `lg:` is treated as mobile/tablet.

## Design Tokens

All tokens declared in `css/input.css` (`@theme` block). No new tokens introduced by this page.

### Colors
- `--color-primary` / `text-primary` — `#2B286F` (navy): headings, body text, CTA labels, `bg-primary` for doctor card footer band
- `--color-accent` / `bg-accent` — `#FFCB05` (yellow): CTA buttons, location chip on doctor card, submit buttons
- `bg-[#f4f4f8]` — hero left panel background (cool off-white)
- `bg-[#f1f0f0]` / `bg-gray-100` — doctor card body area, Why CFS card bg, FAQ row bg, Our Story bg
- `bg-[#f7f7f7]` — `+91` prefix box in phone inputs
- `text-[#434343]` / `text-text-dark` — search filter placeholder and option text
- `#1a1a1a` — doctor card qualification and speciality label text

### Fonts
- `font-body` (Lato): hero H1 bold (66px/74px desktop, 38px/46px mobile), CTA button text (24px desktop, 20px mobile)
- `font-heading` (Poppins): all other text — search labels (16px), doctor card name (21px), qualifications (14px), Why CFS titles (31px desktop / 20px mobile), FAQ questions (25px desktop / 15px mobile), Our Story heading (55px desktop / 30px mobile)

### Container tokens
- `max-w-[var(--container-site)]` — 1440px outer page wrapper
- `max-w-[var(--container-inner)]` — 1380px inner content width (used by Our Story card)

### Border radii
- `rounded-[28px]` — hero panels (desktop)
- `rounded-[17px]` — hero panels (mobile), doctor card (desktop)
- `rounded-[11px]` — Why CFS cards, Our Story card, callback form card
- `rounded-[10px]` — doctor card (mobile)
- `rounded-[7px]` — search filter inputs and dropdowns, hero phone input
- `rounded-[6px]` — callback form inputs, submit button

---

## Section Details

### 1. Utility Bar
- **Purpose:** Site-wide top strip — phone numbers, email, links
- **Layout:** Single-row; left links, right contact details
- **Content fields:** Phone numbers (2), email, nav links (Help, Locate Us, etc.)
- **Reuse:** `html/components/01-utility-bar.html` verbatim
- **Screenshot:** `docs/screenshots/eye-specialists-utility-bar.png`

### 2. Main Nav
- **Purpose:** Primary site navigation with logo, main links, hamburger
- **Layout:** Horizontal desktop; collapsible full-screen overlay on mobile
- **Content fields:** Logo, nav links (Home, Treatments, Doctors, etc.), mobile toggle
- **Reuse:** `html/components/02-main-nav.html` verbatim
- **Screenshot:** `docs/screenshots/eye-specialists-main-nav.png`

### 3. Breadcrumb
- **Purpose:** Positional navigation — "Home › Eye Specialists Near Me"
- **Layout:** Single-row `<ol>` with chevron separators
- **Content fields:** Two items — "Home" (link to `/`) + "Eye Specialists Near Me" (current page, `aria-current="page"`)
- **Component:** `html/eye-specialists-components/01-breadcrumb.html`
- **Screenshot:** `docs/screenshots/eye-specialists-breadcrumb.png`

### 4. Hero Banner
- **Purpose:** Page headline, subtitle, and inline phone callback form
- **Layout:** Two-column `flex-col-reverse lg:flex-row` — left cream card (703px wide, 672px tall desktop), right doctors group photo (663×672, fills remaining space). Mobile: image stacks above content.
- **Content fields:**
  - H1 text: "Eye Specialists Near You" (Lato 700, 66px/74px desktop)
  - Subtitle paragraph: "Discover top-rated eye specialists close to you." (Poppins 400, 27px/46px desktop)
  - Phone input placeholder: "Contact Number"
  - `+91` prefix (decorative)
  - CTA button label: "Request a Callback"
  - Hero image: `assets/images/specialists-group.png` (placeholder for real doctors-group photo)
- **Left panel bg:** `#f4f4f8`, radius 28px (desktop) / 17px (mobile)
- **Right panel bg:** `bg-primary` (navy) with image overlay
- **Component:** `html/eye-specialists-components/02-hero-banner.html`
- **Screenshot:** `docs/screenshots/eye-specialists-hero.png`

### 5. Search Filter
- **Purpose:** Let users filter the doctor grid by location, speciality, and name
- **Layout:** `grid-cols-1 lg:grid-cols-[1fr_1fr_1fr_auto]` — three labelled inputs + Explore button in a single row on desktop, stacked on mobile. "Help?" pill positioned top-right (absolute on desktop, block on mobile).
- **Content fields:**
  - Section label "Search By Location" (visible above dropdown)
  - Location dropdown: options are `centre_location` taxonomy terms (seeded: Delhi, Gurgaon, Hyderabad, Dwarka)
  - Section label "Search By Speciality"
  - Speciality dropdown: options are `speciality` taxonomy terms (seeded: Cataract, LASIK, Glaucoma, Retina & Uvea, Cornea Transplant, Oculoplasty, Squint Eye Treatment)
  - Section label "Search By Name"
  - Name text input: placeholder "Search"
  - Submit button label: "Explore"
  - "Help?" decorative pill (no JS)
- **Stable JS hooks:** `data-search-filter` (form), `data-search-location`, `data-search-speciality`, `data-search-name`
- **Component:** `html/eye-specialists-components/03-search-filter.html`
- **Screenshot:** `docs/screenshots/eye-specialists-search-filter.png`

### 6. Doctor Grid
- **Purpose:** Show available eye specialists as browsable cards
- **Layout:** `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4` — 4 columns on desktop, 2 on tablet, 1 on mobile. Static markup shows 4 cards; Drupal Views emits the real rows.
- **Per-card content fields:** photo (image), qualifications (text, e.g. "MD (AIIMS) | MBBS"), location (taxonomy chip, yellow bg overlay on photo), name (H3), specialities (tag pills, one per term, yellow bg), booking URL, years of experience (footer band)
- **Card anatomy:** photo block (246px desktop h) → body area (bg `#f1f0f0`: qualifications, name, specialities, booking link) → experience footer (bg-primary, white text)
- **Stable JS hook:** `data-doctor-card` on each `<article>`
- **Component (single card):** `html/eye-specialists-components/04-doctor-card.html`
- **Screenshot:** `docs/screenshots/eye-specialists-doctor-grid.png`

### 7. Load More
- **Purpose:** Trigger loading of additional doctor cards (Drupal: Views AJAX pager)
- **Layout:** Centered `<button>` — 143×46px, navy outline, white bg
- **Content fields:** Button label "Load More"
- **Stable JS hook:** `data-doctor-load-more`
- **Component:** `html/eye-specialists-components/05-load-more.html`
- **Screenshot:** `docs/screenshots/eye-specialists-load-more.png`

### 8. Our Story and Vision
- **Purpose:** Trust-building prose block about CFS's founding and mission
- **Layout:** Full-width `bg-gray-100` card (`rounded-[11px]`, padding 70px H desktop), constrained to `container-inner`. Single heading + single body paragraph.
- **Content fields:**
  - Heading: "Our Story and Vision" (Poppins 300, 55px/90px desktop)
  - Body: long paragraph (Lato 400, 21px/34px desktop) covering founding (1996, Prof. Mahipal S. Sachdev), 350 doctors, 95+ centres, NABH accreditation
- **Component:** `html/eye-specialists-components/06-our-story.html`
- **Screenshot:** `docs/screenshots/eye-specialists-our-story.png`

### 9. Specialities Strip
- **Purpose:** Showcase the range of eye care specialities offered; interactive accordion tabs
- **Layout:** Shared component — same accordion/carousel as homepage
- **Content fields:** 9 speciality items (title, bg colour, description, bullet points, CTA) — content managed via Drupal
- **Reuse:** `html/components/05-specialities.html` verbatim
- **Screenshot:** `docs/screenshots/eye-specialists-specialities.png`

### 10. Why CFS Chips
- **Purpose:** Four feature-highlight cards summarising CFS differentiators
- **Layout:** `grid-cols-2 lg:grid-cols-4` — 4 columns desktop, 2 mobile. Each card: `bg-gray-100`, radius 11px, hover → `bg-primary` with white text transition.
- **Content fields (4 cards):**
  1. "Eye Care Specialists"
  2. "Advanced Technology"
  3. "Comprehensive Services"
  4. "Patient-Centered Care"
- Each card: heading (Poppins 300, 31px/37px) + decorative 68px horizontal line (`bg-black` → `bg-white` on hover)
- **Stable JS hook:** `data-why-cfs-card` (hover-only, CSS transitions; no JS required)
- **Component:** `html/eye-specialists-components/07-why-cfs.html`
- **Screenshot:** `docs/screenshots/eye-specialists-why-cfs.png`

### 11. FAQ Accordion
- **Purpose:** Answer common questions; 6 placeholder questions in static markup
- **Layout:** Vertical stack of `bg-[#f1f1f1]` rows (min-height 87px desktop / 44px mobile), constrained to max-w-[1272px]. Collapse/expand via `data-faq-toggle`.
- **Content fields (6 rows — currently placeholder/cataract content from screenshot):**
  1. "What Exactly Is Done In Cataract Surgery?" — marked `*PLACEHOLDER*`
  2. "Is Cataract Surgery A Major Surgery?"
  3. "How Painful Is Cataract Surgery?"
  4. "Who Gets Affected By Cataracts?"
  5. "Is Cataract Surgery The Only Surgical Option For Treating Cataracts?"
  6. "Which Lens Is Best For Cataract?"
- **Note:** All 6 questions are cataract-related from screenshot preview. Drupal content team must replace with eye-specialist-specific questions before launch.
- **Stable JS hooks:** `data-faq-item`, `data-faq-toggle`, `data-faq-answer` (handled by `js/main.js`)
- **Component:** `html/eye-specialists-components/08-faq.html`
- **Screenshot:** `docs/screenshots/eye-specialists-faq.png`

### 12. Callback Form
- **Purpose:** Catch-all lead capture — "Could not find what you are looking for?"
- **Layout:** Full-width section with `bg-primary` panel (with background image overlay `callback-bg.png`). White card (`478×439` desktop, radius 11px) on left side holds form. Mobile: card goes full-width with semi-transparent primary overlay.
- **Content fields:**
  - Eyebrow: "Could not find what you are looking for?" (Poppins 300, 22px)
  - Heading: "Request a Callback" (Poppins 400, 38px)
  - Full name input (placeholder "Full name")
  - Phone input with `+91` prefix (placeholder "Mobile Number")
  - Submit label: desktop "Book An Appointment" / mobile "Submit"
- **Variant:** "Could not find" eyebrow variant, matching the cataract page pattern
- **Stable JS hook:** `data-callback-form`
- **Component:** `html/eye-specialists-components/09-callback-form.html`
- **Screenshot:** `docs/screenshots/eye-specialists-callback.png`

### 13. Footer
- **Purpose:** Site-wide footer — quick links, contact, social, copyright
- **Layout:** Multi-column grid with CFS logo, link groups, phone/address, social icons
- **Reuse:** `html/components/15-footer.html` verbatim
- **Screenshot:** `docs/screenshots/eye-specialists-footer.png`

### 14. Sticky Bar
- **Purpose:** Persistent bottom bar (mobile) / chat bubble (desktop) for quick actions
- **Layout:** Full-width fixed bar on mobile; right-fixed circular chat icon on desktop
- **Reuse:** `html/components/16-sticky-bar.html` verbatim
- **Screenshot:** `docs/screenshots/eye-specialists-sticky-bar.png`

## Responsive strategy

Follow existing project convention: **single DOM, Tailwind breakpoint utilities**. No duplicate mobile-specific blocks.

| Section | Mobile (375px) | Desktop (1440px) |
|---------|---------------|------------------|
| Hero | Stack `flex-col-reverse`: image above, content below | Side-by-side `flex-row` |
| Search filter | Single-column stacked inputs | 4-col grid (3 inputs + button) |
| Doctor grid | 1 column | 4 columns (2 on tablet md:) |
| Why CFS | 2 columns | 4 columns |
| FAQ | Same vertical stack | Same vertical stack, larger text |
| Callback form | Full-width, semi-transparent bg overlay | Left card + decorative right bg |