{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-15",
  "title": "Feature 15",
  "description": "A centered feature section with badge, phone mockup on a dot pattern background, and highlighted description",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "badge",
    "https://magicui.design/r/iphone.json"
  ],
  "files": [
    {
      "path": "src/registry/blocks/feature-15/feature.tsx",
      "content": "import { Sparkles } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { Badge } from \"@/components/ui/badge\";\n\ninterface Feature15Props {\n  badge?: { text: string; icon?: React.ReactNode; url?: string };\n  title?: string;\n  description?: React.ReactNode;\n  img?: string;\n  className?: string;\n}\n\nconst Feature15 = ({\n  badge = {\n    text: \"Production-ready components\",\n    url: \"#\",\n  },\n  title = \"Shadcn UI Blocks, Copy & Customize\",\n  description = (\n    <>\n      Pre-built landing page components for React. Just{\" \"}\n      <strong className=\"font-semibold text-foreground\">copy the code</strong>{\" \"}\n      and focus on what matters —{\" \"}\n      <strong className=\"font-semibold text-foreground\">your product</strong>.\n    </>\n  ),\n  img = \"/images/mockups/iphone-crop.webp\",\n  className,\n}: Feature15Props) => {\n  return (\n    <section\n      className={cn(\n        \"relative w-full overflow-hidden py-16 md:py-24\",\n        className,\n      )}\n    >\n      {/* Dot pattern background */}\n      <div\n        aria-hidden\n        className=\"pointer-events-none absolute inset-0\"\n        style={{\n          backgroundImage:\n            \"radial-gradient(var(--border) 1px, transparent 1px)\",\n          backgroundSize: \"16px 16px\",\n          maskImage:\n            \"radial-gradient(ellipse 60% 60% at 50% 40%, #000 40%, transparent 100%)\",\n          WebkitMaskImage:\n            \"radial-gradient(ellipse 60% 60% at 50% 40%, #000 40%, transparent 100%)\",\n        }}\n      />\n\n      <div className=\"relative z-10 container mx-auto px-6\">\n        <div className=\"flex flex-col items-center gap-4 text-center\">\n          {badge && (\n            <Badge\n              variant=\"outline\"\n              className=\"gap-1.5 border border-border py-1\"\n              asChild\n            >\n              <a href={badge.url}>\n                {badge.icon}\n                {badge.text}\n              </a>\n            </Badge>\n          )}\n\n          <h2 className=\"max-w-5xl text-4xl leading-tight font-semibold tracking-tight whitespace-pre-line md:text-5xl\">\n            {title}\n          </h2>\n\n          {/* Product image, centered and fully visible */}\n          <div className=\"flex h-64 w-full max-w-lg items-center justify-center overflow-hidden md:h-80\">\n            <img\n              src={img}\n              alt=\"\"\n              className=\"max-h-full max-w-full object-contain\"\n            />\n          </div>\n\n          <p className=\"max-w-xl text-muted-foreground md:text-lg\">\n            {description}\n          </p>\n\n          {/* Decorative dots row */}\n          <div\n            aria-hidden\n            className=\"mt-10 flex items-center justify-center gap-3 md:mt-16\"\n          >\n            {Array.from({ length: 6 }).map((_, i) => (\n              <span\n                key={i}\n                className={cn(\n                  \"size-1.5 bg-muted-foreground/40\",\n                  i % 2 === 0 ? \"rotate-45\" : \"rounded-full\",\n                )}\n              />\n            ))}\n          </div>\n        </div>\n      </div>\n    </section>\n  );\n};\n\nexport default Feature15;\n",
      "type": "registry:component",
      "target": "components/feature-15.tsx"
    }
  ],
  "meta": {
    "image": "/r/previews/feature-15.webp",
    "imageDark": "/r/previews/feature-15-dark.webp"
  },
  "categories": [
    "feature"
  ],
  "type": "registry:block"
}