# Component Inventory — CFS Cataract Speciality Page

All 17 cataract page components delivered as standalone HTML + Tailwind CSS files.
Located in: `html/cataract-components/`

| # | Component File | Section Name | Description |
|---|---|---|---|
| 01 | 01-hero-banner.html | Hero Banner | Cataract page hero with heading, description, doctor image, stats, and CTA form |
| 02 | 02-understanding-cataract.html | Understanding Cataract | Tab-based content explaining what cataracts are, with symptoms carousel on mobile |
| 03 | 03-risk-factors.html | Risk Factors | Tabbed risk factor cards (Age, Medical, Lifestyle, Other) |
| 04 | 04-surgery-types.html | Types of Cataract Surgeries | Tabbed surgery type cards grouped into two sets with descriptions and images |
| 05 | 05-patient-journey.html | The Patient Journey | Interactive stepper (Consultations, Procedure, Recovery, Post-Op Care) with progress bar |
| 06 | 06-iol-benefits.html | Types of IOL & Their Benefits | Tabbed IOL type cards grouped into two sets with cost and feature details |
| 07 | 07-vision-types.html | Vision Types | Visual comparison section for different vision correction outcomes |
| 08 | 08-surgery-cost.html | Surgery Cost | Cost comparison table/cards for different surgery and IOL options |
| 09 | 09-risks-prevention.html | Risks & Complications | Desktop navy card with tabbed content; mobile tabbed layout for risks and prevention |
| 10 | 10-why-choose-us.html | Why Choose Centre For Sight? | USP cards with stats, icons, and differentiators |
| 11 | 11-testimonials.html | Testimonials | Patient testimonial slider with photo collage (desktop) and card carousel (mobile) |
| 12 | 12-video.html | Cataract Surgery Video | Embedded YouTube video player for surgery explainer content |
| 13 | 13-eye-care-experts.html | Eye Care Experts | Featured doctor card with mobile carousel + doctor grid row |
| 14 | 14-centres.html | Our Centres | Location cards grid with city images and contact details |
| 15 | 15-faq.html | Frequently Asked Questions | Accordion-style FAQ with expand/collapse toggle per item |
| 16 | 16-blogs.html | Blog Posts | Blog card grid (desktop) / compact list (mobile) for cataract-related articles |
| 17 | 17-callback-form.html | Callback Form | Contact form with name, phone, submit CTA over branded background |

## Notes

- Components are assembled into the full page at `html/cataract.html`.
- Shared components (utility bar, main nav, footer, sticky bar) are included directly in `cataract.html` rather than as separate component files — they are identical to the homepage versions in `html/components/`.
- All cataract-specific JS interactions (tabs, FAQ accordion, journey stepper, doctor carousel, symptom carousel) are consolidated in `js/cataract.js`.
- Components are numbered in page order (top to bottom) to aid assembly.
- Mobile-specific layouts are handled within the same file via Tailwind responsive prefixes (`sm:`, `md:`, `lg:`).