{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-2",
  "title": "Alternating Spine Story",
  "description": "Centered timeline alternating year entries left and right of a vertical spine, collapsing to a single rail on mobile, with tag badges per entry.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/blocks/timeline/2/timeline-block.tsx",
      "content": "import { Badge } from \"@/components/ui/badge\"\nimport { cn } from \"@/lib/utils\"\n\nconst events: {\n  year: string\n  title: string\n  copy: string\n  tag: string\n}[] = [\n  {\n    year: \"2021\",\n    title: \"The first commit\",\n    copy: \"Acme started as a weekend project to standardize the UI patterns our team rebuilt on every new app.\",\n    tag: \"Origin\",\n  },\n  {\n    year: \"2022\",\n    title: \"Open sourced\",\n    copy: \"We released the core library under MIT and the community doubled the block count within six months.\",\n    tag: \"Community\",\n  },\n  {\n    year: \"2023\",\n    title: \"Series A\",\n    copy: \"Fresh funding let us grow the design team and commit to a flawless light and dark experience everywhere.\",\n    tag: \"Growth\",\n  },\n  {\n    year: \"2024\",\n    title: \"100k installs\",\n    copy: \"Blocks crossed one hundred thousand installs through the CLI, spanning marketing sites and full SaaS apps.\",\n    tag: \"Milestone\",\n  },\n  {\n    year: \"2025\",\n    title: \"Going global\",\n    copy: \"Localized docs and a worldwide contributor program brought Acme to teams in more than forty countries.\",\n    tag: \"Today\",\n  },\n]\n\nexport default function TimelineBlock() {\n  return (\n    <section className=\"flex w-full items-center justify-center bg-muted/30 px-6 py-16 text-foreground\">\n      <div className=\"mx-auto w-full max-w-3xl\">\n        <div className=\"mb-14 text-center\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            Our Story\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight\">\n            Five years in the making\n          </h2>\n          <p className=\"mx-auto mt-3 max-w-lg text-muted-foreground\">\n            A look back at the moments that brought Acme to where it is today.\n          </p>\n        </div>\n\n        <ol className=\"relative flex flex-col gap-12\">\n          {/* Spine: left on mobile, centered on md+ */}\n          <span\n            className=\"absolute top-2 bottom-2 left-3 w-px bg-border md:left-1/2 md:-translate-x-1/2\"\n            aria-hidden=\"true\"\n          />\n\n          {events.map((event, i) => {\n            const right = i % 2 === 1\n            return (\n              <li\n                key={event.year}\n                className=\"relative flex items-start md:grid md:grid-cols-2 md:gap-x-12\"\n              >\n                {/* Node dot on the spine */}\n                <span\n                  className=\"absolute top-1.5 left-3 z-10 size-2.5 -translate-x-1/2 rounded-full bg-primary ring-4 ring-background md:left-1/2\"\n                  aria-hidden=\"true\"\n                />\n\n                <div\n                  className={cn(\n                    \"pl-10 md:pl-0\",\n                    right\n                      ? \"md:col-start-2 md:pl-12 md:text-left\"\n                      : \"md:col-start-1 md:pr-12 md:text-right\"\n                  )}\n                >\n                  <div\n                    className={cn(\n                      \"flex flex-wrap items-center gap-2.5\",\n                      !right && \"md:justify-end\"\n                    )}\n                  >\n                    <span className=\"font-mono text-sm font-semibold tabular-nums\">\n                      {event.year}\n                    </span>\n                    <Badge variant=\"secondary\">{event.tag}</Badge>\n                  </div>\n                  <h3 className=\"mt-2 font-heading text-base font-semibold\">\n                    {event.title}\n                  </h3>\n                  <p className=\"mt-1.5 text-sm/relaxed text-muted-foreground\">\n                    {event.copy}\n                  </p>\n                </div>\n              </li>\n            )\n          })}\n        </ol>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/timeline-2.tsx"
    }
  ],
  "meta": {
    "height": "1127px",
    "tier": "free"
  },
  "categories": [
    "timeline"
  ],
  "type": "registry:block"
}