{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stack-testimonial",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/testimonial-section/stack-testimonial.tsx",
      "content": "'use client'\r\nimport { Star } from 'lucide-react'\r\nimport React, { useState } from 'react'\r\nimport { motion, AnimatePresence } from 'motion/react'\r\nimport { Button } from '@repo/shadcn'\r\n\r\nconst testimonials = [\r\n  {\r\n    id: 1,\r\n    name: 'Alex Rivera',\r\n    role: 'Product Lead @ Linear',\r\n    quote:\r\n      \"Finding a system that balances aesthetic purity with functional robustness is rare. This library is the first one I've truly enjoyed using in production.\",\r\n    rating: 5,\r\n  },\r\n  {\r\n    id: 2,\r\n    name: 'Sarah Chen',\r\n    role: 'Design Director @ Stripe',\r\n    quote:\r\n      \"The attention to detail is remarkable. Every interaction feels intentional and polished. It's raised the bar for our entire design system.\",\r\n    rating: 5,\r\n  },\r\n  {\r\n    id: 3,\r\n    name: 'Marcus Johnson',\r\n    role: 'Engineering Manager @ Figma',\r\n    quote:\r\n      \"Performance meets elegance. We've integrated this across our platform and the developer experience has been phenomenal.\",\r\n    rating: 5,\r\n  },\r\n  {\r\n    id: 4,\r\n    name: 'Emma Williams',\r\n    role: 'CTO @ Notion',\r\n    quote:\r\n      'This is what modern UI libraries should aspire to be. Clean, powerful, and delightful to work with every single day.',\r\n    rating: 5,\r\n  },\r\n]\r\n\r\nexport const StackTestimonials = () => {\r\n  const [activeIndex, setActiveIndex] = useState(0)\r\n\r\n  const handleNext = () => {\r\n    setActiveIndex((prev) => (prev + 1) % testimonials.length)\r\n  }\r\n\r\n  const handlePrevious = () => {\r\n    setActiveIndex(\r\n      (prev) => (prev - 1 + testimonials.length) % testimonials.length\r\n    )\r\n  }\r\n\r\n  return (\r\n    <section className=\"relative font-manrope w-full bg-linear-to-br from-zinc-50 to-white py-16 px-6\">\r\n      <div className=\"max-w-2xl mx-auto\">\r\n        <article>\r\n          <h2 className=\"text-5xl font-bold tracking-tight text-zinc-900 mb-4\">\r\n            Customer Stories\r\n          </h2>\r\n          <p className=\"text-lg text-zinc-600 max-w-2xl mx-auto\">\r\n            Hear from industry leaders who have transformed their products with\r\n            our design system\r\n          </p>\r\n        </article>\r\n        <div className=\"relative h-110 flex items-center justify-center\">\r\n          {testimonials.map((testimonial, index) => {\r\n            const position =\r\n              (index - activeIndex + testimonials.length) % testimonials.length\r\n            const isActive = position === 0\r\n            const isVisible = position < 3\r\n\r\n            return (\r\n              <motion.div\r\n                key={testimonial.id}\r\n                className=\"absolute w-full\"\r\n                initial={false}\r\n                animate={{\r\n                  scale: isActive ? 1 : position === 1 ? 0.95 : 0.9,\r\n                  y: isActive ? 0 : position === 1 ? 16 : 32,\r\n                  x: isActive ? 0 : position === 1 ? 0 : 2,\r\n                  opacity: isVisible ? 1 : 0,\r\n                  zIndex: testimonials.length - position,\r\n                }}\r\n                transition={{\r\n                  duration: 0.4,\r\n                  ease: [0.32, 0.72, 0, 1],\r\n                }}\r\n                style={{\r\n                  pointerEvents: isActive ? 'auto' : 'none',\r\n                }}\r\n              >\r\n                <div\r\n                  className={`\r\n                  bg-white border  rounded-3xl p-10 shadow-xl relative\r\n                  ${isActive ? 'border-zinc-200' : position === 1 ? 'border-zinc-300 bg-zinc-50' : 'border-zinc-300 bg-zinc-100'}\r\n                `}\r\n                >\r\n                  <div className=\"flex justify-between items-start mb-10\">\r\n                    <div className=\"flex items-center gap-4\">\r\n                      <div className=\"size-12 rounded-2xl bg-zinc-900 shadow-md\" />\r\n                      <div>\r\n                        <p className=\"text-base font-bold text-zinc-900\">\r\n                          {testimonial.name}\r\n                        </p>\r\n                        <p className=\"text-xs text-zinc-500 font-medium uppercase tracking-wider\">\r\n                          {testimonial.role}\r\n                        </p>\r\n                      </div>\r\n                    </div>\r\n                    <div className=\"flex gap-0.5\">\r\n                      {[1, 2, 3, 4, 5].map((i) => (\r\n                        <span key={i} className=\"text-yellow-400 text-sm\">\r\n                          <Star fill=\"currentColor\" size={16} />\r\n                        </span>\r\n                      ))}\r\n                    </div>\r\n                  </div>\r\n\r\n                  <p className=\"text-xl text-zinc-700 leading-relaxed mb-10 italic\">\r\n                    \"{testimonial.quote}\"\r\n                  </p>\r\n\r\n                  <div className=\"flex items-center justify-between pt-6 border-t border-zinc-100\">\r\n                    <span className=\"text-xs font-semibold uppercase tracking-widest text-zinc-300\">\r\n                      Verified Review\r\n                    </span>\r\n                    <button className=\"text-xs font-semibold hover:underline\">\r\n                      Read full story →\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n              </motion.div>\r\n            )\r\n          })}\r\n        </div>\r\n\r\n        {/* Navigation Controls */}\r\n        <div className=\"flex items-center justify-center gap-4 mt-8\">\r\n          <Button\r\n            onClick={handlePrevious}\r\n            className=\"px-4 py-2 gap-0 flex items-center bg-zinc-900 text-white rounded-full text-sm font-medium hover:bg-zinc-800 transition-colors\"\r\n          >\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              className=\"w-5 h-5\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n            >\r\n              <path d=\"M5.5 12.002H19\" />\r\n              <path d=\"M10.9999 18.002C10.9999 18.002 4.99998 13.583 4.99997 12.0019C4.99996 10.4208 11 6.00195 11 6.00195\" />\r\n            </svg>{' '}\r\n            Previous\r\n          </Button>\r\n\r\n          <div className=\"flex gap-2\">\r\n            {testimonials.map((_, index) => (\r\n              <button\r\n                key={index}\r\n                onClick={() => setActiveIndex(index)}\r\n                className={`\r\n                h-2 rounded-full transition-all duration-300\r\n                ${index === activeIndex ? 'w-8 bg-zinc-900' : 'w-2 bg-zinc-300 hover:bg-zinc-400'}\r\n              `}\r\n              />\r\n            ))}\r\n          </div>\r\n\r\n          <Button\r\n            onClick={handleNext}\r\n            className=\"px-4 py-2 gap-0 flex items-center bg-zinc-900 text-white rounded-full text-sm font-medium hover:bg-zinc-800 transition-colors\"\r\n          >\r\n            Next{' '}\r\n            <svg\r\n              xmlns=\"http://www.w3.org/2000/svg\"\r\n              viewBox=\"0 0 24 24\"\r\n              width=\"24\"\r\n              height=\"24\"\r\n              className=\"w-5 h-5\"\r\n              fill=\"none\"\r\n              stroke=\"currentColor\"\r\n              stroke-width=\"2\"\r\n            >\r\n              <path d=\"M18.5 12L4.99997 12\" />\r\n              <path d=\"M13 18C13 18 19 13.5811 19 12C19 10.4188 13 6 13 6\" />\r\n            </svg>\r\n          </Button>\r\n        </div>\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"
}