{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "about-2",
  "description": "A two-column story section pairing a grayscale team photo with a company narrative and a three-metric stats row. A founder-story layout for an about page.",
  "dependencies": [
    "@remixicon/react",
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/about/2/about-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\n\nconst stats = [\n  { value: \"12K+\", label: \"Teams onboard\" },\n  { value: \"99.9%\", label: \"Uptime\" },\n  { value: \"40+\", label: \"Countries\" },\n]\n\nexport default function AboutBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-background px-6 py-16 text-foreground\">\n      <div className=\"mx-auto grid w-full max-w-5xl items-center gap-10 md:grid-cols-2 md:gap-16\">\n        <div className=\"relative overflow-hidden border border-border\">\n          <img\n            src=\"https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=1200&q=80\"\n            alt=\"The Acme team collaborating in the office\"\n            className=\"aspect-[4/3] w-full object-cover grayscale\"\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 bg-linear-to-t from-background/50 via-background/5 to-transparent\"\n          />\n          <div\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute inset-0 ring-1 ring-foreground/10 ring-inset\"\n          />\n        </div>\n\n        <div className=\"flex flex-col\">\n          <Badge variant=\"outline\" className=\"mb-4 w-fit\">\n            Our story\n          </Badge>\n          <h2 className=\"text-3xl font-bold tracking-tight text-balance\">\n            From a side project to a platform teams trust\n          </h2>\n          <div className=\"mt-5 flex flex-col gap-4 text-[15px]/relaxed text-muted-foreground\">\n            <p>\n              We were two engineers tired of rebuilding the same interfaces on\n              every project. So we started collecting the patterns that worked\n              and shaped them into something anyone could reach for.\n            </p>\n            <p>\n              Seven years later, that collection has grown into a platform used\n              by teams in more than forty countries, from solo founders to\n              enterprises shipping at scale.\n            </p>\n          </div>\n\n          <dl className=\"mt-8 grid grid-cols-3 gap-6 border-t border-border pt-6\">\n            {stats.map((stat) => (\n              <div key={stat.label} className=\"flex flex-col gap-1\">\n                <dt className=\"order-2 text-xs text-muted-foreground\">\n                  {stat.label}\n                </dt>\n                <dd className=\"order-1 text-2xl font-bold tracking-tight tabular-nums\">\n                  {stat.value}\n                </dd>\n              </div>\n            ))}\n          </dl>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "height": "85vh",
    "tier": "free"
  },
  "categories": [
    "about"
  ],
  "type": "registry:block"
}