{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-carousel",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/testimonial-section/testimonial-carousel.tsx",
      "content": "'use client'\r\nimport React from 'react'\r\nimport { cn } from '@/lib/utils'\r\nimport {\r\n  Carousel,\r\n  SliderContainer,\r\n  Slider,\r\n  SliderPrevButton,\r\n  SliderNextButton,\r\n} from '@/components/ui/carousel'\r\nimport { Star } from 'lucide-react'\r\n\r\nconst TESTIMONIALS = [\r\n  {\r\n    name: 'Beverley',\r\n    role: 'Co-Founder NYZ',\r\n    image: 'https://picsum.photos/seed/beverley/100/100',\r\n    quote:\r\n      \"Joining the program dramatically improved my writing skills and thought leadership, resulting in a notable increase in inbound leads. It's a life-changing experience with promising future prospects.\",\r\n    rating: 5,\r\n    videoThumbnail: 'https://picsum.photos/seed/testimonial-video/1200/675',\r\n  },\r\n  {\r\n    name: 'Marcus Aurelius',\r\n    role: 'Founder Stoic Mind',\r\n    image: 'https://picsum.photos/seed/marcus/100/100',\r\n    quote:\r\n      \"Lara's frameworks for personal branding are unparalleled. In six months, we've seen engagement rates triple across our primary social channels.\",\r\n    rating: 5,\r\n    videoThumbnail: 'https://picsum.photos/seed/testimonial2/1200/675',\r\n  },\r\n  {\r\n    name: 'Sarah Jenkins',\r\n    role: 'CEO GrowthLab',\r\n    image: 'https://picsum.photos/seed/sarah/100/100',\r\n    quote:\r\n      \"The clarity and depth of the mentorship provided exceeded all expectations. It's not just about numbers; it's about building a sustainable legacy.\",\r\n    rating: 5,\r\n    videoThumbnail: 'https://picsum.photos/seed/testimonial3/1200/675',\r\n  },\r\n]\r\n\r\nexport const TestimonialCarousel = () => {\r\n  return (\r\n    <section className=\"bg-white py-24 px-6 font-dmSans text-black min-h-screen\">\r\n      <div className=\"max-w-6xl mx-auto border-x border-neutral-200\">\r\n        <div className=\"text-center mb-16 space-y-4\">\r\n          <div className=\"inline-flex items-center gap-2 text-sm text-nuetral-500 font-medium uppercase tracking-wider\">\r\n            « Testimonials »\r\n          </div>\r\n          <h2 className=\"text-5xl md:text-6xl font-semibold text-nuetral-900 text-balance\">\r\n            Testimonials & Social Proof\r\n          </h2>\r\n        </div>\r\n\r\n        <Carousel options={{ loop: true }}>\r\n          <SliderContainer>\r\n            {TESTIMONIALS.map((t, i) => (\r\n              <Slider key={i} className=\"w-full p-0\">\r\n                <div className=\"grid grid-cols-1 lg:grid-cols-2 h-full border-y border-neutral-200\">\r\n                  <div className=\"rounded-2xl h-full w-full p-4 overflow-hidden aspect-video bg-nuetral-100 relative group cursor-pointer\">\r\n                    <img\r\n                      src={t.videoThumbnail}\r\n                      className=\"w-full h-full object-cover transition-transform duration-700\"\r\n                      alt={`Testimonial Video ${i}`}\r\n                    />\r\n                  </div>\r\n                  <div className=\"border-l border-neutral-200\">\r\n                    <div className=\"flex items-center gap-4 p-4 bg-neutral-100 relative\">\r\n                      <div className=\"absolute pointer-events-none bottom-0 left-0 z-10 right-0 top-0 bg-[repeating-linear-gradient(45deg,#eeeeee_0px_1px,transparent_1px_8px)] \"></div>\r\n\r\n                      <div className=\"size-16 relative z-10 rounded-2xl overflow-hidden bg-nuetral-200\">\r\n                        <img src={t.image} alt={t.name} />\r\n                      </div>\r\n                      <div className=\"relative z-10\">\r\n                        <h4 className=\"text-xl font-bold\">{t.name}</h4>\r\n                        <p className=\"text-sm text-nuetral-500\">{t.role}</p>\r\n                      </div>\r\n                      <div className=\"ml-auto flex gap-1 \">\r\n                        {[...Array(t.rating)].map((_, i) => (\r\n                          <span key={i} className=\"text-lg\">\r\n                            <Star className=\"fill-yellow-400 stroke-yellow-400 size-4\" />\r\n                          </span>\r\n                        ))}\r\n                      </div>\r\n                    </div>\r\n                    <p className=\"text-2xl p-4 text-nuetral-800 leading-relaxed font-medium text-pretty border-t border-neutral-200 pt-4\">\r\n                      \"{t.quote}\"\r\n                    </p>\r\n                    <div className=\"flex gap-4 p-4\">\r\n                      <SliderPrevButton\r\n                        className=\"size-12 rounded-full cursor-pointer bg-neutral-200 border hover:text-white border-neutral-300 flex items-center justify-center hover:bg-yellow-500 transition-colors\"\r\n                        aria-label=\"Previous testimonial\"\r\n                      >\r\n                        <span className=\"text-xl\">\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                            fill=\"none\"\r\n                            stroke=\"currentColor\"\r\n                            stroke-width=\"1.5\"\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                        </span>\r\n                      </SliderPrevButton>\r\n                      <SliderNextButton\r\n                        className=\"size-12 rounded-full cursor-pointer hover:bg-yellow-500 hover:text-white bg-neutral-200 border border-neutral-300 text-black flex items-center justify-center transition-colors\"\r\n                        aria-label=\"Next testimonial\"\r\n                      >\r\n                        <span className=\"text-xl\">\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                            fill=\"none\"\r\n                            stroke=\"currentColor\"\r\n                            stroke-width=\"1.5\"\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                        </span>\r\n                      </SliderNextButton>\r\n                    </div>\r\n                  </div>\r\n                </div>\r\n              </Slider>\r\n            ))}\r\n          </SliderContainer>\r\n        </Carousel>\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"
}