Pets Walk

# Production Prompt: Build "Pet Walk" Community Social Platform

You are an elite principal UI/UX designer and staff frontend React engineer. Build a production-ready, hyper-engaging, fully responsive animated landing page for **"Pet Walk"**—a premier social club where pet lovers unite by specific breed/species (e.g., Golden Retrievers, French Bulldogs, British Shorthairs, Shiba Inus) for scheduled weekend park walks, social agility, play sessions, and community story sharing.

The platform must balance high-converting design aesthetics, playful color gimmicks, polished micro-interactions, robust interactive state management, and real functional UI modules.

---

## 1. Core Technology Stack

- **Framework**: React 18+ (Vite or Next.js App Router compatible) with TypeScript (`.tsx`).
- **Styling**: Tailwind CSS v3.4+ configured with custom gradients, extended palette, and soft shadows.
- **Icons**: `lucide-react` (e.g., `Dog`, `Cat`, `Calendar`, `MapPin`, `Sparkles`, `Play`, `Pause`, `Users`, `Flame`, `Heart`, `Filter`, `ArrowRight`, `ShieldCheck`).
- **Animations**: `framer-motion` (utilizing `AnimatePresence`, `motion.div`, `whileHover`, `whileTap`, and scroll triggers).
- **Sound / Micro-delights**: Web Audio API synthesized soft clicks or pop sounds for interactions (optional, non-blocking).

---

## 2. Design System & Aesthetics

### Color Palette (Breed Playful & Premium Park Vibe)
- **Primary Brand / Meadow Emerald**: `#0F766E` (`teal-700`), hover `#115E59` (`teal-800`).
- **Warm Park Gold / Energy**: `#F59E0B` (`amber-500`), accents `#FEF3C7` (`amber-100`).
- **Playful Coral / Social Pulse**: `#F43F5E` (`rose-500`), highlights `#FFE4E6` (`rose-100`).
- **Sky Vista**: `#0EA5E9` (`sky-500`), subtle tags `#E0F2FE` (`sky-100`).
- **Neutrals / Canvas**:
  - Light mode canvas: `#FAFAF9` (`stone-50`), cards `#FFFFFF`.
  - Dark mode accents / contrast slate: `#0F172A` (`slate-900`) for premium typography and dark cards.

### Dynamic Color Gimmicks (Breed-Based Theme System)
Implement a dynamic CSS/Tailwind color-token system that switches background glows and accent badges according to selected pet types:
- **Golden Retrievers**: Warm Sunburst Amber (`from-amber-400/20 via-orange-300/10 to-transparent`).
- **French Bulldogs**: Playful Neon Coral (`from-rose-400/20 via-pink-300/10 to-transparent`).
- **Shiba Inus / Spitz**: Autumn Tangerine (`from-orange-400/20 via-amber-300/10 to-transparent`).
- **British Shorthairs / Feline Walkers**: Lavender Twilight (`from-indigo-400/20 via-purple-300/10 to-transparent`).

### Typography & Structure
- **Headings**: `font-sans font-extrabold tracking-tight` (e.g., Inter or Plus Jakarta Sans style).
- **Subtitles & Badges**: `font-medium uppercase tracking-wider text-xs`.
- **Card Radii**: `rounded-3xl` for high-end, friendly organic aesthetics.

---

## 3. Section-By-Section Implementation Guide

### A. Dynamic Sticky Navigation (`Navbar.tsx`)
- **Left**: Custom SVG animated paw icon + "Pet Walk" brand in `#0F766E` with an amber community dot.
- **Center**: Links (`Explore Breeds`, `Park Schedule`, `Activity Reels`, `Stories`, `Safety & Rules`) with a sliding hover background pill.
- **Right**:
  - "Upcoming Walk: Corgi Stride in Central Park (Sat 9AM)" interactive marquee ticker.
  - "Join Next Walk" CTA button (`bg-amber-500 hover:bg-amber-600 text-stone-900 font-bold px-5 py-2.5 rounded-full shadow-lg shadow-amber-500/25 transition-all`).

