{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-4",
  "dependencies": [
    "embla-carousel-autoplay",
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "card",
    "carousel"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/testimonials-4.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n} from \"@/components/ui/carousel\";\nimport Autoplay from \"embla-carousel-autoplay\";\nimport { Quote } from \"lucide-react\";\n\nconst testimonials = [\n  {\n    name: \"Guillermo Rauch\",\n    role: \"CEO, Vercel\",\n    avatar: \"https://avatars.githubusercontent.com/u/13041\",\n    content:\n      \"Shipping faster without sacrificing quality is what matters. Tools like this make that balance actually achievable.\",\n  },\n  {\n    name: \"Evan You\",\n    role: \"Creator of Vue.js\",\n    avatar: \"https://avatars.githubusercontent.com/u/499550\",\n    content:\n      \"Developer experience is everything. When things just work, teams move significantly faster.\",\n  },\n  {\n    name: \"Dan Abramov\",\n    role: \"React Core Team\",\n    avatar: \"https://avatars.githubusercontent.com/u/810438\",\n    content:\n      \"Good abstractions remove friction. This is the kind of tooling that helps teams focus on what actually matters.\",\n  },\n  {\n    name: \"Kent C. Dodds\",\n    role: \"Educator & OSS\",\n    avatar: \"https://avatars.githubusercontent.com/u/1500684\",\n    content:\n      \"The simplicity here is what stands out. It solves real problems without getting in your way.\",\n  },\n  {\n    name: \"Theo Browne\",\n    role: \"T3 Stack Creator\",\n    avatar: \"https://avatars.githubusercontent.com/u/11719236\",\n    content:\n      \"Speed, clarity, and solid defaults — that’s what good tools should deliver. This nails it.\",\n  },\n  {\n    name: \"Lee Robinson\",\n    role: \"VP, Vercel\",\n    avatar: \"https://avatars.githubusercontent.com/u/9113740\",\n    content:\n      \"Performance and developer experience go hand in hand. This setup gets both right.\",\n  },\n];\n\nexport default function Testimonials2() {\n  const plugin = React.useMemo(\n    () =>\n      Autoplay({\n        delay: 500,\n        stopOnInteraction: false,\n        stopOnMouseEnter: true,\n        playOnInit: true,\n      }),\n    [],\n  );\n\n  return (\n    <section className=\"theme-injected bg-background w-full py-16 h-full flex items-center\">\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        <div className=\"grid grid-cols-1 items-center gap-12 lg:grid-cols-2 lg:gap-8\">\n          <div className=\"flex flex-col items-start space-y-4 text-left\">\n            <h2 className=\"text-foreground text-4xl font-semibold md:text-5xl\">\n              Trusted by teams who move money\n            </h2>\n            <p className=\"text-muted-foreground max-w-sm\">\n              Reduce risk, gain visibility, and help your finance team stay\n              focused — not buried in approvals.\n            </p>\n          </div>\n\n          <div className=\"relative h-[400px] w-full rounded-lg lg:h-[500px]\">\n            <div className=\"from-background pointer-events-none absolute top-0 right-0 left-0 z-10 h-20 bg-gradient-to-b to-transparent\" />\n\n            <Carousel\n              orientation=\"vertical\"\n              opts={{\n                loop: true,\n                align: \"start\",\n              }}\n              plugins={[plugin]}\n              onMouseEnter={plugin.stop}\n              onMouseLeave={() => plugin.reset()}\n              className=\"h-full w-full [&_[data-slot=carousel-content]]:h-[400px] lg:[&_[data-slot=carousel-content]]:h-[500px]\"\n            >\n              <CarouselContent className=\"-mt-4\">\n                {testimonials.map((testimonial, index) => (\n                  <CarouselItem key={index} className=\"basis-auto pt-4\">\n                    <Card className=\"bg-muted/50 rounded-3xl ring-0 transition-all duration-200\">\n                      <CardContent className=\"flex flex-col gap-4 p-5\">\n                        <div className=\"flex items-center justify-between\">\n                          <div className=\"flex items-center gap-3\">\n                            <Avatar className=\"rounded-lg\">\n                              <AvatarImage\n                                src={testimonial.avatar}\n                                alt={testimonial.name}\n                              />\n                              <AvatarFallback>\n                                {testimonial.name\n                                  .split(\" \")\n                                  .map((n) => n[0])\n                                  .join(\"\")}\n                              </AvatarFallback>\n                            </Avatar>\n                            <div className=\"flex flex-col\">\n                              <span className=\"text-foreground text-sm font-medium\">\n                                {testimonial.name}\n                              </span>\n                              <span className=\"text-muted-foreground text-xs\">\n                                {testimonial.role}\n                              </span>\n                            </div>\n                          </div>\n                          <Quote className=\"h-5 w-5 fill-sky-500 text-sky-500\" />\n                        </div>\n                        <p className=\"text-foreground text-sm leading-relaxed\">\n                          \"{testimonial.content}\"\n                        </p>\n                      </CardContent>\n                    </Card>\n                  </CarouselItem>\n                ))}\n              </CarouselContent>\n            </Carousel>\n\n            <div className=\"from-background pointer-events-none absolute right-0 bottom-0 left-0 z-10 h-20 bg-gradient-to-t to-transparent\" />\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/testimonials-4.tsx"
    }
  ],
  "type": "registry:ui"
}