{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-13",
  "title": "Feature 13",
  "description": "A how-it-works section with a 3-card carousel, progress tab bar, and active step details",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/feature-13/feature.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { ArrowUpRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Feature13Step {\n  title: string;\n  description: string;\n  image?: string;\n  icon?: React.ReactNode;\n}\n\ninterface Feature13Props {\n  label?: string;\n  title?: string;\n  steps?: Feature13Step[];\n  className?: string;\n}\n\nconst defaultSteps: Feature13Step[] = [\n  {\n    title: \"Copy & Paste Ready\",\n    description:\n      \"Every component is ready to use. Just copy the code and paste it into your project.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n  },\n  {\n    title: \"Fully Customizable\",\n    description:\n      \"Built with Tailwind CSS, every component can be easily modified to match your brand.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n  },\n  {\n    title: \"TypeScript First\",\n    description:\n      \"All components are fully typed with TypeScript for better developer experience.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp\",\n  },\n];\n\n// Each slide takes this share of the container width; side cards peek at the edges\nconst SLIDE_WIDTH = 70;\n\nconst Feature13 = ({\n  label = \"Features\",\n  title = \"Everything You Need to Build Faster\",\n  steps = defaultSteps,\n  className,\n}: Feature13Props) => {\n  const [active, setActive] = useState(0);\n  const activeStep = steps[active];\n\n  return (\n    <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n      {/* Header */}\n      <div className=\"mb-12 flex flex-col items-center gap-2 text-center\">\n        <p className=\"text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n          {label}\n        </p>\n        <h2 className=\"text-4xl leading-tight font-medium tracking-tight md:text-5xl\">\n          {title}\n        </h2>\n      </div>\n\n      {/* Carousel with partially visible side cards */}\n      <div className=\"overflow-hidden\">\n        <div\n          className=\"flex transition-transform duration-500 ease-in-out\"\n          style={{\n            transform: `translateX(${(100 - SLIDE_WIDTH) / 2 - active * SLIDE_WIDTH}%)`,\n          }}\n        >\n          {steps.map((step, index) => (\n            <div\n              key={index}\n              className=\"shrink-0 px-2 md:px-3\"\n              style={{ width: `${SLIDE_WIDTH}%` }}\n            >\n              <button\n                type=\"button\"\n                onClick={() => setActive(index)}\n                aria-label={step.title}\n                className={cn(\n                  \"block w-full cursor-pointer overflow-hidden rounded-xl bg-muted transition-all duration-500\",\n                  index === active\n                    ? \"scale-100 opacity-100\"\n                    : \"scale-95 opacity-60\",\n                )}\n              >\n                {step.image ? (\n                  <img\n                    src={step.image}\n                    alt={step.title}\n                    className=\"aspect-square w-full object-cover md:aspect-video\"\n                  />\n                ) : (\n                  <div className=\"aspect-square w-full md:aspect-video\" />\n                )}\n              </button>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Progress tab bar */}\n      <div\n        className=\"mx-auto mt-6 flex gap-2 px-2 md:px-3\"\n        style={{ width: `${SLIDE_WIDTH}%` }}\n      >\n        {steps.map((step, index) => (\n          <button\n            key={index}\n            type=\"button\"\n            onClick={() => setActive(index)}\n            aria-label={`Go to step ${index + 1}`}\n            className={cn(\n              \"h-0.5 flex-1 cursor-pointer transition-colors duration-300\",\n              index === active ? \"bg-foreground\" : \"bg-border\",\n            )}\n          />\n        ))}\n      </div>\n\n      {/* Active step details */}\n      <div\n        className=\"mx-auto mt-10 flex items-start gap-4 px-2 md:px-3\"\n        style={{ width: `${SLIDE_WIDTH}%` }}\n      >\n        <div className=\"flex size-6 shrink-0 items-center justify-center rounded-full bg-primary text-primary-foreground md:size-10\">\n          {activeStep.icon ?? <ArrowUpRight className=\"size-3 md:size-5\" />}\n        </div>\n        <div className=\"flex flex-col gap-2\">\n          <h3 className=\"text-2xl font-medium tracking-tight md:text-3xl\">\n            {activeStep.title}\n          </h3>\n          <p className=\"max-w-xl text-muted-foreground\">\n            {activeStep.description}\n          </p>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Feature13;\nexport type { Feature13Props, Feature13Step };\n",
      "type": "registry:component",
      "target": "components/feature-13.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-13.webp",
    "imageDark": "/r/previews/feature-13-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}