{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-11",
  "title": "Testimonials 11",
  "description": "A simple testimonials block",
  "files": [
    {
      "path": "src/registry/blocks/radix/testimonials-11/components/testimonials.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport {\n  Carousel,\n  type CarouselApi,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/registry/bases/radix/ui/carousel\";\nimport { cn } from \"@/lib/utils\";\n\nconst testimonials = [\n  {\n    name: \"Sarah Johnson\",\n    role: \"Product Designer at Canva\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/97.jpg\",\n    testimonial:\n      \"This product completely changed the way I work. The interface is intuitive and the performance is top-notch.\",\n  },\n  {\n    name: \"Raj Mehta\",\n    role: \"Frontend Developer at Zomato\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/80.jpg\",\n    testimonial:\n      \"It's rare to find a tool that blends design and usability so well. Highly recommend it to all developers!\",\n  },\n  {\n    name: \"Emily Chen\",\n    role: \"Marketing Manager at HubSpot\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/113.jpg\",\n    testimonial:\n      \"The experience has been seamless from day one. Great support, fast delivery, and amazing value.\",\n  },\n  {\n    name: \"Daniel Kim\",\n    role: \"CTO at NextLaunch\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/90.jpg\",\n    testimonial:\n      \"We integrated this solution into our workflow and saw an instant boost in productivity and collaboration.\",\n  },\n  {\n    name: \"Aisha Patel\",\n    role: \"Software Engineer at Swiggy\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/116.jpg\",\n    testimonial:\n      \"I've used several tools in this category, but nothing matches the polish and reliability of this one.\",\n  },\n  {\n    name: \"Liam Garcia\",\n    role: \"Startup Founder\",\n    avatar: \"https://mockmind-api.uifaces.co/content/human/112.jpg\",\n    testimonial:\n      \"As a founder, I care about speed and simplicity. This product delivers on both fronts beautifully.\",\n  },\n];\n\nconst Testimonials = () => {\n  const [api, setApi] = React.useState<CarouselApi | null>(null);\n  const [count, setCount] = React.useState(0);\n  const [current, setCurrent] = React.useState(0);\n\n  React.useEffect(() => {\n    if (!api) {\n      return;\n    }\n\n    setCount(api.scrollSnapList().length);\n    setCurrent(api.selectedScrollSnap() + 1);\n\n    api.on(\"select\", () => {\n      setCurrent(api.selectedScrollSnap() + 1);\n    });\n  }, [api]);\n\n  return (\n    <div className=\"mx-auto max-w-7xl px-6 py-12 sm:py-20\">\n      <h2 className=\"text-center font-medium text-4xl tracking-[-0.04em] md:text-[2.75rem]\">\n        What others think\n      </h2>\n      <p className=\"mt-2 text-balance text-center text-lg text-muted-foreground tracking-[-0.015em] sm:mt-4 sm:text-2xl\">\n        Real stories from real users who&apos;ve seen real results\n      </p>\n\n      <div className=\"mx-auto mt-20 max-w-248 md:mt-16 md:px-12\">\n        <Carousel\n          opts={{\n            align: \"start\",\n          }}\n          setApi={setApi}\n        >\n          <CarouselContent>\n            {testimonials.map(({ name, avatar, role, testimonial }, index) => (\n              <CarouselItem key={index}>\n                <div className=\"relative flex gap-8 rounded-lg border bg-muted/70 p-8 pt-16 pr-8 md:pt-8\">\n                  {/* Quote */}\n                  <span className=\"absolute top-3 left-6.5 font-satoshi text-8xl md:hidden\">\n                    &ldquo;\n                  </span>\n\n                  <div className=\"flex flex-col gap-2\">\n                    <p className=\"grow font-medium text-xl leading-relaxed tracking-tight sm:text-2xl sm:leading-[1.45] lg:text-3xl\">\n                      {testimonial}\n                    </p>\n                    <div className=\"mt-6 flex items-center gap-2 md:mt-0\">\n                      <img\n                        alt=\"\"\n                        className=\"aspect-square h-12 rounded-full md:hidden\"\n                        src={avatar}\n                      />\n                      <div className=\"flex flex-col\">\n                        <p className=\"font-medium text-lg\">{name}</p>\n                        <p className=\"text-muted-foreground\">{role}</p>\n                      </div>\n                    </div>\n                  </div>\n                  <img\n                    alt=\"\"\n                    className=\"hidden aspect-square max-w-60 rounded-lg md:block\"\n                    src={avatar}\n                  />\n                </div>\n              </CarouselItem>\n            ))}\n          </CarouselContent>\n\n          <CarouselPrevious className=\"-top-2.5 right-2 ml-auto -translate-x-full -translate-y-full md:top-1/2 md:-left-12 md:m-0 md:translate-x-0 md:-translate-y-1/2 lg:md:-left-16\" />\n          <CarouselNext className=\"-top-2.5 right-0 ml-auto -translate-y-full md:top-1/2 md:-right-12 md:m-0 md:-translate-y-1/2 lg:md:-right-16\" />\n        </Carousel>\n\n        {/* Pagination */}\n        <div className=\"mt-6 flex items-center justify-center gap-2\">\n          {Array.from({ length: count }).map((_, index) => (\n            <div\n              className={cn(\n                \"h-2 w-2 rounded-full\",\n                current === index + 1 ? \"bg-primary\" : \"bg-primary/20\"\n              )}\n              key={index}\n            />\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n};\n\nexport default Testimonials;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:block"
}