# Component Inventory — CFS Cataract Speciality Page

Authoritative source: **`html/cataract.html`** (the assembled page). Section list
below is in page order (top → bottom), mapped to the Figma desktop frame
`1075:10434` ("Speciality - Cataract"). Each row gives the section's root class /
`aria-label` and Figma node id where tagged.

> **Note on the standalone component files.** The per-section files in
> `html/cataract-components/` (`01-…` … `17-…`) were authored Mar–Apr 2026 and
> **predate the June 2026 rework** of `cataract.html`. They no longer match the
> assembled page (section order, the new Intraocular Lens / disclaimer leaf, and
> the rebuilt testimonials / experts / centres / blogs / callback sections).
> Treat `cataract.html` as the source of truth; the standalone files are kept for
> reference only and need a refresh before they can be relied on individually.

## Sections (page order, as built in `cataract.html`)

| # | Section (class / aria-label) | Figma node | Standalone file | Description |
|---|---|---|---|---|
| 01 | `cataract-hero` | 1075:10449 | 01-hero-banner.html | Hero with heading, description, doctor image, presence stats and inline CTA |
| 02 | `understanding-cataract` | 1075:10464 | 02-understanding-cataract.html | Tab system (What is it? / Symptoms / Causes) with mobile summary box |
| 03 | `risk-factors` | 1075:10470 | 03-risk-factors.html | Tabbed risk-factor content (Age / Medical / Lifestyle / Environment) |
| 04 | `surgery-types` | 1075:10467 | 04-surgery-types.html | Single responsive tab system — 4 cataract surgery types (2×2 mobile / row desktop) |
| 05 | `patient-journey` | 1075:10483 | 05-patient-journey.html | Interactive stepper (Consultations & Diagnosis / Procedure / Quick Recovery / Post-Op Care) with progress line + clickable dots |
| 06 | `vision-types` → **Intraocular Lens** | 1075:10487 | 07-vision-types.html | "Intraocular Lens" heading + composed vision-scene image |
| 07 | `iol-types` | 1075:10484 | 06-iol-benefits.html | Single responsive tab system — 4 IOL types with body + image |
| 08 | `surgery-cost` | 1075:10518 | 08-surgery-cost.html | Surgery cost table (overlapping rounded bg rects + cost rows) |
| 09 | `disclaimer-leaf` | 1075:10471 | — *(inline only)* | Standalone "Disclaimer -" label leaf between surgery-cost and risks (no standalone component file) |
| 10 | `risks-complications` | 1075:10539 | 09-risks-prevention.html | 2 tab pills + dark numbered `<ol>` list on white bg (risks / prevention) |
| 11 | `why-cfs` | 1075:10490 | 10-why-choose-us.html | 4 hover USP cards (Why Choose Centre For Sight?) |
| 12 | `testimonials` | 1075:11271 | 11-testimonials.html | Patient testimonial carousel + photo collage (desktop) / card carousel (mobile) |
| 13 | `cataract-video` | 1075:10555 | 12-video.html | Surgery explainer video thumbnail (play baked into Figma thumb) |
| 14 | `doctor-cards` → **Eye Care Experts** | 1075:11323 | 13-eye-care-experts.html | Featured doctor card + horizontal scroll row of doctor cards |
| 15 | `centres-listing` → **Our Centres** | 1075:11589 | 14-centres.html | Centre cards (city image + name + count) + phone bar |
| 16 | `faq-section` | 1075:10540 | 15-faq.html | Accordion FAQ (7 expand/collapse rows) |
| 17 | `blogs` → **Vision Care Insights** | 1075:10512 | 16-blogs.html | 3 blog cards (image, title, excerpt, date/read-time meta) |
| 18 | `callback-form` | 1075:10496 | 17-callback-form.html | Request-a-callback form (name, mobile +91, submit) over branded background |

Shared chrome (utility bar, main nav, footer, sticky bar) is inlined directly in
`cataract.html`, identical to the homepage versions in `html/components/`.

## Notes

- **Order change vs the old inventory:** Intraocular Lens (`vision-types`) now
  precedes IOL types (`iol-types`); a new `disclaimer-leaf` section was added
  between Surgery Cost and Risks & Complications.
- All cataract-specific JS interactions (tabs, FAQ accordion, journey stepper,
  doctor carousel, symptom carousel) are consolidated in `js/cataract.js`.
- Mobile-specific layouts are handled in-file via Tailwind responsive prefixes
  (`sm:`, `md:`, `lg:`).
- Per-section pixel-fidelity status and residuals are tracked in the internal
  audit ledger `docs/_audit/cataract-audit.md` (not shipped in handover bundles).