The Red Den

# Production-Ready Prompt: "The Red Den" Pet Grooming & Play

Build a high-end, single-page React landing page for a premium pet grooming and activity center. The aesthetic is "Bold Red Vibe"—energetic, modern, and luxury-focused.

### 1. Core Technology Stack
- **Framework:** React (Vite) with TypeScript.
- **Styling:** Tailwind CSS (Utility-first).
- **Icons:** Lucide-react (thin stroke).
- **Animation:** Framer Motion (Scroll-linked and gesture-based).
- **Images:** High-resolution Unsplash URLs.

### 2. Design System & Aesthetics
- **Color Palette:** 
 - Primary: `bg-red-600` (#DC2626) / `text-red-600`.
 - Accent: `bg-rose-500` (#F43F5E).
 - Neutral: `bg-slate-950` (Deep Black/Blue), `text-slate-100`.
- **Typography:** `font-sans` (Inter/system-ui) for body; `font-black` uppercase for headings.
- **Visual Style:** Glassmorphism, heavy shadows, and high-contrast red-on-dark elements.

### 3. Section-By-Section Implementation
- **Custom Cursor:** Implement a `motion.div` paw icon (`PawPrint` icon) that follows the mouse with a spring-physics lag.
- **Navbar:** Sticky blur (`backdrop-blur-md`) with a "Book Now" button in `bg-red-600`.
- **Hero Section:** 
 - Left: Massive "RED VIBE" headline with `initial={{ x: -100, opacity: 0 }}`.
 - Right: Floating image of a groomed dog (Unsplash: `https://images.unsplash.com/photo-1516734212186-a967f81ad0d7`).
- **Services Grid:** 3-column layout using `hover:scale-105` transitions.
 - **Grooming:** `Scissors` icon.
 - **Playing Ground:** `Trees` icon.
 - **Exercise:** `Activity` icon.
- **Motion Gallery:** Horizontal scroll container using `useTransform` to move images as the user scrolls vertically.

### 4. Animations & Micro-Interactions
- **Scroll Reveals:** Use `whileInView` for all sections with `viewport={{ once: false }}`.
- **Hover States:** Buttons should expand and glow (`shadow-[0_0_20px_rgba(220,38,38,0.5)]`).
- **Parallax:** Apply subtle `y` offsets to background decorative red circles.
- **Staggered Children:** Use `staggerChildren: 0.1` for service cards.

### 5. Technical Requirements
- **Responsiveness:** Mobile-first; stack columns at `md` breakpoint.
- **Performance:** Use `framer-motion` features like `LazyMotion` if possible.
- **Code Quality:** Functional components, clean Tailwind nesting, and descriptive variable names.
- **Assets:** Use `https://images.unsplash.com/photo-1535268647677-300dbf3d78d1` for the exercise section and `https://images.unsplash.com/photo-1583511655857-d19b40a7a54e` for the playground.