# Royal Wellness Center — Website UI

A premium healthcare & wellness website for **Royal Wellness Center**, built with **React + Tailwind CSS + shadcn-style components**.

## Design Direction

- **Primary**: `#0F8A5F` (Emerald) — clinical, calm, trustworthy
- **Accent**: `#D4A857` (muted gold) — used sparingly for trust/premium markers
- **Display font**: Fraunces (soft, organic serif — restorative, not corporate-clinical)
- **Body font**: Inter
- **Signature element**: the `PulseDivider` — a heartbeat/pulse line used as a structural section divider, symbolizing the brand's dual identity (modern clinical monitoring + the body's natural rhythm, referencing the traditional therapies offered).
- **Cards**: asymmetric "organic" border-radius (`rounded-organic` / `rounded-organic-sm`) — large radius on two opposite corners instead of uniform pill-rounding, for a less templated feel.

## Getting Started

```bash
npm install
npm run dev
```

Then open `http://localhost:5173`.

## Project Structure

```
src/
├── components/
│   ├── ui/              # shadcn-style primitives (Button, Card, Dialog, Input, Select, etc.)
│   ├── layout/           # Header, Footer, Layout wrapper
│   ├── sections/         # Page-section blocks (HomeHero, StatsSection, CtaBanner, etc.)
│   └── shared/           # Reusable cross-page components (ServiceCard, DoctorCard, BookingDialog, etc.)
├── pages/                # One file per route
├── data/content.js       # All copy, services, doctors, testimonials, blog posts (swap for a CMS/API later)
├── hooks/useCountUp.js   # Animated stat counter on scroll-into-view
└── lib/utils.js          # cn() class-merge helper
```

## Pages (10/10 implemented)

| # | Page | Route | Notes |
|---|------|-------|-------|
| 1 | Home | `/` | Hero, trust strip, treatments preview, stats, why-us, doctors preview, testimonials, CTA |
| 2 | About Us | `/about` | Story, values, stats, trust strip |
| 3 | Treatments Listing | `/treatments` | Category-filterable grid of all 9 services |
| 4 | Treatment Details | `/treatments/:slug` | Hero, quick facts, benefits, process timeline, related doctor, related treatments |
| 5 | Doctors Listing | `/doctors` | Specialty-filterable doctor grid |
| 6 | Doctor Profile | `/doctors/:slug` | Bio, credentials, languages, treatments they perform |
| 7 | Before & After Gallery | `/gallery` | Drag-to-compare slider, treatment filter |
| 8 | Testimonials | `/testimonials` | Aggregate rating + full review grid |
| 9 | Blog | `/blog` + `/blog/:slug` | Category-filterable listing + detail page |
| 10 | Contact | `/contact` | Info cards, WhatsApp CTA, form, map placeholder |

## Key UI Requirements Mapped

- **Large hero sections** → `HomeHero.jsx`, `PageHeader.jsx`
- **Rounded cards** → `rounded-organic` utility across all card components
- **Premium typography** → Fraunces (display) + Inter (body), defined in `tailwind.config.js` and `index.css`
- **Smooth animations** → `fadeUp`, `floatSlow`, `pulseLine` keyframes; scroll-triggered count-up stats; hover micro-interactions on all cards; `prefers-reduced-motion` respected globally
- **Mobile-first** → all grids collapse to single/double column; mobile nav drawer in `Header.jsx`
- **Trust indicators** → `TrustStrip.jsx`, rating badges on doctor/testimonial cards
- **Statistics section** → `StatsSection.jsx` + `useCountUp` hook
- **WhatsApp CTA** → persistent floating button (`WhatsAppFloat.jsx`) + CTA banner button + Contact page card
- **Online consultation booking** → `BookingDialog.jsx`, triggered from header, hero, treatment pages, doctor profiles, and CTA banners

## Notes for Production

- Swap `src/data/content.js` for real CMS/API data.
- Replace Unsplash placeholder imagery with licensed clinic/patient photography (with consent for before/after images).
- Wire the Contact and Booking forms to a real backend/email service — they currently simulate submission client-side.
- Add a real map embed in place of the Contact page placeholder.
