{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"stats-01","type":"registry:component","title":"Stats 01","description":"A comprehensive statistics showcase component with grid layout featuring stats cards with icons, values, labels, and trend indicators. Features customizable stat cards with colored icon backgrounds, trend indicators with icons and text, company logos section, and responsive grid layout. Perfect for landing pages, dashboards, and marketing sections requiring impressive statistics display with social proof through company logos.","dependencies":["lucide-react"],"registryDependencies":["badge","card"],"files":[{"path":"src/registry/blocks/marketing/social-proof/stats/stats-01.tsx","content":"\"use client\";\n\nimport { Award, Globe, type LucideIcon, TrendingUp, Users } from \"lucide-react\";\nimport { cn } from \"@/registry/lib/utils\";\nimport { Badge } from \"@/registry/ui/badge\";\nimport { Card, CardContent } from \"@/registry/ui/card\";\n\nexport interface Stats01Stat {\n  icon: LucideIcon;\n  value: string;\n  label: string;\n  trend?: {\n    icon?: LucideIcon;\n    text: string;\n    className?: string;\n  };\n  color:\n    | \"blue\"\n    | \"green\"\n    | \"purple\"\n    | \"orange\"\n    | \"red\"\n    | \"cyan\"\n    | \"pink\"\n    | \"yellow\";\n}\n\nexport interface Stats01Props {\n  className?: string;\n}\n\nconst defaultStats: Stats01Stat[] = [\n  {\n    icon: Users,\n    value: \"50K+\",\n    label: \"Active Users\",\n    trend: {\n      icon: TrendingUp,\n      text: \"+12% this month\",\n      className: \"text-green-600\",\n    },\n    color: \"blue\",\n  },\n  {\n    icon: Globe,\n    value: \"180+\",\n    label: \"Countries\",\n    trend: {\n      icon: TrendingUp,\n      text: \"+5 new countries\",\n      className: \"text-green-600\",\n    },\n    color: \"green\",\n  },\n  {\n    icon: Award,\n    value: \"99.9%\",\n    label: \"Uptime\",\n    trend: {\n      text: \"Industry leading\",\n      className: \"text-green-600\",\n    },\n    color: \"purple\",\n  },\n  {\n    icon: TrendingUp,\n    value: \"2.4M\",\n    label: \"Transactions\",\n    trend: {\n      icon: TrendingUp,\n      text: \"+23% growth\",\n      className: \"text-green-600\",\n    },\n    color: \"orange\",\n  },\n];\n\nconst defaultCompanyLogos = [\n  \"Google\",\n  \"Microsoft\",\n  \"Apple\",\n  \"Netflix\",\n  \"Spotify\",\n  \"Airbnb\",\n];\n\nexport function Stats01({ className }: Stats01Props) {\n  const title = \"Trusted by Thousands Worldwide\";\n  const description =\n    \"Join the growing community of businesses and individuals who trust our platform to achieve their goals.\";\n  const badge = {\n    text: \"Our Impact\",\n    variant: \"outline\" as const,\n    className: \"bg-primary/5 text-primary border-primary/20\",\n  };\n  const stats = defaultStats;\n  const additionalInfoTitle = \"Trusted by leading companies worldwide\";\n  const companyLogos = defaultCompanyLogos;\n  const showCompanyLogos = true;\n  const maxWidth = \"max-w-6xl\";\n  const sectionPadding = \"py-16 px-4\";\n\n  const handleStatClick = (stat: Stats01Stat) => {\n    console.log(\"Stat clicked:\", stat);\n  };\n\n  const getIconBackground = (color: Stats01Stat[\"color\"]) => {\n    const backgrounds = {\n      blue: \"bg-blue-100 dark:bg-blue-900/30\",\n      green: \"bg-green-100 dark:bg-green-900/30\",\n      purple: \"bg-purple-100 dark:bg-purple-900/30\",\n      orange: \"bg-orange-100 dark:bg-orange-900/30\",\n      red: \"bg-red-100 dark:bg-red-900/30\",\n      cyan: \"bg-cyan-100 dark:bg-cyan-900/30\",\n      pink: \"bg-pink-100 dark:bg-pink-900/30\",\n      yellow: \"bg-yellow-100 dark:bg-yellow-900/30\",\n    };\n    return backgrounds[color];\n  };\n\n  const getIconColor = (color: Stats01Stat[\"color\"]) => {\n    const colors = {\n      blue: \"text-blue-600 dark:text-blue-400\",\n      green: \"text-green-600 dark:text-green-400\",\n      purple: \"text-purple-600 dark:text-purple-400\",\n      orange: \"text-orange-600 dark:text-orange-400\",\n      red: \"text-red-600 dark:text-red-400\",\n      cyan: \"text-cyan-600 dark:text-cyan-400\",\n      pink: \"text-pink-600 dark:text-pink-400\",\n      yellow: \"text-yellow-600 dark:text-yellow-400\",\n    };\n    return colors[color];\n  };\n\n  return (\n    <section className={cn(sectionPadding, className)}>\n      <div className={`${maxWidth} mx-auto`}>\n        {/* Header */}\n        <div className=\"text-center space-y-4 mb-12\">\n          <Badge variant={badge.variant} className={badge.className || \"\"}>\n            {badge.text}\n          </Badge>\n          <h2 className=\"text-3xl md:text-4xl font-bold\">{title}</h2>\n          <p className=\"text-lg text-muted-foreground max-w-2xl mx-auto\">\n            {description}\n          </p>\n        </div>\n\n        {/* Stats Grid */}\n        <div className=\"grid grid-cols-2 lg:grid-cols-4 gap-6\">\n          {stats.map((stat, index) => {\n            const IconComponent = stat.icon;\n            const TrendIcon = stat.trend?.icon;\n\n            return (\n              <Card\n                key={index}\n                className=\"bg-card border-border text-center hover:shadow-lg transition-shadow cursor-pointer\"\n                onClick={() => handleStatClick(stat)}\n              >\n                <CardContent className=\"pt-8 pb-6\">\n                  <div\n                    className={`w-16 h-16 ${getIconBackground(stat.color)} rounded-full flex items-center justify-center mx-auto mb-4`}\n                  >\n                    <IconComponent\n                      className={`h-8 w-8 ${getIconColor(stat.color)}`}\n                    />\n                  </div>\n                  <div className=\"space-y-2\">\n                    <div className=\"text-3xl md:text-4xl font-bold\">\n                      {stat.value}\n                    </div>\n                    <div className=\"text-sm text-muted-foreground\">\n                      {stat.label}\n                    </div>\n                    {stat.trend && (\n                      <div\n                        className={`flex items-center justify-center gap-1 text-xs ${stat.trend.className || \"\"}`}\n                      >\n                        {TrendIcon && <TrendIcon className=\"h-3 w-3\" />}\n                        <span>{stat.trend.text}</span>\n                      </div>\n                    )}\n                  </div>\n                </CardContent>\n              </Card>\n            );\n          })}\n        </div>\n\n        {/* Additional Info */}\n        {showCompanyLogos && companyLogos.length > 0 && (\n          <div className=\"text-center mt-12\">\n            <p className=\"text-muted-foreground mb-6\">{additionalInfoTitle}</p>\n            <div className=\"flex flex-wrap items-center justify-center gap-8 opacity-60\">\n              {companyLogos.map((company, index) => (\n                <div key={index} className=\"text-lg font-semibold\">\n                  {company}\n                </div>\n              ))}\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"}]}