{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-17",
  "title": "Feature 17",
  "description": "An alternating 2-column feature grid with thin borders, text and illustration cells, and category tags",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/feature-17/feature.tsx",
      "content": "import { Blocks, ChevronRight, Cloud, SquareTerminal } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Feature17Item {\n  icon?: React.ReactNode;\n  label: string;\n  title: string;\n  description: string;\n  link?: { text: string; url?: string };\n  image?: string;\n  tags?: string[];\n}\n\ninterface Feature17Props {\n  items?: Feature17Item[];\n  className?: string;\n}\n\nconst defaultItems: Feature17Item[] = [\n  {\n    icon: <Blocks className=\"size-4\" />,\n    label: \"Components\",\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    link: { text: \"Learn More\", url: \"#\" },\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n    tags: [\"Hero\", \"Features\", \"Pricing\", \"Testimonials\", \"FAQ\"],\n  },\n  {\n    icon: <SquareTerminal className=\"size-4\" />,\n    label: \"Customization\",\n    title: \"Fully Customizable\",\n    description:\n      \"Built with Tailwind CSS, every component can be easily modified to match your brand.\",\n    link: { text: \"Learn More\", url: \"#\" },\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n  },\n  {\n    icon: <Cloud className=\"size-4\" />,\n    label: \"Developer Experience\",\n    title: \"TypeScript First\",\n    description:\n      \"All components are fully typed with TypeScript for better developer experience.\",\n    link: { text: \"Learn More\", url: \"#\" },\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp\",\n  },\n];\n\nconst Feature17 = ({ items = defaultItems, className }: Feature17Props) => (\n  <section className={cn(\"container mx-auto px-8 py-12 md:py-24\", className)}>\n    <div className=\"border-y\">\n      {items.map((item, index) => {\n        const reversed = index % 2 === 1;\n\n        return (\n          <div\n            key={index}\n            className=\"grid border-b last:border-b-0 md:grid-cols-2 md:divide-x\"\n          >\n            {/* Text cell */}\n            <div\n              className={cn(\n                \"flex flex-col items-start justify-center gap-4 p-8 md:p-12 lg:p-16\",\n                reversed && \"md:order-2\",\n              )}\n            >\n              <div className=\"flex items-center gap-2 text-sm font-medium\">\n                {item.icon}\n                {item.label}\n              </div>\n              <h3 className=\"text-2xl font-medium tracking-tight md:text-3xl\">\n                {item.title}\n              </h3>\n              <p className=\"max-w-md text-sm text-muted-foreground md:text-base\">\n                {item.description}\n              </p>\n              {item.link && (\n                <a\n                  href={item.link.url}\n                  className=\"inline-flex items-center gap-1 text-sm font-medium text-primary hover:underline\"\n                >\n                  {item.link.text}\n                  <ChevronRight className=\"size-3.5\" />\n                </a>\n              )}\n            </div>\n\n            {/* Illustration cell */}\n            <div\n              className={cn(\n                \"flex flex-col items-center justify-center gap-6 p-8 md:p-12\",\n                reversed && \"md:order-1\",\n              )}\n            >\n              <div className=\"w-full max-w-sm overflow-hidden rounded-xl bg-muted/30\">\n                {item.image ? (\n                  <img\n                    src={item.image}\n                    alt={item.title}\n                    className=\"aspect-4/3 w-full object-cover\"\n                  />\n                ) : (\n                  <div className=\"aspect-4/3 w-full\" />\n                )}\n              </div>\n              {item.tags && item.tags.length > 0 && (\n                <div className=\"flex flex-wrap items-center justify-center gap-x-4 gap-y-2\">\n                  {item.tags.map((tag, tagIndex) => (\n                    <span\n                      key={tag}\n                      className={cn(\n                        \"text-xs\",\n                        tagIndex === 0\n                          ? \"rounded-full border px-3 py-1 font-medium\"\n                          : \"text-muted-foreground\",\n                      )}\n                    >\n                      {tag}\n                    </span>\n                  ))}\n                </div>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  </section>\n);\n\nexport default Feature17;\nexport type { Feature17Props, Feature17Item };\n",
      "type": "registry:component",
      "target": "components/feature-17.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-17.webp",
    "imageDark": "/r/previews/feature-17-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}