# Drupal Mapping — CFS Cataract Speciality Page Handoff

This sheet maps each cataract page section to its HTML component file and the recommended Drupal 10 implementation target.

| Figma Section | HTML Component | Drupal Target | Notes |
|---|---|---|---|
| Hero banner | 01-hero-banner.html | Block or Paragraph type: "Speciality Hero" | Fields: heading, description, stats repeater, doctor image, CTA form embed; reusable across speciality pages |
| Understanding Cataract | 02-understanding-cataract.html | Paragraph type: "Tabbed Content" | Tab items as Paragraph repeaters; mobile symptoms carousel driven by JS array (replace with DOM-driven data) |
| Risk Factors | 03-risk-factors.html | Paragraph type: "Tabbed Cards" | Tab switching via `data-tabs`/`data-tab`/`data-panel` attributes; cards as Paragraph repeaters within each tab |
| Surgery Types | 04-surgery-types.html | Paragraph type: "Surgery Cards" | Surgery cards as Paragraph repeaters; grouped into two tab sets on desktop |
| Patient Journey | 05-patient-journey.html | Custom block: "Patient Journey" | Timeline stepper with `data-journey-stepper` attributes; milestone items as repeater fields; progress bar driven by JS |
| IOL Types & Benefits | 06-iol-benefits.html | Paragraph bundle: "IOL Cards" | IOL cards as Paragraph repeaters; grouped tab sets with cost/feature fields |
| Vision Types | 07-vision-types.html | Paragraph type: "Vision Comparison" | Visual comparison cards; simple image + text fields |
| Surgery Cost | 08-surgery-cost.html | Paragraph type or Custom block: "Cost Table" | Cost comparison table/cards; fields for surgery type, IOL type, price range |
| Risks & Complications | 09-risks-prevention.html | Paragraph type: "Tabbed Content" (reuse) | Desktop navy card with internal tabs; mobile separate tab layout; reuses tab switching pattern |
| Why Choose Us | 10-why-choose-us.html | Paragraph type: "USP Repeater" | Stat/icon cards as Paragraph repeaters with icon, number, and description fields |
| Testimonials | 11-testimonials.html | Block or Paragraph: Testimonial slider | Slider block referencing Testimonial content type via Views; `data-slider` attribute hooks for JS |
| Video | 12-video.html | Paragraph type: "Video Embed" | Single video URL field; rendered as responsive iframe |
| Eye Care Experts | 13-eye-care-experts.html | Views: Doctor content type | Views grid display with featured doctor + row; mobile carousel with JS-driven data (needs DOM-driven replacement for Drupal) |
| Centres | 14-centres.html | Views: Centre content type | Views row template; reuses homepage Centre content type and view |
| FAQ | 15-faq.html | Paragraph type: "FAQ Accordion" | FAQ items as Paragraph repeaters; accordion driven by `data-faq-item`/`data-faq-answer` attributes |
| Blogs | 16-blogs.html | Views: Blog content type | Teaser display mode; Views grid (desktop) / list (mobile); reuses homepage Blog view |
| Callback Form | 17-callback-form.html | Custom block: Webform | Drupal Webform module; fields: Name, Phone, Submit; AJAX submission; branded background wrapper |

## Shared Components (from Homepage)

The following homepage components are reused in the cataract page without modification:

| Component | Drupal Target | Notes |
|---|---|---|
| Utility Bar | Block in `header_top` region | Identical to homepage; site-wide block |
| Main Navigation | `menu.html.twig` / Header region | Identical to homepage; site-wide menu block |
| Footer | Footer region blocks | Identical to homepage; site-wide footer blocks |
| Sticky Bar | Custom block: "Sticky Actions" | Identical to homepage; site-wide fixed-position block |

## Region Map (Suggested)

```
header_top        -> Utility Bar (shared)
header            -> Main Navigation (shared)
content           -> 01-hero through 17-callback-form (as Speciality node Paragraphs)
footer_top        -> Footer (shared)
page_bottom       -> Sticky Bar (shared)
```

## Content Type Summary

| Content Type | Used By |
|---|---|
| Centre | 14-centres |
| Doctor / Expert | 13-eye-care-experts |
| Testimonial | 11-testimonials |
| Blog / Article | 16-blogs |

All other sections are implemented as Paragraph types attached to the Cataract Speciality node, giving editors full control over content without code changes.