# Innov Eyes Page — Component Inventory

**Page file:** `html/innov-eyes.html`
**Components dir:** `html/innov-eyes-components/`

22-section treatment landing page. Most sections are bespoke for this page; 4 patterns reuse existing components (chip tabs, FAQ, callback form, hero callback shape).

## Components used

| # | Section | File | Notes |
|---|---|---|---|
| 1 | Top utility bar | `html/components/01-utility-bar.html` | Shared verbatim |
| 2 | Main navigation | `html/components/02-main-nav.html` | Active = Specialities |
| 3 | Breadcrumb | `01-breadcrumb.html` | New |
| 4 | Hero with embedded callback + 3-stat row | `02-hero-banner.html` | Hero callback shape from centre-individual |
| 5 | See Beyond 6/6 Vision (text + image) | `03-see-beyond-6-6.html` | New |
| 6 | Vision Problems explainer (5 yellow-framed cards) | `04-vision-problems.html` | New |
| 7 | What Makes Different (2x2 purple cards) | `05-different-cards.html` | New |
| 8 | What Is The Surgery (3 yellow chip cards) | `06-what-is.html` | New |
| 9 | 7-step procedure stepper + Step 1 detail | `07-procedure-stepper.html` | New |
| 10 | Core Technology (4 chip tabs + image + body) | `08-core-technology.html` | Reuses `[data-tab-swap]` JS |
| 11 | Specifications & Technical Highlights table | `09-specifications-table.html` | New |
| 12 | Benefits (bar chart + 7 cards) | `10-benefits.html` | New (CSS-only bar chart) |
| 13 | Eligibility 2-card + CTA bar | `11-eligibility.html` | New |
| 14 | Outcomes + Recovery Timeline | `12-outcomes-recovery.html` | New |
| 15 | Risks & Safety | `13-risks-safety.html` | New |
| 16 | Cost banner ₹1,30,000 + 5 factors | `14-cost-banner.html` | New |
| 17 | Comparison table (5-col) | `15-comparison-table.html` | New |
| 18 | Cost comparison table | `16-cost-comparison-table.html` | New |
| 19 | Why Choose CFS (purple section + 4 cards + CTA) | `17-why-choose-cfs.html` | New |
| 20 | FAQ accordion (6 items) | `18-faq.html` | Native `<details>` |
| 21 | Callback form | `19-callback-form.html` | Cross-page copy of `blogs-components/10-callback-form.html` |
| 22 | Footer | `html/components/15-footer.html` | Shared verbatim |
| 23 | Sticky bottom bar | `html/components/16-sticky-bar.html` | Shared verbatim |

## Design tokens

No new tokens. New patterns:
- CSS-only bar chart (`linear-gradient(180deg, #2B286F 0%, #534DD5 100%)` fill)
- Numbered horizontal stepper (active in `bg-accent`, inactive `bg-[#d9d9d9]`)
- 5-col comparison table with InnovEyes column highlighted in `bg-accent`

## JavaScript hooks

Reuses existing `[data-tab-swap]` handler for the Core Technology section. No new JS.

## Dynamic content readiness

| Requirement | How this page meets it |
|---|---|
| Variable speciality content | Each section is a self-contained partial; Drupal can paginate by adding paragraph references |
| Variable steps in procedure | 7-step stepper hard-coded; Drupal can render N circles via Twig loop |
| Variable comparison table rows | Grid-based table; rows can be added/removed |
| Variable cost factors | Grid columns can adapt 2/3/5-col based on count |
| FAQ count | Native `<details>` list, any count works |