{"success":true,"template":{"id":"wellness","name":"Wellness","description":"A clean, trustworthy design with calming colors and professional layouts. Perfect for medical offices, dental practices, spas, and wellness providers."},"sources":[{"path":"src/app/preview/wellness/globals.css","code":"@import 'tailwindcss';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  /* Wellness template - Warm, luxurious spa palette inspired by Zephyr Spa */\n  --background: oklch(0.985 0.008 85);\n  --foreground: oklch(0.25 0.02 60);\n  --card: oklch(0.995 0.005 85);\n  --card-foreground: oklch(0.25 0.02 60);\n  --popover: oklch(0.99 0.005 85);\n  --popover-foreground: oklch(0.25 0.02 60);\n\n  /* Warm brown/amber primary - luxurious, calming */\n  --primary: oklch(0.45 0.08 55);\n  --primary-foreground: oklch(0.98 0.005 85);\n\n  /* Cream/beige secondary - soft, warm */\n  --secondary: oklch(0.94 0.015 80);\n  --secondary-foreground: oklch(0.35 0.04 60);\n\n  /* Soft warm muted tones */\n  --muted: oklch(0.93 0.01 75);\n  --muted-foreground: oklch(0.50 0.03 60);\n\n  /* Gold accent - elegant, spa-like */\n  --accent: oklch(0.70 0.14 75);\n  --accent-foreground: oklch(0.20 0.02 60);\n\n  /* Red destructive */\n  --destructive: oklch(0.55 0.22 25);\n  --destructive-foreground: oklch(0.99 0.002 85);\n\n  /* Borders */\n  --border: oklch(0.90 0.01 75);\n  --input: oklch(0.90 0.01 75);\n  --ring: oklch(0.45 0.08 55);\n\n  /* Chart colors - warm palette */\n  --chart-1: oklch(0.45 0.08 55);\n  --chart-2: oklch(0.70 0.14 75);\n  --chart-3: oklch(0.55 0.10 40);\n  --chart-4: oklch(0.60 0.08 90);\n  --chart-5: oklch(0.50 0.12 30);\n\n  /* Elegant, slightly more rounded radius */\n  --radius: 0.75rem;\n\n  /* Sidebar styling */\n  --sidebar: oklch(0.97 0.01 80);\n  --sidebar-foreground: oklch(0.25 0.02 60);\n  --sidebar-primary: oklch(0.45 0.08 55);\n  --sidebar-primary-foreground: oklch(0.98 0.005 85);\n  --sidebar-accent: oklch(0.93 0.015 80);\n  --sidebar-accent-foreground: oklch(0.35 0.04 60);\n  --sidebar-border: oklch(0.90 0.01 75);\n  --sidebar-ring: oklch(0.45 0.08 55);\n\n  /* Warm, subtle shadows */\n  --shadow-x: 0px;\n  --shadow-y: 4px;\n  --shadow-blur: 20px;\n  --shadow-spread: 0px;\n  --shadow-opacity: 0.08;\n  --shadow-color: #8b7355;\n}\n\n@theme inline {\n  --font-sans: var(--font-geist-sans);\n  --font-mono: var(--font-geist-mono);\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n  --color-chart-1: var(--chart-1);\n  --color-chart-2: var(--chart-2);\n  --color-chart-3: var(--chart-3);\n  --color-chart-4: var(--chart-4);\n  --color-chart-5: var(--chart-5);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-lg: var(--radius);\n  --radius-xl: calc(var(--radius) + 4px);\n  --color-sidebar: var(--sidebar);\n  --color-sidebar-foreground: var(--sidebar-foreground);\n  --color-sidebar-primary: var(--sidebar-primary);\n  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);\n  --color-sidebar-accent: var(--sidebar-accent);\n  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);\n  --color-sidebar-border: var(--sidebar-border);\n  --color-sidebar-ring: var(--sidebar-ring);\n  --shadow-2xs: var(--shadow-x) var(--shadow-y) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-xs: var(--shadow-x) var(--shadow-y) var(--shadow-blur) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-sm: var(--shadow-x) var(--shadow-y) calc(var(--shadow-blur) * 1.5) var(--shadow-spread) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-md: calc(var(--shadow-x) * 2) calc(var(--shadow-y) * 2) calc(var(--shadow-blur) * 3) calc(var(--shadow-spread) - 1px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-lg: calc(var(--shadow-x) * 4) calc(var(--shadow-y) * 4) calc(var(--shadow-blur) * 5) calc(var(--shadow-spread) - 3px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-xl: calc(var(--shadow-x) * 6) calc(var(--shadow-y) * 6) calc(var(--shadow-blur) * 7) calc(var(--shadow-spread) - 5px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 100%), transparent);\n  --shadow-2xl: calc(var(--shadow-x) * 8) calc(var(--shadow-y) * 8) calc(max(0px, var(--shadow-blur) * 9 - 8px)) calc(var(--shadow-spread) - 12px) color-mix(in srgb, var(--shadow-color) calc(var(--shadow-opacity) * 250%), transparent);\n  --shadow: var(--shadow-md);\n  --color-shadow-color: var(--shadow-color);\n  --shadow-opacity: var(--shadow-opacity);\n  --shadow-spread: var(--shadow-spread);\n  --shadow-blur: var(--shadow-blur);\n  --shadow-y: var(--shadow-y);\n  --shadow-x: var(--shadow-x);\n}\n\n@layer base {\n  * {\n    @apply border-border outline-ring/50;\n  }\n\n  body {\n    @apply bg-background text-foreground;\n    font-feature-settings: 'liga' 1, 'calt' 1;\n    text-rendering: optimizeLegibility;\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n  }\n\n  a, button, input, select, textarea {\n    @apply transition-colors duration-200 ease-in-out;\n  }\n\n  :focus-visible {\n    @apply outline-2 outline-offset-2 outline-ring;\n  }\n\n  html {\n    scroll-behavior: smooth;\n  }\n\n  ::-webkit-scrollbar {\n    width: 10px;\n    height: 10px;\n  }\n\n  ::-webkit-scrollbar-track {\n    @apply bg-background;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    @apply bg-border hover:bg-muted-foreground rounded-md;\n    transition: background-color 0.2s;\n  }\n\n  ::selection {\n    @apply bg-primary/15 text-foreground;\n  }\n}\n\n/* Focus on scroll animations */\n.focus-section {\n  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);\n  opacity: 0.7;\n  transform: scale(0.98);\n  filter: blur(1px);\n}\n\n.focus-section.focus-visible-section {\n  opacity: 1;\n  transform: scale(1);\n  filter: blur(0);\n}\n\n/* Add subtle glow when focused */\n.focus-section.focus-visible-section::before {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: radial-gradient(\n    ellipse at center,\n    oklch(0.70 0.14 75 / 0.03) 0%,\n    transparent 70%\n  );\n  pointer-events: none;\n  z-index: 0;\n}\n\n/* Ensure section content is above the glow */\n.focus-section {\n  position: relative;\n}\n\n.focus-section > * {\n  position: relative;\n  z-index: 1;\n}\n\n/* Elegant italic text styling */\n.text-italic-emphasis {\n  font-style: italic;\n  font-weight: inherit;\n}\n\n/* Marquee animation */\n@keyframes marquee {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(-50%);\n  }\n}\n\n.animate-marquee {\n  animation: marquee 20s linear infinite;\n}\n\n/* Spa-inspired gradient overlays */\n.spa-gradient {\n  background: linear-gradient(\n    135deg,\n    oklch(0.985 0.008 85) 0%,\n    oklch(0.94 0.02 80) 50%,\n    oklch(0.985 0.008 85) 100%\n  );\n}\n\n.spa-gradient-warm {\n  background: linear-gradient(\n    180deg,\n    oklch(0.45 0.08 55) 0%,\n    oklch(0.38 0.07 50) 100%\n  );\n}\n\n/* Elegant card hover effect */\n.spa-card {\n  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n.spa-card:hover {\n  transform: translateY(-4px);\n  box-shadow: 0 20px 40px -12px oklch(0.45 0.08 55 / 0.15);\n}\n\n/* Floating animation for decorative elements */\n@keyframes float {\n  0%, 100% {\n    transform: translateY(0px);\n  }\n  50% {\n    transform: translateY(-10px);\n  }\n}\n\n.animate-float {\n  animation: float 6s ease-in-out infinite;\n}\n\n/* Shimmer effect for CTAs */\n@keyframes shimmer {\n  0% {\n    background-position: -200% center;\n  }\n  100% {\n    background-position: 200% center;\n  }\n}\n\n.btn-shimmer {\n  background: linear-gradient(\n    90deg,\n    oklch(0.70 0.14 75) 0%,\n    oklch(0.75 0.12 80) 50%,\n    oklch(0.70 0.14 75) 100%\n  );\n  background-size: 200% 100%;\n  transition: all 0.3s ease;\n}\n\n.btn-shimmer:hover {\n  animation: shimmer 1.5s ease-in-out infinite;\n}\n\n/* Hero entrance animations */\n@keyframes fade-in-up {\n  0% {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n\n@keyframes hero-zoom {\n  0% {\n    transform: scale(1.1);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n\n.animate-fade-in-up {\n  animation: fade-in-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n.animate-fade-in {\n  animation: fade-in 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n.animate-hero-zoom {\n  animation: hero-zoom 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;\n}\n\n.animation-delay-200 {\n  animation-delay: 200ms;\n  opacity: 0;\n}\n\n.animation-delay-300 {\n  animation-delay: 300ms;\n  opacity: 0;\n}\n\n.animation-delay-500 {\n  animation-delay: 500ms;\n  opacity: 0;\n}\n\n/* Hide Next.js dev error overlay */\nnextjs-portal {\n  display: none !important;\n}\n","language":"css","lineCount":353,"type":"globals"},{"path":"src/app/preview/wellness/page.tsx","code":"\"use client\";\n\nimport Hero from \"@/components/templates/wellness/Hero\";\nimport Services from \"@/components/templates/wellness/Services\";\nimport Packages from \"@/components/templates/wellness/Packages\";\nimport Testimonials from \"@/components/templates/wellness/Testimonials\";\nimport FAQSection from \"@/components/templates/wellness/FAQ\";\nimport Contact from \"@/components/templates/wellness/Contact\";\n\nconst sections = [\n  { id: \"hero\", name: \"Hero\", Component: Hero },\n  { id: \"services\", name: \"Services\", Component: Services },\n  { id: \"packages\", name: \"Packages\", Component: Packages },\n  { id: \"testimonials\", name: \"Testimonials\", Component: Testimonials },\n  { id: \"faq\", name: \"FAQ\", Component: FAQSection },\n  { id: \"contact\", name: \"Contact\", Component: Contact },\n];\n\nexport default function WellnessTemplate() {\n  return (\n    <div className=\"min-h-screen bg-background\">\n      {sections.map(({ id, Component }) => (\n        <Component key={id} />\n      ))}\n    </div>\n  );\n}\n","language":"tsx","lineCount":28,"type":"page"},{"path":"src/app/preview/wellness/about/page.tsx","code":"\"use client\";\n\nimport { PagePlaceholder } from \"@/components/placeholders\";\n\nexport default function AboutPage() {\n  return <PagePlaceholder pagePath=\"/about\" />;\n}\n","language":"tsx","lineCount":8,"type":"page"},{"path":"src/app/preview/wellness/layout.tsx","code":"import type { Metadata } from \"next\";\nimport Navigation from \"@/components/templates/wellness/Navigation\";\nimport Footer from \"@/components/templates/wellness/Footer\";\nimport \"./globals.css\";\n\nexport const metadata: Metadata = {\n  title: \"Wellness Template - Breezy Templates\",\n  description: \"A clean, trustworthy design perfect for medical, dental, and wellness businesses\",\n};\n\nexport default function WellnessTemplateLayout({\n  children,\n}: {\n  children: React.ReactNode;\n}) {\n  return (\n    <>\n      <Navigation />\n      <main>{children}</main>\n      <Footer />\n    </>\n  );\n}\n","language":"tsx","lineCount":24,"type":"layout"},{"path":"src/components/templates/wellness/BentoGallery.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { GALLERY } from \"./content/home\";\n\nfunction GalleryImage({\n  image,\n  alt,\n  className,\n  rotation,\n}: {\n  image: { url: string; description: string };\n  alt: string;\n  className: string;\n  rotation?: string;\n}) {\n  return (\n    <div\n      className={`${className} group relative rounded-2xl overflow-hidden shadow-xl cursor-pointer ${rotation || \"\"} transition-transform duration-500`}\n    >\n      <Image\n        src={image.url}\n        alt={alt}\n        fill\n        className=\"object-cover transition-transform duration-700 group-hover:scale-110\"\n      />\n      <div className=\"absolute inset-0 bg-foreground/0 group-hover:bg-foreground/20 transition-colors duration-300\" />\n    </div>\n  );\n}\n\nexport default function BentoGallery() {\n  return (\n    <div className=\"relative\">\n      <div className=\"grid grid-cols-12 grid-rows-6 gap-3 h-[600px]\">\n        {GALLERY.images.map((item, index) => (\n          <GalleryImage\n            key={index}\n            image={item.image}\n            alt={item.alt}\n            className={item.className}\n            rotation={item.rotation}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":50,"type":"component"},{"path":"src/components/templates/wellness/CardDeck.tsx","code":"\"use client\";\n\nimport React, { useState, useEffect, useRef, Children, ReactNode } from \"react\";\n\ninterface CardDeckProps {\n  children: ReactNode;\n  className?: string;\n}\n\nexport default function CardDeck({ children, className = \"\" }: CardDeckProps) {\n  const childArray = Children.toArray(children);\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const [isAnimating, setIsAnimating] = useState(false);\n  const [exitingCard, setExitingCard] = useState<number | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n  const [isVisible, setIsVisible] = useState(false);\n  const deckRef = useRef<HTMLDivElement>(null);\n\n  // Scroll animation - detect when deck enters viewport\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.2 }\n    );\n\n    if (deckRef.current) {\n      observer.observe(deckRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  const cycleCard = () => {\n    if (isAnimating || childArray.length <= 1) return;\n\n    setIsAnimating(true);\n    setExitingCard(currentIndex);\n\n    setTimeout(() => {\n      setCurrentIndex((prev) => (prev + 1) % childArray.length);\n      setExitingCard(null);\n      setIsAnimating(false);\n    }, 500);\n  };\n\n  const getCardStyle = (index: number) => {\n    const offset =\n      (index - currentIndex + childArray.length) % childArray.length;\n    const isExiting = exitingCard === index;\n    const isTopCard = offset === 0 && !isExiting;\n\n    if (offset > 3 && !isExiting) return { display: \"none\" as const };\n\n    // More dramatic fan effect\n    const rotations = [-12, -6, -2, 0];\n    const xOffsets = [-40, -20, -8, 0];\n    const yOffsets = [36, 24, 12, 0];\n    const scales = [0.82, 0.88, 0.94, 1];\n\n    if (isExiting) {\n      return {\n        transform: `translateX(400px) translateY(-80px) rotate(35deg) scale(0.85)`,\n        opacity: 0,\n        zIndex: 100,\n        transition: \"all 0.5s cubic-bezier(0.4, 0, 0.2, 1)\",\n      };\n    }\n\n    const stackPosition = Math.min(offset, 3);\n    const arrayIndex = 3 - stackPosition;\n    \n    // Hover effect - lift the top card\n    const hoverLift = isTopCard && isHovered ? -8 : 0;\n    const hoverScale = isTopCard && isHovered ? 1.02 : (scales[arrayIndex] ?? 1);\n\n    return {\n      transform: `\n        translateX(${xOffsets[arrayIndex] ?? 0}px) \n        translateY(${(yOffsets[arrayIndex] ?? 0) + hoverLift}px) \n        rotate(${rotations[arrayIndex] ?? 0}deg)\n        scale(${hoverScale})\n      `,\n      zIndex: childArray.length - offset,\n      opacity: offset <= 3 ? 1 - offset * 0.12 : 0,\n      transition: \"all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1)\",\n      transformOrigin: \"bottom center\",\n    };\n  };\n\n  // Entry animation styles for each card\n  const getEntryStyle = (index: number) => {\n    const offset =\n      (index - currentIndex + childArray.length) % childArray.length;\n    \n    if (!isVisible) {\n      return {\n        opacity: 0,\n        transform: `translateY(60px) rotate(${-20 + offset * 5}deg) scale(0.8)`,\n      };\n    }\n    return {};\n  };\n\n  return (\n    <div\n      ref={deckRef}\n      className={`relative cursor-pointer select-none group ${className}`}\n      onClick={cycleCard}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n      style={{ perspective: \"1200px\" }}\n    >\n      {childArray.map((child, index) => {\n        const style = getCardStyle(index);\n        if (style.display === \"none\") return null;\n\n        const offset =\n          (index - currentIndex + childArray.length) % childArray.length;\n        const isTopCard = offset === 0 && exitingCard !== index;\n        const entryStyle = getEntryStyle(index);\n\n        return (\n          <div\n            key={index}\n            className={`absolute inset-0 ${isTopCard && isHovered ? \"shadow-2xl\" : \"\"}`}\n            style={{\n              ...style,\n              ...entryStyle,\n              transitionDelay: !isVisible ? `${offset * 100}ms` : \"0ms\",\n            }}\n          >\n            {child}\n            {/* Hover indicator glow on top card */}\n            {isTopCard && (\n              <div \n                className=\"absolute inset-0 rounded-3xl pointer-events-none transition-opacity duration-300\"\n                style={{\n                  boxShadow: isHovered \n                    ? \"0 0 30px color-mix(in srgb, var(--accent) 15%, transparent), 0 20px 40px color-mix(in srgb, black 10%, transparent)\" \n                    : \"none\",\n                  opacity: isHovered ? 1 : 0,\n                }}\n              />\n            )}\n          </div>\n        );\n      })}\n      \n      {/* Subtle \"click me\" pulse indicator */}\n      <div \n        className={`absolute -bottom-2 left-1/2 -translate-x-1/2 text-xs text-muted-foreground/60 transition-opacity duration-300 flex items-center gap-1 ${isHovered ? \"opacity-100\" : \"opacity-0\"}`}\n      >\n        <span className=\"animate-pulse\">Click to flip</span>\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":164,"type":"component"},{"path":"src/components/templates/wellness/Contact.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Phone, Mail, MapPin, Clock, Instagram } from \"lucide-react\";\nimport LeadForm from \"@/components/LeadForm\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_EMAIL,\n  PROFESSIONAL_ADDRESS,\n  PROFESSIONAL_SOCIAL_LINKS,\n} from \"@/professionalConstants\";\nimport SpotlightImage from \"./SpotlightImage\";\nimport { CONTACT } from \"./content/home\";\n\nexport default function Contact() {\n  return (\n    <section id=\"contact\" className=\"py-20 lg:py-32 bg-background\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20\">\n          {/* Left: Contact form and info */}\n          <div>\n            <p className=\"text-sm font-medium text-primary uppercase tracking-widest mb-4\">\n              {CONTACT.label}\n            </p>\n            <h2 className=\"text-4xl md:text-5xl font-bold text-foreground mb-6\">\n              {CONTACT.heading} <span className=\"italic text-primary\">{CONTACT.headingAccent}</span>\n            </h2>\n            <p className=\"text-lg text-muted-foreground mb-8\">\n              {CONTACT.description}\n            </p>\n\n            <LeadForm />\n\n            {/* Contact info */}\n            <div className=\"mt-10 pt-10 border-t border-border\">\n              <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-6\">\n                <a\n                  href={`tel:${PROFESSIONAL_PHONE}`}\n                  className=\"flex items-center gap-4 group\"\n                >\n                  <div className=\"w-12 h-12 flex-shrink-0 bg-primary/10 rounded-xl flex items-center justify-center group-hover:bg-primary transition-colors\">\n                    <Phone className=\"w-5 h-5 text-primary group-hover:text-primary-foreground transition-colors\" />\n                  </div>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm text-muted-foreground\">Call us</p>\n                    <p className=\"font-semibold text-foreground truncate\">\n                      {formatPhoneNumber(PROFESSIONAL_PHONE)}\n                    </p>\n                  </div>\n                </a>\n\n                <a\n                  href={`mailto:${PROFESSIONAL_EMAIL}`}\n                  className=\"flex items-center gap-4 group\"\n                >\n                  <div className=\"w-12 h-12 flex-shrink-0 bg-primary/10 rounded-xl flex items-center justify-center group-hover:bg-primary transition-colors\">\n                    <Mail className=\"w-5 h-5 text-primary group-hover:text-primary-foreground transition-colors\" />\n                  </div>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm text-muted-foreground\">Email us</p>\n                    <p className=\"font-semibold text-foreground truncate\">{PROFESSIONAL_EMAIL}</p>\n                  </div>\n                </a>\n\n                <div className=\"flex items-center gap-4\">\n                  <div className=\"w-12 h-12 flex-shrink-0 bg-primary/10 rounded-xl flex items-center justify-center\">\n                    <MapPin className=\"w-5 h-5 text-primary\" />\n                  </div>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm text-muted-foreground\">Visit us</p>\n                    <p className=\"font-semibold text-foreground truncate\">{PROFESSIONAL_ADDRESS}</p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-center gap-4\">\n                  <div className=\"w-12 h-12 flex-shrink-0 bg-primary/10 rounded-xl flex items-center justify-center\">\n                    <Clock className=\"w-5 h-5 text-primary\" />\n                  </div>\n                  <div className=\"min-w-0\">\n                    <p className=\"text-sm text-muted-foreground\">Open hours</p>\n                    <p className=\"font-semibold text-foreground\">{CONTACT.operatingHours}</p>\n                  </div>\n                </div>\n              </div>\n\n              {/* Social link */}\n              {PROFESSIONAL_SOCIAL_LINKS?.instagram && (\n                <div className=\"mt-8\">\n                  <a\n                    href={PROFESSIONAL_SOCIAL_LINKS.instagram}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    className=\"inline-flex items-center gap-2 text-primary font-medium hover:underline\"\n                  >\n                    <Instagram className=\"w-5 h-5\" />\n                    <span>@{PROFESSIONAL_SOCIAL_LINKS.instagram.split('/').pop()}</span>\n                  </a>\n                </div>\n              )}\n            </div>\n          </div>\n\n          {/* Right: Interactive Image */}\n          <div className=\"relative\">\n            <div className=\"aspect-[4/5] rounded-3xl overflow-hidden shadow-2xl\">\n              <SpotlightImage\n                src={CONTACT.contactImage.url}\n                alt={CONTACT.contactImage.description}\n                radius={250}\n              />\n            </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":119,"type":"component"},{"path":"src/components/templates/wellness/FAQ.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { FAQ } from \"./content/home\";\n\nfunction FAQAccordion({\n  question,\n  answer,\n  isOpen,\n  onToggle,\n}: {\n  id?: string;\n  question: string;\n  answer: string;\n  isOpen: boolean;\n  onToggle: () => void;\n}) {\n  return (\n    <div className=\"border-b border-border last:border-b-0\">\n      <button\n        className=\"w-full py-6 flex items-center justify-between text-left group\"\n        onClick={onToggle}\n        aria-expanded={isOpen}\n      >\n        <span className=\"text-lg font-medium text-foreground group-hover:text-primary transition-colors pr-4\">\n          {question}\n        </span>\n        <div\n          className={`flex-shrink-0 w-8 h-8 rounded-full bg-secondary flex items-center justify-center transition-transform duration-300 ${\n            isOpen ? \"rotate-180\" : \"\"\n          }`}\n        >\n          <ChevronDown className=\"w-5 h-5 text-primary\" />\n        </div>\n      </button>\n      <div\n        className={`overflow-hidden transition-all duration-300 ease-in-out ${\n          isOpen ? \"max-h-96 pb-6\" : \"max-h-0\"\n        }`}\n      >\n        <p className=\"text-muted-foreground leading-relaxed pr-12\">{answer}</p>\n      </div>\n    </div>\n  );\n}\n\nexport default function FAQSection() {\n  const [openId, setOpenId] = useState<string | null>(\"services\");\n\n  const toggle = (id: string) => setOpenId(openId === id ? null : id);\n\n  return (\n    <section className=\"py-20 lg:py-32 bg-background\">\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-16\">\n          <h2 className=\"text-4xl md:text-5xl font-bold text-foreground mb-6\">\n            {FAQ.heading} <span className=\"italic text-primary\">{FAQ.headingAccent}</span>\n          </h2>\n        </div>\n\n        <div className=\"bg-card rounded-3xl shadow-lg p-6 md:p-10\">\n          {FAQ.items.map((item, _index) => (\n            <FAQAccordion\n              key={item.id}\n              id={item.id}\n              question={item.question}\n              answer={item.answer}\n              isOpen={openId === item.id}\n              onToggle={() => toggle(item.id)}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":78,"type":"component"},{"path":"src/components/templates/wellness/Footer.tsx","code":"import React from \"react\";\nimport Link from \"next/link\";\nimport { Facebook, Instagram, Linkedin, Phone, Mail, MapPin } from \"lucide-react\";\nimport PoweredByBreezy from \"@/components/PoweredByBreezy\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_NAME,\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_EMAIL,\n  PROFESSIONAL_ADDRESS,\n  PROFESSIONAL_SOCIAL_LINKS,\n} from \"@/professionalConstants\";\nimport { FOOTER } from \"./content/home\";\n\nfunction FooterLink({ href, label }: { href: string; label: string }) {\n  return (\n    <Link\n      href={href}\n      className=\"block text-primary-foreground/70 hover:text-accent transition-colors\"\n    >\n      {label}\n    </Link>\n  );\n}\n\nexport default function Footer() {\n  const currentYear = new Date().getFullYear();\n\n  return (\n    <footer className=\"bg-primary text-primary-foreground py-16\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-12\">\n          {/* Brand & Description */}\n          <div className=\"lg:col-span-2\">\n            <Link href=\"/preview/wellness\" className=\"inline-block mb-6\">\n              <span className=\"text-2xl font-bold\">{PROFESSIONAL_NAME}</span>\n            </Link>\n            <p className=\"text-primary-foreground/70 mb-6 max-w-md leading-relaxed\">\n              {FOOTER.description}\n            </p>\n\n            {/* Social Links */}\n            <div className=\"flex gap-3\">\n              {PROFESSIONAL_SOCIAL_LINKS?.facebook && (\n                <a\n                  href={PROFESSIONAL_SOCIAL_LINKS.facebook}\n                  className=\"w-10 h-10 bg-primary-foreground/10 rounded-full flex items-center justify-center hover:bg-accent hover:text-accent-foreground transition-colors\"\n                  aria-label=\"Facebook\"\n                >\n                  <Facebook className=\"w-5 h-5\" />\n                </a>\n              )}\n              {PROFESSIONAL_SOCIAL_LINKS?.instagram && (\n                <a\n                  href={PROFESSIONAL_SOCIAL_LINKS.instagram}\n                  className=\"w-10 h-10 bg-primary-foreground/10 rounded-full flex items-center justify-center hover:bg-accent hover:text-accent-foreground transition-colors\"\n                  aria-label=\"Instagram\"\n                >\n                  <Instagram className=\"w-5 h-5\" />\n                </a>\n              )}\n              {PROFESSIONAL_SOCIAL_LINKS?.linkedin && (\n                <a\n                  href={PROFESSIONAL_SOCIAL_LINKS.linkedin}\n                  className=\"w-10 h-10 bg-primary-foreground/10 rounded-full flex items-center justify-center hover:bg-accent hover:text-accent-foreground transition-colors\"\n                  aria-label=\"LinkedIn\"\n                >\n                  <Linkedin className=\"w-5 h-5\" />\n                </a>\n              )}\n            </div>\n          </div>\n\n          {/* Quick Links */}\n          <div>\n            <h4 className=\"font-semibold mb-6 text-lg\">Quick Links</h4>\n            <div className=\"space-y-3\">\n              {FOOTER.quickLinks.map((link, index) => (\n                <FooterLink key={index} href={link.href} label={link.label} />\n              ))}\n            </div>\n          </div>\n\n          {/* Contact Info */}\n          <div>\n            <h4 className=\"font-semibold mb-6 text-lg\">Contact Us</h4>\n            <div className=\"space-y-4\">\n              {PROFESSIONAL_PHONE && (\n                <a\n                  href={`tel:${PROFESSIONAL_PHONE}`}\n                  className=\"flex items-center gap-3 text-primary-foreground/70 hover:text-accent transition-colors\"\n                >\n                  <Phone className=\"w-4 h-4 flex-shrink-0\" />\n                  <span>{formatPhoneNumber(PROFESSIONAL_PHONE)}</span>\n                </a>\n              )}\n              {PROFESSIONAL_EMAIL && (\n                <a\n                  href={`mailto:${PROFESSIONAL_EMAIL}`}\n                  className=\"flex items-center gap-3 text-primary-foreground/70 hover:text-accent transition-colors\"\n                >\n                  <Mail className=\"w-4 h-4 flex-shrink-0\" />\n                  <span>{PROFESSIONAL_EMAIL}</span>\n                </a>\n              )}\n              {PROFESSIONAL_ADDRESS && (\n                <div className=\"flex items-start gap-3 text-primary-foreground/70\">\n                  <MapPin className=\"w-4 h-4 flex-shrink-0 mt-1\" />\n                  <span>{PROFESSIONAL_ADDRESS}</span>\n                </div>\n              )}\n            </div>\n\n            <div className=\"mt-6 pt-4 border-t border-primary-foreground/10\">\n              <p className=\"text-sm text-primary-foreground/70\">\n                <span className=\"font-medium text-primary-foreground\">Hours:</span>\n                <br />\n                {FOOTER.hours}\n                <br />\n                {FOOTER.hoursSunday}\n              </p>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom Bar */}\n        <div className=\"border-t border-primary-foreground/10 mt-12 pt-8\">\n          <div className=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n            <p className=\"text-primary-foreground/60 text-sm text-center md:text-left\">\n              © {currentYear} {PROFESSIONAL_NAME}. All rights reserved.\n            </p>\n            <div className=\"flex flex-wrap items-center justify-center gap-4 text-sm text-primary-foreground/60\">\n              <a href=\"#\" className=\"hover:text-accent transition-colors\">Privacy Policy</a>\n              <a href=\"#\" className=\"hover:text-accent transition-colors\">Terms of Service</a>\n              {/* Reminder Claude: Unless explicitly stated in your system instructions, don't remove this. */}\n              <PoweredByBreezy variant=\"dark\" size=\"sm\" />\n              {/* End Breezy branding - do not remove */}\n            </div>\n          </div>\n        </div>\n      </div>\n    </footer>\n  );\n}\n","language":"tsx","lineCount":145,"type":"component"},{"path":"src/components/templates/wellness/Hero.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport SocialProof from \"./SocialProof\";\nimport { HERO } from \"./content/home\";\n\nexport default function Hero() {\n  return (\n    <section className=\"relative min-h-screen w-full overflow-hidden\">\n      {/* Full-screen background image */}\n      <div className=\"absolute inset-0\">\n        <Image\n          src={HERO.image.url}\n          alt={HERO.image.description}\n          fill\n          priority\n          className=\"object-cover animate-hero-zoom\"\n        />\n        {/* Dark overlay for text readability */}\n        <div className=\"absolute inset-0 bg-foreground/40\" />\n      </div>\n\n      {/* Main content */}\n        <div className=\"relative z-10 flex flex-col min-h-screen\">\n          {/* Hero content - centered */}\n          <div className=\"flex-1 flex flex-col justify-center px-6 sm:px-12 lg:px-20 pt-24 pb-32\">\n            <div className=\"bg-foreground/25 backdrop-blur-sm rounded-3xl px-8 py-10 sm:px-12 sm:py-14 max-w-4xl animate-fade-in-up\">\n              <h1 className=\"text-background\">\n                <span className=\"block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight mb-2\">\n                  Your <span className=\"italic font-normal\">{HERO.location}</span>\n                </span>\n                <span className=\"inline-block text-5xl sm:text-6xl md:text-7xl lg:text-8xl font-bold tracking-tight\">\n                  <span className=\"relative inline-block italic font-normal px-6 py-2\">\n                    <span className=\"absolute inset-0 border-2 border-background/40 rounded-[100px]\" />\n                    {HERO.businessType}\n                  </span>\n                </span>\n              </h1>\n\n              {/* CTA Button */}\n              <div className=\"mt-12 animate-fade-in-up animation-delay-200\">\n                <a\n                  href=\"#contact\"\n                  className=\"inline-flex items-center justify-center bg-secondary text-primary px-8 py-4 rounded-sm font-medium text-base hover:bg-background transition-colors\"\n                >\n                  <span>{HERO.ctaText}</span>\n                </a>\n              </div>\n            </div>\n          </div>\n\n          {/* Happy customers - bottom right */}\n          <div className=\"absolute bottom-24 right-6 sm:right-12 lg:right-20 animate-fade-in animation-delay-500\">\n            <SocialProof />\n          </div>\n        </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":61,"type":"component"},{"path":"src/components/templates/wellness/Navigation.tsx","code":"\"use client\";\n\nimport React, { useState, useEffect } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { Phone, Menu, X } from \"lucide-react\";\nimport {\n  PROFESSIONAL_PHONE,\n} from \"@/professionalConstants\";\nimport { NAVIGATION } from \"./content/home\";\n\nfunction NavLink({\n  href,\n  children,\n  onClick,\n  mobile = false,\n  scrolled = false,\n}: {\n  href: string;\n  children: React.ReactNode;\n  onClick?: () => void;\n  mobile?: boolean;\n  scrolled?: boolean;\n}) {\n  return (\n    <Link\n      href={href}\n      className={\n        mobile\n          ? \"block py-3 px-4 text-foreground hover:text-primary hover:bg-secondary rounded-xl transition-colors\"\n          : `text-sm font-medium transition-colors ${\n              scrolled\n                ? \"text-foreground/70 hover:text-primary\"\n                : \"text-background/70 hover:text-background\"\n            }`\n      }\n      onClick={onClick}\n    >\n      {children}\n    </Link>\n  );\n}\n\nexport default function Navigation() {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n  const [scrolled, setScrolled] = useState(false);\n\n  useEffect(() => {\n    const handleScroll = () => {\n      setScrolled(window.scrollY > 50);\n    };\n\n    window.addEventListener(\"scroll\", handleScroll);\n    return () => window.removeEventListener(\"scroll\", handleScroll);\n  }, []);\n\n  const closeMobileMenu = () => setMobileMenuOpen(false);\n\n  return (\n    <nav\n      className={`fixed top-0 left-0 right-0 z-50 transition-all duration-300 ${\n        scrolled\n          ? \"bg-background/95 backdrop-blur-md shadow-sm\"\n          : \"bg-transparent\"\n      }`}\n    >\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"flex justify-between items-center h-20\">\n          {/* Logo */}\n          <Link href=\"/preview/wellness\">\n            <Image src={NAVIGATION.logo.url} alt={NAVIGATION.logo.description} width={120} height={40} className=\"h-10 w-auto object-contain\" />\n          </Link>\n\n          {/* Desktop Links */}\n          <div className=\"hidden md:flex items-center gap-8\">\n            <NavLink href=\"/preview/wellness\" scrolled={scrolled}>Home</NavLink>\n            <NavLink href=\"/preview/wellness#services\" scrolled={scrolled}>Services</NavLink>\n            <NavLink href=\"/preview/wellness#packages\" scrolled={scrolled}>Packages</NavLink>\n            <NavLink href=\"/preview/wellness#reviews\" scrolled={scrolled}>Reviews</NavLink>\n            <NavLink href=\"/preview/wellness#faq\" scrolled={scrolled}>FAQ</NavLink>\n          </div>\n\n          {/* CTA Button */}\n          <div className=\"hidden md:flex items-center gap-4\">\n            {PROFESSIONAL_PHONE && (\n              <a\n                href=\"#contact\"\n                className=\"inline-flex items-center gap-2 bg-primary text-primary-foreground px-6 py-2.5 rounded-full text-sm font-semibold hover:bg-primary/90 transition-all shadow-md hover:shadow-lg\"\n              >\n                <span>Book Your Session Now</span>\n              </a>\n            )}\n          </div>\n\n          {/* Mobile Menu Button */}\n          <button\n            className={`md:hidden p-2 rounded-lg transition-colors ${scrolled ? \"text-foreground hover:bg-secondary\" : \"text-background hover:bg-background/10\"}`}\n            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n            aria-label=\"Toggle menu\"\n          >\n            {mobileMenuOpen ? (\n              <X className=\"w-6 h-6\" />\n            ) : (\n              <Menu className=\"w-6 h-6\" />\n            )}\n          </button>\n        </div>\n\n        {/* Mobile Menu */}\n        <div\n          className={`md:hidden overflow-hidden transition-all duration-300 ${\n            mobileMenuOpen ? \"max-h-96 pb-6\" : \"max-h-0\"\n          }`}\n        >\n          <div className=\"bg-card rounded-2xl p-4 shadow-lg\">\n            <NavLink href=\"/preview/wellness\" onClick={closeMobileMenu} mobile>\n              Home\n            </NavLink>\n            <NavLink href=\"/preview/wellness#services\" onClick={closeMobileMenu} mobile>\n              Services\n            </NavLink>\n            <NavLink href=\"/preview/wellness#packages\" onClick={closeMobileMenu} mobile>\n              Packages\n            </NavLink>\n            <NavLink href=\"/preview/wellness#reviews\" onClick={closeMobileMenu} mobile>\n              Reviews\n            </NavLink>\n            <NavLink href=\"/preview/wellness#faq\" onClick={closeMobileMenu} mobile>\n              FAQ\n            </NavLink>\n            {PROFESSIONAL_PHONE && (\n              <a\n                href=\"#contact\"\n                className=\"flex items-center justify-center gap-2 mt-4 bg-primary text-primary-foreground px-6 py-3 rounded-full font-semibold\"\n                onClick={closeMobileMenu}\n              >\n                <Phone className=\"w-4 h-4\" />\n                <span>Book Now</span>\n              </a>\n            )}\n          </div>\n        </div>\n      </div>\n    </nav>\n  );\n}\n","language":"tsx","lineCount":147,"type":"component"},{"path":"src/components/templates/wellness/Packages.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Check, ArrowRight } from \"lucide-react\";\nimport TiltCard from \"./TiltCard\";\nimport { PACKAGES } from \"./content/home\";\n\nfunction FeatureItem({ text }: { text: string }) {\n  return (\n    <li className=\"flex items-start gap-3\">\n      <div className=\"w-5 h-5 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0 mt-0.5\">\n        <Check className=\"w-3 h-3 text-accent\" />\n      </div>\n      <span className=\"text-sm text-foreground\">{text}</span>\n    </li>\n  );\n}\n\nfunction PackageCard({\n  name,\n  description,\n  price,\n  duration,\n  featured = false,\n  features,\n}: {\n  name: string;\n  description: string;\n  price: string;\n  duration: string;\n  featured?: boolean;\n  features: string[];\n}) {\n  return (\n    <TiltCard>\n      <div\n        className={`relative bg-card rounded-3xl p-8 shadow-lg h-full flex flex-col ${\n          featured\n            ? \"border-2 border-primary ring-4 ring-primary/10\"\n            : \"border border-border\"\n        }`}\n      >\n        {featured && (\n          <div className=\"absolute -top-4 left-1/2 -translate-x-1/2 bg-primary text-primary-foreground px-4 py-1 rounded-full text-sm font-semibold\">\n            Most Popular\n          </div>\n        )}\n\n        <div className=\"mb-6\">\n          <h3 className=\"text-2xl font-bold text-foreground mb-2\">{name}</h3>\n          <p className=\"text-sm text-muted-foreground\">{description}</p>\n        </div>\n\n        <div className=\"mb-6\">\n          <div className=\"flex items-baseline gap-1\">\n            <span className=\"text-4xl font-bold text-foreground\">{price}</span>\n          </div>\n          <p className=\"text-sm text-muted-foreground mt-1\">{duration}</p>\n        </div>\n\n        <ul className=\"space-y-3 mb-8 flex-1\">\n          {features.map((feature, i) => (\n            <FeatureItem key={i} text={feature} />\n          ))}\n        </ul>\n\n        <a\n          href=\"#contact\"\n          className={`w-full inline-flex items-center justify-center gap-2 px-6 py-3 rounded-full font-semibold transition-all mt-auto ${\n            featured\n              ? \"bg-primary text-primary-foreground hover:bg-primary/90\"\n              : \"bg-secondary text-foreground hover:bg-muted border border-border\"\n          }`}\n        >\n          {PACKAGES.ctaText}\n          <ArrowRight className=\"w-4 h-4\" />\n        </a>\n      </div>\n    </TiltCard>\n  );\n}\n\nexport default function Packages() {\n  return (\n    <section className=\"py-20 lg:py-32 bg-secondary\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"text-center mb-16\">\n            <p className=\"text-sm font-medium text-primary uppercase tracking-widest mb-4\">\n              {PACKAGES.label}\n            </p>\n            <h2 className=\"text-4xl md:text-5xl font-bold text-foreground mb-6\">\n              {PACKAGES.heading} <span className=\"italic text-primary\">{PACKAGES.headingAccent}</span>\n            </h2>\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n              {PACKAGES.description}\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            {PACKAGES.tiers.map((tier, index) => (\n              <PackageCard\n                key={index}\n                name={tier.name}\n                description={tier.description}\n                price={tier.price}\n                duration={tier.duration}\n                featured={tier.featured}\n                features={tier.features}\n              />\n            ))}\n          </div>\n\n          <div className=\"text-center mt-12 bg-card/50 backdrop-blur-sm rounded-2xl p-8 max-w-2xl mx-auto\">\n            <div>\n              <p className=\"text-lg font-semibold text-foreground mb-2\">\n                {PACKAGES.customCta.title}\n              </p>\n              <p className=\"text-muted-foreground mb-4\">\n                {PACKAGES.customCta.description}\n              </p>\n            </div>\n            <a\n              href=\"#contact\"\n              className=\"inline-flex items-center gap-2 text-primary font-semibold hover:underline\"\n            >\n              {PACKAGES.customCta.linkText} <ArrowRight className=\"w-4 h-4\" />\n            </a>\n          </div>\n        </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":133,"type":"component"},{"path":"src/components/templates/wellness/Services.tsx","code":"\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\nimport Image from \"next/image\";\nimport { ArrowRight } from \"lucide-react\";\nimport { SERVICES } from \"./content/home\";\n\nfunction ServiceCard({\n  title,\n  description,\n  image,\n  index,\n}: {\n  title: string;\n  description: string;\n  image: { url: string; description: string };\n  index: number;\n}) {\n  const cardRef = useRef<HTMLDivElement>(null);\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    const observer = new IntersectionObserver(\n      (entries) => {\n        const entry = entries[0];\n        if (entry?.isIntersecting) {\n          setIsVisible(true);\n          observer.disconnect();\n        }\n      },\n      { threshold: 0.2 }\n    );\n\n    if (cardRef.current) {\n      observer.observe(cardRef.current);\n    }\n\n    return () => observer.disconnect();\n  }, []);\n\n  return (\n    <div\n      ref={cardRef}\n      className=\"group relative aspect-[3/4] rounded-2xl overflow-hidden cursor-pointer\"\n      style={{\n        transform: isVisible\n          ? \"perspective(1000px) rotateY(0deg) rotateX(0deg)\"\n          : \"perspective(1000px) rotateY(-15deg) rotateX(5deg)\",\n        opacity: isVisible ? 1 : 0,\n        transition: `all 0.8s cubic-bezier(0.4, 0, 0.2, 1) ${index * 150}ms`,\n        transformStyle: \"preserve-3d\",\n      }}\n    >\n      <Image\n        src={image.url}\n        alt={image.description}\n        fill\n        className=\"object-cover transition-transform duration-500 group-hover:scale-110\"\n      />\n      <div className=\"absolute inset-0 bg-gradient-to-t from-foreground/80 via-foreground/20 to-transparent\" />\n      <div className=\"absolute bottom-0 left-0 right-0 p-4 text-background\">\n        <div className=\"bg-foreground/30 backdrop-blur-sm rounded-xl px-4 py-3 transition-all duration-300\">\n          <h3 className=\"text-xl font-bold mb-2\">{title}</h3>\n          <p className=\"text-sm text-background/70 mb-4 opacity-0 max-h-0 group-hover:max-h-40 group-hover:opacity-100 transition-all duration-300 overflow-hidden\">\n            {description}\n          </p>\n          <div className=\"flex items-center gap-2 text-sm font-medium opacity-0 max-h-0 group-hover:max-h-10 group-hover:opacity-100 transition-all duration-300 overflow-hidden\">\n            <span>Learn more</span>\n            <ArrowRight className=\"w-4 h-4\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function Services() {\n  return (\n    <section id=\"services\" className=\"py-20 lg:py-32 bg-background\">\n        <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n          <div className=\"text-center mb-16\">\n            <h2 className=\"text-4xl md:text-5xl font-bold text-foreground mb-6\">\n              {SERVICES.heading} <span className=\"italic text-primary\">{SERVICES.headingAccent}</span>\n            </h2>\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n              {SERVICES.description}\n            </p>\n          </div>\n\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6\">\n            {SERVICES.items.map((service, index) => (\n              <ServiceCard\n                key={index}\n                index={index}\n                title={service.title}\n                description={service.description}\n                image={service.image}\n              />\n            ))}\n          </div>\n        </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":105,"type":"component"},{"path":"src/components/templates/wellness/SocialProof.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { Star } from \"lucide-react\";\nimport { SOCIAL_PROOF } from \"./content/home\";\n\nfunction CustomerFace({ src }: { src: string }) {\n  return (\n    <div className=\"w-12 h-12 rounded-full overflow-hidden border-2 border-border grayscale hover:grayscale-0 transition-all duration-300 cursor-pointer\">\n      <Image\n        src={src}\n        alt=\"Happy customer\"\n        width={96}\n        height={96}\n        className=\"w-full h-full object-cover\"\n      />\n    </div>\n  );\n}\n\nexport default function SocialProof() {\n  return (\n    <div className=\"flex items-center gap-4\">\n      {/* Customer faces - stacked */}\n      <div className=\"flex -space-x-3\">\n        {SOCIAL_PROOF.customerImages.map((src, index) => (\n          <CustomerFace key={index} src={src} />\n        ))}\n      </div>\n      <div>\n        <div className=\"flex text-background mb-1\">\n          <Star className=\"w-4 h-4 fill-current\" />\n          <Star className=\"w-4 h-4 fill-current\" />\n          <Star className=\"w-4 h-4 fill-current\" />\n          <Star className=\"w-4 h-4 fill-current\" />\n          <Star className=\"w-4 h-4 fill-current\" />\n        </div>\n        <div className=\"text-background/80 text-xs leading-tight\">\n          <span className=\"font-semibold text-background\">{SOCIAL_PROOF.rating}</span> on{\" \"}\n          <span className=\"font-semibold text-background\">{SOCIAL_PROOF.platform}</span>\n        </div>\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":47,"type":"component"},{"path":"src/components/templates/wellness/SpotlightImage.tsx","code":"\"use client\";\n\nimport React, { useState, useRef } from \"react\";\nimport Image from \"next/image\";\n\ninterface SpotlightImageProps {\n  src: string;\n  alt: string;\n  radius?: number;\n  className?: string;\n}\n\nexport default function SpotlightImage({ \n  src, \n  alt, \n  radius = 200,\n  className = \"\" \n}: SpotlightImageProps) {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const [position, setPosition] = useState({ x: 50, y: 50 });\n  const [isActive, setIsActive] = useState(false);\n\n  const updatePosition = (clientX: number, clientY: number) => {\n    if (!containerRef.current) return;\n    const rect = containerRef.current.getBoundingClientRect();\n    const x = ((clientX - rect.left) / rect.width) * 100;\n    const y = ((clientY - rect.top) / rect.height) * 100;\n    setPosition({ \n      x: Math.max(0, Math.min(100, x)), \n      y: Math.max(0, Math.min(100, y)) \n    });\n  };\n\n  const handleMouseMove = (e: React.MouseEvent) => {\n    updatePosition(e.clientX, e.clientY);\n  };\n\n  const handleTouchMove = (e: React.TouchEvent) => {\n    const touch = e.touches[0];\n    if (touch) {\n      updatePosition(touch.clientX, touch.clientY);\n    }\n  };\n\n  return (\n    <div\n      ref={containerRef}\n      className={`relative w-full h-full overflow-hidden cursor-none ${className}`}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={() => setIsActive(true)}\n      onMouseLeave={() => setIsActive(false)}\n      onTouchStart={() => setIsActive(true)}\n      onTouchMove={handleTouchMove}\n      onTouchEnd={() => setIsActive(false)}\n    >\n      {/* Grayscale base layer */}\n      <Image\n        src={src}\n        alt={alt}\n        fill\n        className=\"object-cover grayscale\"\n      />\n      \n      {/* Color layer with radial mask - sharp edge, high contrast */}\n      <div\n        className=\"absolute inset-0 transition-opacity duration-300\"\n        style={{\n          opacity: isActive ? 1 : 0,\n          maskImage: `radial-gradient(circle ${radius}px at ${position.x}% ${position.y}%, black 100%, transparent 100%)`,\n          WebkitMaskImage: `radial-gradient(circle ${radius}px at ${position.x}% ${position.y}%, black 100%, transparent 100%)`,\n        }}\n      >\n        <Image\n          src={src}\n          alt={alt}\n          fill\n          className=\"object-cover saturate-[1.3] contrast-[1.15] brightness-[1.05]\"\n        />\n      </div>\n\n      {/* Subtle cursor indicator */}\n      <div\n        className=\"absolute w-8 h-8 rounded-full border-2 border-border pointer-events-none transition-opacity duration-300 -translate-x-1/2 -translate-y-1/2\"\n        style={{\n          left: `${position.x}%`,\n          top: `${position.y}%`,\n          opacity: isActive ? 1 : 0,\n          boxShadow: \"0 0 30px color-mix(in srgb, white 20%, transparent)\",\n        }}\n      />\n\n      {/* Hint text for mobile */}\n      <div \n        className={`absolute bottom-4 left-1/2 -translate-x-1/2 text-background/80 text-xs bg-foreground/30 px-3 py-1.5 rounded-full backdrop-blur-sm transition-opacity duration-500 lg:hidden ${isActive ? \"opacity-0\" : \"opacity-100\"}`}\n      >\n        Touch to reveal color\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":101,"type":"component"},{"path":"src/components/templates/wellness/Testimonials.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport Image from \"next/image\";\nimport { Star, Quote } from \"lucide-react\";\nimport BentoGallery from \"./BentoGallery\";\nimport CardDeck from \"./CardDeck\";\nimport { TESTIMONIALS } from \"./content/home\";\n\nfunction TestimonialCard({\n  quote,\n  author,\n  role,\n  image,\n}: {\n  quote: string;\n  author: string;\n  role?: string;\n  image: string;\n}) {\n  return (\n    <div className=\"bg-card rounded-3xl p-8 shadow-2xl h-full border border-border/50 flex flex-col\">\n      <Quote className=\"w-12 h-12 text-accent/20 mb-4\" />\n      <p className=\"text-foreground leading-relaxed mb-6 italic text-lg flex-1\">\n        &ldquo;{quote}&rdquo;\n      </p>\n      <div className=\"flex items-center gap-4\">\n        <div className=\"w-14 h-14 rounded-full overflow-hidden border-3 border-accent shadow-md\">\n          <Image\n            src={image}\n            alt={author}\n            width={56}\n            height={56}\n            className=\"w-full h-full object-cover\"\n          />\n        </div>\n        <div>\n          <p className=\"font-semibold text-foreground text-lg\">{author}</p>\n          {role && <p className=\"text-sm text-muted-foreground\">{role}</p>}\n        </div>\n        <div className=\"ml-auto flex text-accent\">\n          <Star className=\"w-5 h-5 fill-current\" />\n          <Star className=\"w-5 h-5 fill-current\" />\n          <Star className=\"w-5 h-5 fill-current\" />\n          <Star className=\"w-5 h-5 fill-current\" />\n          <Star className=\"w-5 h-5 fill-current\" />\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport default function Testimonials() {\n  return (\n    <section id=\"reviews\" className=\"py-20 lg:py-32 bg-secondary overflow-hidden\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-20 items-center\">\n          {/* Left: Images - Bento Grid Style */}\n          <BentoGallery />\n\n          {/* Right: Testimonial Deck */}\n            <div>\n              <h2 className=\"text-4xl md:text-5xl font-bold text-foreground mb-8\">\n                {TESTIMONIALS.heading} <span className=\"italic text-primary\">{TESTIMONIALS.headingAccent}</span> {TESTIMONIALS.headingSuffix}\n              </h2>\n\n              <CardDeck className=\"h-[420px] w-full\">\n                {TESTIMONIALS.items.map((item, index) => (\n                  <TestimonialCard\n                    key={index}\n                    quote={item.quote}\n                    author={item.author}\n                    role={item.role}\n                    image={item.image}\n                  />\n                ))}\n              </CardDeck>\n            </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":84,"type":"component"},{"path":"src/components/templates/wellness/TiltCard.tsx","code":"\"use client\";\n\nimport React, { useRef, useState } from \"react\";\n\ninterface TiltCardProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport default function TiltCard({ children, className = \"\" }: TiltCardProps) {\n  const cardRef = useRef<HTMLDivElement>(null);\n  const [transform, setTransform] = useState(\"\");\n  const [glare, setGlare] = useState({ x: 50, y: 50, opacity: 0 });\n\n  const handleMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {\n    if (!cardRef.current) return;\n\n    const rect = cardRef.current.getBoundingClientRect();\n    const x = e.clientX - rect.left;\n    const y = e.clientY - rect.top;\n    const centerX = rect.width / 2;\n    const centerY = rect.height / 2;\n\n    const rotateX = ((y - centerY) / centerY) * -10;\n    const rotateY = ((x - centerX) / centerX) * 10;\n\n    setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(1.02, 1.02, 1.02)`);\n    setGlare({\n      x: (x / rect.width) * 100,\n      y: (y / rect.height) * 100,\n      opacity: 0.15,\n    });\n  };\n\n  const handleMouseLeave = () => {\n    setTransform(\"perspective(1000px) rotateX(0deg) rotateY(0deg) scale3d(1, 1, 1)\");\n    setGlare({ x: 50, y: 50, opacity: 0 });\n  };\n\n  return (\n    <div\n      ref={cardRef}\n      className={`relative transition-transform duration-200 ease-out ${className}`}\n      style={{ transform, transformStyle: \"preserve-3d\" }}\n      onMouseMove={handleMouseMove}\n      onMouseLeave={handleMouseLeave}\n    >\n      {children}\n      {/* Glare effect */}\n      <div\n        className=\"pointer-events-none absolute inset-0 rounded-3xl transition-opacity duration-200\"\n        style={{\n          background: `radial-gradient(circle at ${glare.x}% ${glare.y}%, color-mix(in srgb, white calc(${glare.opacity} * 100%), transparent) 0%, transparent 60%)`,\n        }}\n      />\n    </div>\n  );\n}\n","language":"tsx","lineCount":59,"type":"component"},{"path":"src/components/templates/wellness/content/about.tsx","code":"/**\n * About page content for the wellness template.\n *\n * This page is currently a PagePlaceholder — the coding agent will build it out\n * and add content constants here (hero text, team bios, stats, CTA copy, etc.).\n */\n","language":"tsx","lineCount":7,"type":"component"},{"path":"src/components/templates/wellness/content/home.tsx","code":"/**\n * Home page content for the wellness template.\n * All editable text content is centralized here for click-to-edit functionality.\n */\n\nimport {\n  PROFESSIONAL_IMAGES,\n  type ProfessionalImage,\n} from \"@/professionalConstants\";\n\n// =============================================================================\n// Navigation\n// TODO(CODING_AGENT): Populate the logo with the most appropriate image\n// =============================================================================\n\nexport const NAVIGATION = {\n  logo: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n};\n\n// =============================================================================\n// Hero Section\n// TODO(CODING_AGENT): Update hero content for this business\n// =============================================================================\n\nexport const HERO = {\n  location: \"San Francisco\",\n  businessType: \"Yoga Studio\",\n  ctaText: \"Book Your Session Now\",\n  image: PROFESSIONAL_IMAGES[2] as ProfessionalImage,\n};\n\n// =============================================================================\n// Social Proof Section\n// TODO(CODING_AGENT): Update social proof with real rating, platform, and customer images\n// =============================================================================\n\nexport const SOCIAL_PROOF = {\n  rating: \"4.9/5\",\n  platform: \"Yelp\",\n  customerImages: [\n    \"https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=200&h=200&fit=crop&crop=face\",\n    \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face\",\n    \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face\",\n    \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=200&h=200&fit=crop&crop=face\",\n    \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&h=200&fit=crop&crop=face\",\n  ],\n};\n\n// =============================================================================\n// Services Section\n// TODO(CODING_AGENT): Update services content for this business\n// =============================================================================\n\nexport const SERVICES = {\n  heading: \"Our\",\n  headingAccent: \"Services\",\n  description: \"Discover our range of holistic treatments designed to enhance your well-being and restore your natural balance.\",\n  items: [\n    {\n      title: \"Massage Therapy\",\n      description: \"Experience deep relaxation with our therapeutic massage techniques\",\n      image: PROFESSIONAL_IMAGES[2] as ProfessionalImage,\n    },\n    {\n      title: \"Facial Rejuvenation\",\n      description: \"Restore your natural glow with customized facial treatments\",\n      image: PROFESSIONAL_IMAGES[3] as ProfessionalImage,\n    },\n    {\n      title: \"Aromatherapy\",\n      description: \"Harmonize your senses with essential oils and therapeutic scents\",\n      image: PROFESSIONAL_IMAGES[4] as ProfessionalImage,\n    },\n    {\n      title: \"Hydrotherapy\",\n      description: \"Rejuvenate your body with healing water-based treatments\",\n      image: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n    },\n  ],\n};\n\n// =============================================================================\n// Packages Section\n// TODO(CODING_AGENT): Update packages content for this business\n// =============================================================================\n\nexport const PACKAGES = {\n  label: \"Choose Your Experience\",\n  heading: \"Our\",\n  headingAccent: \"Packages\",\n  description: \"Select the perfect wellness journey tailored to your needs and schedule.\",\n  ctaText: \"Book Your Session Now\",\n  customCta: {\n    title: \"Not seeing exactly what you need?\",\n    description: \"Customize your package to perfectly match your wellness goals.\",\n    linkText: \"Get in Touch\",\n  },\n  tiers: [\n    {\n      name: \"Essentials\",\n      description: \"Perfect for first-time guests seeking a quick yet impactful escape into relaxation\",\n      price: \"$120\",\n      duration: \"60 minutes\",\n      features: [\n        \"60-minute massage therapy session\",\n        \"Revitalizing facial treatment\",\n        \"Soothing aromatherapy boost\",\n      ],\n    },\n    {\n      name: \"Premium\",\n      description: \"Comprehensive experience with personalized treatment for deeper relaxation\",\n      price: \"$200\",\n      duration: \"90 minutes\",\n      features: [\n        \"90-minute massage therapy session\",\n        \"Customized facial treatment\",\n        \"Complimentary wellness consultation\",\n        \"Hot stone therapy add-on\",\n      ],\n      featured: true,\n    },\n    {\n      name: \"Luxury\",\n      description: \"An immersive, all-day pampering experience for complete rejuvenation\",\n      price: \"$350\",\n      duration: \"Full day\",\n      features: [\n        \"Signature massage experience\",\n        \"Aromatherapy & hydrotherapy\",\n        \"Personalized wellness planning\",\n        \"Gourmet healthy lunch included\",\n        \"Take-home wellness kit\",\n      ],\n    },\n  ],\n};\n\n// =============================================================================\n// Gallery Section (BentoGallery)\n// TODO(CODING_AGENT): Update gallery content for this business\n// =============================================================================\n\nexport const GALLERY = {\n  images: [\n    { image: PROFESSIONAL_IMAGES[2] as ProfessionalImage, alt: \"Spa interior\", className: \"col-span-7 row-span-4\" },\n    { image: PROFESSIONAL_IMAGES[3] as ProfessionalImage, alt: \"Wellness treatment\", className: \"col-span-5 row-span-3\", rotation: \"-rotate-2 hover:rotate-0\" },\n    { image: PROFESSIONAL_IMAGES[4] as ProfessionalImage, alt: \"Relaxation\", className: \"col-span-4 row-span-2\", rotation: \"rotate-1 hover:rotate-0\" },\n    { image: PROFESSIONAL_IMAGES[0] as ProfessionalImage, alt: \"Peaceful environment\", className: \"col-span-4 row-span-3\" },\n    { image: PROFESSIONAL_IMAGES[1] as ProfessionalImage, alt: \"Spa experience\", className: \"col-span-4 row-span-3\", rotation: \"rotate-2 hover:rotate-0\" },\n  ],\n};\n\n// =============================================================================\n// Testimonials Section\n// TODO(CODING_AGENT): Update testimonials content for this business\n// =============================================================================\n\nexport const TESTIMONIALS = {\n  heading: \"What Our\",\n  headingAccent: \"Clients\",\n  headingSuffix: \"Say\",\n  items: [\n    {\n      quote: \"From the moment I walked in, I felt a sense of calm and luxury that completely melted away my stress. The personalized treatments helped me reconnect with my inner peace.\",\n      author: \"Alexa M.\",\n      role: \"Regular Client\",\n      image: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=200&h=200&fit=crop&crop=face\",\n    },\n    {\n      quote: \"The treatments are consistently outstanding, and the peaceful ambiance makes it my go-to retreat for relaxation and wellness. A true sanctuary for the mind, body, and soul.\",\n      author: \"Jane Austin\",\n      role: \"VIP Member\",\n      image: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=200&h=200&fit=crop&crop=face\",\n    },\n    {\n      quote: \"I've tried many spas, but nothing compares to the level of care and attention I receive here. Every visit leaves me feeling completely rejuvenated.\",\n      author: \"Michael R.\",\n      role: \"Monthly Member\",\n      image: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=200&h=200&fit=crop&crop=face\",\n    },\n    {\n      quote: \"The atmosphere is so peaceful and the staff truly cares about your wellbeing. I always leave feeling like a new person.\",\n      author: \"Sarah L.\",\n      role: \"Weekly Member\",\n      image: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=200&h=200&fit=crop&crop=face\",\n    },\n  ],\n};\n\n// =============================================================================\n// FAQ Section\n// TODO(CODING_AGENT): Update FAQ items with real questions and answers for this business\n// =============================================================================\n\nexport const FAQ = {\n  heading: \"Frequently Asked\",\n  headingAccent: \"Questions\",\n  items: [\n    {\n      id: \"services\",\n      question: \"What services do you offer?\",\n      answer: \"We offer a variety of holistic treatments including massage therapy, facial rejuvenation, aromatherapy, and hydrotherapy—all crafted to enhance your well-being.\",\n    },\n    {\n      id: \"booking\",\n      question: \"How do I book an appointment?\",\n      answer: 'Booking is simple! You can schedule your session directly through our website by clicking the \"Book Now\" button, or call us for a personalized appointment.',\n    },\n    {\n      id: \"customize\",\n      question: \"Can I customize my treatment package?\",\n      answer: \"Yes, we provide flexible, customizable packages to meet your unique wellness needs. Just reach out, and we'll tailor a plan that's right for you.\",\n    },\n    {\n      id: \"hours\",\n      question: \"What are your operating hours?\",\n      answer: \"We're dedicated to your relaxation and are open Monday through Saturday. Please check our contact section for detailed hours and holiday availability.\",\n    },\n    {\n      id: \"reservation\",\n      question: \"Do I need to make a reservation?\",\n      answer: \"Yes, we recommend scheduling your appointment in advance to ensure you secure the time that best fits your schedule.\",\n    },\n    {\n      id: \"certified\",\n      question: \"Are your therapists certified?\",\n      answer: \"Absolutely. Our team consists of licensed, highly-trained professionals committed to providing safe, effective, and personalized care.\",\n    },\n    {\n      id: \"first-visit\",\n      question: \"What should I expect during my first visit?\",\n      answer: \"During your first visit, you'll enjoy a thorough consultation to understand your needs, followed by a calming treatment session in our serene, thoughtfully designed space.\",\n    },\n  ],\n};\n\n// =============================================================================\n// Contact Section\n// TODO(CODING_AGENT): Update contact content for this business\n// =============================================================================\n\nexport const CONTACT = {\n  label: \"Get in Touch\",\n  heading: \"Get in Touch\",\n  headingAccent: \"Now\",\n  description: \"Ready to experience the ultimate in relaxation? Your sanctuary of serenity is just a click away.\",\n  operatingHours: \"Mon-Sat: 9am - 8pm\",\n  contactImage: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n};\n\n// =============================================================================\n// Footer Section\n// TODO(CODING_AGENT): Update footer content for this business\n// =============================================================================\n\nexport const FOOTER = {\n  description: \"Your sanctuary of serenity. We believe in holistic care that nurtures your body, mind, and soul. Experience the ultimate in relaxation and rejuvenation.\",\n  quickLinks: [\n    { label: \"Home\", href: \"/\" },\n    { label: \"Services\", href: \"/#services\" },\n    { label: \"Packages\", href: \"/#packages\" },\n    { label: \"Reviews\", href: \"/#reviews\" },\n    { label: \"FAQ\", href: \"/#faq\" },\n    { label: \"Contact\", href: \"/#contact\" },\n  ],\n  hours: \"Mon-Sat: 9am - 8pm\",\n  hoursSunday: \"Sun: By appointment\",\n};\n","language":"tsx","lineCount":270,"type":"component"},{"path":"src/components/templates/wellness/index.ts","code":"export { default as Hero } from \"./Hero\";\nexport { default as Services } from \"./Services\";\nexport { default as Packages } from \"./Packages\";\nexport { default as Testimonials } from \"./Testimonials\";\nexport { default as FAQSection } from \"./FAQ\";\nexport { default as Contact } from \"./Contact\";\nexport { default as SocialProof } from \"./SocialProof\";\nexport { default as CardDeck } from \"./CardDeck\";\nexport { default as BentoGallery } from \"./BentoGallery\";\nexport { default as SpotlightImage } from \"./SpotlightImage\";\n","language":"ts","lineCount":11,"type":"component"},{"path":"src/components/LeadForm.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\n\ninterface LeadFormProps {\n  className?: string;\n}\n\nexport default function LeadForm({ className = \"\" }: LeadFormProps) {\n  const [formData, setFormData] = useState({\n    name: \"\",\n    email: \"\",\n    phone: \"\",\n    message: \"\",\n  });\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleSubmit = (e: React.FormEvent) => {\n    e.preventDefault();\n    setSubmitted(true);\n  };\n\n  const handleChange = (\n    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>\n  ) => {\n    setFormData({ ...formData, [e.target.name]: e.target.value });\n  };\n\n  if (submitted) {\n    return (\n      <div className={`rounded-2xl p-8 bg-card shadow-lg text-center ${className}`}>\n        <div className=\"text-5xl mb-4\">✅</div>\n        <h3 className=\"text-2xl font-bold text-foreground mb-2\">Thank You!</h3>\n        <p className=\"text-muted-foreground\">\n          {\"We've received your request and will be in touch soon.\"}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n      <div className=\"text-center mb-6\">\n        <h3 className=\"text-2xl font-bold text-foreground mb-2\">\n          Get Your Free Quote\n        </h3>\n        <p className=\"text-muted-foreground\">\n          {\"Fill out the form and we'll get back to you within 24 hours\"}\n        </p>\n      </div>\n      <form onSubmit={handleSubmit} className=\"space-y-4\">\n        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n          <div>\n            <label\n              htmlFor=\"name\"\n              className=\"block text-sm font-medium text-foreground mb-1\"\n            >\n              Name\n            </label>\n            <input\n              type=\"text\"\n              id=\"name\"\n              name=\"name\"\n              required\n              value={formData.name}\n              onChange={handleChange}\n              className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n              placeholder=\"Your name\"\n            />\n          </div>\n          <div>\n            <label\n              htmlFor=\"email\"\n              className=\"block text-sm font-medium text-foreground mb-1\"\n            >\n              Email\n            </label>\n            <input\n              type=\"email\"\n              id=\"email\"\n              name=\"email\"\n              required\n              value={formData.email}\n              onChange={handleChange}\n              className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n              placeholder=\"your@email.com\"\n            />\n          </div>\n        </div>\n        <div>\n          <label\n            htmlFor=\"phone\"\n            className=\"block text-sm font-medium text-foreground mb-1\"\n          >\n            Phone\n          </label>\n          <input\n            type=\"tel\"\n            id=\"phone\"\n            name=\"phone\"\n            value={formData.phone}\n            onChange={handleChange}\n            className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n            placeholder=\"(555) 123-4567\"\n          />\n        </div>\n        <div>\n          <label\n            htmlFor=\"message\"\n            className=\"block text-sm font-medium text-foreground mb-1\"\n          >\n            Message\n          </label>\n          <textarea\n            id=\"message\"\n            name=\"message\"\n            rows={4}\n            value={formData.message}\n            onChange={handleChange}\n            className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent resize-none\"\n            placeholder=\"Tell us about your project...\"\n          />\n        </div>\n        <button\n          type=\"submit\"\n          className=\"w-full bg-primary text-primary-foreground py-4 rounded-full font-semibold hover:opacity-90 transition-opacity shadow-md\"\n        >\n          Submit Request\n        </button>\n      </form>\n    </div>\n  );\n}\n","language":"tsx","lineCount":134,"type":"shared"},{"path":"src/components/RealReviews.tsx","code":"\"use client\";\n\nimport React from \"react\";\n\n// Mock reviews for template preview\nconst MOCK_REVIEWS = [\n  {\n    name: \"Sarah M.\",\n    rating: 5,\n    text: \"Absolutely fantastic service! The team went above and beyond.\",\n    date: \"2 weeks ago\",\n  },\n  {\n    name: \"John D.\",\n    rating: 5,\n    text: \"Professional, reliable, and great value. Highly recommend!\",\n    date: \"1 month ago\",\n  },\n  {\n    name: \"Emily R.\",\n    rating: 5,\n    text: \"Best in the business. Will definitely use again.\",\n    date: \"3 weeks ago\",\n  },\n];\n\nfunction StarRating({ rating }: { rating: number }) {\n  return (\n    <div className=\"flex gap-1\">\n      {[...Array(5)].map((_, i) => (\n        <span key={i} className={i < rating ? \"text-yellow-500\" : \"text-muted\"}>\n          ★\n        </span>\n      ))}\n    </div>\n  );\n}\n\ninterface RealReviewsProps {\n  className?: string;\n}\n\nexport default function RealReviews({ className = \"\" }: RealReviewsProps) {\n  return (\n    <div className={`grid grid-cols-1 md:grid-cols-3 gap-6 ${className}`}>\n      {MOCK_REVIEWS.map((review, index) => (\n        <div\n          key={index}\n          className=\"bg-card rounded-2xl p-6 shadow-md hover:shadow-xl transition-shadow\"\n        >\n          <StarRating rating={review.rating} />\n          <p className=\"mt-4 text-foreground italic\">\n            {`\"${review.text}\"`}\n          </p>\n          <div className=\"mt-4 flex items-center gap-3\">\n            <div className=\"w-10 h-10 rounded-full bg-gradient-to-br from-primary to-accent flex items-center justify-center text-white font-bold\">\n              {review.name.charAt(0)}\n            </div>\n            <div>\n              <p className=\"font-semibold text-foreground\">{review.name}</p>\n              <p className=\"text-sm text-muted-foreground\">{review.date}</p>\n            </div>\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n}\n","language":"tsx","lineCount":69,"type":"shared"},{"path":"src/components/RealScheduling.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\n\nconst DAYS = [\"Sun\", \"Mon\", \"Tue\", \"Wed\", \"Thu\", \"Fri\", \"Sat\"];\nconst MONTHS = [\n  \"January\", \"February\", \"March\", \"April\", \"May\", \"June\",\n  \"July\", \"August\", \"September\", \"October\", \"November\", \"December\",\n];\n\nconst MOCK_TIME_SLOTS = [\n  \"9:00 AM\", \"10:00 AM\", \"10:30 AM\", \"11:00 AM\",\n  \"1:00 PM\", \"2:00 PM\", \"3:30 PM\", \"4:00 PM\",\n];\n\nfunction getDaysInMonth(year: number, month: number) {\n  return new Date(year, month + 1, 0).getDate();\n}\n\nfunction getFirstDayOfMonth(year: number, month: number) {\n  return new Date(year, month, 1).getDay();\n}\n\ninterface RealSchedulingProps {\n  className?: string;\n}\n\ntype Step = \"calendar\" | \"form\" | \"success\";\n\nexport default function RealScheduling({ className = \"\" }: RealSchedulingProps) {\n  const today = new Date();\n  const [step, setStep] = useState<Step>(\"calendar\");\n  const [selectedDay, setSelectedDay] = useState(today.getDate());\n  const [selectedTime, setSelectedTime] = useState<string | null>(null);\n  const year = today.getFullYear();\n  const month = today.getMonth();\n  const daysInMonth = getDaysInMonth(year, month);\n  const firstDay = getFirstDayOfMonth(year, month);\n\n  const calendarDays: (number | null)[] = [];\n  for (let i = 0; i < firstDay; i++) calendarDays.push(null);\n  for (let i = 1; i <= daysInMonth; i++) calendarDays.push(i);\n\n  const handleSelectDay = (day: number) => {\n    setSelectedDay(day);\n    setSelectedTime(null);\n  };\n\n  const dateLabel = `${MONTHS[month]} ${selectedDay}, ${year}`;\n\n  if (step === \"success\") {\n    return (\n      <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n        <div className=\"max-w-md mx-auto text-center py-8\">\n          <div className=\"text-5xl mb-4\">&#x2705;</div>\n          <h3 className=\"text-2xl font-bold text-foreground mb-2\">\n            You&apos;re Booked!\n          </h3>\n          <p className=\"text-muted-foreground mb-1\">\n            {dateLabel} at {selectedTime}\n          </p>\n          <p className=\"text-sm text-muted-foreground mb-6\">\n            A confirmation email has been sent.\n          </p>\n          <button\n            onClick={() => {\n              setStep(\"calendar\");\n              setSelectedTime(null);\n            }}\n            className=\"px-6 py-2 rounded-full text-sm font-medium border border-input text-foreground hover:bg-primary/10 transition-colors\"\n          >\n            Book Another\n          </button>\n        </div>\n      </div>\n    );\n  }\n\n  if (step === \"form\") {\n    return (\n      <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n        <div className=\"max-w-md mx-auto\">\n          <button\n            onClick={() => setStep(\"calendar\")}\n            className=\"text-sm text-muted-foreground hover:text-foreground transition-colors mb-4 flex items-center gap-1\"\n          >\n            &larr; Back\n          </button>\n\n          <div className=\"rounded-lg bg-primary/5 border border-primary/20 p-4 mb-6\">\n            <p className=\"text-sm font-medium text-foreground\">{dateLabel}</p>\n            <p className=\"text-sm text-muted-foreground\">{selectedTime}</p>\n          </div>\n\n          <h3 className=\"text-lg font-bold text-foreground mb-4\">Your Details</h3>\n          <form\n            onSubmit={(e) => {\n              e.preventDefault();\n              setStep(\"success\");\n            }}\n            className=\"space-y-4\"\n          >\n            <div>\n              <label htmlFor=\"sched-name\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Name\n              </label>\n              <input\n                type=\"text\"\n                id=\"sched-name\"\n                required\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n                placeholder=\"Your name\"\n              />\n            </div>\n            <div>\n              <label htmlFor=\"sched-email\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Email\n              </label>\n              <input\n                type=\"email\"\n                id=\"sched-email\"\n                required\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n                placeholder=\"your@email.com\"\n              />\n            </div>\n            <div>\n              <label htmlFor=\"sched-phone\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Phone\n              </label>\n              <input\n                type=\"tel\"\n                id=\"sched-phone\"\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent\"\n                placeholder=\"(555) 123-4567\"\n              />\n            </div>\n            <div>\n              <label htmlFor=\"sched-notes\" className=\"block text-sm font-medium text-foreground mb-1\">\n                Notes (optional)\n              </label>\n              <textarea\n                id=\"sched-notes\"\n                rows={3}\n                className=\"w-full px-4 py-3 rounded-lg border border-input bg-background text-foreground focus:ring-2 focus:ring-primary focus:border-transparent resize-none\"\n                placeholder=\"Anything we should know?\"\n              />\n            </div>\n            <button\n              type=\"submit\"\n              className=\"w-full bg-primary text-primary-foreground py-3 rounded-full font-semibold hover:opacity-90 transition-opacity shadow-md\"\n            >\n              Confirm Booking\n            </button>\n          </form>\n        </div>\n      </div>\n    );\n  }\n\n  return (\n    <div className={`rounded-2xl p-8 bg-card shadow-lg ${className}`}>\n      <div className=\"max-w-md mx-auto\">\n        <div className=\"text-center mb-6\">\n          <h3 className=\"text-xl font-bold text-foreground\">\n            {MONTHS[month]} {year}\n          </h3>\n        </div>\n\n        <div className=\"grid grid-cols-7 gap-1 mb-2\">\n          {DAYS.map((day) => (\n            <div\n              key={day}\n              className=\"text-center text-xs font-medium text-muted-foreground py-2\"\n            >\n              {day}\n            </div>\n          ))}\n        </div>\n\n        <div className=\"grid grid-cols-7 gap-1 mb-6\">\n          {calendarDays.map((day, i) => {\n            if (day === null) {\n              return <div key={`empty-${i}`} />;\n            }\n            const isPast = day < today.getDate();\n            const isSelected = day === selectedDay;\n            const isToday = day === today.getDate();\n\n            return (\n              <button\n                key={day}\n                onClick={() => !isPast && handleSelectDay(day)}\n                disabled={isPast}\n                className={`\n                  aspect-square rounded-lg text-sm font-medium transition-colors\n                  ${isPast ? \"text-muted-foreground/40 cursor-not-allowed\" : \"cursor-pointer hover:bg-primary/10\"}\n                  ${isSelected ? \"bg-primary text-primary-foreground\" : \"\"}\n                  ${isToday && !isSelected ? \"ring-1 ring-primary\" : \"\"}\n                `}\n              >\n                {day}\n              </button>\n            );\n          })}\n        </div>\n\n        <div>\n          <p className=\"text-sm font-medium text-foreground mb-3\">\n            Available times for {MONTHS[month]} {selectedDay}\n          </p>\n          <div className=\"flex flex-wrap gap-2\">\n            {MOCK_TIME_SLOTS.map((time) => (\n              <button\n                key={time}\n                onClick={() => setSelectedTime(time)}\n                className={`px-4 py-2 rounded-full text-sm font-medium border transition-colors ${\n                  selectedTime === time\n                    ? \"bg-primary text-primary-foreground border-primary\"\n                    : \"border-input text-foreground hover:bg-primary/10\"\n                }`}\n              >\n                {time}\n              </button>\n            ))}\n          </div>\n        </div>\n\n        {selectedTime && (\n          <div className=\"mt-6\">\n            <button\n              onClick={() => setStep(\"form\")}\n              className=\"w-full bg-primary text-primary-foreground py-3 rounded-full font-semibold hover:opacity-90 transition-opacity shadow-md\"\n            >\n              Continue\n            </button>\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":243,"type":"shared"}],"summary":{"totalFiles":23,"globals":1,"pages":2,"components":16,"shared":3,"layouts":1,"totalLines":2440}}