{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "testimonials-01",
  "type": "registry:component",
  "title": "Testimonials",
  "author": "Toby Belhome",
  "description": "Highlight customer experiences and build trust with elegantly designed Tailwind CSS testimonial sections. These layouts feature user quotes, ratings, and profile visuals to create social proof. Ideal for SaaS platforms, product pages, and service websites aiming to showcase credibility and strengthen user confidence.",
  "dependencies": [],
  "registryDependencies": [
    "avatar",
    "card"
  ],
  "files": [
    {
      "path": "examples/blocks/marketing/testimonials/01/data.ts",
      "content": "export const testimonials = [\n  {\n    quote:\n      \"This product has revolutionized the way we work. The intuitive interface and powerful features have significantly boosted our productivity.\",\n    name: \"Sarah Chen\",\n    title: \"CEO, Tech Solutions\",\n    avatar:\n      \"https://plus.unsplash.com/premium_photo-1671656349218-5218444643d8?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=200\"\n  },\n  {\n    quote:\n      \"Outstanding customer support and a truly robust platform. We've seen remarkable improvements since integrating this into our workflow.\",\n    name: \"Michael Lee\",\n    title: \"Lead Developer, Innovate Corp\",\n    avatar:\n      \"https://plus.unsplash.com/premium_photo-1658527049634-15142565537a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8OXx8YXZhdGFyfGVufDB8fDB8fHww&auto=format&fit=crop&q=60&w=200\"\n  },\n  {\n    quote:\n      \"A game-changer for our business! The scalability and reliability are unmatched, allowing us to focus on growth without technical worries.\",\n    name: \"Jessica Kim\",\n    title: \"Marketing Director, Global Brands\",\n    avatar:\n      \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTR8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\"\n  },\n  {\n    quote:\n      \"The best investment we've made this year. It's incredibly user-friendly and has exceeded all our expectations.\",\n    name: \"David Miller\",\n    title: \"Operations Manager, Future Systems\",\n    avatar:\n      \"https://images.unsplash.com/photo-1599566147214-ce487862ea4f?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MjB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\"\n  },\n  {\n    quote:\n      \"Seamless integration and powerful analytics. This tool has given us insights we never had before.\",\n    name: \"Emily White\",\n    title: \"Data Scientist, Analytics Hub\",\n    avatar:\n      \"https://images.unsplash.com/photo-1649123245135-4db6ead931b5?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MzB8fGF2YXRhcnxlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&q=60&w=200\"\n  }\n];\n",
      "type": "registry:component",
      "target": "components/testimonials/data.ts"
    },
    {
      "path": "examples/blocks/marketing/testimonials/01/page.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\";\nimport { Card, CardContent } from \"@/components/ui/card\";\nimport {\n  Carousel,\n  CarouselContent,\n  CarouselItem,\n  CarouselNext,\n  CarouselPrevious\n} from \"@/components/ui/carousel\";\nimport { testimonials } from \"./data\";\n\nexport default function TestimonialsSection() {\n  return (\n    <section className=\"bg-muted w-full py-12 md:py-24 lg:py-32\">\n      <div className=\"container mx-auto px-4\">\n        <header className=\"mx-auto max-w-xl space-y-2 text-center\">\n          <h2 className=\"font-heading text-4xl text-balance sm:text-4xl\">What Our Customers Say</h2>\n          <p className=\"text-muted-foreground text-balance lg:text-lg\">\n            Hear directly from the people who have experienced the impact of our product.\n          </p>\n        </header>\n        <div className=\"mx-auto max-w-5xl py-12\">\n          <Carousel\n            opts={{\n              align: \"start\",\n              loop: true\n            }}\n            className=\"w-full\">\n            <CarouselContent>\n              {testimonials.map((testimonial, index) => (\n                <CarouselItem key={index} className=\"md:basis-1/2 lg:basis-1/3\">\n                  <Card className=\"flex h-full flex-col\">\n                    <CardContent className=\"flex flex-grow flex-col items-center justify-center p-6 text-center\">\n                      <blockquote className=\"text-lg leading-snug lg:leading-normal\">\n                        &ldquo;{testimonial.quote}&rdquo;\n                      </blockquote>\n                      <div className=\"mt-6 flex flex-col items-center\">\n                        <Avatar className=\"size-12 border\">\n                          <AvatarImage\n                            src={testimonial.avatar}\n                            alt={`Avatar of ${testimonial.name}`}\n                          />\n                          <AvatarFallback>\n                            {testimonial.name\n                              .split(\" \")\n                              .map((n) => n[0])\n                              .join(\"\")}\n                          </AvatarFallback>\n                        </Avatar>\n                        <div className=\"mt-4\">\n                          <div className=\"font-semibold\">{testimonial.name}</div>\n                          <div className=\"text-muted-foreground text-sm\">{testimonial.title}</div>\n                        </div>\n                      </div>\n                    </CardContent>\n                  </Card>\n                </CarouselItem>\n              ))}\n            </CarouselContent>\n            <CarouselPrevious />\n            <CarouselNext />\n          </Carousel>\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/testimonials/testimonials.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}