### B. Hero Section with Live Breed-Selector Stage (`Hero.tsx`)
- **Headline**: "Walk Together by Breed. Bound by Love."
- **Subheadline**: "The world's first breed-specialized routine park walk network. Bring your Golden, Frenchie, or Adventure Cat to tailored weekend strolls, obstacle playdays, and pet parent meetups."
- **Interactive Breed Quick-Switcher**: A horizontal floating carousel with breed pills (Golden Retriever, French Bulldog, Corgi, Shiba Inu, Maine Coon, Dachshund). Clicking changes the hero hero preview card, accent gradients, and next scheduled park rendezvous.
- **Hero Visual & Video Loop Stage**:
  - Split screen or layered 3D-card composition.
  - Embedded responsive HTML5 background video looping seamlessly:
    - URL: `https://assets.mixkit.co/videos/preview/mixkit-dog-running-in-the-grass-with-its-owner-41584-large.mp4` (or similar verified MP4 video).
    - Attributes: `autoPlay loop muted playsInline`.
  - Floating dynamic badge: *"Frenchie Sun-Stroll: 38 Bulldogs Registered for Saturday @ Central Meadow"*.
- **Quick CTAs**: "Find Your Breed's Walk" (Primary), "Register Your Pack" (Glassmorphism secondary button).

### C. Video Story Reels: Layered Multi-Video Activity Showcase (`VideoStories.tsx`)
- **Concept**: A staggered, multi-layered "Story Arc" featuring multiple looping mini-videos in styled phone/squircle frames displaying previous successful walks.
- **Layout**: 4 staggered, overlapping horizontal cards with continuous auto-looping silent video previews, badge overlays, walk titles, and parent quotes.
- **Video Elements**:
  1. **Golden Retriever Lake Splash Walk**:
     - Video: `https://assets.mixkit.co/videos/preview/mixkit-golden-retriever-dog-sitting-in-a-field-41582-large.mp4`
     - Story: *"64 Goldens retrieved together at Lake Shore Greenway."*
  2. **French Bulldog Waddle & Chill**:
     - Video: `https://assets.mixkit.co/videos/preview/mixkit-french-bulldog-lying-on-a-wooden-floor-41604-large.mp4`
     - Story: *"Paced 1.2-mile slow crawl with cooling vests and hydration carts."*
  3. **Corgi Low-Rider Sprint Day**:
     - Video: `https://assets.mixkit.co/videos/preview/mixkit-corgi-dog-playing-in-the-park-41583-large.mp4`
     - Story: *"Agility hops, photo booths, and obstacle runs."*
  4. **Adventure Cat Leash Walk**:
     - Video: `https://assets.mixkit.co/videos/preview/mixkit-cat-walking-in-a-grassy-field-41581-large.mp4`
     - Story: *"Enclosed botanical sensory walk for harnessed felines."*
- **Controls & Interactions**: Hovering over a frame scales it up (`scale-105`), brings it to the top z-index, and enables a custom overlay showing walk distance, temperature, and organizer badge.

### D. Interactive Routine Walk Schedule & Filter Module (`WalkSchedule.tsx`)
- **Filter Tabs**:
  - Filter by Pet Type: All Pets, Dogs, Cats, Small Breeds, High-Energy Breeds.
  - Filter by City/Park: Central Park (NY), Golden Gate Park (SF), Zilker Park (Austin).
- **Interactive Event Cards Matrix**:
  - Each card must display:
    - Breed tag with custom color gimmick badge (e.g., `bg-amber-100 text-amber-800`).
    - Title (e.g., *"Shiba Inu Sunset Stroll & Social"*).
    - Date & Time: *"Saturday, Oct 14 • 10:00 AM - 11:30 AM"*.
    - Park Pin: *"Pine Ridge Meadow, Sector 3"*.
    - Pace Level: *"Gentle Sniff Walk"* vs *"High-Sprint Fetch Session"*.
    - Community Count: Avatar group pile (`+42 pets confirmed`) + RSVP modal trigger button.
    - Weather & Vibe index indicator (e.g., "72°F Sunny • Pack Lead: Sarah & Mochi").

