{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-06",
  "title": "Feature 06",
  "description": "Four-step process section with numbered badges, step titles, descriptions, and an optional screenshot. Use it to explain how your product works, step by step, on landing and onboarding pages.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/feature-06/feature.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { IterationCw, Handshake, FolderCog, UserRoundPlus } from \"lucide-react\";\n\ninterface StepItem {\n  step: number;\n  title: string;\n  description: string;\n  img?: string;\n  icon?: React.ReactNode;\n}\n\ninterface Feature06Props {\n  label?: string;\n  title?: string;\n  description?: string;\n  steps?: StepItem[];\n  className?: string;\n}\n\nconst StepCard = ({\n  step,\n  index,\n  total,\n}: {\n  step: StepItem;\n  index: number;\n  total: number;\n}) => {\n  const isLast = index === total - 1;\n  const isLeftColumnMd = index % 2 === 0;\n  const isTopRowMd = index < 2;\n\n  return (\n    <div\n      className={cn(\n        \"relative flex h-full flex-col gap-4 p-4\",\n        !isLast && \"border-b md:border-b-0\",\n        isLeftColumnMd && !isLast && \"md:border-r lg:border-r-0\",\n        isTopRowMd && \"md:border-b lg:border-b-0\",\n        !isLast && \"lg:border-r\",\n      )}\n    >\n      <span className=\"inline-flex w-fit items-center justify-center rounded-full border bg-background px-4 py-1 text-sm font-medium\">\n        Step {step.step}\n      </span>\n      <div className=\"flex flex-1 flex-col gap-4\">\n        <h3 className=\"text-xl font-medium tracking-tight\">{step.title}</h3>\n        <p className=\"text-sm leading-relaxed text-muted-foreground\">\n          {step.description}\n        </p>\n      </div>\n      <div className=\"mt-4 aspect-video w-full overflow-hidden rounded-md bg-muted\">\n        {step.img ? (\n          <img\n            src={step.img}\n            alt={step.title}\n            className=\"size-full object-cover\"\n          />\n        ) : (\n          <div className=\"flex size-full items-center justify-center\">\n            {step.icon ? (\n              <div className=\"text-primary\">{step.icon}</div>\n            ) : (\n              <div className=\"flex size-16 items-center justify-center rounded-full bg-muted-foreground/10\">\n                <span className=\"text-2xl font-medium text-muted-foreground/40\">\n                  {step.step}\n                </span>\n              </div>\n            )}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n};\n\nconst Feature06 = ({\n  label = \"How it works\",\n  title = \"Work normally. We handle the rest.\",\n  description = \"Get started in minutes with our simple 4-step process. No complex setup required.\",\n  steps = [\n    {\n      step: 1,\n      title: \"Create your account\",\n      description:\n        \"Sign up in seconds with your email or connect with your favorite tools. No credit card required to get started.\",\n      icon: <UserRoundPlus className=\"size-16\" strokeWidth={1} />,\n    },\n    {\n      step: 2,\n      title: \"Configure your workspace\",\n      description:\n        \"Set up your workspace with our intuitive dashboard. Import existing data or start fresh with our templates.\",\n      icon: <FolderCog className=\"size-16\" strokeWidth={1} />,\n    },\n    {\n      step: 3,\n      title: \"Invite your team\",\n      description:\n        \"Collaborate seamlessly by inviting team members. Set permissions and roles to keep everyone aligned.\",\n      icon: <Handshake className=\"size-16\" strokeWidth={1} />,\n    },\n    {\n      step: 4,\n      title: \"Launch and iterate\",\n      description:\n        \"Go live with confidence. Monitor performance with built-in analytics and optimize as you grow.\",\n      icon: <IterationCw className=\"size-16\" strokeWidth={1} />,\n    },\n  ],\n  className,\n}: Feature06Props) => (\n  <section className={cn(\"container mx-auto px-4 py-12 md:py-24\", className)}>\n    <div className=\"mx-auto flex flex-col items-center gap-4 text-center\">\n      <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n        {label}\n      </p>\n      <h2 className=\"text-3xl font-medium tracking-tight md:text-4xl lg:text-5xl\">\n        {title}\n      </h2>\n      {description && (\n        <p className=\"max-w-xl text-muted-foreground md:text-lg\">\n          {description}\n        </p>\n      )}\n    </div>\n    <div className=\"mt-12 grid rounded-sm border md:grid-cols-2 lg:grid-cols-4\">\n      {steps.map((step, index) => (\n        <StepCard\n          key={step.step}\n          step={step}\n          index={index}\n          total={steps.length}\n        />\n      ))}\n    </div>\n  </section>\n);\n\nexport default Feature06;\n",
      "type": "registry:component",
      "target": "components/feature-06.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-06.webp",
    "imageDark": "/r/previews/feature-06-dark.webp",
    "prose": {
      "about": "Feature 06 is a numbered step-by-step process section that explains how a product works in four sequential stages. Each step displays a number badge, a step title, and a short description. An optional product screenshot sits alongside the steps to reinforce the explanation visually. Built with shadcn/ui and Tailwind CSS, it uses a responsive two-column grid that collapses gracefully on mobile.",
      "whenToUse": [
        "Products with a clear onboarding flow or setup process that benefits from a numbered walkthrough",
        "Landing pages that need to answer 'how does it work?' after the hero section",
        "SaaS tools with a distinct install-configure-use workflow that reduces perceived complexity",
        "Any page where breaking the product down into steps makes it feel more approachable to new visitors"
      ],
      "notes": "Keep each step description to one sentence. The numbered badge draws the eye — let the number do the structural work and keep the copy tight."
    }
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}