# Drupal Mapping — CFS Homepage Handoff

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

| Figma Section | HTML Component | Drupal Target | Notes |
|---|---|---|---|
| Top utility strip | 01-utility-bar.html | Block in `header_top` region | Secondary menu block; hide via CSS at mobile breakpoint |
| Main navigation | 02-main-nav.html | `menu.html.twig` / Header region | Main menu block + separate CTA button block; hamburger toggled via JS |
| Hero banner | 03-hero-banner.html | Paragraph type: "Hero Banner" | Content fields: heading, subheading, stats (repeater), doctor image, CTA form embed |
| Centres listing | 04-centres-listing.html | Views: Centre content type | Views grid display with custom row template; phone bar as Views header/footer block |
| Specialities | 05-specialities.html | Paragraph type: "Specialities Tabs" or Views | Tab items as Paragraph repeaters; mobile accordion driven by `data-tab` attributes |
| Doctor cards | 06-doctor-cards.html | Views: Doctor content type | Two Views displays: featured (single) + scrollable row; JS slider on row display |
| Why Us | 07-why-us.html | Paragraph type: "Why Us" | Block or Paragraph with sub-fields for stat items and image slots |
| Journey | 08-journey.html | Paragraph type: "Timeline" | Milestone items as repeater Paragraphs; eye illustration as managed file field |
| Testimonials | 09-testimonials.html | Views: Testimonial content type | Slider-enabled block; navigation arrows wired to `data-slider` attribute hooks |
| CTA buttons | 10-cta-buttons.html | Custom block: "CTA Actions" | 3 link fields (label + URL); rendered as custom block template |
| International patients | 11-international.html | Paragraph type: "Split Content" | Image field (left) + text/body field (right); layout switchable via field |
| Accreditations | 12-accreditations.html | Views: Accreditation content type | Logo image field + alt text; Views unformatted list with custom row template |
| Blogs | 13-blogs.html | Views: Blog content type | Teaser display mode for cards; Views grid (desktop) auto-collapses to list (mobile) |
| Callback form | 14-callback-form.html | Block: Webform or Contact form | Drupal Webform module recommended; fields: Name, Phone, Submit; AJAX submission |
| Footer | 15-footer.html | Footer region blocks | Multiple blocks per footer sub-region: menu blocks, social links block, address block, copyright block |
| Sticky bar | 16-sticky-bar.html | Custom block: "Sticky Actions" | `position: fixed` block independent of footer region; separate visibility logic for desktop/mobile |

## Region Map (Suggested)

```
header_top        → 01-utility-bar
header            → 02-main-nav
content           → 03-hero-banner through 14-callback-form (as page node Paragraphs)
footer_top        → 15-footer (sub-regions)
page_bottom       → 16-sticky-bar
```

## Content Type Summary

| Content Type | Used By |
|---|---|
| Centre | 04-centres-listing |
| Doctor / Expert | 06-doctor-cards |
| Testimonial | 09-testimonials |
| Accreditation | 12-accreditations |
| Blog / Article | 13-blogs |

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