{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonial-basic",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "../../packages/blocks/src/testimonial-section/testimonial-basic.tsx",
      "content": "import React from 'react'\r\nimport { cn } from '@/lib/utils'\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.\",\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 TestimonialBasic = () => {\r\n  return (\r\n    <section className=\"bg-white text-black font-dmSans py-24 px-6 md:px-12 lg:px-24\">\r\n      <div className=\"max-w-7xl mx-auto border-x border-neutral-200\">\r\n        <div className=\"text-center mb-24\">\r\n          <div className=\"inline-flex items-center gap-2 text-sm text-nuetral-400 font-semibold uppercase tracking-widest\">\r\n            « Testimonials »\r\n          </div>\r\n          <h2 className=\"text-5xl md:text-7xl font-black text-nuetral-900 tracking-tighter uppercase\">\r\n            Social Proof.\r\n          </h2>\r\n        </div>\r\n        {TESTIMONIALS.map((t, i) => (\r\n          <div\r\n            key={i}\r\n            className={cn(\r\n              'grid grid-cols-1 lg:grid-cols-12  border-y border-neutral-200',\r\n              i % 2 === 1 && 'lg:direction-rtl'\r\n            )}\r\n          >\r\n            <div className=\"lg:col-span-7 p-6 bg-neutral-100 overflow-hidden aspect-video relative group cursor-pointer\">\r\n              <div className=\"absolute pointer-events-none bottom-0 left-0 right-0 top-0 bg-[repeating-linear-gradient(45deg,#eeeeee_0px_1px,transparent_1px_8px)] \"></div>\r\n\r\n              <img\r\n                src={t.videoThumbnail}\r\n                className=\"w-full h-full relative z-10 object-cover transition-transform duration-300 rounded-2xl\"\r\n                alt={`Testimonial Video ${i}`}\r\n              />\r\n              <div className=\"absolute bottom-8 left-8 z-10 bg-black/50 backdrop-blur px-6 py-3 rounded-2xl border border-white/20\">\r\n                <span className=\"text-white font-mono text-sm tracking-tighter\">\r\n                  04:32 // HD_PLAYBACK\r\n                </span>\r\n              </div>\r\n            </div>\r\n\r\n            <div className=\"lg:col-span-5 border-l border-neutral-200\">\r\n              <div className=\"flex gap-2 items-center border-b p-2 bg-neutral-50 border-neutral-200 relative\">\r\n                <div className=\"absolute pointer-events-none  bottom-0 left-0 right-0 top-0 bg-[repeating-linear-gradient(45deg,#eeeeee_0px_1px,transparent_1px_8px)] \"></div>\r\n                <div className=\"relative z-10 size-16 rounded-3xl overflow-hidden bg-neutral-200 border-4 border-violet-50\">\r\n                  <img\r\n                    src={t.image}\r\n                    alt={t.name}\r\n                    className=\"w-full h-full object-cover\"\r\n                  />\r\n                </div>\r\n                <div className=\"relative z-10\">\r\n                  <h4 className=\"text-2xl font-black uppercase tracking-tight text-nuetral-900\">\r\n                    {t.name}\r\n                  </h4>\r\n                  <p className=\"text-sm font-mono text-nuetral-500 uppercase tracking-widest\">\r\n                    {t.role}\r\n                  </p>\r\n                </div>\r\n              </div>\r\n              <div className=\"p-4\">\r\n                <p className=\"text-3xl font-medium text-nuetral-800 font-manrope\">\r\n                  \"{t.quote}\"\r\n                </p>\r\n\r\n                <div className=\"flex gap-2 mt-4\">\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-6\" />\r\n                    </span>\r\n                  ))}\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        ))}\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"
}