{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-03",
  "type": "registry:block",
  "title": "Category 03",
  "files": [
    {
      "path": "src/components/commercn/categories/category-03.tsx",
      "content": "import { cn } from \"@/lib/utils\";\n\nconst categories = [\n  {\n    id: 1,\n    title: \"Electronics\",\n    count: \"1.2k+ Products\",\n    image:\n      \"https://images.unsplash.com/photo-1676315636995-a5d5df17b192?q=80&w=1548&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  },\n  {\n    id: 2,\n    title: \"Fashion\",\n    count: \"3.5k+ Products\",\n    image:\n      \"https://images.unsplash.com/photo-1490481651871-ab68de25d43d?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  },\n  {\n    id: 3,\n    title: \"Home Decor\",\n    count: \"800+ Products\",\n    image:\n      \"https://images.unsplash.com/photo-1586023492125-27b2c045efd7?q=80&w=1316&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  },\n  {\n    id: 4,\n    title: \"Beauty\",\n    count: \"2.1k+ Products\",\n    image:\n      \"https://images.unsplash.com/photo-1522335789203-aabd1fc54bc9?q=80&w=1774&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n  },\n];\n\ninterface CategoryListCardProps {\n  title: string;\n  imageSrc: string;\n  count: string;\n  className?: string;\n}\n\nexport function CategoryThree() {\n  return (\n    <section className=\"w-full max-w-6xl mx-auto p-4 lg:p-8 border-4 border-black dark:border-white bg-white dark:bg-neutral-900 transition-colors duration-300\">\n      {/* Header */}\n      <div className=\"mb-12 flex items-center\">\n        <h2 className=\"font-extrabold text-2xl md:text-3xl lg:text-4xl xl:text-6xl uppercase tracking-tighter text-neutral-900 dark:text-white transition-colors duration-300\">\n          Collections\n        </h2>\n      </div>\n\n      {/* Grid */}\n      <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-4 lg:gap-8\">\n        {categories.map((category) => (\n          <CategoryListCard\n            key={category.id}\n            title={category.title}\n            imageSrc={category.image}\n            count={category.count}\n          />\n        ))}\n      </div>\n    </section>\n  );\n}\n\nfunction CategoryListCard({ title, imageSrc, count }: CategoryListCardProps) {\n  return (\n    <div\n      className=\"relative w-full h-72 overflow-hidden group cursor-pointer border-4 border-black dark:border-white bg-neutral-100 dark:bg-black transition-colors duration-300\"\n    >\n      <img\n        src={imageSrc}\n        alt={title}\n        className=\"absolute inset-0 w-full h-full object-cover transition-transform duration-700 group-hover:scale-105\"\n      />\n\n      <div className=\"absolute inset-0 bg-white mix-blend-difference opacity-0 group-hover:opacity-100 transition-opacity duration-500 ease-out\" />\n      <div className=\"absolute inset-0 flex items-center justify-center pointer-events-none\">\n        <h3\n          className=\"font-extrabold text-3xl lg:text-4xl uppercase tracking-tight text-white mix-blend-difference opacity-0 scale-90 group-hover:opacity-100 group-hover:scale-100 transition-all duration-500 ease-out\"\n        >\n          {title}\n        </h3>\n      </div>\n\n      {/* Count Label - Positioned bottom left, flush with border */}\n      <div className=\"absolute left-0 bottom-0 h-9 bg-black dark:bg-white px-4 flex items-center justify-center transition-colors duration-300 min-w-36\">\n        <span className=\"text-sm font-normal uppercase text-white dark:text-black\">\n          {count}\n        </span>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ]
}