{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "marque-testimonial",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/testimonial-section/marque-testimonial.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { motion } from 'motion/react'\r\nimport { Star, Quote } from 'lucide-react'\r\n\r\nconst testimonials = [\r\n  {\r\n    name: 'Sarah Drasner',\r\n    role: 'Staff Engineer',\r\n    company: 'Microsoft',\r\n    text: 'This changed the way our team builds components. The quality and attention to detail is exceptional.',\r\n    avatar: 'SD',\r\n    rating: 5,\r\n  },\r\n  {\r\n    name: 'Lee Robinson',\r\n    role: 'VP of Developer Experience',\r\n    company: 'Vercel',\r\n    text: 'The attention to detail in these designs is world-class. Every component feels polished and production-ready.',\r\n    avatar: 'LR',\r\n    rating: 5,\r\n  },\r\n  {\r\n    name: 'Guillermo Rauch',\r\n    role: 'CEO',\r\n    company: 'Vercel',\r\n    text: 'Stunning aesthetics combined with high performance. Exactly what modern web development needs.',\r\n    avatar: 'GR',\r\n    rating: 5,\r\n  },\r\n  {\r\n    name: 'Addy Osmani',\r\n    role: 'Engineering Manager',\r\n    company: 'Google',\r\n    text: 'Beautiful, accessible, and ready to go. The perfect foundation for any modern web application.',\r\n    avatar: 'AO',\r\n    rating: 5,\r\n  },\r\n  {\r\n    name: 'Cassidy Williams',\r\n    role: 'CTO',\r\n    company: 'Contenda',\r\n    text: \"I am using this in all my future side projects. It's become my go-to component library.\",\r\n    avatar: 'CW',\r\n    rating: 5,\r\n  },\r\n]\r\n\r\nexport const MarqueeTestimonials = () => {\r\n  return (\r\n    <section className=\"relative font-manrope w-full overflow-hidden bg-linear-to-br from-zinc-50 to-white py-16\">\r\n      {/* Header */}\r\n      <div className=\"max-w-7xl mx-auto px-6 mb-12 text-center\">\r\n        <h2 className=\"text-5xl font-bold tracking-tight text-zinc-900 mb-4\">\r\n          Trusted by Industry Leaders\r\n        </h2>\r\n        <p className=\"text-lg text-zinc-600 max-w-2xl mx-auto\">\r\n          See what top engineers and designers from leading companies are saying\r\n          about our work\r\n        </p>\r\n      </div>\r\n\r\n      {/* Gradient fades */}\r\n      <div className=\"pointer-events-none absolute inset-y-0 left-0 w-32 bg-linear-to-r from-zinc-50 to-transparent z-10\" />\r\n      <div className=\"pointer-events-none absolute inset-y-0 right-0 w-32 bg-linear-to-l from-zinc-50 to-transparent z-10\" />\r\n\r\n      <motion.div\r\n        className=\"flex gap-6 px-6 w-max\"\r\n        animate={{ x: ['0%', '-50%'] }}\r\n        transition={{\r\n          duration: 25,\r\n          repeat: Infinity,\r\n          ease: 'linear',\r\n        }}\r\n      >\r\n        {[...testimonials, ...testimonials].map((testimonial, i) => (\r\n          <div\r\n            key={i}\r\n            className=\"w-96 shrink-0 p-8 rounded-3xl bg-white border border-zinc-200 shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col gap-6 relative overflow-hidden group\"\r\n          >\r\n            {/* Quote icon */}\r\n            <div className=\"absolute top-4 right-4\">\r\n              <Quote className=\"w-12 h-12 fill-zinc-200 stroke-zinc-200\" />\r\n            </div>\r\n\r\n            {/* Rating */}\r\n            <div className=\"flex \">\r\n              {[...Array(testimonial.rating)].map((_, i) => (\r\n                <Star\r\n                  key={i}\r\n                  className=\"w-4 h-4 fill-yellow-400 text-yellow-400\"\r\n                />\r\n              ))}\r\n            </div>\r\n\r\n            {/* Testimonial text */}\r\n            <p className=\"text-zinc-700 leading-relaxed text-pretty font-medium\">\r\n              {testimonial.text}\r\n            </p>\r\n\r\n            {/* Author info */}\r\n            <div className=\"flex items-center gap-4 mt-auto\">\r\n              <div className=\"size-12 rounded-full bg-linear-to-br from-zinc-900 to-zinc-700 flex items-center justify-center text-white font-bold text-sm shadow-md\">\r\n                {testimonial.avatar}\r\n              </div>\r\n              <div className=\"flex-1\">\r\n                <p className=\"font-semibold text-zinc-900\">\r\n                  {testimonial.name}\r\n                </p>\r\n                <p className=\"text-sm text-zinc-600\">{testimonial.role}</p>\r\n                <p className=\"text-xs text-zinc-500\">{testimonial.company}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </motion.div>\r\n\r\n      {/* Second row with opposite direction */}\r\n      <motion.div\r\n        className=\"flex gap-6 px-6 w-max mt-6\"\r\n        animate={{ x: ['-50%', '0%'] }}\r\n        transition={{\r\n          duration: 30,\r\n          repeat: Infinity,\r\n          ease: 'linear',\r\n        }}\r\n      >\r\n        {[...testimonials, ...testimonials].map((testimonial, i) => (\r\n          <div\r\n            key={`second-${i}`}\r\n            className=\"w-96 shrink-0 p-8 rounded-3xl bg-white border border-zinc-200 shadow-lg hover:shadow-xl transition-all duration-300 flex flex-col gap-6 relative overflow-hidden group\"\r\n          >\r\n            {/* Quote icon */}\r\n            <div className=\"absolute top-4 left-4 rotate-180\">\r\n              <Quote className=\"w-12 h-12 fill-zinc-200 stroke-zinc-200\" />\r\n            </div>\r\n\r\n            {/* Rating */}\r\n            <div className=\"flex justify-end\">\r\n              {[...Array(testimonial.rating)].map((_, i) => (\r\n                <Star\r\n                  key={i}\r\n                  className=\"w-4 h-4 fill-yellow-400 text-yellow-400\"\r\n                />\r\n              ))}\r\n            </div>\r\n\r\n            {/* Testimonial text */}\r\n            <p className=\"text-zinc-700 leading-relaxed text-pretty font-medium\">\r\n              {testimonial.text}\r\n            </p>\r\n\r\n            {/* Author info */}\r\n            <div className=\"flex items-center gap-4 mt-auto\">\r\n              <div className=\"size-12 rounded-full bg-linear-to-br from-zinc-900 to-zinc-700 flex items-center justify-center text-white font-bold text-sm shadow-md\">\r\n                {testimonial.avatar}\r\n              </div>\r\n              <div className=\"flex-1\">\r\n                <p className=\"font-semibold text-zinc-900\">\r\n                  {testimonial.name}\r\n                </p>\r\n                <p className=\"text-sm text-zinc-600\">{testimonial.role}</p>\r\n                <p className=\"text-xs text-zinc-500\">{testimonial.company}</p>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        ))}\r\n      </motion.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"
}