# Eye Specialists Page — Component Inventory

**Page file:** `html/eye-specialists.html`
**Component files:** `html/eye-specialists-components/` (page-specific) + `html/components/` (shared with homepage and other pages)

Each section of the eye-specialists page is delivered as a reusable component. The main page file inlines these components for a complete visual preview; the standalone component files in `html/eye-specialists-components/` are the canonical source the Drupal team should convert to Twig templates.

## Components used on this page

| # | Section | Component file | Reused from | Type |
|---|---------|----------------|-------------|------|
| 1 | Top utility bar | `html/components/01-utility-bar.html` | Homepage (verbatim) | Shared |
| 2 | Main navigation | `html/components/02-main-nav.html` | Homepage (verbatim) | Shared |
| 3 | Breadcrumb ("Home › Eye Specialists Near Me") | `html/eye-specialists-components/01-breadcrumb.html` | Pattern from `centre-cluster-components/01-breadcrumb.html` | New |
| 4 | Hero banner ("Eye Specialists Near You") | `html/eye-specialists-components/02-hero-banner.html` | Pattern from `centre-cluster-components/02-hero-banner.html` | New |
| 5 | Search filter (Location + Speciality + Name) | `html/eye-specialists-components/03-search-filter.html` | Pattern from `centre-cluster-components/03-search-filter.html` | New |
| 6 | Doctor card (single card, repeated ×4 in grid) | `html/eye-specialists-components/04-doctor-card.html` | — | New (reusable Views row template) |
| 7 | Load More button | `html/eye-specialists-components/05-load-more.html` | Pattern from `centre-cluster-components/07-load-more.html` | New |
| 8 | Our Story and Vision | `html/eye-specialists-components/06-our-story.html` | Pattern from `centre-cluster-components/08-our-story.html` | New |
| 9 | Our Eye Care Specialities (accordion) | `html/components/05-specialities.html` | Homepage (verbatim) | Shared |
| 10 | Why Choose Centre For Sight? (4 feature cards) | `html/eye-specialists-components/07-why-cfs.html` | Pattern from `centre-cluster-components/10-why-cfs.html` | New |
| 11 | Frequently Asked Questions (accordion) | `html/eye-specialists-components/08-faq.html` | Pattern from `centre-cluster-components/11-faq.html` | New |
| 12 | Request a Callback form ("Could not find…" variant) | `html/eye-specialists-components/09-callback-form.html` | Pattern from `cataract-components/` callback variant | New |
| 13 | Footer | `html/components/15-footer.html` | Homepage (verbatim) | Shared |
| 14 | Sticky bottom action bar | `html/components/16-sticky-bar.html` | Homepage (verbatim) | Shared |

## Design tokens used

All tokens are defined in `css/input.css` (`@theme` block). This page introduces no new tokens.

- **Colors:** `primary` (#2B286F), `accent` (#FFCB05), `gray-100` (#F1F1F1), `text-dark` / `text-[#434343]` (#434343)
- **Custom colors (inline):** `#f4f4f8` (hero left panel), `#f1f0f0` (doctor card body), `#f7f7f7` (`+91` prefix bg), `#1a1a1a` (card detail text)
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `--container-site` (1440px), `--container-inner` (1380px)
- **Radii:** `rounded-[7px]`, `rounded-[10px]`, `rounded-[11px]`, `rounded-[17px]`, `rounded-[28px]`

## JavaScript hooks

All JS interaction on this page uses stable `data-*` attributes. No new JS files required — all handlers live in or are candidates to be moved into `js/main.js`.

| Hook | Element | Behaviour |
|------|---------|-----------|
| `data-hero-callback` | Hero `<form>` | Phone callback form submit |
| `data-search-filter` | Search `<form>` | Filter form wrapper |
| `data-search-location` | Location `<select>` | Exposed filter on `field_location` |
| `data-search-speciality` | Speciality `<select>` | Exposed filter on `field_specialities` |
| `data-search-name` | Name `<input>` | Exposed filter on doctor `title` |
| `data-doctor-card` | Each `<article>` | Card interaction hook (no current JS; reserved for Drupal) |
| `data-doctor-load-more` | Load More `<button>` | Triggers next page of doctors (Views AJAX pager) |
| `data-faq-item` | Each FAQ row `<div>` | FAQ accordion item wrapper |
| `data-faq-toggle` | FAQ `<button>` | Expand/collapse toggle |
| `data-faq-answer` | FAQ answer `<div>` | Hidden/shown answer panel |
| `data-callback-form` | Callback `<form>` | Lead form submit |
| `data-menu-toggle` / `data-menu-panel` | Nav hamburger | Mobile nav overlay (shared, `js/main.js`) |
| `data-accordion="specialities"` | Specialities tab group | Shared specialities accordion |
| `data-sticky-action` | Sticky bar | Shared sticky bar |

No framework dependencies. Pure vanilla JS. Selectors are attribute-based, not DOM-traversal-based.

## Dynamic content readiness checklist

| Requirement | How this page meets it |
|-------------|----------------------|
| No fixed card count | Doctor grid uses `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4` — any card count works |
| No nth-child styling | No `:nth-child` selectors on doctor cards or any grid |
| No text-length dependent heights | Doctor card uses `flex flex-col` with `mt-auto` on booking link; footer anchored by flex layout |
| Repeatable card structure | `04-doctor-card.html` is a single self-contained unit |
| Filter JS independent from layout | All three search inputs target DOM via `data-*` attributes; no layout coupling |
| Semantic HTML5 | `<section>`, `<article>`, `<nav>`, `<h1>`–`<h3>` hierarchy maintained |
| Alt placeholders on all images | Every `<img>` has descriptive `alt=""` attribute |
| Form labels | `<label>` + `sr-only` on phone and name inputs; visible labels on search filter inputs |
| Keyboard focus | `focus-visible:outline` utilities on all interactive elements (inputs, buttons, links) |
| Speciality tags scale | `data-speciality-chip` tags use `flex-wrap` — no fixed tag count assumed |