import { Section, SectionHeader } from "@/registry/balick/ui/section" const header = { eyebrow: "How it works", title: "From idea to production in four steps.", description: "No servers to manage and no pipeline to maintain. Connect a repository and ship.", } const steps = [ { title: "Connect your repository", description: "Import a project from GitHub, GitLab or Bitbucket. Acme detects the framework.", duration: "1 min", }, { title: "Configure once", description: "Add environment variables and a domain. Sensible defaults cover the rest.", duration: "5 min", }, { title: "Preview every change", description: "Each pull request gets its own URL, so the whole team reviews real pages.", duration: "Every push", }, { title: "Ship with confidence", description: "Merge to deploy worldwide. Roll back in one click if anything goes wrong.", duration: "Instant", }, ] export function Steps01({ id = "steps" }: { id?: string }) { return (

{/* Connector to the next step: vertical on mobile, horizontal from lg. */} {index < steps.length - 1 && ( )} {String(index + 1).padStart(2, "0")}
{step.duration}

{step.title}

{step.description}

) }

{step.title}