{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonal-02",
  "description": "A testimonial marquee.",
  "dependencies": [
    "motion/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/blocks/testimonal-02/page.tsx",
      "content": "import { Testimonials } from \"@/registry/blocks/testimonal-02/components/testimonals\"\n\nexport default function Testimonals02Page() {\n  return (\n    <div className=\"flex min-h-svh w-full items-center justify-center p-6 md:p-10\">\n      <div className=\"w-full max-w-full\">\n        <Testimonials />\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:page",
      "target": "app/testimonial/page.tsx"
    },
    {
      "path": "registry/blocks/testimonal-02/components/marquee.tsx",
      "content": "import { cn } from \"@/lib/utils\"\n\ninterface MarqueeProps extends React.HTMLAttributes<HTMLDivElement> {\n  reverse?: boolean\n  pauseOnHover?: boolean\n  children?: React.ReactNode\n  vertical?: boolean\n  repeat?: number\n}\n\nexport function Marquee({\n  className,\n  reverse,\n  pauseOnHover = false,\n  children,\n  vertical = false,\n  repeat = 4,\n  ...props\n}: MarqueeProps) {\n  return (\n    <div\n      {...props}\n      className={cn(\n        \"group flex [gap:var(--gap)] overflow-hidden p-2 [--duration:40s] [--gap:1rem]\",\n        {\n          \"flex-row\": !vertical,\n          \"flex-col\": vertical,\n        },\n        className\n      )}\n    >\n      {Array(repeat)\n        .fill(0)\n        .map((_, i) => (\n          <div\n            key={i}\n            className={cn(\"flex shrink-0 justify-around [gap:var(--gap)]\", {\n              \"animate-marquee flex-row\": !vertical,\n              \"animate-marquee-vertical flex-col\": vertical,\n              \"group-hover:[animation-play-state:paused]\": pauseOnHover,\n              \"[animation-direction:reverse]\": reverse,\n            })}\n          >\n            {children}\n          </div>\n        ))}\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/blocks/testimonal-02/components/testimonals.tsx",
      "content": "\"use client\"\n\nimport Image from \"next/image\"\nimport { Star } from \"lucide-react\"\nimport { motion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Marquee } from \"@/registry/blocks/testimonal-02/components/marquee\"\n\nexport function Highlight({\n  children,\n  className,\n}: {\n  children: React.ReactNode\n  className?: string\n}) {\n  return (\n    <span\n      className={cn(\n        \"bg-cyan-200 p-1 py-0.5 font-bold text-cyan-400 dark:bg-cyan-950 dark:text-cyan-300\",\n        className\n      )}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport interface TestimonialCardProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  name: string\n  role: string\n  img?: string\n  description: React.ReactNode\n  className?: string\n}\n\nexport function TestimonialCard({\n  description,\n  name,\n  img,\n  role,\n  className,\n  ...props // Capture the rest of the props\n}: TestimonialCardProps) {\n  return (\n    <div\n      className={cn(\n        \"mb-4 flex w-full cursor-pointer break-inside-avoid flex-col items-center justify-between gap-6 rounded-xl p-4\",\n        // light styles\n        \"border border-neutral-200 bg-white\",\n        // dark styles\n        \"dark:bg-black dark:[box-shadow:0_-20px_80px_-20px_#ffffff1f_inset] dark:[border:1px_solid_rgba(255,255,255,.1)]\",\n        className,\n        className\n      )}\n      {...props}\n    >\n      <div className=\"text-sm font-normal text-neutral-700 select-none dark:text-neutral-400\">\n        {description}\n        <div className=\"flex flex-row py-1\">\n          <Star className=\"size-4 fill-yellow-500 text-yellow-500\" />\n          <Star className=\"size-4 fill-yellow-500 text-yellow-500\" />\n          <Star className=\"size-4 fill-yellow-500 text-yellow-500\" />\n          <Star className=\"size-4 fill-yellow-500 text-yellow-500\" />\n          <Star className=\"size-4 fill-yellow-500 text-yellow-500\" />\n        </div>\n      </div>\n\n      <div className=\"flex w-full items-center justify-start gap-5 select-none\">\n        <Image\n          width={40}\n          height={40}\n          src={img || \"\"}\n          alt={name}\n          className=\"size-10 rounded-full\"\n        />\n\n        <div>\n          <p className=\"font-medium text-neutral-500\">{name}</p>\n          <p className=\"text-xs font-normal text-neutral-400\">{role}</p>\n        </div>\n      </div>\n    </div>\n  )\n}\nconst testimonials = [\n  {\n    name: \"Alex Rivera\",\n    role: \"UI/UX Lead at InnovateTech\",\n    img: \"https://avatar.vercel.sh/alex\",\n    description: (\n      <p>\n        Using EldoraUI has revolutionized our design process.\n        <Highlight>\n          Its reusable, animated components make it easy to deliver cutting-edge\n          designs.\n        </Highlight>{\" \"}\n        A must-have for any design team.\n      </p>\n    ),\n  },\n  {\n    name: \"Samantha Lee\",\n    role: \"Frontend Engineer at NextGen Solutions\",\n    img: \"https://avatar.vercel.sh/samantha\",\n    description: (\n      <p>\n        EldoraUI&apos;s templates have drastically improved our development\n        speed.\n        <Highlight>\n          We&apos;ve reduced project timelines by 70%, delivering high-quality\n          UIs effortlessly.\n        </Highlight>{\" \"}\n        Highly recommend it to fellow developers.\n      </p>\n    ),\n  },\n  {\n    name: \"Raj Patel\",\n    role: \"Founder at Startup Studio\",\n    img: \"https://avatar.vercel.sh/raj\",\n    description: (\n      <p>\n        As a startup founder, I need tools that help us grow fast without\n        sacrificing quality. EldoraUI&apos;s stunning designs and simple\n        integration have made it an essential part of our workflow.\n        <Highlight>Our clients love our modern interfaces.</Highlight>\n      </p>\n    ),\n  },\n  {\n    name: \"Emily Chen\",\n    role: \"Product Designer at Global Systems\",\n    img: \"https://avatar.vercel.sh/emily\",\n    description: (\n      <p>\n        EldoraUI&apos;s prebuilt components have made it so easy to create\n        intuitive and compliant designs.\n        <Highlight>\n          It&apos;s perfect for tackling complex workflows with style.\n        </Highlight>{\" \"}\n        A must-have for any product designer.\n      </p>\n    ),\n  },\n  {\n    name: \"Michael Brown\",\n    role: \"Creative Director at FinTech Innovations\",\n    img: \"https://avatar.vercel.sh/michael\",\n    description: (\n      <p>\n        EldoraUI&apos;s animations and design elements have elevated our fintech\n        app&apos;s user experience.\n        <Highlight>\n          The feedback on our new design is phenomenal.\n        </Highlight>{\" \"}\n        It&apos;s a game-changer for user-centric applications.\n      </p>\n    ),\n  },\n  {\n    name: \"Linda Wu\",\n    role: \"Web Developer at LogiChain Solutions\",\n    img: \"https://avatar.vercel.sh/linda\",\n    description: (\n      <p>\n        EldoraUI&apos;s component library has simplified web development for our\n        logistics dashboard.\n        <Highlight>\n          Building custom layouts has never been this efficient.\n        </Highlight>{\" \"}\n      </p>\n    ),\n  },\n  {\n    name: \"Carlos Gomez\",\n    role: \"Digital Marketing Specialist at EcoTech\",\n    img: \"https://avatar.vercel.sh/carlos\",\n    description: (\n      <p>\n        EldoraUI&apos;s responsive designs have helped us create marketing sites\n        that look amazing on every device.\n        <Highlight>\n          It&apos;s revolutionized how we approach branding online.\n        </Highlight>{\" \"}\n      </p>\n    ),\n  },\n  {\n    name: \"Aisha Khan\",\n    role: \"E-commerce Product Manager at FashionForward\",\n    img: \"https://avatar.vercel.sh/aisha\",\n    description: (\n      <p>\n        EldoraUI&apos;s beautifully crafted components have completely\n        transformed our fashion storefront.\n        <Highlight>\n          Customers love the dynamic shopping experience.\n        </Highlight>{\" \"}\n      </p>\n    ),\n  },\n  {\n    name: \"Tom Chen\",\n    role: \"Healthcare App Designer at HealthTech Solutions\",\n    img: \"https://avatar.vercel.sh/tom\",\n    description: (\n      <p>\n        EldoraUI has made it easy to create user-friendly, accessible interfaces\n        for our healthcare apps.\n        <Highlight>\n          It&apos;s a crucial part of our design system.\n        </Highlight>{\" \"}\n      </p>\n    ),\n  },\n  {\n    name: \"Sofia Patel\",\n    role: \"EdTech Founder at EduSafe Innovations\",\n    img: \"https://avatar.vercel.sh/sofia\",\n    description: (\n      <p>\n        EldoraUI&apos;s education-focused templates have doubled our\n        platform&apos;s usability.\n        <Highlight>\n          It&apos;s tailor-made for addressing student and teacher needs.\n        </Highlight>{\" \"}\n      </p>\n    ),\n  },\n]\n\nexport function Testimonials() {\n  return (\n    <section id=\"testimonials\" className=\"container py-10\">\n      <h2 className=\"text-foreground mb-4 text-center text-5xl leading-[1.2] font-bold tracking-tighter\">\n        What People Are Saying\n      </h2>\n      <h3 className=\"text-foreground/80 mx-auto mb-8 max-w-lg text-center text-lg font-medium tracking-tight text-balance\">\n        Don&apos;t just take our word for it. Here&apos;s what people are saying\n        about <span className=\"from-fg-onAccent text-cyan-500\">Eldora UI</span>\n      </h3>\n      <div className=\"relative mt-6 max-h-screen overflow-hidden\">\n        <div className=\"gap-4 md:columns-2 xl:columns-3 2xl:columns-4\">\n          {Array(Math.ceil(testimonials.length / 3))\n            .fill(0)\n            .map((_, i) => (\n              <Marquee\n                vertical\n                key={i}\n                className={cn({\n                  \"[--duration:60s]\": i === 1,\n                  \"[--duration:30s]\": i === 2,\n                  \"[--duration:70s]\": i === 3,\n                })}\n              >\n                {testimonials.slice(i * 3, (i + 1) * 3).map((card, idx) => (\n                  <motion.div\n                    key={idx}\n                    initial={{ opacity: 0 }}\n                    whileInView={{ opacity: 1 }}\n                    viewport={{ once: true }}\n                    transition={{\n                      delay: Math.random() * 0.8,\n                      duration: 1.2,\n                    }}\n                  >\n                    <TestimonialCard {...card} />\n                  </motion.div>\n                ))}\n              </Marquee>\n            ))}\n        </div>\n        <div className=\"from-background pointer-events-none absolute inset-x-0 bottom-0 h-1/4 w-full bg-gradient-to-t from-20%\"></div>\n        <div className=\"from-background pointer-events-none absolute inset-x-0 top-0 h-1/4 w-full bg-gradient-to-b from-20%\"></div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "testimonials"
  ],
  "type": "registry:block"
}