{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "stats-section-02",
  "type": "registry:component",
  "title": "Stats Section",
  "author": "Toby Belhome",
  "description": "Highlight key metrics and performance figures with Tailwind CSS stats sections. These layouts showcase numbers, percentages, and visual indicators in a clean, modern design. Ideal for SaaS platforms, business pages, or marketing sites aiming to convey credibility and measurable impact at a glance.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "examples/blocks/marketing/stats-section/02/page.tsx",
      "content": "const stats = [\n  { id: 1, name: \"Transactions every 24 hours\", value: \"44M\" },\n  { id: 2, name: \"Assets under holding\", value: \"$20 trillion\" },\n  { id: 3, name: \"New users annually\", value: \"46K+\" }\n];\n\nexport default function StatSection() {\n  return (\n    <section className=\"py-12 sm:py-20\">\n      <div className=\"mx-auto max-w-7xl px-4\">\n        <dl className=\"grid grid-cols-1 gap-6 text-center lg:grid-cols-3\">\n          {stats.map((stat) => (\n            <div\n              key={stat.id}\n              className=\"bg-muted/50 hover:bg-muted flex flex-col gap-y-2 rounded-lg py-6 lg:py-10\">\n              <dt className=\"text-muted-foreground\">{stat.name}</dt>\n              <dd className=\"font-heading order-first text-3xl sm:text-4xl\">{stat.value}</dd>\n            </div>\n          ))}\n        </dl>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/stats-section-02.tsx"
    }
  ],
  "meta": {
    "isPro": true
  }
}