{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comingsoon2",
  "title": "Development Progress Milestones",
  "description": "Coming soon section with a progress bar and milestone tracker showing development stages like Design, Backend, Frontend, and Testing. Perfect for keeping users informed about product development progress.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "badge",
    "progress"
  ],
  "files": [
    {
      "path": "registry/comingsoon2/comingsoon2.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { Progress } from \"@/components/ui/progress\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Milestone {\n  label: string;\n  completed: boolean;\n}\n\ninterface ComingSoon2Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  showProgress?: boolean;\n  progressLabel?: string;\n  milestones?: Milestone[];\n  className?: string;\n}\n\nexport const comingsoon2Demo: ComingSoon2Props = {\n  badge: { label: \"In Development\", variant: \"secondary\" },\n  heading: \"Building something great\",\n  description:\n    \"We're making steady progress on our new platform. Here's where we are in our development journey.\",\n  showProgress: true,\n  progressLabel: \"Development Progress\",\n  milestones: [\n    { label: \"Design\", completed: true },\n    { label: \"Backend\", completed: true },\n    { label: \"Frontend\", completed: true },\n    { label: \"Testing\", completed: false },\n    { label: \"Launch\", completed: false },\n  ],\n};\n\nexport function ComingSoon2({\n  badge,\n  heading,\n  description,\n  showProgress = true,\n  progressLabel,\n  milestones = [],\n  className,\n}: ComingSoon2Props) {\n  // Calculate progress based on completed milestones\n  const completedCount = milestones.filter((m) => m.completed).length;\n  const progress =\n    milestones.length > 0 ? (completedCount / milestones.length) * 100 : 0;\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-4xl px-4 md:px-6\">\n        <div className=\"flex flex-col items-center text-center gap-6 md:gap-8\">\n          {badge && (\n            <div>\n              <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n            </div>\n          )}\n\n          {heading && (\n            <h2 className=\"text-4xl md:text-5xl lg:text-6xl font-bold text-balance max-w-4xl\">\n              {heading}\n            </h2>\n          )}\n\n          {description && (\n            <p className=\"text-lg md:text-xl text-balance max-w-2xl text-muted-foreground\">\n              {description}\n            </p>\n          )}\n\n          {showProgress && (\n            <div className=\"w-full max-w-2xl my-6\">\n              {progressLabel && (\n                <div className=\"text-sm font-medium mb-3 text-muted-foreground\">\n                  {progressLabel}\n                </div>\n              )}\n\n              <Progress value={progress} className=\"h-3\" />\n\n              <div className=\"text-sm mt-2 text-muted-foreground text-right\">\n                {Math.round(progress)}% complete\n              </div>\n\n              {milestones.length > 0 && (\n                <div className=\"flex justify-between mt-6 relative\">\n                  <div className=\"absolute top-3 left-0 right-0 h-0.5 bg-muted\" />\n                  {milestones.map((milestone) => (\n                    <div\n                      key={milestone.label}\n                      className=\"flex flex-col items-center relative z-10\"\n                    >\n                      <div\n                        className={cn(\n                          \"w-6 h-6 rounded-full flex items-center justify-center text-xs font-medium transition-colors\",\n                          milestone.completed\n                            ? \"bg-primary text-primary-foreground\"\n                            : \"bg-muted border-2 border-border\"\n                        )}\n                      >\n                        {milestone.completed && \"✓\"}\n                      </div>\n                      <span className=\"text-xs mt-2 text-muted-foreground\">\n                        {milestone.label}\n                      </span>\n                    </div>\n                  ))}\n                </div>\n              )}\n            </div>\n          )}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/comingsoon2.tsx"
    }
  ],
  "type": "registry:block"
}