{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "category-showcase",
  "title": "Category Showcase",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/category-showcase/CategoryShowcase.tsx",
      "content": "import * as React from 'react'\nimport { ArrowRight, Percent, ShoppingBag } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport { cn } from '@/lib/utils'\n\nexport interface CategoryShowcaseProps extends React.HTMLAttributes<HTMLElement> {\n  variant?: 'bento' | 'grid'\n}\n\nexport function CategoryShowcase({ variant = 'bento', className, ...props }: CategoryShowcaseProps) {\n  return (\n    <section\n      data-slot=\"category-showcase\"\n      className={cn('bg-background w-full py-12 sm:py-16 lg:py-20', className)}\n      {...props}\n    >\n      <div className=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n        {/* Section Header */}\n        <div className=\"mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end lg:mb-12\">\n          <div className=\"space-y-3\">\n            <Badge wrap variant=\"outline\" className=\"gap-1.5 px-3 py-1 text-xs font-medium\">\n              <ShoppingBag className=\"text-primary size-3.5\" />\n              Explore Collections\n            </Badge>\n            <h2 className=\"text-foreground text-3xl font-semibold tracking-tight sm:text-4xl\">Shop by Category</h2>\n            <p className=\"text-muted-foreground max-w-2xl text-sm sm:text-base\">\n              Curated essentials designed for everyday performance.\n            </p>\n          </div>\n          <a\n            href=\"#\"\n            className=\"group/link text-primary hover:text-primary/80 inline-flex min-h-6 items-center gap-1.5 text-sm font-medium transition-colors\"\n          >\n            View all collections\n            <ArrowRight className=\"size-4 transition-transform duration-200 group-hover/link:translate-x-1\" />\n          </a>\n        </div>\n\n        {/* Bento / Grid Showcase */}\n        <div\n          className={cn(\n            'grid grid-cols-1 gap-4 sm:grid-cols-2',\n            variant === 'bento' ? 'lg:grid-cols-4 lg:grid-rows-2' : 'lg:grid-cols-4',\n          )}\n        >\n          {/* Tile 1: Featured Hero Tile (2x2 in bento) */}\n          <Card\n            className={cn(\n              'group border-border bg-card relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md',\n              variant === 'bento'\n                ? 'min-h-[460px] sm:col-span-2 lg:col-span-2 lg:row-span-2 lg:min-h-[560px]'\n                : 'min-h-[320px] sm:col-span-2 lg:col-span-2',\n            )}\n          >\n            <img\n              src=\"https://images.unsplash.com/photo-1544441893-675973e31985?w=1200&auto=format&fit=crop&q=80\"\n              alt=\"Performance Outerwear collection\"\n              className=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/15\" />\n\n            <CardContent className=\"relative z-10 flex h-full flex-col justify-between p-6 sm:p-8\">\n              <div className=\"flex flex-wrap items-center justify-between gap-3\">\n                <Badge\n                  wrap\n                  variant=\"secondary\"\n                  className=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  Featured Collection\n                </Badge>\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  className=\"border-white/20 bg-white/10 text-xs font-medium text-white backdrop-blur-xs\"\n                >\n                  Explore 32 Styles\n                </Badge>\n              </div>\n\n              <div className=\"space-y-4\">\n                <div className=\"space-y-2\">\n                  <h3 className=\"text-2xl font-bold tracking-tight text-white sm:text-3xl lg:text-4xl\">\n                    Performance Outerwear\n                  </h3>\n                  <p className=\"line-clamp-2 max-w-md text-sm text-zinc-200\">\n                    Engineered weatherproof shells, insulated parkas, and technical layers designed for extreme\n                    climates.\n                  </p>\n                </div>\n\n                <Button\n                  size=\"sm\"\n                  className=\"group/btn w-fit bg-white font-medium text-zinc-900 shadow-sm hover:bg-white/90 focus-visible:ring-white\"\n                >\n                  Shop Collection\n                  <ArrowRight className=\"ml-1.5 size-4 transition-transform duration-200 group-hover/btn:translate-x-0.5\" />\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Tile 2: Footwear & Running */}\n          <Card\n            className={cn(\n              'group border-border bg-card relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md',\n              'col-span-1 min-h-[260px]',\n            )}\n          >\n            <img\n              src=\"https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Footwear and running sneakers\"\n              className=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\" />\n\n            <CardContent className=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div className=\"flex items-center justify-between\">\n                <Badge\n                  wrap\n                  variant=\"secondary\"\n                  className=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  18 Items\n                </Badge>\n              </div>\n\n              <div className=\"space-y-1\">\n                <h3 className=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                  Footwear & Running\n                </h3>\n                <span className=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                  View products\n                  <ArrowRight className=\"size-3 transition-transform duration-200 group-hover:translate-x-0.5\" />\n                </span>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Tile 3: Accessories & Bags */}\n          <Card\n            className={cn(\n              'group border-border bg-card relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md',\n              'col-span-1 min-h-[260px]',\n            )}\n          >\n            <img\n              src=\"https://images.unsplash.com/photo-1553062407-98eeb64c6a62?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Accessories and bags collection\"\n              className=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\" />\n\n            <CardContent className=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div className=\"flex items-center gap-2\">\n                <Badge\n                  wrap\n                  className=\"bg-primary text-primary-foreground border-transparent text-xs font-medium shadow-xs\"\n                >\n                  New Season\n                </Badge>\n                <Badge\n                  wrap\n                  variant=\"secondary\"\n                  className=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  24 Items\n                </Badge>\n              </div>\n\n              <div className=\"space-y-1\">\n                <h3 className=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                  Accessories & Bags\n                </h3>\n                <span className=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                  View products\n                  <ArrowRight className=\"size-3 transition-transform duration-200 group-hover:translate-x-0.5\" />\n                </span>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Tile 4: Everyday Apparel */}\n          <Card\n            className={cn(\n              'group border-border bg-card relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md',\n              variant === 'bento' ? 'col-span-1 min-h-[260px]' : 'col-span-1 min-h-[260px] sm:col-span-2 lg:col-span-2',\n            )}\n          >\n            <img\n              src=\"https://images.unsplash.com/photo-1521572267360-ee0c2909d518?w=800&auto=format&fit=crop&q=80\"\n              alt=\"Everyday apparel collection\"\n              className=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n            />\n            <div className=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\" />\n\n            <CardContent className=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div className=\"flex items-center justify-between\">\n                <Badge\n                  wrap\n                  variant=\"secondary\"\n                  className=\"bg-background/80 text-foreground border-white/15 text-xs font-medium shadow-xs backdrop-blur-md\"\n                >\n                  45 Items\n                </Badge>\n              </div>\n\n              <div className=\"space-y-1\">\n                <h3 className=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                  Everyday Apparel\n                </h3>\n                <span className=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                  View products\n                  <ArrowRight className=\"size-3 transition-transform duration-200 group-hover:translate-x-0.5\" />\n                </span>\n              </div>\n            </CardContent>\n          </Card>\n\n          {/* Tile 5: Sale Special Promo Tile */}\n          <Card\n            className={cn(\n              'group border-primary/20 bg-primary/5 hover:border-primary/40 dark:bg-primary/10 relative flex flex-col justify-between overflow-hidden shadow-xs transition-colors duration-300 hover:shadow-md',\n              variant === 'bento' ? 'col-span-1 min-h-[260px]' : 'col-span-1 min-h-[260px] sm:col-span-2 lg:col-span-2',\n            )}\n          >\n            <div className=\"bg-primary/15 group-hover:bg-primary/25 pointer-events-none absolute -right-8 -bottom-8 size-36 rounded-full blur-2xl transition-colors duration-500\" />\n\n            <CardContent className=\"relative z-10 flex h-full flex-col justify-between p-6\">\n              <div className=\"flex items-center justify-between gap-2\">\n                <div className=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg\">\n                  <Percent className=\"size-4\" />\n                </div>\n                <Badge\n                  wrap\n                  variant=\"outline\"\n                  className=\"border-primary/30 bg-primary/10 text-primary font-mono text-xs uppercase\"\n                >\n                  ARCHIVE40\n                </Badge>\n              </div>\n\n              <div className=\"space-y-3\">\n                <div className=\"space-y-1\">\n                  <p className=\"text-primary text-xs font-medium tracking-wider uppercase\">Limited Time Promo</p>\n                  <h3 className=\"text-foreground text-base font-semibold tracking-tight\">\n                    Archive Sale · Up to 40% Off\n                  </h3>\n                  <p className=\"text-muted-foreground text-xs leading-relaxed\">\n                    Seasonal essentials and core archive styles at exclusive discounted rates.\n                  </p>\n                </div>\n\n                <Button size=\"sm\" className=\"group/btn w-full\">\n                  Shop Sale\n                  <ArrowRight className=\"ml-1.5 size-4 transition-transform duration-200 group-hover/btn:translate-x-0.5\" />\n                </Button>\n              </div>\n            </CardContent>\n          </Card>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/CategoryShowcase.tsx"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json",
    "https://uipkge.dev/r/react/card.json"
  ],
  "description": "E-commerce category bento grid and featured collections showcase with interactive hover zoom effects, promo sale banner, and bento or uniform grid layouts.",
  "categories": [
    "commerce",
    "ecommerce",
    "marketing"
  ]
}