{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "roadmap-2",
  "title": "Now Next Later Phases",
  "description": "Directional roadmap grouped into Now, Next, and Later phases with colored markers, a target month each, progress bars, and vote counts on upcoming items.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "avatar",
    "badge",
    "progress"
  ],
  "files": [
    {
      "path": "registry/blocks/roadmap/2/roadmap-block.tsx",
      "content": "import { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Progress } from \"@/components/ui/progress\"\nimport { cn } from \"@/lib/utils\"\n\ntype Contributor = { name: string; src: string }\n\ntype Item = {\n  title: string\n  description: string\n  progress?: number\n  votes?: number\n  team?: Contributor[]\n}\n\ntype Phase = {\n  id: string\n  label: string\n  caption: string\n  target: string\n  tone: \"active\" | \"upcoming\" | \"future\"\n  items: Item[]\n}\n\nconst team: Record<string, Contributor> = {\n  ada: { name: \"Ada\", src: \"https://i.pravatar.cc/64?img=47\" },\n  leo: { name: \"Leo\", src: \"https://i.pravatar.cc/64?img=12\" },\n  mara: { name: \"Mara\", src: \"https://i.pravatar.cc/64?img=32\" },\n  owen: { name: \"Owen\", src: \"https://i.pravatar.cc/64?img=53\" },\n}\n\nconst phases: Phase[] = [\n  {\n    id: \"now\",\n    label: \"Now\",\n    caption: \"In active development\",\n    target: \"June 2026\",\n    tone: \"active\",\n    items: [\n      {\n        title: \"Native mobile apps\",\n        description:\n          \"Offline-first iOS and Android with real-time sync and push.\",\n        progress: 72,\n        team: [team.ada, team.leo, team.mara],\n      },\n      {\n        title: \"Audit log export\",\n        description: \"Stream workspace activity to your SIEM in real time.\",\n        progress: 41,\n        team: [team.owen, team.ada],\n      },\n    ],\n  },\n  {\n    id: \"next\",\n    label: \"Next\",\n    caption: \"Up next\",\n    target: \"September 2026\",\n    tone: \"upcoming\",\n    items: [\n      {\n        title: \"Custom dashboards\",\n        description: \"Compose the metric views your team cares about.\",\n        votes: 218,\n      },\n      {\n        title: \"Public API v2\",\n        description: \"A faster, fully typed API with per-key rate limits.\",\n        votes: 173,\n      },\n    ],\n  },\n  {\n    id: \"later\",\n    label: \"Later\",\n    caption: \"On the horizon\",\n    target: \"April 2027\",\n    tone: \"future\",\n    items: [\n      {\n        title: \"Workflow automation\",\n        description: \"Trigger actions from events without writing code.\",\n        votes: 94,\n      },\n    ],\n  },\n]\n\nconst dotTone: Record<Phase[\"tone\"], string> = {\n  active: \"bg-primary\",\n  upcoming: \"bg-muted-foreground/60\",\n  future: \"border border-muted-foreground/50\",\n}\n\nexport default function RoadmapBlock() {\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-2xl\">\n        <div className=\"mb-10\">\n          <Badge variant=\"outline\" className=\"mb-4\">\n            Roadmap\n          </Badge>\n          <h2 className=\"font-heading text-3xl font-bold tracking-tight\">\n            Where we are headed\n          </h2>\n          <p className=\"mt-3 text-muted-foreground\">\n            What the team is building now and what comes next. Priorities shift\n            as we learn from your feedback.\n          </p>\n        </div>\n\n        <div className=\"flex flex-col gap-8\">\n          {phases.map((phase) => (\n            <div key={phase.id} className=\"flex flex-col gap-4\">\n              <div className=\"flex items-center gap-3\">\n                <span\n                  className={cn(\"size-2.5 rounded-full\", dotTone[phase.tone])}\n                  aria-hidden=\"true\"\n                />\n                <h3 className=\"font-heading text-base font-semibold tracking-tight\">\n                  {phase.label}\n                </h3>\n                <span className=\"text-sm text-muted-foreground\">\n                  {phase.caption}\n                </span>\n                <span className=\"ml-auto text-xs font-medium text-muted-foreground\">\n                  {phase.target}\n                </span>\n              </div>\n\n              <ul className=\"flex flex-col gap-3\">\n                {phase.items.map((item) => (\n                  <li\n                    key={item.title}\n                    className=\"flex flex-col gap-2 rounded-lg border border-border bg-card p-4 transition-colors hover:border-muted-foreground/40\"\n                  >\n                    <div>\n                      <h4 className=\"font-heading text-sm font-semibold\">\n                        {item.title}\n                      </h4>\n                      <p className=\"mt-0.5 text-xs/relaxed text-muted-foreground\">\n                        {item.description}\n                      </p>\n                    </div>\n\n                    {item.progress != null ? (\n                      <div className=\"mt-0.5 flex flex-col gap-1.5\">\n                        <div className=\"flex items-center justify-between gap-3\">\n                          <div className=\"flex -space-x-2\">\n                            {item.team?.map((member) => (\n                              <Avatar\n                                key={member.name}\n                                className=\"size-6 border-2 border-card\"\n                              >\n                                <AvatarImage\n                                  src={member.src}\n                                  alt={member.name}\n                                  className=\"grayscale\"\n                                />\n                                <AvatarFallback className=\"text-[10px]\">\n                                  {member.name[0]}\n                                </AvatarFallback>\n                              </Avatar>\n                            ))}\n                          </div>\n                          <span className=\"text-xs font-medium text-muted-foreground tabular-nums\">\n                            {item.progress}%\n                          </span>\n                        </div>\n                        <Progress\n                          value={item.progress}\n                          aria-label={`${item.title} progress`}\n                        />\n                      </div>\n                    ) : item.votes != null ? (\n                      <Badge variant=\"outline\" className=\"w-fit\">\n                        {item.votes} Votes\n                      </Badge>\n                    ) : null}\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/blocks/roadmap-2.tsx"
    }
  ],
  "meta": {
    "height": "1070px",
    "tier": "free"
  },
  "categories": [
    "roadmap"
  ],
  "type": "registry:block"
}