# Centre Cluster Page — Design Spec

**Figma file:** `9spd82Af61x7nnxyLI7ssG`
**Root frame:** `1:1629` "Centre Cluster" · 1440×7939
**Full Figma data:** `docs/figma-centre-cluster-full.json` (depth=8, 517KB)
**Depth-2 snapshot:** `docs/figma-centre-cluster-d2.json`

## Purpose

Listing/directory page showing Centre for Sight locations across India, grouped by state. Users can:
1. Browse all centres grouped by state
2. Search/filter by state (dropdown)
3. Search by centre name
4. Click state chips to jump to that state's section
5. Click any centre card to view its page / book an appointment

## Top-level sections (y-coordinate order)

| # | y | h | Section | Node |
|---|---|---|---------|------|
| 1 | 0 | 43 | Utility bar (Top Details) | `1:1630` — reuse `components/01-utility-bar.html` |
| 2 | 43 | 82 | Main nav (Menu) | `1:1787` — reuse `components/02-main-nav.html` |
| 3 | 127 | 81 | Breadcrumb "Home › eye hospitals in india" | `1:1784` |
| 4 | 125 | 672 | Hero Banner | `1:1644` |
| 5 | 710 | ~175 | Search by Location header + state dropdown + search input | `1:1659`–`1:1664` |
| 6 | 884 | ~147 | State chips (2 rows of tabs) | `1:1665`–`1:1716` |
| 7 | 950 | 514 | Andhra Pradesh centres (2 cards) | `1:1717` |
| 8 | 1385 | 514 | Assam centres (1 card) | `1:1742` |
| 9 | 1828 | 514 | Bihar centres (2 cards) | `1:1722` |
|10 | 2267 | 514 | Chandigarh centres (2 cards) | `1:1726` |
|11 | 2706 | 1170 | Delhi centres (9 cards — 3×3 grid) | `1:1730` |
|12 | 3936 | 46 | "Load More" button | `1:1741` |
|13 | 4038 | 428 | Our Story and Vision | `1:1750` |
|14 | 4552 | 869 | Our Eye Care Specialities carousel | `1:1754` — reuse `components/05-specialities.html` |
|15 | 5507 | 516 | Expert Eye Specialists Team section | `1:1758` |
|16 | 6109 | 265 | Why Choose Centre For Sight? (4 cards) | `1:1759` |
|17 | 6460 | 304 | FAQ accordion | `1:1781` |
|18 | 6850 | 509 | Form "Request a Callback" — reuse `components/14-callback-form.html` | `1:1765` |
|19 | 7445 | 494 | Footer | `1:1643` — reuse `components/15-footer.html` |

Also: sticky scroll-to-top arrow `1:1746` (at x=1311, fixed on right), chat bubble `1:1798` "here to assist".

## Design Tokens (from Figma)

### Colors
- `#2B286F` primary navy (titles, most text, CTA text)
- `#FFCB05` accent yellow (Request a Callback, arrows)
- `#F4F4F8` hero left panel bg
- `#F1F1F1` Our Story bg, Why CFS card bg, FAQ row bg
- `#F7F7F7` phone input +91 box bg
- `#434343` placeholder text color for search inputs
- `#FFFFFF` white (centre card bg, hero right bg content, form card bg)

### Fonts (matches existing project tokens)
- **Lato** (body): 700 for hero title (66px/58), 400 for body (21px/34, 24px button)
- **Poppins** (heading): 
  - 300 for state chip text (22px), centre card name (30px), city (20px), state section title (45px), "Our Story" heading (55px/90), "Why Choose..." (55px/90), FAQ heading (55px/90), Why CFS card titles (31px/37), scroll tab labels (36px)
  - 400 for FAQ row text (25px/37), Request a Callback form heading (38px/75)
  - 500 for "Search by Location" heading (35px/81)

### Border Radii
- 28px — Hero left/right panels
- 11px — Why CFS cards, form card
- 7px — phone input, state chip, centre card, FAQ row
- 6px — submit button

## Section Details

### Hero Banner (y=125, h=672)
- Two-column layout, 1382 wide
- **Left** (29→732, 703w, 504h): `#F4F4F8` bg, radius 28; title "Find Your **Nearest Centre**" (Lato 700 66/58) in navy; subtitle "World class vision care, close to home." (Poppins 400 27/46) navy
- **CTA band** (y=460, 76–697): phone input (white, 621×65, radius 7) with `+91` light grey box on left + "Contact Number" placeholder; below (y=515) yellow "Request a callback" button 621×113 (Lato 400 24) navy text
- **Right** (748–1411, 663×504): image "Gurgaon 2" (navy rounded 28 panel behind)

### Search by Location Block (y=710–844)
- "Search by Location" heading — Poppins 500 35 navy (y=710, w=311)
- Below it: TWO input pills side by side (y=791, h=53, radius 7):
  - Left: state dropdown — placeholder "select" (Poppins 300 20, `#434343`), arrow right. 61→471 (w=410)
  - Right: search input — placeholder "Search Centre". 969→1379 (w=410)
- Space between for layout breathing.

