{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-18",
  "title": "Feature 18",
  "description": "A dark case-studies section with gradient title, white cards with category labels and plus buttons, and a view-all link",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "src/registry/blocks/feature-18/feature.tsx",
      "content": "import { ArrowRight, Plus } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface Feature18Card {\n  category: string;\n  title: string;\n  image?: string;\n  url?: string;\n}\n\ninterface Feature18Props {\n  title?: string;\n  cards?: Feature18Card[];\n  link?: { text: string; url?: string };\n  className?: string;\n}\n\nconst defaultCards: Feature18Card[] = [\n  {\n    category: \"Components\",\n    title:\n      \"How to ship a complete landing page with copy & paste ready blocks?\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-7.webp\",\n    url: \"#\",\n  },\n  {\n    category: \"Customization\",\n    title:\n      \"How to easily match your brand when every component is built with Tailwind CSS?\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-5.webp\",\n    url: \"#\",\n  },\n  {\n    category: \"Developer Experience\",\n    title:\n      \"How to build faster with components fully typed with TypeScript?\",\n    image:\n      \"https://www.shadcnship.com/images/placeholders/hero-architecture-6.webp\",\n    url: \"#\",\n  },\n];\n\nconst Feature18 = ({\n  title = \"Everything You Need\\nto Build Faster\",\n  cards = defaultCards,\n  link = { text: \"View More\", url: \"#\" },\n  className,\n}: Feature18Props) => (\n  <section className={cn(\"w-full py-12 md:py-24\", className)}>\n    <div className=\"container mx-auto px-8\">\n      {/* Gradient title with decorative icon */}\n      <div className=\"flex items-start gap-4\">\n        <Plus className=\"mt-2 size-5 shrink-0 text-muted-foreground\" />\n        <h2 className=\"bg-linear-to-r from-foreground to-foreground/60 bg-clip-text text-3xl leading-tight font-medium tracking-tight whitespace-pre-line text-transparent md:text-4xl\">\n          {title}\n        </h2>\n      </div>\n\n      {/* Cards */}\n      <div className=\"mt-12 grid gap-6 md:grid-cols-3\">\n        {cards.map((card, index) => (\n          <a\n            key={index}\n            href={card.url}\n            className=\"group flex flex-col overflow-hidden rounded-xl border bg-card text-card-foreground\"\n          >\n            <div className=\"flex flex-1 flex-col p-6\">\n              <p className=\"text-xs font-semibold tracking-widest text-primary uppercase\">\n                {card.category}\n              </p>\n              <h3 className=\"mt-4 text-xl font-medium tracking-tight\">\n                {card.title}\n              </h3>\n              <div className=\"mt-6 flex flex-1 items-end justify-end\">\n                <span className=\"flex size-8 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform group-hover:rotate-90\">\n                  <Plus className=\"size-4\" />\n                </span>\n              </div>\n            </div>\n            {/* Image band at the bottom of the card */}\n            <div className=\"h-20 w-full bg-muted\">\n              {card.image && (\n                <img\n                  src={card.image}\n                  alt={card.title}\n                  className=\"size-full object-cover\"\n                />\n              )}\n            </div>\n          </a>\n        ))}\n      </div>\n\n      {/* View all link */}\n      {link && (\n        <a\n          href={link.url}\n          className=\"group mt-10 inline-flex items-center gap-3\"\n        >\n          <span className=\"flex size-9 items-center justify-center rounded-full bg-primary text-primary-foreground transition-transform group-hover:translate-x-0.5\">\n            <ArrowRight className=\"size-4\" />\n          </span>\n          <span className=\"text-xs font-medium tracking-widest uppercase\">\n            {link.text}\n          </span>\n        </a>\n      )}\n    </div>\n  </section>\n);\n\nexport default Feature18;\nexport type { Feature18Props, Feature18Card };\n",
      "type": "registry:component",
      "target": "components/feature-18.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-18.webp",
    "imageDark": "/r/previews/feature-18-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}