{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stats-03","type":"registry:component","title":"Stats 03","description":"A social proof-focused statistics component combining metrics with customer testimonials. Features main stats with gradient icon backgrounds, customer testimonials with ratings and avatars, and bottom stats bar with branded background. Perfect for building trust and credibility through social proof while showcasing key metrics and customer success stories.","dependencies":["lucide-react"],"registryDependencies":["avatar","badge","card"],"files":[{"path":"src/registry/blocks/marketing/social-proof/stats/stats-03.tsx","content":"\"use client\";\n\nimport { Heart, MessageCircle, Quote, Star } from \"lucide-react\";\n\nimport { cn } from \"@/registry/lib/utils\";\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/registry/ui/avatar\";\nimport { Badge } from \"@/registry/ui/badge\";\n\nexport interface Stats03Props {\n  className?: string;\n}\n\nconst content = {\n  header: {\n    title: \"Loved by Our Community\",\n    description:\n      \"See what our customers are saying and discover why thousands of businesses trust our platform.\",\n  },\n  mainStats: [\n    {\n      id: 1,\n      icon: Star,\n      value: \"4.9/5\",\n      label: \"Average Rating\",\n      gradient: \"bg-gradient-to-br from-yellow-400 to-orange-500\",\n      showStars: true,\n    },\n    {\n      id: 2,\n      icon: Heart,\n      value: \"98%\",\n      label: \"Would Recommend\",\n      gradient: \"bg-gradient-to-br from-pink-400 to-red-500\",\n      badge: {\n        text: \"Industry Leading\",\n        className:\n          \"bg-pink-100 text-pink-700 dark:bg-pink-900/30 dark:text-pink-300\",\n      },\n    },\n    {\n      id: 3,\n      icon: MessageCircle,\n      value: \"25k+\",\n      label: \"Happy Customers\",\n      gradient: \"bg-gradient-to-br from-blue-400 to-purple-500\",\n      additionalInfo: \"+2,847 this month\",\n    },\n    {\n      id: 4,\n      icon: Quote,\n      value: \"12k+\",\n      label: \"Reviews\",\n      gradient: \"bg-gradient-to-br from-green-400 to-teal-500\",\n      additionalInfo: \"+847 this week\",\n    },\n  ],\n  testimonials: [\n    {\n      id: 1,\n      rating: 5,\n      quote:\n        \"This platform has completely transformed how we handle our business operations. The results speak for themselves - we've seen a 40% increase in efficiency.\",\n      author: {\n        name: \"Sarah Johnson\",\n        title: \"CEO, TechCorp\",\n        avatar: \"/placeholder.svg?height=40&width=40\",\n        fallback: \"SJ\",\n      },\n    },\n    {\n      id: 2,\n      rating: 5,\n      quote:\n        \"Outstanding support and incredible features. Our team productivity has never been higher. Highly recommend to any growing business.\",\n      author: {\n        name: \"Mike Kim\",\n        title: \"Founder, StartupXYZ\",\n        avatar: \"/placeholder.svg?height=40&width=40\",\n        fallback: \"MK\",\n      },\n    },\n  ],\n  bottomStats: [\n    { id: 1, value: \"500+\", label: \"5-Star Reviews\" },\n    { id: 2, value: \"99.2%\", label: \"Customer Retention\" },\n    { id: 3, value: \"<24h\", label: \"Support Response\" },\n    { id: 4, value: \"150+\", label: \"Countries Served\" },\n  ],\n};\n\nexport function Stats03({ className }: Stats03Props) {\n  const renderStars = (rating: number) => {\n    return Array.from({ length: 5 }).map((_, i) => (\n      <Star\n        key={i}\n        className={cn(\n          \"h-4 w-4\",\n          i < rating ? \"fill-yellow-400 text-yellow-400\" : \"text-gray-300\",\n        )}\n      />\n    ));\n  };\n\n  return (\n    <section className={cn(\"py-16 px-4\", className)}>\n      <div className=\"max-w-6xl mx-auto\">\n        {/* Header */}\n        <div className=\"text-center space-y-4 mb-12\">\n          <h2 className=\"text-3xl md:text-4xl font-bold\">\n            {content.header.title}\n          </h2>\n          <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n            {content.header.description}\n          </p>\n        </div>\n\n        {/* Main Stats with Social Proof */}\n        <div className=\"grid lg:grid-cols-2 gap-12 items-center mb-16\">\n          {/* Left Side - Stats */}\n          <div className=\"space-y-8\">\n            <div className=\"grid grid-cols-2 gap-6\">\n              {content.mainStats.slice(0, 2).map((stat) => {\n                const IconComponent = stat.icon;\n\n                return (\n                  <div key={stat.id} className=\"text-center w-full\">\n                    <div\n                      className={cn(\n                        \"w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4\",\n                        stat.gradient,\n                      )}\n                    >\n                      <IconComponent className=\"h-10 w-10 text-white fill-current\" />\n                    </div>\n                    <div className=\"text-3xl font-bold mb-2\">{stat.value}</div>\n                    <div className=\"text-sm text-muted-foreground\">\n                      {stat.label}\n                    </div>\n                    {stat.showStars && (\n                      <div className=\"flex justify-center mt-2\">\n                        {renderStars(5)}\n                      </div>\n                    )}\n                    {stat.badge && (\n                      <Badge className={cn(\"mt-2\", stat.badge.className)}>\n                        {stat.badge.text}\n                      </Badge>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n\n            <div className=\"grid grid-cols-2 gap-6\">\n              {content.mainStats.slice(2, 4).map((stat) => {\n                const IconComponent = stat.icon;\n\n                return (\n                  <div key={stat.id} className=\"text-center w-full\">\n                    <div\n                      className={cn(\n                        \"w-20 h-20 rounded-full flex items-center justify-center mx-auto mb-4\",\n                        stat.gradient,\n                      )}\n                    >\n                      <IconComponent className=\"h-10 w-10 text-white\" />\n                    </div>\n                    <div className=\"text-3xl font-bold mb-2\">{stat.value}</div>\n                    <div className=\"text-sm text-muted-foreground\">\n                      {stat.label}\n                    </div>\n                    {stat.additionalInfo && (\n                      <div className=\"text-xs text-green-600 mt-1\">\n                        {stat.additionalInfo}\n                      </div>\n                    )}\n                  </div>\n                );\n              })}\n            </div>\n          </div>\n\n          {/* Right Side - Testimonials */}\n          <div className=\"space-y-6\">\n            {content.testimonials.map((testimonial) => (\n              <div\n                key={testimonial.id}\n                className=\"bg-card border border-border rounded-lg p-6\"\n              >\n                <div className=\"flex items-center gap-1 mb-3\">\n                  {renderStars(testimonial.rating)}\n                </div>\n                <Quote className=\"h-8 w-8 text-muted-foreground/30 mb-3\" />\n                <p className=\"text-muted-foreground mb-4\">\n                  {testimonial.quote}\n                </p>\n                <div className=\"flex items-center gap-3\">\n                  <Avatar className=\"h-10 w-10\">\n                    <AvatarImage src={testimonial.author.avatar} />\n                    <AvatarFallback>\n                      {testimonial.author.fallback}\n                    </AvatarFallback>\n                  </Avatar>\n                  <div>\n                    <p className=\"font-medium\">{testimonial.author.name}</p>\n                    <p className=\"text-sm text-muted-foreground\">\n                      {testimonial.author.title}\n                    </p>\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Bottom Stats Bar */}\n        <div className=\"bg-primary text-primary-foreground rounded-lg p-8\">\n          <div className=\"grid grid-cols-2 md:grid-cols-4 gap-6 text-center\">\n            {content.bottomStats.map((stat) => (\n              <div key={stat.id}>\n                <div className=\"text-3xl font-bold mb-1\">{stat.value}</div>\n                <div className=\"text-primary-foreground/80 text-sm\">\n                  {stat.label}\n                </div>\n              </div>\n            ))}\n          </div>\n        </div>\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"}]}