{
  "name": "stats/centered",
  "type": "registry:component",
  "description": "Centered statistics grid with framing card",
  "files": [
    {
      "path": "example/Stats/SectionStats_Centered.astro",
      "type": "registry:component",
      "content": "---\nimport BackgroundEffect from '@@/components/ui/BackgroundEffect.astro';\nimport Card from '@@/components/ui/Card.astro';\n\ninterface StatItem {\n  id: string;\n  value: string;\n  description: string;\n}\n\nconst statItems: StatItem[] = [\n  {\n    id: 'rank',\n    value: '#1',\n    description: 'knowledge base and AI writing assistant (G2)',\n  },\n  {\n    id: 'forbes',\n    value: '98%',\n    description: 'of Forbes Cloud 100 teams use Notion',\n  },\n  {\n    id: 'fortune',\n    value: '62%',\n    description: 'of Fortune 100 companies use Notion',\n  },\n];\n---\n\n<section class=\"relative py-20 sm:py-24\" data-scheme=\"bg\">\n  <BackgroundEffect\n    gradientType=\"var(--gradient-top-fade-linear)\"\n    patternType=\"none\"\n    noiseType=\"none\"\n  />\n\n  <div class=\"container\">\n    <div class=\"grid gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n      {\n        statItems.map((item) => (\n          <Card\n            size=\"lg\"\n            className=\"flex min-h-[200px] flex-col p-8 sm:min-h-[240px] lg:min-h-[280px]\"\n          >\n            <h2 class=\"text-5xl font-bold text-[color:var(--sp-fg)] lg:text-6xl\">\n              {item.value}\n            </h2>\n            <p class=\"text-fg-sub mt-auto text-sm leading-relaxed\">\n              {item.description}\n            </p>\n          </Card>\n        ))\n      }\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example",
  "registryDependencies": [
    "card"
  ]
}