# Centre Cluster Page — Component Inventory

**Page file:** `html/centre-cluster.html`
**Component files:** `html/centre-cluster-components/` (page-specific) + `html/components/` (shared with homepage) + `html/cataract-components/` (shared with cataract page pattern library)

Each section of the centre cluster 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/centre-cluster-components/` are the canonical source the Drupal team should convert to Twig templates.

## Components used on this page

| # | Section (as in Figma) | Component file | Reused from | Type |
|---|-----------------------|----------------|-------------|------|
| 1 | Top utility bar | `html/components/01-utility-bar.html` | Homepage | Shared |
| 2 | Main navigation | `html/components/02-main-nav.html` | Homepage | Shared |
| 3 | Breadcrumb | `html/centre-cluster-components/01-breadcrumb.html` | — | New |
| 4 | Hero banner ("Find Your Nearest Centre") | `html/centre-cluster-components/02-hero-banner.html` | — | New |
| 5 | Search by Location (heading + state dropdown + search input) | `html/centre-cluster-components/03-search-filter.html` | — | New |
| 6 | State chips (jump-links) | `html/centre-cluster-components/04-state-chips.html` | — | New |
| 7 | Centre location card (single card) | `html/centre-cluster-components/05-centre-card.html` | — | New (reusable pattern) |
| 8 | State group section (heading + card grid) | `html/centre-cluster-components/06-state-section.html` | — | New (repeated once per state) |
| 9 | Load More button | `html/centre-cluster-components/07-load-more.html` | — | New |
| 10 | Our Story and Vision | `html/centre-cluster-components/08-our-story.html` | — | New |
| 11 | Our Eye Care Specialities (accordion) | `html/components/05-specialities.html` | Homepage | Shared |
| 12 | Expert Eye Specialists Team (split content) | `html/centre-cluster-components/09-experts-split.html` | — | New |
| 13 | Why Choose Centre For Sight? (4 feature cards) | `html/centre-cluster-components/10-why-cfs.html` | — | New |
| 14 | Frequently Asked Questions (accordion) | `html/centre-cluster-components/11-faq.html` | — | New (pattern mirrors `cataract-components/15-faq.html`) |
| 15 | Request a Callback form | `html/components/14-callback-form.html` | Homepage/Cataract | Shared |
| 16 | Footer | `html/components/15-footer.html` | Homepage | Shared |
| 17 | Sticky bottom action bar | `html/components/16-sticky-bar.html` | Homepage | Shared |

## Design tokens used

All tokens are defined in `css/input.css` (`@theme` block):
- **Colors:** `primary` (#2B286F), `accent` (#FFCB05), `gray-100` (#F1F1F1), `text-dark` (#434343)
- **Fonts:** `font-body` (Lato), `font-heading` (Poppins)
- **Container:** `container-site` (1440px), `container-inner` (1380px)
- **Radii:** `rounded-[7px]`, `rounded-[11px]`, `rounded-[17px]`, `rounded-[28px]`

## JavaScript hooks

All JS interaction on this page uses stable `data-*` attributes:
- `data-menu-toggle` / `data-menu-panel` — mobile nav hamburger (shared, in `js/main.js`)
- `data-faq-toggle` / `data-faq-item` / `data-faq-answer` — FAQ accordion (inlined in page)
- `data-centre-state-select` — state dropdown jump-to-anchor
- `data-centre-search` — client-side filter over `.centre-loc-card` by text content
- `data-centre-load-more` — pager button (awaiting Views AJAX in Drupal)
- `data-hero-callback` — hero request-a-callback form submit hook
- `data-accordion="specialities"` — specialities tab group (shared)
- `data-sticky-action` — sticky bar (shared)

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

## Dynamic content readiness checklist

| Requirement (from spec) | How this page meets it |
|-------------------------|------------------------|
| No fixed card count | State section uses `grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3` — any card count works |
| No nth-child styling | No `:nth-child` selectors anywhere |
| No text-length dependent heights | Centre card uses `lg:h-[315px]` with internal flex, not content-driven height; card footer anchored via `mt-auto` |
| Repeatable card structure | `05-centre-card.html` is a single reusable unit |
| Tab/filter JS independent from layout | State dropdown and search input 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=""` |
| Form labels | `<label>` + `sr-only` or visible labels on every input |
| Keyboard focus | `focus-visible:outline` utilities on all interactive elements |