{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-11",
  "title": "Feature 11",
  "description": "A feature section with a split left-aligned header and two large image cards with text below",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-11/feature.tsx",
      "content": "import { Blocks } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\n\ninterface Feature11Card {\n  img?: string;\n  title: string;\n  description: string;\n}\n\ninterface Feature11Props {\n  badge?: { text: string; icon?: React.ReactNode };\n  title?: string;\n  description?: string;\n  cards?: Feature11Card[];\n  className?: string;\n}\n\nconst Feature11 = ({\n  badge = {\n    text: \"How it Works\",\n    icon: <Blocks className=\"size-3.5\" />,\n  },\n  title = \"Ship faster with\\nproduction-ready blocks.\",\n  description = \"Pre-built, customizable blocks for your landing page. Copy the code, adapt it to your brand, and go live in minutes.\",\n  cards = [\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n      title: \"Copy & Customize\",\n      description:\n        \"Every block is self-contained and fully editable. No dependencies to manage — just paste into your project and make it yours.\",\n    },\n    {\n      img: \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n      title: \"Built with shadcn/ui\",\n      description:\n        \"All blocks use shadcn/ui components and Tailwind CSS. Accessible by default, dark mode ready, and consistent with your design system.\",\n    },\n  ],\n  className,\n}: Feature11Props) => {\n  return (\n    <section className={cn(\"py-12 md:py-24\", className)}>\n      <div className=\"container mx-auto px-8\">\n        {/* Header */}\n        <div className=\"flex flex-col gap-6\">\n          <Badge\n            variant=\"outline\"\n            className=\"w-fit gap-1.5 rounded-full px-3 py-1 text-xs font-medium\"\n          >\n            {badge.icon}\n            {badge.text}\n          </Badge>\n\n          <div className=\"grid grid-cols-1 items-end gap-6 lg:grid-cols-2 lg:gap-16\">\n            <h2 className=\"text-4xl font-medium tracking-tight whitespace-pre-line md:text-5xl\">\n              {title}\n            </h2>\n            <p className=\"max-w-lg text-sm text-muted-foreground\">\n              {description}\n            </p>\n          </div>\n        </div>\n\n        {/* Cards */}\n        <div className=\"mt-12 grid grid-cols-1 gap-6 md:grid-cols-2\">\n          {cards.map((card, index) => (\n            <div key={index} className=\"flex flex-col gap-4\">\n              {/* Card container */}\n              <div className=\"flex aspect-4/3 items-center justify-center overflow-hidden rounded-2xl bg-muted p-4 lg:p-8\">\n                {card.img ? (\n                  <img\n                    src={card.img}\n                    alt={card.title}\n                    className=\"h-full w-full rounded-xl object-cover shadow-sm\"\n                  />\n                ) : (\n                  <div className=\"h-full w-full rounded-xl bg-muted-foreground/10\" />\n                )}\n              </div>\n\n              {/* Card text */}\n              <div className=\"flex flex-col gap-1.5\">\n                <h3 className=\"text-base font-semibold\">{card.title}</h3>\n                <p className=\"text-sm text-muted-foreground\">\n                  {card.description}\n                </p>\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Feature11;\nexport type { Feature11Props, Feature11Card };\n",
      "type": "registry:component",
      "target": "components/feature-11.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-11.webp",
    "imageDark": "/r/previews/feature-11-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}