### E. Rich Media Grid & Community Photo Album (`CommunityGallery.tsx`)
- High-res Masonry/Bento Grid containing curated Unsplash pet imagery:
  - Golden Retriever pack: `https://images.unsplash.com/photo-1552053831-71594a27632d?auto=format&fit=crop&w=800&q=80`
  - French Bulldog social: `https://images.unsplash.com/photo-1583511655857-d19b40a7a54e?auto=format&fit=crop&w=800&q=80`
  - Corgi running in park: `https://images.unsplash.com/photo-1612536057832-2ff7ead58194?auto=format&fit=crop&w=800&q=80`
  - Bengal/Adventure cat on leash: `https://images.unsplash.com/photo-1548802673-380ab8ebc7b7?auto=format&fit=crop&w=800&q=80`
  - Shiba Inu gathering: `https://images.unsplash.com/photo-1583337130417-3346a1be7dee?auto=format&fit=crop&w=800&q=80`
  - Playful puppy park: `https://images.unsplash.com/photo-1543466835-00a7907e9de1?auto=format&fit=crop&w=800&q=80`
- **Interactive Lightbox / Reaction Bar**: Users can click "Send Virtual Treat", "Love", or "Bookmark Walk Route".

### F. How It Works & Community Safety Protocols (`HowItWorks.tsx`)
- 4-step interactive diagram with micro-animations:
  1. **Pick Your Pet's Breed & Temperament**: Match with pets of equal stride and energy.
  2. **RSVP & Review Route**: View park water points, shade coverage, and meetup tree locations.
  3. **Arrive at the Color Zone**: Spot our color-coded Pet Walk flags in the park.
  4. **Share, Play & Trade Tips**: Certified volunteer leads provide group safety and treat bars.

### G. Live RSVP & Community Registration Modal / Drawer (`RsvpModal.tsx`)
- Functional interactive state:
  - Form inputs: Owner Name, Pet Name, Pet Breed dropdown, Vaccination status checkbox (`Required for community safety`), Park selection.
  - Success state: Renders a printable/savable digital **"Pet Walk VIP Badge"** with a QR code mock, selected breed icon, and event countdown.

### H. Footer (`Footer.tsx`)
- Newsletter sign-up for new breed walk notifications.
- Park directory, breed directory, emergency vet network links, and copyright text with playful paw-print background accents.

---

## 4. Animations & Micro-Interactions (`framer-motion`)

- **Page-Load Staggering**:
  ```tsx
  const containerVariants = {
    hidden: { opacity: 0 },
    visible: {
      opacity: 1,
      transition: { staggerChildren: 0.12, delayChildren: 0.2 },
    },
  };
  const itemVariants = {
    hidden: { y: 24, opacity: 0 },
    visible: { y: 0, opacity: 1, transition: { type: "spring", stiffness: 120 } },
  };
  ```
- **Layered Video Cards**: Use `whileHover={{ y: -8, scale: 1.03 }}` with transition spring `{ stiffness: 300, damping: 20 }`.
- **Badge Pulsing**: Amber and Rose notification dots animated with `animate={{ scale: [1, 1.25, 1], opacity: [0.8, 1, 0.8] }}` repeating indefinitely.
- **Breed Tab Filter Layout Transition**: Smoothly reposition items using Framer Motion's `layout` prop on schedule cards.

---

## 5. Technical Requirements & Deliverables

1. **Self-Contained File Structure**: Provide the code broken down logically (e.g., `PetWalkLanding.tsx` as the main orchestrator with modular sub-components, or a clean monolithic single-file showcase if required for sandbox execution).
2. **State Management**:
   - `selectedBreed`: string ('all' | 'golden' | 'frenchie' | 'corgi' | 'cat' | 'shiba')
   - `activeFilter`: string ('all' | 'dogs' | 'cats' | 'weekend')
   - `isRsvpOpen`: boolean (modal open/close state)
   - `registeredEvents`: array of user-registered event IDs
3. **Accessibility & Video Optimization**:
   - Every video must have `muted`, `playsInline`, `autoPlay`, and `loop`.
   - Provide fallback placeholder covers for slower network connections.
   - Screen-reader labels (`aria-label`) on all icon-only buttons.
4. **Tailwind Best Practices**:
   - Use arbitrary Tailwind values cleanly (e.g., `backdrop-blur-md bg-white/80 border border-white/30`).
   - Ensure complete responsiveness across mobile (`sm:`), tablet (`md:`), and desktop (`lg:`, `xl:`).

Generate the full, complete, and un-truncated React code implementing this entire landing page now.