Cadence Wellness Center

An exclusive wellness center, please add the image and change the color to luxry color, jade color, wood, gold and use this prompt, # Act as an Elite Full-Stack Developer & Award-Winning UI Designer

Build a premium, production-ready, single-page React landing page for **"Cadence"**, a luxury wellness center and meditation app. The aesthetic must be editorial, minimalist, and high-end, utilizing a "Quiet Luxury" design language.

## 1. Core Technology Stack
- **Framework:** Vite + React 19 + TypeScript
- **Styling:** Tailwind CSS 3.4+
- **Animations:** Framer Motion (for complex transitions)
- **Icons:** Lucide-react
- **Typography:** Manrope (Google Fonts: 300, 400, 500, 700)

## 2. Design System & Aesthetics
- **Color Palette:**
  - `brand.cream`: #F7F5F1 (Primary Background)
  - `brand.sage`: #8AA088 (Primary Action/CTA)
  - `brand.clay`: #C9A88A (Accents/Secondary)
  - `brand.ink`: #2A2E2A (Primary Text/Headings)
- **Tailwind Configuration:**
  - Extend `fontFamily` to set `sans: ['Manrope', 'sans-serif']`.
  - Add custom colors to `theme.extend.colors`.
- **Global Styles:**
  - Apply `-webkit-font-smoothing: antialiased` to the body.
  - Set `html { scroll-behavior: smooth; }`.
  - Ensure `body { background-color: #F7F5F1; overflow-x: hidden; color: #2A2E2A; }`.

## 3. Section-By-Section Implementation

### A. Navbar
- **Behavior:** Fixed top, `w-full`, `backdrop-blur-md`, `bg-brand-cream/80`.
- **Logo:** A minimalist "Breathing Circle" SVG. Animate its scale from `1` to `1.12` over a `4s` ease-in-out infinite loop.
- **Navigation:** Links for "Practice", "Sound", and "Pricing" using `brand.ink`.
- **CTA:** "Begin trial" button styled as a `brand.sage` pill with white text and a subtle hover scale.

### B. Hero (The Breathing Center)
- **Layout:** Flex column, center-aligned, minimum `100vh`.
- **Typography:** H1 "Find your cadence." using `font-light` (300), `text-brand-ink`, and `text-[clamp(2.8rem,7vw,5.5rem)]`.
- **Text Animation:** Split the H1 into words. Use Framer Motion to stagger a `fade + blur-in` effect (stagger: 0.12s).
- **Background Visual:** Three concentric SVG rings behind the text. 
  - **Animation:** Scale `1` to `1.4`, Opacity `1` to `0`. Stagger the rings by `1s` each in a `4s` infinite breathing loop.
  - **Glow:** A soft radial gradient pulse synchronized with the ring expansion.
- **Subtext:** A refined 2-line description of the wellness center.
- **Image:** Use `https://images.unsplash.com/photo-1544367567-0f2fcb009e0b?auto=format&fit=crop&q=80&w=1200` for a background texture or hero element.

### C. Ritual (Scroll-Driven Progress)
- **Mechanism:** Use Framer Motion `useScroll` and `useTransform`.
- **Visual:** A large, thin-stroke SVG circle that fills its border (`stroke-dashoffset`) based on vertical scroll progress.
- **Content:** As the user scrolls, 4 distinct steps (e.g., "Breath", "Focus", "Release", "Align") cross-fade in/out beside the circle.
- **Icons:** Use `Wind`, `Focus`, `Moon`, `Sun` from `lucide-react`.

### D. Soundscapes (Interactive Cards)
- **Grid:** 3-column responsive grid of soundscape cards (e.g., "Forest Rain", "Deep Zen").
- **Card Design:** Soft corners, `bg-white/40`, subtle `brand.clay` border.
- **Micro-Interaction:** On hover, display a Waveform SVG. The waveform bars should animate their `height` randomly every `0.4s` to simulate active audio.
- **Functionality:** A "Play" button that toggles a visual "Active" state (no actual audio file needed, just UI feedback).

### E. Pricing
- **Layout:** Two tiers ("Essential" and "Ritual").
- **Style:** Soft cards with `backdrop-blur`. 
- **Hover:** Implement a "lift" effect using `whileHover={{ y: -10 }}` and a soft shadow increase.
- **CTA:** Sage buttons for the premium tier, Clay for the basic.

### F. Footer
- **Content:** Minimalist links, social icons (`Instagram`, `Twitter`), and a newsletter signup with a `brand.ink` underline input style.

## 4. Animations & Micro-Interactions
- **Shared Easing:** Use a custom cubic-bezier `[0.45, 0, 0.55, 1]` for all transitions.
- **Reveal Logic:** Use `useInView` with a `0.2` margin to trigger section entries.
- **Accessibility:** Wrap breathing and waveform animations in a check for `prefers-reduced-motion`. If true, disable the infinite scaling/height animations.

## 5. Technical Requirements
- **Responsive Design:** 
  - Mobile: Stacked layout, hidden nav links (hamburger menu).
  - Desktop: Full grid and side-by-side reveals.
- **Code Quality:** 
  - Use functional components with TypeScript interfaces for props.
  - Modularize sections into separate files (Hero.tsx, Ritual.tsx, etc.).
  - Use Tailwind `group` and `peer` classes for complex hover states.
- **Images:** Use high-quality Unsplash URLs for all placeholders:
  - Meditation: `https://images.unsplash.com/photo-1506126613408-eca07ce68773?auto=format&fit=crop&q=80&w=800`
  - Spa/Wellness: `https://images.unsplash.com/photo-1540555700478-4be289fbecef?auto=format&fit=crop&q=80&w=800`

**Output the complete code for `App.tsx`, `tailwind.config.js`, and the main component files.**