# Centre Individual Page — Design Spec

**Page file:** `html/centre-individual.html`
**Drupal route:** `/eye-hospital-in-<city>/<centre-slug>` (e.g. `/eye-hospital-in-gurugram/sector-29`)
**Components dir:** `html/centre-individual-components/`
**Reference:** Figma CSS dump + screenshot supplied by client.

## Purpose

Single-centre profile page. Showcases one specific Centre for Sight location with hero (centre name + address + phone + embedded callback form + photo), About section, JS-driven Specialities tab strip with swappable panels, Google Maps embed, address/phone/hours strip, doctors practising at this centre, sibling centres in the same state, FAQ, and a callback form. Reached from the Locate Us / centre cluster page. Static markup demonstrates the layout for Sector 29, Gurugram; Drupal renders the same structure for any `node--centre` entity.

## Section order (top to bottom)

1. Utility bar (shared)
2. Main nav (shared)
3. Breadcrumb — "Home › Eye Hospital In {city} › {centre name}"
4. Hero — 2-col, left card (gray bg, name + address + phone + embedded callback form), right card (centre photo)
5. About — heading + 2 paragraphs
6. Specialities tab strip + active panel (LASIK default)
7. Map — full-width Google Maps iframe
8. Address strip — 3-col (address / phone+email / hours)
9. Eye Care Specialists In {centre} — heading + 4 doctor cards + Load More
10. More Centers In {state} — heading + 5 centre cards (3-col, with 2 in row 2)
11. FAQ accordion — 6 items
12. Callback form — "Could not find what you are looking for?"
13. Footer (shared)
14. Sticky bottom bar (shared, mobile-only)

## Visual decisions

| Decision | Choice |
|---|---|
| Specialities tabs | JS-swap visible panel — all 8 panels in DOM, one visible |
| Map embed | Live Google Maps iframe with placeholder query |
| Hero photo card | `rounded-[28px]` with `object-cover` building photo |
| Hero left card | `bg-[#f4f4f8] rounded-[28px]` with embedded form |
| Embedded callback form | Inline `+91` slot + phone input + below-stacked yellow CTA |
| FAQ accordion | Native `<details>`/`<summary>` (zero JS) |
| Doctor cards | Same shape as `eye-specialists-components/04-doctor-card.html` |
| Centre cards | Same shape as `centre-cluster-components/05-centre-card.html` |
| Active nav | "Locate Us" |
| Page-specific CSS | None |

## Tailwind tokens by section

(See `centre-individual-component-inventory.md` for the full token list and individual component files for exact markup.)

### Hero

- Container: `max-w-[var(--container-site)] mx-auto px-6 lg:px-0`
- Grid: `grid-cols-1 lg:grid-cols-[703px_663px] gap-4 lg:gap-[16px]`
- Left card: `bg-[#f4f4f8] rounded-[28px] px-6 lg:px-[60px] py-8 lg:py-[64px]`
- Heading: `font-heading font-bold text-[36px] lg:text-[55px] leading-[110%] lg:leading-[58px] text-primary`
- Form input wrapper: `bg-white rounded-[7px] h-[55px] lg:h-[65px]`
- `+91` slot: `bg-[#f8f8f8] w-[51px]`
- Submit CTA: `bg-accent text-primary rounded-[7px] h-[48px]`

### Specialities tabs + panels

- Tab strip: `grid grid-cols-2 lg:grid-cols-4 gap-3 lg:gap-[16px]`
- Chip: `h-[60px] lg:h-[75px] rounded-[13px] bg-primary text-white font-light data-[active=true]:bg-accent data-[active=true]:text-primary data-[active=true]:font-bold`
- Panel: `grid-cols-1 lg:grid-cols-[344px_1fr] gap-6 lg:gap-[80px]`
- Panel photo: `rounded-[16px]` 344×396 desktop / 260px tall mobile

### Address strip

- Grid: `grid-cols-1 lg:grid-cols-3 gap-3 lg:gap-[15px]`
- Card: `bg-[#f1f1f1] rounded-[15px] min-h-[88px] flex items-start gap-4 px-6 py-4`
- Icon: `w-[27px] h-[26px] text-primary`

### FAQ accordion

- Item: `bg-[#f1f1f1] rounded-[5px]`
- Summary: `cursor-pointer list-none [&::-webkit-details-marker]:hidden flex items-center gap-4 px-6 py-5`
- Chevron: `w-6 h-6 text-primary transition-transform group-open:rotate-180`

## Responsive behavior

Single breakpoint: `lg:` (1024px).

| Section | Below `lg:` | At/above `lg:` |
|---|---|---|
| Hero | Stack vertically (text + form first, photo below) | 2-col ~703/663 |
| Hero photo | `h-[260px]` | `min-h-[563px]` |
| Specialities tabs | 2 cols × 4 rows | 4 cols × 2 rows |
| Speciality panel | Stack (photo top, text below) | 344px photo + flex text |
| Address strip | Stack (1-col) | 3-col |
| Doctor row | 1-col → 2-col at `sm:` | 4-col |
| More Centers | 1-col → 2-col at `sm:` | 3-col (5 cards = 3+2) |
| FAQ | Same (single column) | Same |

## Out of scope

- Other centre pages — same template, different node instance.
- City individual / Innov Eyes pages — separate specs.
- `schema.org/Hospital` structured data — handled by Drupal Metatag.
- Multilingual variants — Drupal translation layer.