{"success":true,"template":{"id":"studio","name":"Studio","description":"A warm, inviting design with a personal touch. Perfect for teachers, tutors, coaches, and personal service providers who want to build connection."},"sources":[{"path":"src/app/preview/studio/globals.css","code":"@import 'tailwindcss';\n\n@custom-variant dark (&:is(.dark *));\n\n:root {\n  /* Studio template - Soft, calming purple palette */\n  --background: oklch(0.988 0.002 280);\n  --foreground: oklch(0.22 0.015 280);\n  --card: oklch(1.0 0 0);\n  --card-foreground: oklch(0.22 0.015 280);\n  --popover: oklch(0.988 0.002 280);\n  --popover-foreground: oklch(0.22 0.015 280);\n\n  /* Light lavender purple - gentle and calming */\n  --primary: oklch(0.62 0.06 280);\n  --primary-foreground: oklch(0.99 0.002 280);\n\n  /* Warm off-white secondary */\n  --secondary: oklch(0.965 0.006 280);\n  --secondary-foreground: oklch(0.35 0.02 280);\n\n  /* Soft muted tones */\n  --muted: oklch(0.95 0.005 280);\n  --muted-foreground: oklch(0.50 0.015 280);\n\n  /* Soft rose accent - warm and inviting */\n  --accent: oklch(0.72 0.10 350);\n  --accent-foreground: oklch(0.99 0.002 350);\n\n  /* Red destructive */\n  --destructive: oklch(0.55 0.18 25);\n  --destructive-foreground: oklch(0.99 0.003 60);\n\n  /* Borders - very subtle */\n  --border: oklch(0.92 0.006 280);\n  --input: oklch(0.92 0.006 280);\n  --ring: oklch(0.62 0.06 280);\n\n  /* Chart colors */\n  --chart-1: oklch(0.62 0.06 280);\n  --chart-2: oklch(0.72 0.10 350);\n  --chart-3: oklch(0.60 0.08 200);\n  --chart-4: oklch(0.65 0.08 140);\n  --chart-5: oklch(0.58 0.08 320);\n\n  /* Friendly rounded corners */\n  --radius: 0.75rem;\n\n  /* Sidebar styling */\n  --sidebar: oklch(0.975 0.004 280);\n  --sidebar-foreground: oklch(0.22 0.015 280);\n  --sidebar-primary: oklch(0.62 0.06 280);\n  --sidebar-primary-foreground: oklch(0.99 0.002 280);\n  --sidebar-accent: oklch(0.95 0.006 280);\n  --sidebar-accent-foreground: oklch(0.35 0.02 280);\n  --sidebar-border: oklch(0.92 0.006 280);\n  --sidebar-ring: oklch(0.55 0.08 280);\n\n  /* Soft shadows */\n  --shadow-x: 0px;\n  --shadow-y: 4px;\n  --shadow-blur: 12px;\n  --shadow-spread: 0px;\n  --shadow-opacity: 0.06;\n  --shadow-color: #8b7cf0;\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-lg;\n    transition: background-color 0.2s;\n  }\n\n  ::selection {\n    @apply bg-primary/15 text-foreground;\n  }\n}\n\n/* Hide Next.js dev error overlay */\nnextjs-portal {\n  display: none !important;\n}\n","language":"css","lineCount":171,"type":"globals"},{"path":"src/app/preview/studio/page.tsx","code":"\"use client\";\n\nimport InteractiveGradient from \"@/components/templates/studio/InteractiveGradient\";\nimport Hero from \"@/components/templates/studio/Hero\";\nimport Services from \"@/components/templates/studio/Services\";\nimport PricingSection from \"@/components/templates/studio/PricingSection\";\nimport SchedulingSection from \"@/components/templates/studio/SchedulingSection\";\nimport ReviewsSection from \"@/components/templates/studio/ReviewsSection\";\nimport FAQ from \"@/components/templates/studio/FAQ\";\nimport Contact from \"@/components/templates/studio/Contact\";\nimport CTA from \"@/components/templates/studio/CTA\";\n\nconst sections = [\n  { id: \"hero\", name: \"Hero\", Component: Hero },\n  { id: \"services\", name: \"Services\", Component: Services },\n  { id: \"pricing\", name: \"Pricing\", Component: PricingSection },\n  { id: \"scheduling\", name: \"Book a Session\", Component: SchedulingSection },\n  { id: \"reviews\", name: \"Reviews\", Component: ReviewsSection },\n  { id: \"faq\", name: \"FAQ\", Component: FAQ },\n  { id: \"contact\", name: \"Contact\", Component: Contact },\n  { id: \"cta\", name: \"CTA\", Component: CTA },\n];\n\nexport default function StudioTemplate() {\n  return (\n    <div className=\"min-h-screen relative overflow-x-hidden\">\n      {/* Full-page interactive gradient */}\n      <InteractiveGradient />\n\n      <div className=\"relative\">\n        {sections.map(({ id, Component }) => (\n          <Component key={id} />\n        ))}\n      </div>\n    </div>\n  );\n}\n","language":"tsx","lineCount":38,"type":"page"},{"path":"src/app/preview/studio/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/studio/layout.tsx","code":"import type { Metadata } from \"next\";\nimport Navigation from \"@/components/templates/studio/Navigation\";\nimport Footer from \"@/components/templates/studio/Footer\";\nimport \"./globals.css\";\n\nexport const metadata: Metadata = {\n  title: \"Studio Template - Breezy Templates\",\n  description: \"A warm, inviting design perfect for teachers, tutors, coaches, and personal service providers\",\n};\n\nexport default function StudioTemplateLayout({\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/studio/CTA.tsx","code":"\"use client\";\n\nimport { ArrowRight, Phone } from \"lucide-react\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport { PROFESSIONAL_PHONE } from \"@/professionalConstants\";\nimport { CTA } from \"./content/home\";\n\nexport default function CTASection() {\n  return (\n    <section className=\"relative py-16\">\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center\">\n          <h2 className=\"text-3xl md:text-4xl font-bold text-primary-foreground mb-4\">\n            {CTA.heading}\n          </h2>\n          <p className=\"text-lg text-primary-foreground/85 mb-8 max-w-2xl mx-auto\">\n            {CTA.description}\n          </p>\n        <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n          <a\n            href=\"#contact\"\n            className=\"inline-flex items-center justify-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-bold text-lg hover:bg-accent/90 transition-all shadow-lg\"\n          >\n            {CTA.ctaText}\n            <ArrowRight className=\"w-5 h-5\" />\n          </a>\n          <a\n            href={`tel:${PROFESSIONAL_PHONE}`}\n            className=\"inline-flex items-center justify-center gap-2 bg-background text-primary px-8 py-4 rounded-xl font-bold text-lg hover:bg-background/90 transition-all shadow-lg\"\n          >\n            <Phone className=\"w-5 h-5\" />\n            Call {formatPhoneNumber(PROFESSIONAL_PHONE)}\n          </a>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":38,"type":"component"},{"path":"src/components/templates/studio/Contact.tsx","code":"\"use client\";\n\nimport { Phone, Mail, MapPin } from \"lucide-react\";\nimport LeadForm from \"@/components/LeadForm\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_EMAIL,\n  PROFESSIONAL_ADDRESS,\n} from \"@/professionalConstants\";\nimport { CONTACT } from \"./content/home\";\n\nexport default function Contact() {\n  return (\n    <section id=\"contact\" className=\"relative py-20\">\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\">\n          <div>\n            <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-6\">\n              {CONTACT.heading}\n            </h2>\n            <p className=\"text-lg text-muted-foreground mb-8\">\n              {CONTACT.description}\n            </p>\n\n            <div className=\"space-y-6\">\n              <a href={`tel:${PROFESSIONAL_PHONE}`} className=\"flex items-center gap-4 group\">\n                <div className=\"w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center\">\n                  <Phone className=\"w-6 h-6 text-primary\" />\n                </div>\n                <div>\n                  <p className=\"font-semibold text-foreground group-hover:text-primary transition-colors\">{formatPhoneNumber(PROFESSIONAL_PHONE)}</p>\n                </div>\n              </a>\n\n              <a href={`mailto:${PROFESSIONAL_EMAIL}`} className=\"flex items-center gap-4 group\">\n                <div className=\"w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center\">\n                  <Mail className=\"w-6 h-6 text-primary\" />\n                </div>\n                <div>\n                  <p className=\"font-semibold text-foreground group-hover:text-primary transition-colors\">{PROFESSIONAL_EMAIL}</p>\n                </div>\n              </a>\n\n              <div className=\"flex items-center gap-4\">\n                <div className=\"w-12 h-12 bg-primary/10 rounded-xl flex items-center justify-center\">\n                  <MapPin className=\"w-6 h-6 text-primary\" />\n                </div>\n                <div>\n                  <p className=\"text-muted-foreground\">{PROFESSIONAL_ADDRESS}</p>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <LeadForm />\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":62,"type":"component"},{"path":"src/components/templates/studio/FAQ.tsx","code":"\"use client\";\n\nimport { FAQ } from \"./content/home\";\n\nexport default function FAQSection() {\n  return (\n    <section id=\"faq\" className=\"relative py-20\">\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-12\">\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n            {FAQ.heading}\n          </h2>\n          <p className=\"text-lg text-muted-foreground\">\n            {FAQ.description}\n          </p>\n        </div>\n          <div className=\"divide-y divide-border\">\n            {FAQ.items.map((faq, index) => (\n              <details key={index} className=\"py-4 group\" open={index === 0}>\n                <summary className=\"flex items-center justify-between cursor-pointer text-base font-medium text-foreground list-none\">\n                  {faq.question}\n                  <span className=\"text-primary group-open:rotate-45 transition-transform\">+</span>\n                </summary>\n                <p className=\"pt-3 text-muted-foreground leading-relaxed pr-12\">\n                  {faq.answer}\n                </p>\n              </details>\n            ))}\n          </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":34,"type":"component"},{"path":"src/components/templates/studio/Footer.tsx","code":"import React from \"react\";\nimport Link from \"next/link\";\nimport { Facebook, Instagram, Linkedin } from \"lucide-react\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport PoweredByBreezy from \"@/components/PoweredByBreezy\";\nimport {\n  PROFESSIONAL_NAME,\n  PROFESSIONAL_PHONE,\n  PROFESSIONAL_EMAIL,\n  PROFESSIONAL_ADDRESS,\n  PROFESSIONAL_SOCIAL_LINKS,\n} from \"@/professionalConstants\";\n\nexport default function Footer() {\n  const currentYear = new Date().getFullYear();\n\n  return (\n    <footer className=\"bg-foreground text-background 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-4 gap-12\">\n          {/* Brand & Description */}\n          <div className=\"col-span-1 md:col-span-2\">\n            <h3 className=\"text-2xl font-bold mb-4\">{PROFESSIONAL_NAME}</h3>\n              <p className=\"text-background/70 mb-6 max-w-md\">\n                Personalized service tailored to your goals. Whether you&apos;re a beginner or advanced, we&apos;re here to guide you on your journey.\n              </p>\n            {/* Social Links */}\n            <div className=\"flex gap-4\">\n              {PROFESSIONAL_SOCIAL_LINKS?.facebook && (\n                <a\n                  href={PROFESSIONAL_SOCIAL_LINKS.facebook}\n                  className=\"w-10 h-10 bg-background/10 rounded-xl flex items-center justify-center hover:bg-background/20 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-background/10 rounded-xl flex items-center justify-center hover:bg-background/20 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-background/10 rounded-xl flex items-center justify-center hover:bg-background/20 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-4\">Quick Links</h4>\n            <div className=\"space-y-3\">\n              <Link href=\"/preview/studio\" className=\"block text-background/70 hover:text-background transition-colors\">\n                Home\n              </Link>\n              <Link href=\"/preview/studio/about\" className=\"block text-background/70 hover:text-background transition-colors\">\n                About\n              </Link>\n              <Link href=\"/preview/studio#services\" className=\"block text-background/70 hover:text-background transition-colors\">\n                Services\n              </Link>\n              <Link href=\"/preview/studio#reviews\" className=\"block text-background/70 hover:text-background transition-colors\">\n                Testimonials\n              </Link>\n              <Link href=\"/preview/studio#contact\" className=\"block text-background/70 hover:text-background transition-colors\">\n                Contact\n              </Link>\n            </div>\n          </div>\n\n          {/* Contact Info */}\n          <div>\n            <h4 className=\"font-semibold mb-4\">Get in Touch</h4>\n            <div className=\"space-y-3 text-background/70\">\n              {PROFESSIONAL_ADDRESS && (\n                <p>{PROFESSIONAL_ADDRESS}</p>\n              )}\n              {PROFESSIONAL_PHONE && (\n                <a href={`tel:${PROFESSIONAL_PHONE}`} className=\"block hover:text-background transition-colors\">\n                  {formatPhoneNumber(PROFESSIONAL_PHONE)}\n                </a>\n              )}\n              {PROFESSIONAL_EMAIL && (\n                <a href={`mailto:${PROFESSIONAL_EMAIL}`} className=\"block hover:text-background transition-colors\">\n                  {PROFESSIONAL_EMAIL}\n                </a>\n              )}\n              <div className=\"pt-2\">\n                <p className=\"font-medium text-background\">Availability:</p>\n                  <p>Weekdays: 9am - 8pm</p>\n                  <p>Weekends: 10am - 4pm</p>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        {/* Bottom Bar */}\n        <div className=\"border-t border-background/10 mt-12 pt-8\">\n          <div className=\"flex flex-col md:flex-row justify-between items-center gap-4\">\n            <p className=\"text-background/80 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-background/80\">\n              <a href=\"#\" className=\"hover:text-background transition-colors\">Privacy Policy</a>\n              <a href=\"#\" className=\"hover:text-background 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":126,"type":"component"},{"path":"src/components/templates/studio/Hero.tsx","code":"\"use client\";\n\nimport Image from \"next/image\";\nimport { ArrowRight, Phone, Star } from \"lucide-react\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_NAME,\n  PROFESSIONAL_PHONE,\n} from \"@/professionalConstants\";\nimport { HERO } from \"./content/home\";\n\nexport default function Hero() {\n  return (\n    <section className=\"relative pt-20 pb-16 lg:pt-24 lg:pb-20\">\n      <div className=\"relative 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 items-center\">\n          <div className=\"text-primary-foreground\">\n              <h1 className=\"text-4xl md:text-5xl lg:text-6xl font-bold mb-6 leading-tight\">\n                Your Trusted Local {PROFESSIONAL_NAME}\n              </h1>\n\n              <p className=\"text-lg text-primary-foreground/90 mb-8 leading-relaxed max-w-lg\">\n                {HERO.description}\n              </p>\n\n            <div className=\"flex flex-col sm:flex-row gap-4\">\n              <a\n                href=\"#contact\"\n                className=\"inline-flex items-center justify-center gap-2 bg-accent text-accent-foreground px-8 py-4 rounded-xl font-bold text-lg hover:bg-accent/90 transition-all shadow-lg\"\n              >\n                {HERO.ctaText}\n                <ArrowRight className=\"w-5 h-5\" />\n              </a>\n              <a\n                href={`tel:${PROFESSIONAL_PHONE}`}\n                className=\"inline-flex items-center justify-center gap-2 bg-background text-primary px-8 py-4 rounded-xl font-bold text-lg hover:bg-background/90 transition-all shadow-lg\"\n              >\n                <Phone className=\"w-5 h-5\" />\n                {formatPhoneNumber(PROFESSIONAL_PHONE)}\n              </a>\n            </div>\n          </div>\n\n          <div className=\"relative\">\n            <Image\n              src={HERO.image.url}\n              alt={HERO.image.description}\n              width={600}\n              height={500}\n              className=\"rounded-2xl shadow-2xl object-cover aspect-[4/5] border-4 border-border\"\n            />\n              <div className=\"absolute -bottom-6 -left-6 bg-background p-5 rounded-2xl shadow-xl max-w-xs\">\n                <div className=\"flex gap-1 text-accent mb-2\">\n                  {[...Array(5)].map((_, i) => (\n                    <Star key={i} className=\"w-5 h-5 fill-current\" />\n                  ))}\n                </div>\n                <p className=\"text-sm text-muted-foreground italic\">\n                  {HERO.testimonial.quote}\n                </p>\n                <p className=\"text-sm font-bold text-foreground mt-2\">\n                  — {HERO.testimonial.author}\n                </p>\n              </div>\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":71,"type":"component"},{"path":"src/components/templates/studio/InteractiveGradient.tsx","code":"\"use client\";\n\nimport React, { useEffect, useRef, useState } from \"react\";\n\n// Lerp helper for smooth interpolation\nfunction lerp(start: number, end: number, factor: number): number {\n  return start + (end - start) * factor;\n}\n\n// Interactive gradient background component with ambient animation\n// Soft, calming purple palette for studio template\nexport default function InteractiveGradient() {\n  const containerRef = useRef<HTMLDivElement>(null);\n  const mouseRef = useRef({ x: 0, y: 0 });\n  const hasMouseMoved = useRef(false);\n  const currentPos = useRef({ x: 50, y: 50 });\n  const targetPos = useRef({ x: 50, y: 50 });\n  const animationRef = useRef<number>(0);\n  const timeRef = useRef(0);\n  \n  const [mousePosition, setMousePosition] = useState({ x: 50, y: 50 });\n  const [ambientOffset, setAmbientOffset] = useState({ x: 0, y: 0 });\n  const [floatingBlobPos, setFloatingBlobPos] = useState({ x: 50, y: 55 });\n\n  useEffect(() => {\n    // Initialize to center of viewport\n    mouseRef.current = {\n      x: window.innerWidth / 2,\n      y: window.innerHeight / 2,\n    };\n\n    const updateTargetPosition = () => {\n      const container = containerRef.current;\n      if (!container) return;\n      \n      const rect = container.getBoundingClientRect();\n      targetPos.current = {\n        x: ((mouseRef.current.x - rect.left) / rect.width) * 100,\n        y: ((mouseRef.current.y - rect.top) / rect.height) * 100,\n      };\n    };\n\n    // Animation loop with ambient movement\n    const animate = () => {\n      timeRef.current += 0.006; // Slower, more gentle\n      \n      // Gentle floating animation\n      const ambientX = Math.sin(timeRef.current * 0.5) * 6 + Math.sin(timeRef.current * 0.8) * 4;\n      const ambientY = Math.cos(timeRef.current * 0.4) * 5 + Math.cos(timeRef.current * 0.7) * 3;\n      setAmbientOffset({ x: ambientX, y: ambientY });\n      \n      // Floating blob position (Blob 4)\n      const floatX = 50 + Math.sin(timeRef.current * 0.25) * 25 + ambientX * 1.0;\n      const floatY = 55 + Math.cos(timeRef.current * 0.35) * 18 + ambientY * 0.7;\n      setFloatingBlobPos({ x: floatX, y: floatY });\n      \n      // Smooth lerp towards target\n      const lerpFactor = hasMouseMoved.current ? 0.035 : 0.015;\n      currentPos.current = {\n        x: lerp(currentPos.current.x, targetPos.current.x, lerpFactor),\n        y: lerp(currentPos.current.y, targetPos.current.y, lerpFactor),\n      };\n      \n      setMousePosition({ ...currentPos.current });\n      animationRef.current = requestAnimationFrame(animate);\n    };\n\n    const handleMouseMove = (e: MouseEvent) => {\n      hasMouseMoved.current = true;\n      mouseRef.current = { x: e.clientX, y: e.clientY };\n      updateTargetPosition();\n    };\n\n    const handleMouseLeave = () => {\n      hasMouseMoved.current = false;\n      targetPos.current = { x: 50, y: 50 };\n    };\n\n    const handleScroll = () => {\n      updateTargetPosition();\n    };\n\n    window.addEventListener(\"mousemove\", handleMouseMove);\n    window.addEventListener(\"scroll\", handleScroll, { passive: true });\n    document.addEventListener(\"mouseleave\", handleMouseLeave);\n    \n    updateTargetPosition();\n    animationRef.current = requestAnimationFrame(animate);\n\n    return () => {\n      window.removeEventListener(\"mousemove\", handleMouseMove);\n      window.removeEventListener(\"scroll\", handleScroll);\n      document.removeEventListener(\"mouseleave\", handleMouseLeave);\n      cancelAnimationFrame(animationRef.current);\n    };\n  }, []);\n\n  const blobX = mousePosition.x + ambientOffset.x;\n  const blobY = mousePosition.y + ambientOffset.y;\n  \n  return (\n    <div ref={containerRef} className=\"absolute inset-0 overflow-hidden\">\n      {/* Full-page gradient - soft purple journey */}\n      <div \n        className=\"absolute inset-0\"\n        style={{\n          background: `linear-gradient(\n            180deg,\n            oklch(0.62 0.06 280) 0%,\n            oklch(0.65 0.055 280) 8%,\n            oklch(0.72 0.045 280) 15%,\n            oklch(0.82 0.03 280) 22%,\n            oklch(0.92 0.015 280) 30%,\n            oklch(0.96 0.008 280) 40%,\n            oklch(0.988 0.002 280) 50%,\n            oklch(0.965 0.006 280) 60%,\n            oklch(0.988 0.002 280) 72%,\n            oklch(0.62 0.06 280) 88%,\n            oklch(0.58 0.07 280) 100%\n          )`,\n        }}\n      />\n      \n      {/* Soft radial overlay for hero area */}\n      <div \n        className=\"absolute inset-0\"\n        style={{\n          background: `radial-gradient(\n            ellipse 110% 40% at 50% 10%,\n            oklch(0.58 0.08 280 / 0.4) 0%,\n            transparent 100%\n          )`,\n        }}\n      />\n      \n      {/* Subtle glow for bottom CTA section */}\n      <div \n        className=\"absolute inset-0\"\n        style={{\n          background: `radial-gradient(\n            ellipse 100% 20% at 50% 92%,\n            oklch(0.60 0.07 280 / 0.5) 0%,\n            transparent 100%\n          )`,\n        }}\n      />\n      \n      {/* Blob 1: Soft rose/pink - follows mouse */}\n      <div\n        className=\"absolute rounded-full pointer-events-none will-change-transform blur-3xl\"\n        style={{\n          width: \"45vmax\",\n          height: \"45vmax\",\n          background: \"radial-gradient(circle, oklch(0.78 0.10 350 / 0.4) 0%, oklch(0.72 0.08 345 / 0.15) 50%, transparent 70%)\",\n          left: `${blobX}%`,\n          top: `${blobY}%`,\n          transform: \"translate(-50%, -50%)\",\n        }}\n      />\n      \n      {/* Blob 2: Soft lavender purple - offset */}\n      <div\n        className=\"absolute rounded-full pointer-events-none will-change-transform blur-3xl\"\n        style={{\n          width: \"55vmax\",\n          height: \"55vmax\",\n          background: \"radial-gradient(circle, oklch(0.65 0.10 285 / 0.3) 0%, oklch(0.55 0.08 280 / 0.1) 50%, transparent 65%)\",\n          left: `${blobX + ambientOffset.x * 0.6}%`,\n          top: `${blobY + ambientOffset.y * 1.3}%`,\n          transform: \"translate(-50%, -50%)\",\n        }}\n      />\n      \n      {/* Blob 3: Soft peach/coral - inverse */}\n      <div\n        className=\"absolute rounded-full pointer-events-none will-change-transform blur-3xl\"\n        style={{\n          width: \"40vmax\",\n          height: \"40vmax\",\n          background: \"radial-gradient(circle, oklch(0.80 0.08 35 / 0.25) 0%, oklch(0.75 0.06 30 / 0.08) 50%, transparent 60%)\",\n          left: `${100 - blobX + ambientOffset.x * 0.7}%`,\n          top: `${blobY - ambientOffset.y * 0.6}%`,\n          transform: \"translate(-50%, -50%)\",\n        }}\n      />\n      \n      {/* Blob 4: Soft mint/teal - ambient floating */}\n      <div\n        className=\"absolute rounded-full pointer-events-none will-change-transform blur-3xl\"\n        style={{\n          width: \"35vmax\",\n          height: \"35vmax\",\n          background: \"radial-gradient(circle, oklch(0.78 0.06 180 / 0.2) 0%, oklch(0.70 0.05 175 / 0.06) 50%, transparent 60%)\",\n          left: `${floatingBlobPos.x}%`,\n          top: `${floatingBlobPos.y}%`,\n          transform: \"translate(-50%, -50%)\",\n        }}\n      />\n      \n      {/* Very subtle pattern overlay */}\n      <div \n        className=\"absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.015%22%3E%3Cpath%20d%3D%22M36%2034v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6%2034v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6%204V0H4v4H0v2h4v4h2V6h4V4H6z%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E')]\"\n        style={{\n          opacity: 0.5,\n          maskImage: \"linear-gradient(to bottom, black 0%, black 12%, transparent 35%, transparent 50%, black 65%, black 100%)\",\n          WebkitMaskImage: \"linear-gradient(to bottom, black 0%, black 12%, transparent 35%, transparent 50%, black 65%, black 100%)\",\n        }}\n      />\n    </div>\n  );\n}\n","language":"tsx","lineCount":212,"type":"component"},{"path":"src/components/templates/studio/Navigation.tsx","code":"\"use client\";\n\nimport React, { useState } from \"react\";\nimport Link from \"next/link\";\nimport Image from \"next/image\";\nimport { formatPhoneNumber } from \"@/utils/phoneUtils\";\nimport {\n  PROFESSIONAL_PHONE,\n} from \"@/professionalConstants\";\nimport { NAVIGATION } from \"./content/home\";\n\nconst NAV_LINKS = [\n  { label: \"Home\", href: \"/preview/studio\" },\n  { label: \"About\", href: \"/preview/studio/about\" },\n  { label: \"Services\", href: \"/preview/studio#services\" },\n  { label: \"Testimonials\", href: \"/preview/studio#reviews\" },\n  { label: \"Contact\", href: \"/preview/studio#contact\" },\n];\n\nexport default function Navigation() {\n  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);\n\n  return (\n    <nav className=\"fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur-sm border-b border-border\">\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-16\">\n          {/* Logo */}\n          <Link href=\"/preview/studio\">\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            {NAV_LINKS.map((link, index) => (\n              <Link\n                key={link.label}\n                href={link.href}\n                className=\"text-sm font-medium text-muted-foreground hover:text-primary transition-colors\"\n              >\n                {link.label}\n              </Link>\n            ))}\n          </div>\n\n          {/* CTA Button */}\n          <div className=\"hidden md:flex items-center gap-4\">\n            <a\n              href=\"#contact\"\n              className=\"bg-primary text-primary-foreground px-5 py-2.5 rounded-xl text-sm font-semibold hover:bg-primary/90 transition-colors\"\n            >\n              Get Started\n            </a>\n          </div>\n\n          {/* Mobile Menu Button */}\n          <button\n            className=\"md:hidden p-2 text-foreground\"\n            onClick={() => setMobileMenuOpen(!mobileMenuOpen)}\n            aria-label=\"Toggle menu\"\n          >\n            <div className=\"w-6 h-5 flex flex-col justify-between\">\n              <span\n                className={`block w-full h-0.5 bg-current transition-transform ${\n                  mobileMenuOpen ? \"rotate-45 translate-y-2\" : \"\"\n                }`}\n              />\n              <span\n                className={`block w-full h-0.5 bg-current transition-opacity ${\n                  mobileMenuOpen ? \"opacity-0\" : \"\"\n                }`}\n              />\n              <span\n                className={`block w-full h-0.5 bg-current transition-transform ${\n                  mobileMenuOpen ? \"-rotate-45 -translate-y-2\" : \"\"\n                }`}\n              />\n            </div>\n          </button>\n        </div>\n\n        {/* Mobile Menu */}\n        {mobileMenuOpen && (\n          <div className=\"md:hidden py-4 border-t border-border\">\n            {NAV_LINKS.map((link, index) => (\n              <Link\n                key={link.label}\n                href={link.href}\n                className=\"block py-3 text-sm font-medium text-foreground hover:text-primary\"\n                onClick={() => setMobileMenuOpen(false)}\n              >\n                {link.label}\n              </Link>\n            ))}\n            <a\n              href=\"#contact\"\n              className=\"block mt-4 bg-primary text-primary-foreground px-4 py-3 rounded-xl text-center font-semibold\"\n              onClick={() => setMobileMenuOpen(false)}\n            >\n              Get Started\n            </a>\n            {PROFESSIONAL_PHONE && (\n              <a\n                href={`tel:${PROFESSIONAL_PHONE}`}\n                className=\"block mt-2 text-center text-primary font-medium\"\n              >\n                {formatPhoneNumber(PROFESSIONAL_PHONE)}\n              </a>\n            )}\n          </div>\n        )}\n      </div>\n    </nav>\n  );\n}\n","language":"tsx","lineCount":115,"type":"component"},{"path":"src/components/templates/studio/Pricing.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { Check, ArrowRight } from \"lucide-react\";\nimport TiltCard from \"./TiltCard\";\nimport { PRICING } from \"./content/home\";\n\nexport default function Pricing() {\n  return (\n    <section id=\"pricing\" className=\"relative py-20\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-12\">\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n            {PRICING.heading}\n          </h2>\n            <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n              {PRICING.description}\n            </p>\n        </div>\n\n          <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8\">\n            {PRICING.tiers.map((tier, index) => (\n              <div key={index} className=\"relative\">\n                {tier.featured && (\n                  <div className=\"absolute -top-4 left-1/2 -translate-x-1/2 z-10\">\n                    <span className=\"px-4 py-1.5 bg-accent text-accent-foreground text-xs font-bold rounded-full shadow-lg whitespace-nowrap\">\n                      Most Popular\n                    </span>\n                  </div>\n                )}\n                <TiltCard\n                  className={`p-8 rounded-2xl border h-full flex flex-col ${\n                    tier.featured\n                      ? \"bg-gradient-to-br from-primary via-primary to-primary/90 text-primary-foreground border-primary shadow-2xl\"\n                      : \"bg-card text-foreground border-border hover:shadow-xl\"\n                  }`}\n                >\n                  <div className=\"mb-6\">\n                    <h3 className=\"text-xl font-bold mb-2\">{tier.name}</h3>\n                    <p\n                      className={`text-sm ${\n                        tier.featured ? \"text-primary-foreground/85\" : \"text-muted-foreground\"\n                      }`}\n                    >\n                      {tier.description}\n                    </p>\n                  </div>\n\n                  <div className=\"mb-6\">\n                    <div className=\"flex items-baseline gap-1\">\n                      <span className=\"text-4xl font-bold\">{tier.price}</span>\n                    </div>\n                    <p\n                      className={`text-sm mt-1 ${\n                        tier.featured ? \"text-primary-foreground/70\" : \"text-muted-foreground\"\n                      }`}\n                    >\n                      {tier.unit}\n                    </p>\n                  </div>\n\n                  <ul className=\"space-y-3 mb-8 flex-1\">\n                    {tier.features.map((feature, i) => (\n                      <li key={i} className=\"flex items-start gap-3\">\n                        <div\n                          className={`w-5 h-5 rounded-full flex items-center justify-center flex-shrink-0 mt-0.5 ${\n                            tier.featured ? \"bg-background/20\" : \"bg-primary/10\"\n                          }`}\n                        >\n                          <Check\n                            className={`w-3 h-3 ${\n                              tier.featured ? \"text-primary-foreground\" : \"text-primary\"\n                            }`}\n                          />\n                        </div>\n                        <span className=\"text-sm\">{feature}</span>\n                      </li>\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-xl font-bold transition-all mt-auto ${\n                      tier.featured\n                        ? \"bg-background text-primary hover:bg-background/90\"\n                        : \"bg-primary text-primary-foreground hover:bg-primary/90\"\n                    }`}\n                  >\n                    Get Started\n                    <ArrowRight className=\"w-4 h-4\" />\n                  </a>\n                </TiltCard>\n              </div>\n            ))}\n          </div>\n\n        <div className=\"text-center mt-12\">\n            <p className=\"text-muted-foreground\">\n              {PRICING.customNote.prefix}{\" \"}\n              <a href=\"#contact\" className=\"text-primary font-semibold hover:underline\">\n                {PRICING.customNote.linkText}\n              </a>{\" \"}\n              {PRICING.customNote.suffix}\n            </p>\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":110,"type":"component"},{"path":"src/components/templates/studio/PricingSection.tsx","code":"\"use client\";\n\nimport Pricing from \"./Pricing\";\n\nexport default function PricingSection() {\n  return <Pricing />;\n}\n","language":"tsx","lineCount":8,"type":"component"},{"path":"src/components/templates/studio/ReviewsSection.tsx","code":"\"use client\";\n\nimport RealReviews from \"@/components/RealReviews\";\nimport { REVIEWS } from \"./content/home\";\n\nexport default function Reviews() {\n  return (\n    <section id=\"reviews\" className=\"relative py-20\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-12\">\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n            {REVIEWS.heading}\n          </h2>\n        </div>\n        <RealReviews />\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":20,"type":"component"},{"path":"src/components/templates/studio/SchedulingSection.tsx","code":"\"use client\";\n\nimport RealScheduling from \"@/components/RealScheduling\";\n\nexport default function SchedulingSection() {\n  return (\n    <section id=\"scheduling\" className=\"relative py-20\">\n      <div className=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-12\">\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n            Book a Session\n          </h2>\n          <p className=\"text-lg text-muted-foreground max-w-xl mx-auto\">\n            Choose a time that works best for you\n          </p>\n        </div>\n        <RealScheduling />\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":22,"type":"component"},{"path":"src/components/templates/studio/ServiceCard.tsx","code":"\"use client\";\n\nimport React from \"react\";\nimport { User, Users, Video } from \"lucide-react\";\nimport { TiltCard } from \"@/components/templates/studio\";\n\ninterface ServiceCardProps {\n  name: string;\n  description: string;\n  iconType: \"private\" | \"group\" | \"online\";\n  featured?: boolean;\n}\n\nconst icons = {\n  private: User,\n  group: Users,\n  online: Video,\n};\n\nexport default function ServiceCard({ name, description, iconType, featured = false }: ServiceCardProps) {\n  const Icon = icons[iconType];\n\n  return (\n    <div className=\"relative h-full\">\n      {featured && (\n        <div className=\"absolute -top-3 left-1/2 -translate-x-1/2 z-10\">\n          <span className=\"px-4 py-1.5 bg-accent text-accent-foreground text-xs font-bold rounded-full shadow-lg whitespace-nowrap\">\n            Most Popular\n          </span>\n        </div>\n      )}\n      <TiltCard\n        className={`p-8 rounded-2xl border h-full ${\n          featured \n            ? \"bg-gradient-to-br from-primary via-primary to-primary/90 text-primary-foreground border-primary shadow-2xl\" \n            : \"bg-card text-foreground border-border hover:shadow-xl\"\n        }`}\n      >\n        <div className={`w-16 h-16 rounded-2xl flex items-center justify-center mb-6 ${\n          featured ? \"bg-background/20\" : \"bg-primary/10\"\n        }`}>\n          <Icon className={`w-8 h-8 ${featured ? \"text-primary-foreground\" : \"text-primary\"}`} />\n        </div>\n        \n        <h3 className=\"text-xl font-bold mb-3\">{name}</h3>\n        <p className={`text-sm leading-relaxed ${featured ? \"text-primary-foreground/85\" : \"text-muted-foreground\"}`}>\n          {description}\n        </p>\n      </TiltCard>\n    </div>\n  );\n}\n","language":"tsx","lineCount":53,"type":"component"},{"path":"src/components/templates/studio/Services.tsx","code":"\"use client\";\n\nimport ServiceCard from \"./ServiceCard\";\nimport { SERVICES } from \"./content/home\";\n\nexport default function Services() {\n  return (\n    <section id=\"services\" className=\"relative py-20\">\n      <div className=\"max-w-7xl mx-auto px-4 sm:px-6 lg:px-8\">\n        <div className=\"text-center mb-12\">\n          <h2 className=\"text-3xl md:text-4xl font-bold text-foreground mb-4\">\n            {SERVICES.heading}\n          </h2>\n          <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n            {SERVICES.description}\n          </p>\n        </div>\n        <div className=\"grid grid-cols-1 md:grid-cols-3 gap-8 pt-4\">\n          {SERVICES.items.map((service, index) => (\n            <ServiceCard\n              key={index}\n              name={service.name}\n              description={service.description}\n              iconType={[\"private\", \"group\", \"online\"][index] as \"private\" | \"group\" | \"online\"}\n              featured={index === 0}\n            />\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n","language":"tsx","lineCount":33,"type":"component"},{"path":"src/components/templates/studio/TiltCard.tsx","code":"\"use client\";\n\nimport React, { useRef, useState } from \"react\";\n\ninterface TiltCardProps {\n  children: React.ReactNode;\n  className?: string;\n  glareEnabled?: boolean;\n  tiltAmount?: number;\n  scaleOnHover?: number;\n}\n\nexport default function TiltCard({\n  children,\n  className = \"\",\n  glareEnabled = true,\n  tiltAmount = 10,\n  scaleOnHover = 1.02,\n}: TiltCardProps) {\n  const cardRef = useRef<HTMLDivElement>(null);\n  const [transform, setTransform] = useState(\"\");\n  const [glarePosition, setGlarePosition] = useState({ x: 50, y: 50 });\n  const [isHovering, setIsHovering] = useState(false);\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) / tiltAmount;\n    const rotateY = (centerX - x) / tiltAmount;\n    \n    setTransform(`perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) scale3d(${scaleOnHover}, ${scaleOnHover}, ${scaleOnHover})`);\n    setGlarePosition({ x: (x / rect.width) * 100, y: (y / rect.height) * 100 });\n  };\n\n  const handleMouseEnter = () => {\n    setIsHovering(true);\n  };\n\n  const handleMouseLeave = () => {\n    setTransform(\"\");\n    setIsHovering(false);\n  };\n\n  return (\n    <div\n      ref={cardRef}\n      onMouseMove={handleMouseMove}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      style={{ transform, transition: \"transform 0.15s ease-out\" }}\n      className={`relative group ${className}`}\n    >\n      {/* Glare effect */}\n      {glareEnabled && (\n        <div \n          className={`pointer-events-none absolute inset-0 rounded-[inherit] transition-opacity duration-300 ${isHovering ? 'opacity-100' : 'opacity-0'}`}\n          style={{\n            background: `radial-gradient(circle at ${glarePosition.x}% ${glarePosition.y}%, color-mix(in srgb, white 15%, transparent) 0%, transparent 50%)`,\n          }}\n        />\n      )}\n      {children}\n    </div>\n  );\n}\n","language":"tsx","lineCount":72,"type":"component"},{"path":"src/components/templates/studio/content/about.tsx","code":"/**\n * About page content for the studio 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/studio/content/home.tsx","code":"/**\n * Home page content for the studio template.\n * All editable text content is centralized here for click-to-edit functionality.\n */\n\nimport {\n  PROFESSIONAL_IMAGES,\n  PROFESSIONAL_SERVICES,\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  // Headline includes PROFESSIONAL_NAME dynamically in component\n  description: \"Quality service you can trust since 1998. Personalized instruction designed around your goals — whether you're just starting out or looking to advance your skills.\",\n  ctaText: \"Book Your Free Trial\",\n  testimonial: {\n    quote: \"Best experience I've ever had!\",\n    author: \"Sarah M., Client\",\n  },\n  image: PROFESSIONAL_IMAGES[0] as ProfessionalImage,\n};\n\n// =============================================================================\n// Welcome Banner Section\n// TODO(CODING_AGENT): Update welcome banner content for this business\n// =============================================================================\n\nexport const WELCOME_BANNER = {\n  features: [\n    { icon: \"heart\", title: \"Patient Service\", description: \"Work at your own pace\" },\n    { icon: \"sliders\", title: \"Customized Approach\", description: \"Tailored to your goals\" },\n    { icon: \"calendar\", title: \"Flexible Schedule\", description: \"Convenient times available\" },\n    { icon: \"checkCircle\", title: \"Free Consultation\", description: \"No commitment to start\" },\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 Services\",\n  description: \"Options to match your needs and schedule\",\n  items: [\n    { name: PROFESSIONAL_SERVICES[0]?.name ?? \"Private Sessions\", description: PROFESSIONAL_SERVICES[0]?.description ?? \"One-on-one personalized instruction tailored to your goals\" },\n    { name: PROFESSIONAL_SERVICES[1]?.name ?? \"Group Sessions\", description: PROFESSIONAL_SERVICES[1]?.description ?? \"Learn alongside others in a supportive group environment\" },\n    { name: PROFESSIONAL_SERVICES[2]?.name ?? \"Online Sessions\", description: PROFESSIONAL_SERVICES[2]?.description ?? \"Convenient virtual sessions from the comfort of your home\" },\n  ],\n};\n\n// =============================================================================\n// Pricing Section\n// TODO(CODING_AGENT): Update pricing content for this business\n// =============================================================================\n\nexport const PRICING = {\n  heading: \"Simple, Transparent Pricing\",\n  description: \"Choose the plan that fits your goals. All packages include personalized attention and flexible scheduling.\",\n  customNote: {\n    prefix: \"Need a custom arrangement?\",\n    linkText: \"Contact us\",\n    suffix: \"to discuss your specific needs.\",\n  },\n  tiers: [\n    {\n      name: \"Single Session\",\n      description: \"Perfect for trying out our services or occasional visits\",\n      price: \"$75\",\n      unit: \"per session\",\n      features: [\n        \"60-minute private session\",\n        \"Personalized instruction\",\n        \"Flexible scheduling\",\n      ],\n    },\n    {\n      name: \"Monthly Package\",\n      description: \"Our most popular option for consistent progress\",\n      price: \"$260\",\n      unit: \"per month\",\n      features: [\n        \"4 sessions per month\",\n        \"Priority scheduling\",\n        \"Progress tracking\",\n        \"Email support between sessions\",\n      ],\n      featured: true,\n    },\n    {\n      name: \"Premium Plan\",\n      description: \"Intensive program for accelerated results\",\n      price: \"$450\",\n      unit: \"per month\",\n      features: [\n        \"8 sessions per month\",\n        \"Customized learning plan\",\n        \"Unlimited email support\",\n        \"Recording of sessions\",\n        \"Resource materials included\",\n      ],\n    },\n  ],\n};\n\n// =============================================================================\n// Reviews Section\n// TODO(CODING_AGENT): Update reviews content for this business\n// =============================================================================\n\nexport const REVIEWS = {\n  heading: \"What Our Clients Say\",\n};\n\n// =============================================================================\n// FAQ Section\n// TODO(CODING_AGENT): Update faq content for this business\n// =============================================================================\n\nexport const FAQ = {\n  heading: \"Frequently Asked Questions\",\n  description: \"Everything you need to know before getting started\",\n  items: [\n    {\n      question: \"What experience level do you work with?\",\n      answer: \"We work with clients of all levels — from complete beginners to those looking to refine their skills. Each session is tailored to your current abilities and goals.\",\n    },\n    {\n      question: \"How long are the sessions?\",\n      answer: \"Standard sessions are 60 minutes, though 30-minute and 90-minute options are available. We'll find the format that works best for your needs and schedule.\",\n    },\n    {\n      question: \"What is your cancellation policy?\",\n      answer: \"We ask for at least 24 hours notice for cancellations. Life happens — if you need to reschedule, just let us know and we'll find a time that works.\",\n    },\n    {\n      question: \"Do you offer virtual services?\",\n      answer: \"Yes! We offer both in-person and virtual sessions via video call. Virtual sessions are just as effective and give you the flexibility to connect from anywhere.\",\n    },\n  ],\n};\n\n// =============================================================================\n// Contact Section\n// TODO(CODING_AGENT): Update contact content for this business\n// =============================================================================\n\nexport const CONTACT = {\n  heading: \"Get In Touch\",\n  description: \"Ready to start? Reach out today.\",\n};\n\n// =============================================================================\n// CTA Section\n// TODO(CODING_AGENT): Update cta content for this business\n// =============================================================================\n\nexport const CTA = {\n  heading: \"Ready to Get Started?\",\n  description: \"Take the first step today. Book your free consultation and discover how we can help you reach your goals.\",\n  ctaText: \"Book Your Free Trial\",\n};\n","language":"tsx","lineCount":177,"type":"component"},{"path":"src/components/templates/studio/index.ts","code":"export { default as ServiceCard } from \"./ServiceCard\";\nexport { default as TiltCard } from \"./TiltCard\";\nexport { default as InteractiveGradient } from \"./InteractiveGradient\";\nexport { default as Pricing } from \"./Pricing\";","language":"ts","lineCount":4,"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":24,"globals":1,"pages":2,"components":17,"shared":3,"layouts":1,"totalLines":1851}}