{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature177",
  "title": "Bento Feature Cards",
  "description": "Feature cards with 3+2 bento layout and flush media",
  "dependencies": [
    "clsx",
    "tailwind-merge",
    "lucide-react"
  ],
  "registryDependencies": [
    "badge"
  ],
  "files": [
    {
      "path": "registry/feature177/feature177.tsx",
      "content": "\"use client\";\n\nimport { Badge } from \"@/components/ui/badge\";\nimport { cn } from \"@/lib/utils\";\n\ninterface FeatureCardItem {\n  title: string;\n  description?: string;\n  image?: {\n    src: string;\n    alt: string;\n  };\n}\n\ninterface Feature177Props {\n  badge?: {\n    label: string;\n    variant?: \"default\" | \"secondary\" | \"outline\";\n  };\n  heading?: string;\n  description?: string;\n  items?: FeatureCardItem[];\n  className?: string;\n}\n\nexport const feature177Demo: Feature177Props = {\n  badge: { label: \"Features\", variant: \"default\" },\n  heading: \"Everything you need to <strong>build faster</strong>\",\n  description:\n    \"Our platform provides all the tools you need to ship products quickly and confidently.\",\n  items: [\n    {\n      title: \"Analytics Dashboard\",\n      description: \"Track your metrics in real-time with our powerful analytics dashboard.\",\n      image: {\n        src: \"https://images.unsplash.com/photo-1697133081695-90070de25bc3?w=800&h=500&fit=crop\",\n        alt: \"Analytics dashboard\",\n      },\n    },\n    {\n      title: \"Team Collaboration\",\n      description: \"Work together seamlessly with built-in collaboration tools.\",\n      image: {\n        src: \"https://images.unsplash.com/photo-1574281160075-6eb5f7bfe645?w=800&h=500&fit=crop\",\n        alt: \"Team collaboration\",\n      },\n    },\n    {\n      title: \"Automated Workflows\",\n      description: \"Automate repetitive tasks and focus on what matters most.\",\n      image: {\n        src: \"https://images.unsplash.com/photo-1592838981793-f3ebf267056d?w=800&h=500&fit=crop\",\n        alt: \"Automated workflows\",\n      },\n    },\n    {\n      title: \"Security First\",\n      description:\n        \"Enterprise-grade security with end-to-end encryption and compliance certifications.\",\n      image: {\n        src: \"https://images.unsplash.com/photo-1626033121423-c1a82ba72da0?w=800&h=500&fit=crop\",\n        alt: \"Security features\",\n      },\n    },\n    {\n      title: \"Global Infrastructure\",\n      description:\n        \"Deploy to 30+ regions worldwide with automatic scaling and 99.99% uptime guarantee.\",\n      image: {\n        src: \"https://images.unsplash.com/photo-1606162446244-0e3fd9cf11c2?w=800&h=500&fit=crop\",\n        alt: \"Global infrastructure\",\n      },\n    },\n  ],\n};\n\nexport function Feature177({\n  badge,\n  heading,\n  description,\n  items = [],\n  className,\n}: Feature177Props) {\n  const topItems = items.slice(0, 3);\n  const bottomItems = items.slice(3, 5);\n\n  return (\n    <section className={cn(\"py-16 md:py-24 w-full\", className)}>\n      <div className=\"mx-auto max-w-6xl px-4 md:px-6\">\n        {(badge || heading || description) && (\n          <div className=\"mx-auto mb-12 max-w-3xl text-center\">\n            {badge && (\n              <div className=\"mb-4 flex justify-center\">\n                <Badge variant={badge.variant ?? \"default\"}>{badge.label}</Badge>\n              </div>\n            )}\n            {heading && (\n              <h2\n                className=\"text-2xl font-semibold md:text-4xl [&>strong]:text-primary [&>strong]:font-semibold\"\n                dangerouslySetInnerHTML={{ __html: heading }}\n              />\n            )}\n            {description && (\n              <p className=\"mt-4 text-base text-muted-foreground md:text-lg\">{description}</p>\n            )}\n          </div>\n        )}\n\n        {topItems.length > 0 && (\n          <div className=\"grid gap-6 md:grid-cols-3\">\n            {topItems.map((item, index) => (\n              <div\n                key={index}\n                className=\"group/feature177 flex flex-col overflow-hidden rounded-md border bg-card\"\n              >\n                <div className=\"flex-1 p-6\">\n                  <h3 className=\"text-base font-medium md:text-lg\">{item.title}</h3>\n                  {item.description && (\n                    <p className=\"mt-2 text-sm text-muted-foreground\">{item.description}</p>\n                  )}\n                </div>\n                {item.image && (\n                  <div className=\"relative mt-auto aspect-[16/10]\">\n                    <img\n                      className=\"absolute inset-0 size-full object-cover\"\n                      src={item.image.src}\n                      alt={item.image.alt}\n                    />\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n\n        {bottomItems.length > 0 && (\n          <div className=\"mt-6 grid gap-6 md:grid-cols-2\">\n            {bottomItems.map((item, index) => (\n              <div\n                key={index}\n                className=\"group/feature177 flex flex-col overflow-hidden rounded-md border bg-card\"\n              >\n                <div className=\"flex-1 p-6\">\n                  <h3 className=\"text-base font-medium md:text-lg\">{item.title}</h3>\n                  {item.description && (\n                    <p className=\"mt-2 text-sm text-muted-foreground\">{item.description}</p>\n                  )}\n                </div>\n                {item.image && (\n                  <div className=\"relative mt-auto aspect-[16/10]\">\n                    <img\n                      className=\"absolute inset-0 size-full object-cover\"\n                      src={item.image.src}\n                      alt={item.image.alt}\n                    />\n                  </div>\n                )}\n              </div>\n            ))}\n          </div>\n        )}\n      </div>\n    </section>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/beste/block/feature177.tsx"
    }
  ],
  "type": "registry:block"
}