### State Chips (y=884–1031)
Two rows of rounded pills (50h, radius 7) with state name inside. **Inactive:** bordered, navy text. **Active:** filled bg (from Figma raw fills).
- **Row 1 (y=884):** Andhra Pradesh · Assam · Bihar · Chandigarh · Delhi · Gujarat · Haryana · Jammu & Kashmir · Jharkhand
- **Row 2 (y=950):** Madhya Pradesh · Maharashtra · Odisha · Punjab · Rajasthan · Telangana · Uttar Pradesh · West Bengal

Widths vary per text length. Chip padding ~12px H, 14px V. Font: Poppins 300 22 navy.

### State Group (repeating, e.g. Andhra Pradesh y=950 h=514)
- State title (Poppins 300 45/81 navy, ls=-1.8) at top-left (e.g. x=60, y=1055)
- Row of centre cards (3 per row on desktop, 421×315, ~27px gap between)
- Delhi has 3 rows × 3 cards (9 total, 1170h)
- Right-side decorative rectangle (269×402 or 269×155) — probably a promotional banner inside the grid when row has < 3 cards

### Centre Card (421×315, radius 7)
- White bg with subtle shadow (implied by design)
- Image 421×207 top (no radius? or top radius only)
- Below image (15–18 padding):
  - Location Name — Poppins 300 30/37 navy, ls=-1.2 (e.g. "Mogalrajpuram")
  - City Name — Poppins 300 20/37 navy, ls=-0.8 (e.g. "Vijayawada")
- Bottom-right area: circular phone icon (ellipse 28×28 accent) + "Book an Appointment" rounded label (139×28, Poppins 300 navy)

### Load More button (y=3936)
- Small pill 143×46, navy border/bg with "Load More" label. Center horizontally.

### Our Story and Vision (y=4038 h=428)
- Full-width (1398 wide, inside container) with `#F1F1F1` bg
- Centered heading "Our Story and Vision" (Poppins 300 55/90 navy, ls=-2.2)
- Below: large paragraph body (Lato 400 21/34 navy) about founding, 350 doctors, 95+ centres, NABH accredited, etc.

### Our Eye Care Specialities (y=4552 h=869) — REUSE
- Reuse the existing specialities accordion from homepage (`components/05-specialities.html`). Same 9 items, same carousel pattern.

### Expert Eye Specialists Team (y=5507 h=516)
- 2-column layout: left text panel (615×516) + right doctors image (754×516)
- Title "Expert Eye Specialists Team in India" (Poppins 300 heading size)
- Body paragraph about team
- CTA "Find an eye specialist" (264×43, white bg navy text)
- Very similar to existing doctors/testimonials sections — can be a new component

### Why Choose Centre For Sight? (y=6109 h=265)
- Centered title "Why Choose Centre For Sight?" (Poppins 300 55/90)
- Row of 4 cards (279×151, radius 11, `#F1F1F1` bg, gap ~32px):
  1. Eye care Specialists
  2. Advanced Technology
  3. Comprehensive Services
  4. Patient-Centered Care
- Each card: title (Poppins 300 31/37 black) + decorative line

### FAQ (y=6460 h=304)
- Title "Frequently Asked Questions" (Poppins 300 55/90 navy)
- Accordion rows (1272×87, radius 7, `#F1F1F1` bg, gap ~16px): expand arrow icon left + question text (Poppins 400 25/37)

### Form (y=6850 h=509)
- Full-width teal/accent band (1440×602, starts slightly above)
- Left: white card 478×439 (radius 11) containing:
  - Eyebrow "Could not find what you are looking for?" (Poppins 300 22/75 navy)
  - Heading "Request a Callback" (Poppins 400 38/75 navy)
  - "Full name" input (391×42)
  - "+91 | Mobile Number" input (391×42, +91 in light box)
  - "Book An appointment" CTA button (239×58, navy bg, radius 6)
- Right: probably imagery + decorative content (per form-02.html pattern)

## Component reuse strategy

From the existing codebase:
- **01-utility-bar** — reuse as is
- **02-main-nav** — reuse as is
- **05-specialities** (accordion) — reuse as is
- **14-callback-form** — adapt/reuse, note this form is ~same pattern
- **15-footer** — reuse as is
- **16-sticky-bar** — reuse "here to assist" chat bubble

**New components for centre cluster:**
1. `01-hero-banner` — centre-cluster specific (2-col with CTA band)
2. `02-search-filter` — heading + two pills (state dropdown, search input)
3. `03-state-chips` — 2-row chip filter
4. `04-state-section` — state heading + grid of centre cards (repeated per state)
5. `05-centre-card` — reusable card shared between state sections
6. `06-our-story` — simple text block with grey bg
7. `07-specialities` — reuse homepage
8. `08-experts` — 2-col experts team (text + image)
9. `09-why-cfs` — 4 cards
10. `10-faq` — accordion with 2 visible Q&As (expandable later)
11. `11-form` — callback form

## Responsive strategy

Follow existing project convention: **single DOM, Tailwind breakpoint utilities**. No mobile-specific duplicate blocks. The mobile Figma frame was not provided — use judgment based on:
- Homepage mobile = 375px wide, `lg:` breakpoint = 1024px
- Cards: 3-col desktop → 1-col mobile
- Hero: side-by-side → image-below-content with `flex-col-reverse lg:flex-row`
- State chips: wrap → wrap (same but smaller)
- Why CFS: 4-col → 2-col mobile
- FAQ: keep vertical stack (already stacked)
- Form: 2-col → 1-col