{
  "name": "stats/grid",
  "type": "registry:component",
  "description": "Large stats grid with supporting copy",
  "files": [
    {
      "path": "example/Stats/SectionStats_Grid.astro",
      "type": "registry:component",
      "content": "---\ninterface StatItem {\n  id: string;\n  label: string;\n  value: string;\n  description: string;\n}\n\nconst badgeText = 'Statistics';\nconst title = 'Company Snapshot';\nconst subtitle = 'Discover the numbers behind our success and the impact we make every day.';\nconst statItems: StatItem[] = [\n  {\n    id: 'users',\n    label: 'PEOPLE',\n    value: '120+',\n    description:\n      \"We're a world-class team of diverse individuals who are here to do great work as well as be great to work with.\",\n  },\n  {\n    id: 'reach',\n    label: 'GLOBAL REACH',\n    value: '28',\n    description:\n      'As part of Dept, we have 28 offices and 2,000+ people across the world dedicated to delivering the best.',\n  },\n  {\n    id: 'years',\n    label: 'YEARS',\n    value: '12',\n    description:\n      \"While we're proud of our history and our achievements, we're even more excited about what comes next.\",\n  },\n  {\n    id: 'growth',\n    label: 'GROWTH',\n    value: '168%',\n    description:\n      \"As Adweek's 18th fastest growing agency, we're proud of the momentum we've built and where we're headed.\",\n  },\n];\n---\n\n<section class=\"relative py-20 sm:py-24\" data-scheme=\"bg\">\n  <div class=\"container mx-auto\">\n    <div class=\"grid gap-12 lg:grid-cols-[1fr_2fr] lg:gap-16\">\n      <!-- Left: Header -->\n      <div class=\"flex flex-col gap-4 lg:sticky lg:top-24 lg:self-start\">\n        <div\n          class=\"rounded-card inline-flex w-fit items-center gap-2 px-4 py-2 text-sm\"\n          data-scheme=\"shift\"\n        >\n          <span class=\"bg-accent h-2 w-2 rounded-full\"></span>\n          {badgeText}\n        </div>\n        <h2 class=\"h2\">{title}</h2>\n        <p class=\"text-fg-sub max-w-3xl text-lg md:text-xl\">\n          {subtitle}\n        </p>\n      </div>\n\n      <!-- Right: Stats Grid -->\n      <div class=\"grid gap-12 sm:grid-cols-2 sm:gap-x-8 sm:gap-y-16\">\n        {\n          statItems.map((item) => (\n            <div class=\"flex min-h-[180px] flex-col gap-4 sm:min-h-[220px] lg:min-h-[240px]\">\n              <div class=\"text-fg-sub text-xs font-medium uppercase tracking-wider\">\n                {item.label}\n              </div>\n              <h3 class=\"text-5xl font-bold text-[color:var(--sp-fg)] sm:text-6xl lg:text-7xl\">\n                {item.value}\n              </h3>\n              <p class=\"text-fg-sub text-sm leading-relaxed\">\n                {item.description}\n              </p>\n            </div>\n          ))\n        }\n      </div>\n    </div>\n  </div>\n</section>\n"
    }
  ],
  "category": "example"
}