# Component Inventory — CFS Homepage

All 16 homepage components delivered as standalone HTML + Tailwind CSS files.
Located in: `html/components/`

| # | Component File | Section Name | Description |
|---|---|---|---|
| 01 | 01-utility-bar.html | Top Utility Bar | Gray strip with secondary navigation links, hidden on mobile |
| 02 | 02-main-nav.html | Main Navigation | Header with logo, nav items, CTA button, mobile hamburger menu |
| 03 | 03-hero-banner.html | Hero Banner | Welcome heading, stats, doctor image, phone CTA form, floating action cards |
| 04 | 04-centres-listing.html | Centres Listing | Grid of location cards with city images, hover counts, phone bar |
| 05 | 05-specialities.html | Eye Care Specialities | Interactive tab interface with specialty descriptions, mobile accordion |
| 06 | 06-doctor-cards.html | Doctor/Expert Cards | Featured doctor card + scrollable doctor card row with slider |
| 07 | 07-why-us.html | Why Us / USP | Asymmetric grid with content card, stats, images |
| 08 | 08-journey.html | Journey Timeline | Horizontal timeline with milestones and eye illustration |
| 09 | 09-testimonials.html | Testimonials | Quote carousel with patient photos and navigation |
| 10 | 10-cta-buttons.html | CTA Action Buttons | Three call-to-action buttons row |
| 11 | 11-international.html | International Patients | Split-content section with text and image |
| 12 | 12-accreditations.html | Accreditations | Logo strip with certification items |
| 13 | 13-blogs.html | Blog Cards | Blog post card grid (desktop) / compact list (mobile) |
| 14 | 14-callback-form.html | Callback Form | Contact form with name, phone, submit CTA |
| 15 | 15-footer.html | Footer | Regionized footer with links, social, address, copyright |
| 16 | 16-sticky-bar.html | Sticky Bottom Bar | Fixed action bar (chat bubble desktop, task bar mobile) |

## Notes

- Each component is self-contained: it includes its own `<style>` block for custom CSS not expressible in Tailwind utilities, and a `<script>` block for any JS interactions.
- 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:`).
- No external JS dependencies beyond what is noted in `integration-notes.md`.