{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-12",
  "title": "Feature 12",
  "description": "A feature section with a large clickable title list on the left and an image with description on the right that updates on selection",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/feature-12/feature.tsx",
      "content": "\"use client\";\n\nimport { useState } from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Feature12Item {\n  title: string;\n  description: string;\n  image?: string;\n}\n\ninterface Feature12Props {\n  label?: string;\n  items?: Feature12Item[];\n  className?: string;\n}\n\nconst defaultItems: Feature12Item[] = [\n  {\n    title: \"Components.\",\n    description:\n      \"Production-ready blocks built on shadcn/ui and Tailwind CSS. Every component is accessible by default, dark mode ready, and fully consistent with your design system.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n  },\n  {\n    title: \"Customization.\",\n    description:\n      \"Fully typed and themeable from top to bottom. Swap colors, spacing, and copy through clean props — no digging through opaque internals or fighting CSS specificity.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n  },\n  {\n    title: \"Performance.\",\n    description:\n      \"Zero runtime overhead. Components ship as plain React and Tailwind — no CSS-in-JS, no heavy runtimes, no layout shift. Just fast, static HTML from the first byte.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-10.webp\",\n  },\n  {\n    title: \"Accessibility.\",\n    description:\n      \"Every interactive element follows WAI-ARIA patterns out of the box. Keyboard navigation, focus management, and screen reader support are built in — not bolted on.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-12.webp\",\n  },\n  {\n    title: \"Developer Experience.\",\n    description:\n      \"TypeScript-first APIs, consistent naming, and self-contained files. Copy a block, drop it in, and ship — the entire surface fits in your head after five minutes.\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n  },\n];\n\nconst Feature12 = ({\n  label = \"Why shadcnship\",\n  items = defaultItems,\n  className,\n}: Feature12Props) => {\n  const [active, setActive] = useState(0);\n  const activeItem = items[active];\n\n  return (\n    <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n      {label && (\n        <p className=\"mb-12 text-sm font-semibold tracking-widest text-muted-foreground uppercase\">\n          {label}\n        </p>\n      )}\n\n      <div className=\"grid grid-cols-1 gap-12 lg:grid-cols-[2fr_3fr] lg:gap-16\">\n        {/* Left: clickable title list */}\n        <div className=\"flex flex-col\">\n          {items.map((item, i) => (\n            <button\n              key={i}\n              onClick={() => setActive(i)}\n              className={cn(\n                \"group flex cursor-pointer items-center gap-4 py-2 text-left transition-colors duration-200\",\n                i === active\n                  ? \"text-foreground\"\n                  : \"text-muted-foreground/50 hover:text-muted-foreground\",\n              )}\n            >\n              <span\n                className={cn(\n                  \"size-1.5 shrink-0 rounded-full transition-colors duration-200\",\n                  i === active ? \"bg-foreground\" : \"bg-transparent\",\n                )}\n              />\n              <span className=\"text-4xl font-medium tracking-tight md:text-5xl\">\n                {item.title}\n              </span>\n            </button>\n          ))}\n        </div>\n\n        {/* Right: active item content */}\n        <div className=\"flex flex-col gap-6\">\n          {/* Image with index badge */}\n          <div className=\"relative overflow-hidden rounded-2xl bg-muted\">\n            {activeItem.image ? (\n              <img\n                src={activeItem.image}\n                alt={activeItem.title}\n                className=\"aspect-video w-full object-cover\"\n              />\n            ) : (\n              <div className=\"aspect-video w-full\" />\n            )}\n            <div className=\"absolute bottom-4 left-4\">\n              <span className=\"text-2xl font-medium text-white/70 tabular-nums\">\n                {String(active + 1).padStart(2, \"0\")}\n              </span>\n            </div>\n          </div>\n\n          {/* Description */}\n          <p className=\"text-muted-foreground md:text-lg\">\n            {activeItem.description}\n          </p>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Feature12;\nexport type { Feature12Props, Feature12Item };\n",
      "type": "registry:component",
      "target": "components/feature-12.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-12.webp",
    "imageDark": "/r/previews/feature-12-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}