# CFS Homepage — Frontend Handover **Date:** 2026-06-04 **For:** CFS Drupal 10 theme team **Scope:** **Home Page only.** Remaining pages delivered separately. Clean HTML + Tailwind frontend handoff layer for the approved Figma homepage, structured for conversion into a Drupal 10 theme (Twig / blocks / Views / menus / Paragraphs). --- ## What's included ``` html/ index.html ← assembled homepage (preview + source of truth) components/ ← the 16 reusable section partials (the modular deliverable) 01-utility-bar.html 09-testimonials.html 02-main-nav.html 10-cta-buttons.html 03-hero-banner.html 11-international.html 04-centres-listing.html 12-accreditations.html 05-specialities.html 13-blogs.html 06-doctor-cards.html 14-callback-form.html 07-why-us.html 15-footer.html 08-journey.html 16-sticky-bar.html css/custom.css ← the only custom CSS (rules utilities can't express) js/main.js ← minimal vanilla JS (interactions; data-* hooks) assets/ ← images + icons referenced by the page ``` `index.html` and `html/components/*.html` are kept in sync — each section in `index.html` is delimited by ` … `, and the matching `components/NN-name.html` is that same markup as a standalone partial. (Doctor cards: `index.html` uses `06a`/`06b`; the partial combines both into `06-doctor-cards.html`.) ## No build step — Tailwind via CDN Per the client's request there is **no `tailwind.config.js` and no compiled CSS**. Each page's `` loads `https://cdn.tailwindcss.com/3.4.16` + `css/custom.css`; design values are written as **arbitrary-value utility classes** (`bg-[#2b286f]`, `text-[69px]`, `rounded-[7px]`, `font-['Poppins',sans-serif]`). Nothing to compile. If the Drupal theme prefers tokens, port these values into its own `theme.extend` / SCSS. ## Preview From the bundle root: ```bash python3 -m http.server 8765 # then open http://localhost:8765/html/index.html ``` ## Key conventions (for Drupal theming) - **Modular sections** — each `components/NN-*.html` maps cleanly to a Block / Paragraph / View / region. - **CMS-friendly `

`** — paragraph text carries no classes; styling lives on the wrapper, with `cms-*` helper classes (in `css/custom.css`) for properties that don't inherit (line-clamp, underline, etc.). Safe for CMS rich-text replacement. - **JS hooks are stable `data-*` attributes** — `data-accordion` (specialities), `data-slider` / `data-carousel` (doctors, testimonials, centres), `data-sticky-action` (sticky bar), `data-menu` (mobile nav). No frameworks/jQuery. - **Responsive** — mobile-first; the `lg:` prefix (≥1024px) is the desktop layout. - **Repeatable lists** (centres, doctor cards, blogs, accreditation logos, testimonials) are clean sibling card structures — no fixed-count or `nth-child` dependencies. ## Notes - **Blog cards** use placeholder copy + two Figma thumbnail images (the 3rd card reuses the first). Real thumbnails/titles come from the CMS. - `assets/` is the full shared image/icon library; the homepage uses the bulk of it.