{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "spotlight-testimonial",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/testimonial-section/spotlight-testimonial.tsx",
      "content": "'use client'\r\nimport { cn } from '@/lib/utils'\r\nimport React, { useState, useEffect, useRef } from 'react'\r\nimport { motion, AnimatePresence } from 'motion/react'\r\nimport { TimelineAnimation } from '@/components/ui/timeline-animation'\r\n\r\nconst testimonials = [\r\n  {\r\n    id: 1,\r\n    quote: 'The level of craftsmanship is simply unparalleled. We saw a',\r\n    highlight: '40% increase',\r\n    quoteEnd: 'in developer productivity after integrating their UI kit.',\r\n    name: 'James Clear',\r\n    role: 'Head of Design at Atomic Systems',\r\n    url: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?q=80&w=880&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: 2,\r\n    quote:\r\n      'Working with this system has been transformative. Our team shipped features',\r\n    highlight: '3x faster',\r\n    quoteEnd: 'while maintaining exceptional quality standards.',\r\n    name: 'Sarah Chen',\r\n    role: 'Engineering Lead at Vercel',\r\n    url: 'https://images.unsplash.com/photo-1623366302587-b38b1ddaefd9?q=80&w=1025&auto=format&fit=crop',\r\n  },\r\n  {\r\n    id: 3,\r\n    quote:\r\n      \"I've never experienced such a seamless developer experience. We reduced our build time by\",\r\n    highlight: '60%',\r\n    quoteEnd: 'and our users immediately noticed the difference.',\r\n    name: 'Marcus Williams',\r\n    role: 'CTO at Linear',\r\n    url: 'https://images.unsplash.com/photo-1765438869321-d60141efd813?q=80&w=687&auto=format&fit=crop',\r\n  },\r\n]\r\n\r\nexport const SpotlightTestimonial: React.FC = () => {\r\n  const [activeIndex, setActiveIndex] = useState(0)\r\n  const timelineRef = useRef<HTMLDivElement>(null)\r\n\r\n  useEffect(() => {\r\n    const interval = setInterval(() => {\r\n      setActiveIndex((prev) => (prev + 1) % testimonials.length)\r\n    }, 3000)\r\n\r\n    return () => clearInterval(interval)\r\n  }, [])\r\n\r\n  const handleDotClick = (index: number) => {\r\n    setActiveIndex(index)\r\n  }\r\n\r\n  const activeTestimonial = testimonials[activeIndex]\r\n\r\n  return (\r\n    <section\r\n      ref={timelineRef}\r\n      className=\"bg-zinc-100 min-h-screen flex flex-col justify-center font-manrope\"\r\n    >\r\n      {/* Header */}\r\n      <div className=\"max-w-7xl mx-auto px-6 mb-16 text-center\">\r\n        <TimelineAnimation\r\n          animationNum={1}\r\n          timelineRef={timelineRef}\r\n          className=\"text-5xl font-bold tracking-tight text-zinc-900 mb-4\"\r\n        >\r\n          Success Stories\r\n        </TimelineAnimation>\r\n        <TimelineAnimation\r\n          animationNum={2}\r\n          timelineRef={timelineRef}\r\n          className=\"text-lg text-zinc-600 max-w-3xl mx-auto\"\r\n        >\r\n          Real results from real teams. Discover how industry leaders are\r\n          achieving remarkable outcomes with our design system.\r\n        </TimelineAnimation>\r\n      </div>\r\n\r\n      <div className=\"max-w-4xl mx-auto px-6 flex flex-col items-center text-center\">\r\n        <TimelineAnimation\r\n          animationNum={3}\r\n          timelineRef={timelineRef}\r\n          className=\"size-16 rounded-full bg-zinc-200 flex items-center justify-center border border-zinc-300\"\r\n        >\r\n          <svg\r\n            className=\"size-8 text-zinc-400\"\r\n            fill=\"currentColor\"\r\n            viewBox=\"0 0 24 24\"\r\n          >\r\n            <path d=\"M14.017 21L14.017 18C14.017 16.8954 14.9124 16 16.017 16H19.017V14H17.017C14.8079 14 13.017 12.2091 13.017 10V5H21.017V16L19.017 21H14.017ZM3.01709 21L3.01709 18C3.01709 16.8954 3.91252 16 5.01709 16H8.01709V14H6.01709C3.80795 14 2.01709 12.2091 2.01709 10V5H10.0171V16L8.01709 21H3.01709Z\" />\r\n          </svg>\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          animationNum={4}\r\n          timelineRef={timelineRef}\r\n          className=\"relative min-h-[200px] flex items-center justify-center mb-5\"\r\n        >\r\n          <AnimatePresence mode=\"wait\">\r\n            <motion.blockquote\r\n              key={activeTestimonial?.id}\r\n              initial={{ opacity: 0, y: 20 }}\r\n              animate={{ opacity: 1, y: 0 }}\r\n              exit={{ opacity: 0, y: -20 }}\r\n              transition={{ duration: 0.5, ease: [0.32, 0.72, 0, 1] }}\r\n              className=\"text-2xl sm:text-4xl font-semibold tracking-tight text-zinc-900 text-balance leading-tight\"\r\n            >\r\n              \"{activeTestimonial?.quote}{' '}\r\n              <span className=\"text-zinc-400 italic\">\r\n                {activeTestimonial?.highlight}\r\n              </span>{' '}\r\n              {activeTestimonial?.quoteEnd}\"\r\n            </motion.blockquote>\r\n          </AnimatePresence>\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          animationNum={5}\r\n          timelineRef={timelineRef}\r\n          className=\"relative min-h-24 flex items-center\"\r\n        >\r\n          <AnimatePresence mode=\"wait\">\r\n            <motion.div\r\n              key={activeTestimonial?.id}\r\n              initial={{ opacity: 0, scale: 0.9 }}\r\n              animate={{ opacity: 1, scale: 1 }}\r\n              exit={{ opacity: 0, scale: 0.9 }}\r\n              transition={{ duration: 0.4, ease: [0.32, 0.72, 0, 1] }}\r\n              className=\"flex flex-col items-center gap-2\"\r\n            >\r\n              <img\r\n                src={activeTestimonial?.url}\r\n                alt={activeTestimonial?.name}\r\n                className=\"size-12 rounded-full bg-zinc-900 shadow-lg mb-2 object-cover\"\r\n              />\r\n\r\n              <p className=\"text-sm font-bold text-zinc-900 uppercase tracking-widest\">\r\n                {activeTestimonial?.name}\r\n              </p>\r\n              <p className=\"text-xs text-zinc-500 font-medium\">\r\n                {activeTestimonial?.role}\r\n              </p>\r\n            </motion.div>\r\n          </AnimatePresence>\r\n        </TimelineAnimation>\r\n\r\n        <TimelineAnimation\r\n          animationNum={6}\r\n          timelineRef={timelineRef}\r\n          className=\"mt-6 flex gap-1.5\"\r\n        >\r\n          {testimonials.map((_, index) => (\r\n            <button\r\n              key={index}\r\n              onClick={() => handleDotClick(index)}\r\n              className={cn(\r\n                'h-2 rounded-full transition-all duration-300 cursor-pointer hover:bg-zinc-400',\r\n                index === activeIndex ? 'bg-zinc-900 w-8' : 'bg-zinc-300 w-2'\r\n              )}\r\n              aria-label={`Go to testimonial ${index + 1}`}\r\n            />\r\n          ))}\r\n        </TimelineAnimation>\r\n      </div>\r\n    </section>\r\n  )\r\n}\r\n",
      "type": "registry:block"
    },
    {
      "path": "./components/ui/timeline-animation.tsx",
      "content": "import type { Variants } from 'motion/react';\nimport { type HTMLMotionProps, motion, useInView } from 'motion/react';\nimport type React from 'react';\n\ntype TimelineContentProps<T extends keyof HTMLElementTagNameMap> = {\n  children?: React.ReactNode;\n  animationNum: number;\n  className?: string;\n  timelineRef: React.RefObject<HTMLElement | null>;\n  as?: T;\n  customVariants?: Variants;\n  once?: boolean;\n} & HTMLMotionProps<T>;\n\nexport const TimelineAnimation = <T extends keyof HTMLElementTagNameMap = 'div'>({\n  children,\n  animationNum,\n  timelineRef,\n  className,\n  as,\n  customVariants,\n  once = true,\n  ...props\n}: TimelineContentProps<T>) => {\n  const defaultSequenceVariants = {\n    visible: (i: number) => ({\n      filter: 'blur(0px)',\n      y: 0,\n      opacity: 1,\n      transition: {\n        delay: i * 0.5,\n        duration: 0.5,\n      },\n    }),\n    hidden: {\n      filter: 'blur(20px)',\n      y: 0,\n      opacity: 0,\n    },\n  };\n\n  const sequenceVariants = customVariants || defaultSequenceVariants;\n\n  const isInView = useInView(timelineRef, {\n    once,\n  });\n\n  const MotionComponent = motion[as || 'div'] as React.ElementType;\n\n  return (\n    <MotionComponent\n      initial='hidden'\n      animate={isInView ? 'visible' : 'hidden'}\n      custom={animationNum}\n      variants={sequenceVariants}\n      className={className}\n      {...props}\n    >\n      {children}\n    </MotionComponent>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}