{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-01",
  "type": "registry:block",
  "title": "Category 01",
  "files": [
    {
      "path": "src/components/commercn/categories/category-01.tsx",
      "content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\nimport { ArrowRight } from \"lucide-react\";\nimport { motion } from \"motion/react\";\n\nconst categories = [\n\t{\n\t\tid: 1,\n\t\ttitle: \"Electronics\",\n\t\tcount: \"1.2k+ Products\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1550009158-9ebf69173e03?q=80&w=1801&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\tid: 2,\n\t\ttitle: \"Fashion\",\n\t\tcount: \"3.5k+ Products\",\n\t\timage:\n\t\t\t\"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\t},\n\t{\n\t\tid: 3,\n\t\ttitle: \"Home & Decor\",\n\t\tcount: \"800+ Products\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1534349762230-e0cadf78f5da?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\tid: 4,\n\t\ttitle: \"Beauty\",\n\t\tcount: \"2.1k+ Products\",\n\t\timage:\n\t\t\t\"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\t},\n\t{\n\t\tid: 5,\n\t\ttitle: \"Sports\",\n\t\tcount: \"1.5k+ Products\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1768647417374-5a31c61dc5d0?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\tid: 6,\n\t\ttitle: \"Watches\",\n\t\tcount: \"400+ Products\",\n\t\timage:\n\t\t\t\"https://images.unsplash.com/photo-1639006570490-79c0c53f1080?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n];\n\nexport function CategoryOne() {\n\treturn (\n\t\t<section className=\"w-full max-w-7xl mx-auto\">\n\t\t\t{/* Header */}\n\t\t\t<div className=\"flex flex-col md:flex-row justify-between items-end gap-4 mb-8 lg:mb-10\">\n\t\t\t\t<div className=\"flex flex-col gap-1\">\n\t\t\t\t\t<h2 className=\"font-bold text-4xl\">\n\t\t\t\t\t\tShop by Category\n\t\t\t\t\t</h2>\n\t\t\t\t\t<p className=\"font-normal text-sm lg:text-base text-muted-foreground\">\n\t\t\t\t\t\tBrowse our diverse collection of premium products.\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t<Button className=\"group\" asChild>\n\t\t\t\t\t<a href=\"#\">\n\t\t\t\t\t\tView all categories\n\t\t\t\t\t\t<ArrowRight className=\"w-4 h-4 transition-transform group-hover:translate-x-1\" />\n\t\t\t\t\t</a>\n\t\t\t\t</Button>\n\t\t\t</div>\n\n\t\t\t{/* Grid */}\n\t\t\t<div className=\"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4\">\n\t\t\t\t{categories.map((category) => (\n\t\t\t\t\t<CategoryCard\n\t\t\t\t\t\tkey={category.id}\n\t\t\t\t\t\ttitle={category.title}\n\t\t\t\t\t\tcount={category.count}\n\t\t\t\t\t\timageSrc={category.image}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</section>\n\t);\n}\n\ninterface CategoryCardProps {\n\ttitle: string;\n\tcount: string;\n\timageSrc: string;\n\tclassName?: string;\n}\n\nexport function CategoryCard({ title, count, imageSrc, className }: CategoryCardProps) {\n\treturn (\n\t\t<motion.div\n\t\t\tclassName={cn(\n\t\t\t\t\"group relative overflow-hidden rounded-xl cursor-pointer h-56 flex flex-col justify-end\",\n\t\t\t\tclassName\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"absolute inset-0\">\n\t\t\t\t<img\n\t\t\t\t\tsrc={imageSrc}\n\t\t\t\t\talt={title}\n\t\t\t\t\tclassName=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-110\"\n\t\t\t\t/>\n\t\t\t</div>\n\n\t\t\t<div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-transparent to-transparent\" />\n\n\t\t\t<div className=\"bottom-0 left-0 p-[24px] w-full flex items-end justify-between gap-4 relative\">\n\t\t\t\t<div className=\"shrink-0\">\n\t\t\t\t\t<h3 className=\"text-zinc-100 text-2xl font-semibold\">\n\t\t\t\t\t\t{title}\n\t\t\t\t\t</h3>\n\t\t\t\t\t<p className=\"text-white/90 font-medium text-sm\">\n\t\t\t\t\t\t{count}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\n\t\t\t\t<motion.div\n\t\t\t\t\tclassName=\"w-[32px] h-[32px] bg-white rounded-full flex items-center justify-center text-black opacity-0 translate-y-4 group-hover:opacity-100 group-hover:translate-y-0 transition-all duration-300 ease-out\"\n\t\t\t\t>\n\t\t\t\t\t<ArrowRight className=\"w-4 h-4\" strokeWidth={2} />\n\t\t\t\t</motion.div>\n\t\t\t</div>\n\t\t</motion.div>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}