{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"how-steps","type":"registry:block","title":"How Steps","description":"Three numbered steps on a vertical connector rail.","categories":["how-it-works"],"dependencies":[],"registryDependencies":[],"files":[{"path":"registry/blocks/how-steps.tsx","content":"const steps = [\n  {\n    number: \"01\",\n    title: \"Connect your repository\",\n    description:\n      \"Authorize GitHub or GitLab, pick a repo. We detect the framework and configure the pipeline for you.\",\n  },\n  {\n    number: \"02\",\n    title: \"Push like you always do\",\n    description:\n      \"Every commit builds, every branch gets a preview URL. Nothing new to learn, nothing to babysit.\",\n  },\n  {\n    number: \"03\",\n    title: \"Promote to production\",\n    description:\n      \"One click — or automatic on main. Rollbacks are instant because every deploy is kept, forever.\",\n  },\n];\n\nexport default function HowSteps() {\n  return (\n    <section className=\"bg-background\">\n      <div className=\"mx-auto w-full max-w-3xl px-6 py-20 sm:py-24\">\n        <div className=\"mb-12 text-center\">\n          <h2 className=\"text-2xl font-semibold tracking-tight text-balance sm:text-3xl\">\n            Live in three steps\n          </h2>\n          <p className=\"mt-2 text-muted-foreground\">\n            From repository to production in under five minutes.\n          </p>\n        </div>\n\n        <ol className=\"space-y-0\">\n          {steps.map((step, index) => (\n            <li key={step.number} className=\"relative flex gap-6 pb-10 last:pb-0\">\n              {/* Connector line */}\n              {index < steps.length - 1 && (\n                <span\n                  aria-hidden\n                  className=\"absolute top-12 left-6 h-[calc(100%-3rem)] w-px bg-border\"\n                />\n              )}\n              <span className=\"flex size-12 shrink-0 items-center justify-center rounded-full border border-border/60 bg-card font-mono text-sm tabular-nums\">\n                {step.number}\n              </span>\n              <div className=\"pt-2.5\">\n                <h3 className=\"font-medium\">{step.title}</h3>\n                <p className=\"mt-1.5 text-sm text-muted-foreground\">\n                  {step.description}\n                </p>\n              </div>\n            </li>\n          ))}\n        </ol>\n      </div>\n    </section>\n  );\n}\n","type":"registry:block","target":"components/blocks/how-it-works/how-steps.tsx"}]}