# Lumière Salon — Website UI Kit

## Overview
A high-fidelity interactive prototype of the Lumière Salon website. Click-through from homepage → booking → shop → stylist profiles → services.

## Design Width
**1200px** max content width, fluid layout. Designed for desktop-first.

## Screens Covered
| Screen | Description |
|--------|-------------|
| Home | Hero + services teaser + stylist teaser + product teaser + testimonial + CTA |
| Stylists | Full team roster with bios, specialties, and individual booking CTAs |
| Services | Full price list across 5 service categories |
| Shop | Product grid with category filters and add-to-cart |
| Booking Flow | 4-step appointment booking (stylist → service → date/time → details → confirmation) |

## Components
| File | Exports |
|------|---------|
| `Header.jsx` | `Header` — sticky nav, dark/light mode based on scroll/page |
| `Hero.jsx` | `Hero`, `ServicesSection`, `StylistTeaser`, `ProductTeaser`, `TestimonialSection` |
| `BookingFlow.jsx` | `BookingFlow` — full 4-step booking with confirmation state |
| `Shop.jsx` | `Shop` — filterable product grid with cart state |
| `StylistCard.jsx` | `StylistsPage`, `ServicesPage` |
| `Footer.jsx` | `Footer` |

## Usage
Open `index.html` directly. All components are loaded via Babel script tags.
The page persists its current page in localStorage so refreshes return you to the same view.

## Fonts (Google Fonts — no local files needed)
- **Playfair Display** — display, headings
- **DM Sans** — body, UI
- **Cormorant Garamond** — pull quotes, italic accents
