{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-1",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "avatar",
    "button",
    "card",
    "carousel"
  ],
  "files": [
    {
      "path": "src/components/watermelon-ui/testimonials-1.tsx",
      "content": "import { Card } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious,\n} from \"@/components/ui/carousel\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\n\nconst testimonials = [\n  {\n    id: 1,\n    heading: '\"Ship faster without chaos\"',\n    quote:\n      \"We went from scattered financial ops to a clean, structured workflow. The visibility alone helped us move faster without breaking things.\",\n    author: \"Guillermo Rauch\",\n    role: \"CEO\",\n    company: \"@vercel\",\n    companyColor: \"text-orange-400\",\n    avatarUrl: \"https://github.com/rauchg.png\",\n  },\n  {\n    id: 2,\n    heading: '\"Built for real teams\"',\n    quote:\n      \"The onboarding was seamless, and the product just clicks. It fits naturally into how modern teams actually work.\",\n    author: \"Lee Robinson\",\n    role: \"VP of Developer Experience\",\n    company: \"@vercel\",\n    companyColor: \"text-orange-500\",\n    avatarUrl: \"https://github.com/leerob.png\",\n  },\n  {\n    id: 3,\n    heading: '\"Clarity at scale\"',\n    quote:\n      \"As systems grow, things get messy. This gave us clarity across teams without adding complexity.\",\n    author: \"Dan Abramov\",\n    role: \"Software Engineer\",\n    company: \"@meta\",\n    companyColor: \"text-blue-500\",\n    avatarUrl: \"https://github.com/gaearon.png\",\n  },\n  {\n    id: 4,\n    heading: '\"Actually enjoyable to use\"',\n    quote:\n      \"Most tools feel like a chore. This one doesn’t. It’s fast, predictable, and genuinely pleasant to work with.\",\n    author: \"Kent C. Dodds\",\n    role: \"Educator\",\n    company: \"@kentcdodds\",\n    companyColor: \"text-indigo-500\",\n    avatarUrl: \"https://github.com/kentcdodds.png\",\n  },\n  {\n    id: 5,\n    heading: '\"Clean, thoughtful design\"',\n    quote:\n      \"The attention to detail is obvious. Everything feels intentional, from interactions to layout.\",\n    author: \"Evan You\",\n    role: \"Creator of Vue\",\n    company: \"@vuejs\",\n    companyColor: \"text-pink-500\",\n    avatarUrl: \"https://github.com/yyx990803.png\",\n  },\n  {\n    id: 6,\n    heading: '\"Zero friction setup\"',\n    quote:\n      \"We integrated everything in minutes. No weird edge cases, no hacks — just worked out of the box.\",\n    author: \"Theo Browne\",\n    role: \"Founder\",\n    company: \"@t3code\",\n    companyColor: \"text-emerald-500\",\n    avatarUrl: \"https://github.com/t3dotgg.png\",\n  },\n  {\n    id: 7,\n    heading: '\"Insights that matter\"',\n    quote:\n      \"The analytics aren’t just numbers — they actually help you make better decisions, faster.\",\n    author: \"Addy Osmani\",\n    role: \"Engineering Manager\",\n    company: \"@google\",\n    companyColor: \"text-purple-500\",\n    avatarUrl: \"https://github.com/addyosmani.png\",\n  },\n  {\n    id: 8,\n    heading: '\"Reliable and simple\"',\n    quote:\n      \"No unnecessary complexity. It does what it promises, and it does it really well.\",\n    author: \"Sindre Sorhus\",\n    role: \"Open Source Developer\",\n    company: \"@sindresorhus\",\n    companyColor: \"text-rose-500\",\n    avatarUrl: \"https://github.com/sindresorhus.png\",\n  },\n];\n\nexport default function Testimonials1() {\n  return (\n    <section className=\"bg-background w-full py-16 h-full items-center justify-center\">\n      <div className=\"container mx-auto px-4 md:px-6 my-auto\">\n        <div className=\"mb-16 flex flex-col items-center text-center\">\n          <h2 className=\"text-foreground mb-4 text-4xl font-bold md:text-5xl\">\n            Trusted by teams who lead people\n          </h2>\n          <p className=\"text-muted-foreground mt-2 max-w-2xl text-lg\">\n            Save hours every week, reduce complexity, and let your HR team focus\n            on people — not processes.\n          </p>\n        </div>\n\n        <div className=\"relative mx-auto max-w-7xl\">\n          <Carousel\n            opts={{\n              align: \"start\",\n            }}\n            className=\"w-full\"\n          >\n            <CarouselContent className=\"px-2 py-2\">\n              {testimonials.map((testimonial) => (\n                <CarouselItem\n                  key={testimonial.id}\n                  className=\"basis-full md:basis-1/2 lg:basis-1/3\"\n                >\n                  <Card className=\"bg-muted/50 flex h-full min-h-[320px] flex-col justify-between rounded-4xl p-6 ring-0 select-none\">\n                    <div>\n                      <h3 className=\"text-foreground mb-2 text-2xl leading-tight font-medium md:text-2xl\">\n                        {testimonial.heading}\n                      </h3>\n                      <p className=\"text-muted-foreground mb-8 text-[15px] leading-relaxed md:text-base\">\n                        {testimonial.quote}\n                      </p>\n                    </div>\n\n                    <div className=\"flex items-center gap-4\">\n                      <Avatar className=\"border-border h-12 w-12 border\">\n                        <AvatarImage\n                          src={testimonial.avatarUrl}\n                          alt={testimonial.author}\n                        />\n                        <AvatarFallback className=\"bg-muted text-muted-foreground\">\n                          {testimonial.author.charAt(0)}\n                        </AvatarFallback>\n                      </Avatar>\n                      <div>\n                        <p className=\"text-foreground font-medium\">\n                          {testimonial.author}\n                        </p>\n                        <p className=\"text-muted-foreground mt-0.5 text-sm\">\n                          {testimonial.role}{\" \"}\n                          <span className={testimonial.companyColor}>\n                            {testimonial.company}\n                          </span>\n                        </p>\n                      </div>\n                    </div>\n                  </Card>\n                </CarouselItem>\n              ))}\n            </CarouselContent>\n            <div className=\"mt-10 flex w-full justify-center gap-2\">\n              <CarouselPrevious className=\"bg-muted hover:bg-muted/50 relative inset-0 size-10 rounded-xl border transition-colors\" />\n              <CarouselNext className=\"bg-muted hover:bg-muted/50 relative inset-0 size-10 rounded-xl transition-colors\" />\n            </div>\n          </Carousel>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/ui/testimonials-1.tsx"
    }
  ],
  "type": "registry:ui"
}