# Centre Individual Page — Component Inventory

**Page file:** `html/centre-individual.html`
**Component files:** `html/centre-individual-components/` (page-specific) + `html/components/` (shared)

Each section is a reusable component. The main page file inlines these components for a complete preview; the standalone component files in `html/centre-individual-components/` are the canonical source the Drupal team should convert to Twig.

## 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 Hospital In Gurugram › Sector 29") | `html/centre-individual-components/01-breadcrumb.html` | Pattern from `doctor-individual-components/01-breadcrumb.html` | New |
| 4 | Hero with embedded callback form + centre photo | `html/centre-individual-components/02-hero-banner.html` | — (new — bespoke shape) | New |
| 5 | About section | `html/centre-individual-components/03-about.html` | — (new) | New |
| 6 | Specialities tab strip + 8 panels | `html/centre-individual-components/04-specialities-tabs.html` | — (new — JS-driven swap) | New |
| 7 | Single speciality panel | `html/centre-individual-components/05-speciality-panel.html` | — (new Views row template) | New (reusable Views row) |
| 8 | Google Maps iframe | `html/centre-individual-components/06-map.html` | — (new) | New |
| 9 | Address / phone+email / hours strip | `html/centre-individual-components/07-address-strip.html` | — (new) | New |
| 10 | Eye Care Specialists row (4 doctors + Load More) | `html/centre-individual-components/08-eye-care-specialists.html` | Doctor card markup from `eye-specialists-components/04-doctor-card.html` | New (reuses card pattern) |
| 11 | More Centers In Haryana (5 centre cards) | `html/centre-individual-components/09-more-centers.html` | Centre card markup from `centre-cluster-components/05-centre-card.html` | New (reuses card pattern) |
| 12 | FAQ accordion (6 items) | `html/centre-individual-components/10-faq.html` | Native `<details>` pattern from `cataract-components/15-faq.html` | New |
| 13 | Request a Callback form ("Could not find…" variant) | `html/centre-individual-components/11-callback-form.html` | Cross-page copy of `blogs-components/10-callback-form.html` | New (cross-page reuse) |
| 14 | Footer | `html/components/15-footer.html` | Homepage (verbatim) | Shared |
| 15 | Sticky bottom action bar | `html/components/16-sticky-bar.html` | Homepage (verbatim) | Shared |

## Design tokens used

This page introduces no new tokens.

- **Colors:** `primary` (#2B286F), `accent` (#FFCB05), `bg-[#f1f1f1]` (card surface), `bg-[#f4f4f8]` (hero left card), `bg-[#f8f8f8]` (form prefix slot), `placeholder-[#bcbbbb]`
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `--container-site` (1440px), `--container-inner` (1380px)
- **Radii:** `rounded-[5px]` (FAQ items), `rounded-[7px]` (form inputs, buttons), `rounded-[10px]` (Load More + cards), `rounded-[13px]` (speciality chips), `rounded-[15px]` (cards, address strip), `rounded-[16px]` (speciality panel photo), `rounded-[17px]` (doctor cards on `lg:`), `rounded-[28px]` (hero cards), `rounded-full` (centre-card phone icon)

## JavaScript hooks

Tab swap added to `js/main.js` (`[data-centre-tabs]` block, ~15 lines). FAQ uses native `<details>`/`<summary>` (zero JS).

| Hook | Element | Behaviour |
|------|---------|-----------|
| `data-centre-tabs` | Speciality tabs container | Marks the tab + panel scope for the swap handler |
| `data-centre-tab` + `data-speciality` | Each chip `<button>` | Click → toggles `data-active="true"` and shows matching panel |
| `data-centre-panel` + `data-speciality` | Each panel `<div>` | Hidden by default except active; JS toggles `hidden` class |
| `data-active` | Each chip | `"true"` for active, `"false"` for others; styled via Tailwind `data-[active=true]:*` |
| `id="hero-callback"` | Hero embedded form | Anchor target; placeholder for webform-centre-callback |
| `id="specialities"` | Specialities section | Anchor target |
| `data-doctor-card` | Each doctor card | Card-level hook for Drupal Views |
| `data-speciality-chip` | Each doctor speciality tag | Tag-level hook |
| `data-callback-form` | Bottom callback `<form>` | Lead form submit (stub; Drupal Webform takes over) |
| `data-menu-toggle` / `data-menu-panel` | Nav hamburger | Mobile nav overlay (shared) |
| `data-sticky-action` | Sticky bar | Shared sticky bar |

No framework dependencies. Pure vanilla JS.

## Dynamic content readiness checklist

| Requirement | How this page meets it |
|-------------|----------------------|
| No fixed speciality count | Tab strip uses `grid grid-cols-2 lg:grid-cols-4` — any count works (rows wrap naturally). Drupal renders one chip + panel per `field_offered_specialities` term |
| No fixed doctor count | Doctor row uses `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4` — any count works. Pagination handled by Views |
| No fixed sibling-centre count | More Centers grid uses `grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` — 1-N centres all render naturally |
| No fixed FAQ count | FAQ list uses `space-y-3 lg:space-y-[12px]` flex column — any count works |
| No nth-child styling | No `:nth-child` selectors |
| Text-length flexible cards | Doctor cards use `flex flex-col` with `mt-auto` on Book An Appointment link — height flex |
| Tab JS scopes correctly | `[data-centre-tabs]` parent isolates the swap to one tab group — multiple tab strips on a page wouldn't interfere |
| FAQ accessibility | Native `<details>`/`<summary>` — full keyboard support, screen-reader semantics |
| Map iframe | `loading="lazy"` defers iframe load until near viewport |
| Form labels | `<label>`+input wrappers; `sr-only` on hero callback |
| Keyboard focus | `focus:ring-2 focus:ring-primary` on inputs; arrows via native `<button>` focus ring |