{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"testimonials-01","type":"registry:component","title":"Testimonials 01","description":"Clean testimonials grid with star ratings, customer photos, company logos, and quote styling. Features responsive 3-column layout, avatar fallbacks, hover effects, and customizable CTA section. Perfect for showcasing customer feedback and building social proof.","dependencies":["lucide-react"],"registryDependencies":["card","avatar","badge","button"],"files":[{"path":"src/registry/blocks/marketing/social-proof/testimonials/testimonials-01.tsx","content":"\"use client\";\n\nimport { Quote, Star } from \"lucide-react\";\nimport Image from \"next/image\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Button } from \"@/registry/ui/button\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\n\nexport interface Testimonial {\n  id: number;\n  name: string;\n  role: string;\n  company: string;\n  avatar?: string;\n  rating: number;\n  content: string;\n  companyLogo?: string;\n}\n\nexport interface Testimonials01Props {\n  className?: string;\n}\n\nconst defaultTestimonials: Testimonial[] = [\n  {\n    id: 1,\n    name: \"Sarah Johnson\",\n    role: \"CEO\",\n    company: \"TechStart Inc.\",\n    avatar: \"https://randomuser.me/api/portraits/women/1.jpg\",\n    rating: 5,\n    content:\n      \"This platform has completely transformed how we manage our projects. The intuitive interface and powerful features have increased our team's productivity by 40%. Highly recommended!\",\n    companyLogo: \"/placeholder.svg?height=32&width=120\",\n  },\n  {\n    id: 2,\n    name: \"Michael Chen\",\n    role: \"Product Manager\",\n    company: \"InnovateCorp\",\n    avatar: \"https://randomuser.me/api/portraits/men/2.jpg\",\n    rating: 5,\n    content:\n      \"The customer support is exceptional, and the features are exactly what we needed. Our development cycle has become much more efficient since we started using this tool.\",\n    companyLogo: \"/placeholder.svg?height=32&width=120\",\n  },\n  {\n    id: 3,\n    name: \"Emily Rodriguez\",\n    role: \"Marketing Director\",\n    company: \"GrowthLab\",\n    avatar: \"https://randomuser.me/api/portraits/women/3.jpg\",\n    rating: 5,\n    content:\n      \"Amazing results! We've seen a 60% increase in our campaign effectiveness. The analytics dashboard provides insights we never had before. Game-changer for our marketing team.\",\n    companyLogo: \"/placeholder.svg?height=32&width=120\",\n  },\n  {\n    id: 4,\n    name: \"David Park\",\n    role: \"CTO\",\n    company: \"DevSolutions\",\n    avatar: \"https://randomuser.me/api/portraits/men/4.jpg\",\n    rating: 5,\n    content:\n      \"Seamless integration with our existing tools and excellent API documentation. The technical support team is knowledgeable and responsive. Perfect for enterprise needs.\",\n    companyLogo: \"/placeholder.svg?height=32&width=120\",\n  },\n  {\n    id: 5,\n    name: \"Lisa Thompson\",\n    role: \"Operations Manager\",\n    company: \"StreamlineOps\",\n    avatar: \"https://randomuser.me/api/portraits/women/5.jpg\",\n    rating: 5,\n    content:\n      \"The automation features have saved us countless hours every week. What used to take our team days now happens automatically. ROI was evident within the first month.\",\n    companyLogo: \"/placeholder.svg?height=32&width=120\",\n  },\n  {\n    id: 6,\n    name: \"James Wilson\",\n    role: \"Founder\",\n    company: \"StartupHub\",\n    avatar: \"https://randomuser.me/api/portraits/men/6.jpg\",\n    rating: 5,\n    content:\n      \"As a startup, we needed something reliable and scalable. This platform grows with us and the pricing is fair. The onboarding process was smooth and well-guided.\",\n    companyLogo: \"/placeholder.svg?height=32&width=120\",\n  },\n];\n\nexport function Testimonials01({ className }: Testimonials01Props) {\n  const title = \"Loved by thousands of customers\";\n  const subtitle =\n    \"See what our customers have to say about their experience with our platform.\";\n  const badgeText = \"Testimonials\";\n  const testimonials = defaultTestimonials;\n  const showCompanyLogos = true;\n  const showBottomCta = true;\n  const bottomCtaText = \"Join thousands of satisfied customers\";\n  const bottomCtaPrimary = \"Start Free Trial\";\n  const bottomCtaSecondary = \"View All Reviews\";\n  const backgroundColor = \"bg-muted/30\";\n\n  const handlePrimaryCtaClick = () => {\n    console.log(\"Primary CTA clicked\");\n  };\n\n  const handleSecondaryCtaClick = () => {\n    console.log(\"Secondary CTA clicked\");\n  };\n  const renderStars = (rating: number) => {\n    return Array.from({ length: 5 }, (_, i) => (\n      <Star\n        key={i}\n        className={`h-4 w-4 ${\n          i < rating\n            ? \"fill-yellow-400 text-yellow-400\"\n            : \"text-muted-foreground\"\n        }`}\n      />\n    ));\n  };\n\n  const getInitials = (name: string) => {\n    return name\n      .split(\" \")\n      .map((n) => n[0])\n      .join(\"\")\n      .toUpperCase();\n  };\n\n  return (\n    <section\n      className={cn(\"py-12 sm:py-16 lg:py-20\", backgroundColor, className)}\n    >\n      <div className=\"container px-4 sm:px-6 lg:px-8\">\n        {/* Header */}\n        <div className=\"text-center mb-12 lg:mb-16\">\n          {badgeText && (\n            <Badge variant=\"secondary\" className=\"mb-4\">\n              {badgeText}\n            </Badge>\n          )}\n          <h2 className=\"text-3xl sm:text-4xl lg:text-5xl font-bold tracking-tight mb-4\">\n            {title}\n          </h2>\n          <p className=\"text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto\">\n            {subtitle}\n          </p>\n        </div>\n\n        {/* Testimonials Grid */}\n        <div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 lg:gap-8\">\n          {testimonials.map((testimonial) => (\n            <Card\n              key={testimonial.id}\n              className=\"bg-background border-border hover:shadow-lg transition-shadow\"\n            >\n              <CardContent className=\"p-6\">\n                {/* Quote Icon */}\n                <div className=\"mb-4\">\n                  <Quote className=\"h-8 w-8 text-primary/20\" />\n                </div>\n\n                {/* Rating */}\n                <div className=\"flex items-center space-x-1 mb-4\">\n                  {renderStars(testimonial.rating)}\n                </div>\n\n                {/* Content */}\n                <blockquote className=\"text-sm sm:text-base text-foreground mb-6 leading-relaxed\">\n                  \"{testimonial.content}\"\n                </blockquote>\n\n                {/* Author Info */}\n                <div className=\"flex items-center space-x-3 mb-4\">\n                  <Avatar className=\"h-10 w-10\">\n                    <AvatarImage\n                      src={testimonial.avatar || \"/placeholder.svg\"}\n                      alt={testimonial.name}\n                    />\n                    <AvatarFallback>\n                      {getInitials(testimonial.name)}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div className=\"flex-1 min-w-0\">\n                    <p className=\"text-sm font-semibold text-foreground truncate\">\n                      {testimonial.name}\n                    </p>\n                    <p className=\"text-xs text-muted-foreground truncate\">\n                      {testimonial.role} at {testimonial.company}\n                    </p>\n                  </div>\n                </div>\n\n                {/* Company Logo */}\n                {showCompanyLogos && testimonial.companyLogo && (\n                  <div className=\"flex justify-center pt-4 border-t border-border\">\n                    <Image\n                      src={testimonial.companyLogo}\n                      alt={`${testimonial.company} logo`}\n                      width={120}\n                      height={32}\n                      className=\"h-6 opacity-60 hover:opacity-100 transition-opacity\"\n                    />\n                  </div>\n                )}\n              </CardContent>\n            </Card>\n          ))}\n        </div>\n\n        {/* Bottom CTA */}\n        {showBottomCta && (\n          <div className=\"text-center mt-12 lg:mt-16\">\n            <p className=\"text-muted-foreground mb-4\">{bottomCtaText}</p>\n            <div className=\"flex flex-col sm:flex-row gap-4 justify-center\">\n              <Button onClick={handlePrimaryCtaClick}>\n                {bottomCtaPrimary}\n              </Button>\n              <Button variant=\"outline\" onClick={handleSecondaryCtaClick}>\n                {bottomCtaSecondary}\n              </Button>\n            </div>\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n","type":"registry:component"},{"path":"src/registry/lib/utils.ts","content":"import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n","type":"registry:lib"}]}