{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "portfolio84",
  "title": "Work Process Steps",
  "description": "Four-column numbered workflow section showing project phases like Discovery, Strategy, Design, and Deliver. Perfect for freelancers and agencies explaining their project methodology.",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/portfolio84/portfolio84.tsx",
      "content": "\"use client\";\n\nimport { cn } from \"@/lib/utils\";\n\ninterface StepItem {\n  badge: string;\n  title: string;\n  description: string;\n}\n\ninterface Portfolio84Props {\n  heading?: string;\n  description?: string;\n  items?: StepItem[];\n  className?: string;\n}\n\nexport const portfolio84Demo: Portfolio84Props = {\n  heading: \"My Process\",\n  description: \"How I approach every project from start to finish.\",\n  items: [\n    {\n      badge: \"01\",\n      title: \"Discovery\",\n      description:\n        \"Understanding your goals, users, and constraints through research and stakeholder interviews.\",\n    },\n    {\n      badge: \"02\",\n      title: \"Strategy\",\n      description:\n        \"Defining the approach, creating information architecture, and mapping user journeys.\",\n    },\n    {\n      badge: \"03\",\n      title: \"Design\",\n      description:\n        \"Wireframes, visual design, prototyping, and iterating based on feedback.\",\n    },\n    {\n      badge: \"04\",\n      title: \"Deliver\",\n      description:\n        \"Developer handoff, quality assurance, and ongoing support post-launch.\",\n    },\n  ],\n};\n\nexport function Portfolio84({\n  heading,\n  description,\n  items = [],\n  className,\n}: Portfolio84Props) {\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {(heading || description) && (\n          <div className=\"mb-12 text-center\">\n            {heading && (\n              <h2 className=\"text-3xl font-bold tracking-tight md:text-4xl\">\n                {heading}\n              </h2>\n            )}\n            {description && (\n              <p className=\"mt-4 text-lg text-muted-foreground\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n        <div className=\"grid gap-8 md:grid-cols-2 lg:grid-cols-4\">\n          {items.map((item, index) => (\n            <div key={index} className=\"text-center\">\n              {item.badge && (\n                <span className=\"text-5xl font-bold text-primary/20\">\n                  {item.badge}\n                </span>\n              )}\n              <h3 className=\"mt-4 text-xl font-semibold\">{item.title}</h3>\n              {item.description && (\n                <p className=\"mt-2 text-muted-foreground\">{item.description}</p>\n              )}\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/portfolio84.tsx"
    }
  ],
  "type": "registry:block"
}