{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "timeline-demo",
  "title": "Timeline Demo",
  "description": "Demo showing timeline component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/timeline"
  ],
  "files": [
    {
      "path": "registry/demo/blocks/timeline/index.tsx",
      "content": "import {\n  Timeline,\n  TimelineCard,\n  TimelineProgress,\n} from '@/components/systaliko-ui/blocks/timeline';\n\nconst PROCESS_PHASES: { phase: string; title: string; description: string }[] =\n  [\n    {\n      phase: 'Discover & Define',\n      title: 'Grasp your brand identity',\n      description:\n        'Our journey begins with a deep dive into your vision. In the Discovery phase, we engage in meaningful conversations to grasp your brand identity, goals, and the essence you want to convey. This phase sets the stage for all that follows.',\n    },\n    {\n      phase: 'Design & Development',\n      title: 'Bringing your vision into life',\n      description:\n        \"Now, it's time for the Design Creation phase. Our talented designers bring your vision to life. We focus on aesthetics, ensuring your website not only looks stunning but also aligns perfectly with your brand identity.\",\n    },\n    {\n      phase: 'Build & Iterate',\n      title: 'Refining the details',\n      description:\n        'Before your website goes live, it undergoes rigorous Testing and Quality Assurance. We meticulously examine functionality, performance, and compatibility to ensure a seamless user experience.',\n    },\n    {\n      phase: 'Launch Phase',\n      title: 'Ready for the spotlight',\n      description:\n        'The Launch phase is the culmination of hard work. We optimize, configure, and prepare for the grand reveal. Your website is now ready to shine in the digital world.',\n    },\n    {\n      phase: 'Post Launch',\n      title: 'Post launch support',\n      description:\n        \"Our commitment continues beyond launch. We offer post-launch support to address questions, provide assistance, and ensure your website remains updated and optimized. The Website Design Process isn't just about creating a website.\",\n    },\n  ];\n\nexport function TimelineDemo() {\n  return (\n    <Timeline className=\"flex justify-center gap-4 relative px-8 py-12\">\n      <TimelineProgress className=\"bg-stone-200\" />\n      <div className=\"space-y-20\">\n        {PROCESS_PHASES.map((phase, index) => (\n          <TimelineCard key={phase.title} className=\"px-6 max-w-md flex gap-8\">\n            <div className=\"space-y-3\">\n              <div className=\"flex gap-4\">\n                <div>\n                  <h2 className=\"font-medium\">{phase.phase}</h2>\n                  <h3 className=\"text-sm text-muted-foreground\">\n                    {phase.title}\n                  </h3>\n                </div>\n                <div className=\"p-1\">\n                  <h4 className=\"text-xs font-bold tabular-nums\">\n                    {String(index + 1).padStart(2, '0')}\n                  </h4>\n                </div>\n              </div>\n              <p className=\"text-balance text-sm text-muted-foreground\">\n                {phase.description}\n              </p>\n            </div>\n          </TimelineCard>\n        ))}\n      </div>\n    </Timeline>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/systaliko-ui/demo/timeline.tsx"
    }
  ],
  "type": "registry:block"
}