{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-02",
  "type": "registry:block",
  "title": "Category 02",
  "files": [
    {
      "path": "src/components/commercn/categories/category-02.tsx",
      "content": "'use client'\n\nimport { ArrowRight } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { motion } from \"motion/react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardDescription, CardHeader, CardTitle } from \"@/components/ui/card\";\n\nconst categories = [\n\t{\n\t\ttitle: \"Sports\",\n\t\tcount: \"1.5k+ Products\",\n\t\timage: \"https://images.unsplash.com/photo-1762077656142-e359ebffb2f4?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Watches\",\n\t\tcount: \"400+ Products\",\n\t\timage: \"https://images.unsplash.com/photo-1549972574-8e3e1ed6a347?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Footwear\",\n\t\tcount: \"2.8k+ Products\",\n\t\timage: \"https://images.unsplash.com/photo-1742392787511-8158c243b772?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n\t{\n\t\ttitle: \"Accessories\",\n\t\tcount: \"1.9k+ Products\",\n\t\timage: \"https://images.unsplash.com/photo-1624823183493-ed5832f48f18?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\",\n\t},\n];\n\nexport function CategoryTwo() {\n\treturn (\n\t\t<div className=\"flex flex-col lg:flex-row w-full items-center lg:items-stretch justify-center gap-4 max-w-4xl\">\n\t\t\t{/* Featured Left Card */}\n\t\t\t<Card className=\"relative w-full lg:max-w-[300px] overflow-hidden bg-foreground border-none\">\n\t\t\t\t<div className=\"bg-gradient-to-bl from-gray-400 to-gray-400/10 absolute inset-0 absolute w-full h-full\" />\n\t\t\t\t<CardHeader className=\"relative h-full flex flex-col justify-between items-start\">\n\t\t\t\t\t<div className=\"mb-auto\">\n\t\t\t\t\t\t<h2 className=\"text-2xl mb-2 text-background font-medium\">\n\t\t\t\t\t\t\tNew Arrivals\n\t\t\t\t\t\t</h2>\n\t\t\t\t\t\t<p className=\"text-muted text-sm\">\n\t\t\t\t\t\t\tCheck out the latest additions to our store. Updated daily.\n\t\t\t\t\t\t</p>\n\t\t\t\t\t</div>\n\n\t\t\t\t\t{/* Button */}\n\t\t\t\t\t<Button variant=\"link\" className=\"text-background text-lg group hover:no-underline\">\n\t\t\t\t\t\tView All\n\t\t\t\t\t\t<ArrowRight className=\"w-4 h-4 text-background transition-transform group-hover:translate-x-2\" />\n\t\t\t\t\t</Button>\n\t\t\t\t</CardHeader>\n\t\t\t</Card>\n\n\t\t\t{/* Right Grid */}\n\t\t\t<div className=\"flex-1 grid grid-cols-1 md:grid-cols-2 gap-4\">\n\t\t\t\t{categories.map((cat) => (\n\t\t\t\t\t<CategoryListCard\n\t\t\t\t\t\tkey={cat.title}\n\t\t\t\t\t\ttitle={cat.title}\n\t\t\t\t\t\tcount={cat.count}\n\t\t\t\t\t\timageSrc={cat.image}\n\t\t\t\t\t/>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\ninterface CategoryListCardProps {\n\ttitle: string;\n\tcount: string;\n\timageSrc: string;\n}\n\nexport function CategoryListCard({ title, count, imageSrc }: CategoryListCardProps) {\n\treturn (\n\t\t<Card className=\"w-full p-4 group\">\n\t\t\t<CardHeader className=\"flex p-0\">\n\t\t\t\t<div className=\"shrink-0 w-[64px] h-[64px] rounded-lg overflow-hidden\">\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={imageSrc}\n\t\t\t\t\t\talt={title}\n\t\t\t\t\t\tclassName=\"w-full h-full object-cover mix-blend-multiply dark:mix-blend-normal\"\n\t\t\t\t\t/>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Text Content */}\n\t\t\t\t<div className=\"flex flex-col flex-1\">\n\t\t\t\t\t<CardTitle className=\"text-xl\">{title}</CardTitle>\n\t\t\t\t\t<CardDescription>{count}</CardDescription>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Arrow Icon - Visible on hover */}\n\t\t\t\t<div className=\"flex h-full items-center\">\n\t\t\t\t\t<ArrowRight className=\"w-4 h-4 text-black dark:text-white transition-all -translate-x-1 group-hover:translate-x-1 opacity-0 group-hover:opacity-100 duration-400\" />\n\t\t\t\t</div>\n\t\t\t</CardHeader>\n\t\t</Card>\n\t);\n}\n",
      "type": "registry:component"
    }
  ]
}