{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "category-showcase",
  "title": "Category Showcase",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-vue/blocks/category-showcase/CategoryShowcase.vue",
      "content": "<script setup lang=\"ts\">\nimport type { HTMLAttributes } from 'vue'\nimport { ArrowRight, Percent, ShoppingBag } from 'lucide-vue-next'\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\ninterface Props {\n  variant?: 'bento' | 'grid'\n  class?: HTMLAttributes['class']\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  variant: 'bento',\n})\n</script>\n\n<template>\n  <section data-slot=\"category-showcase\" :class=\"cn('bg-background w-full py-12 sm:py-16 lg:py-20', props.class)\">\n    <div class=\"mx-auto max-w-7xl px-4 sm:px-6 lg:px-8\">\n      <!-- Section Header -->\n      <div class=\"mb-8 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-end lg:mb-12\">\n        <div class=\"space-y-3\">\n          <Badge wrap variant=\"outline\" class=\"gap-1.5 px-3 py-1 text-xs font-medium\">\n            <ShoppingBag class=\"text-primary size-3.5\" />\n            Explore Collections\n          </Badge>\n          <h2 class=\"text-foreground text-3xl font-semibold tracking-tight sm:text-4xl\">Shop by Category</h2>\n          <p class=\"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          class=\"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 class=\"size-4 transition-transform duration-200 group-hover/link:translate-x-1\" />\n        </a>\n      </div>\n\n      <!-- Bento / Grid Showcase -->\n      <div\n        :class=\"\n          cn(\n            'grid grid-cols-1 gap-4 sm:grid-cols-2',\n            props.variant === 'bento' ? 'lg:grid-cols-4 lg:grid-rows-2' : 'lg:grid-cols-4',\n          )\n        \"\n      >\n        <!-- Tile 1: Featured Hero Tile (2x2 in bento) -->\n        <Card\n          :class=\"\n            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              props.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        >\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            class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n          />\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black/90 via-black/45 to-black/15\" />\n\n          <CardContent class=\"relative z-10 flex h-full flex-col justify-between p-6 sm:p-8\">\n            <div class=\"flex flex-wrap items-center justify-between gap-3\">\n              <Badge\n                wrap\n                variant=\"secondary\"\n                class=\"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                class=\"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 class=\"space-y-4\">\n              <div class=\"space-y-2\">\n                <h3 class=\"text-2xl font-bold tracking-tight text-white sm:text-3xl lg:text-4xl\">\n                  Performance Outerwear\n                </h3>\n                <p class=\"line-clamp-2 max-w-md text-sm text-zinc-200\">\n                  Engineered weatherproof shells, insulated parkas, and technical layers designed for extreme climates.\n                </p>\n              </div>\n\n              <Button\n                size=\"sm\"\n                class=\"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 class=\"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          :class=\"\n            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        >\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            class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n          />\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\" />\n\n          <CardContent class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n            <div class=\"flex items-center justify-between\">\n              <Badge\n                wrap\n                variant=\"secondary\"\n                class=\"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 class=\"space-y-1\">\n              <h3 class=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                Footwear & Running\n              </h3>\n              <span class=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                View products\n                <ArrowRight class=\"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          :class=\"\n            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        >\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            class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n          />\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\" />\n\n          <CardContent class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n            <div class=\"flex items-center gap-2\">\n              <Badge wrap class=\"bg-primary text-primary-foreground border-transparent text-xs font-medium shadow-xs\">\n                New Season\n              </Badge>\n              <Badge\n                wrap\n                variant=\"secondary\"\n                class=\"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 class=\"space-y-1\">\n              <h3 class=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                Accessories & Bags\n              </h3>\n              <span class=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                View products\n                <ArrowRight class=\"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          :class=\"\n            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              props.variant === 'bento'\n                ? 'col-span-1 min-h-[260px]'\n                : 'col-span-1 min-h-[260px] sm:col-span-2 lg:col-span-2',\n            )\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            class=\"absolute inset-0 size-full object-cover transition-transform duration-500 ease-out group-hover:scale-105\"\n          />\n          <div class=\"absolute inset-0 bg-gradient-to-t from-black/85 via-black/35 to-black/10\" />\n\n          <CardContent class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n            <div class=\"flex items-center justify-between\">\n              <Badge\n                wrap\n                variant=\"secondary\"\n                class=\"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 class=\"space-y-1\">\n              <h3 class=\"text-lg font-semibold tracking-tight text-white transition-colors group-hover:text-white/90\">\n                Everyday Apparel\n              </h3>\n              <span class=\"inline-flex items-center gap-1 text-xs font-medium text-zinc-300\">\n                View products\n                <ArrowRight class=\"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          :class=\"\n            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              props.variant === 'bento'\n                ? 'col-span-1 min-h-[260px]'\n                : 'col-span-1 min-h-[260px] sm:col-span-2 lg:col-span-2',\n            )\n          \"\n        >\n          <div\n            class=\"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\n          <CardContent class=\"relative z-10 flex h-full flex-col justify-between p-6\">\n            <div class=\"flex items-center justify-between gap-2\">\n              <div class=\"bg-primary/10 text-primary flex size-9 items-center justify-center rounded-lg\">\n                <Percent class=\"size-4\" />\n              </div>\n              <Badge\n                wrap\n                variant=\"outline\"\n                class=\"border-primary/30 bg-primary/10 text-primary font-mono text-xs uppercase\"\n              >\n                ARCHIVE40\n              </Badge>\n            </div>\n\n            <div class=\"space-y-3\">\n              <div class=\"space-y-1\">\n                <p class=\"text-primary text-xs font-medium tracking-wider uppercase\">Limited Time Promo</p>\n                <h3 class=\"text-foreground text-base font-semibold tracking-tight\">Archive Sale · Up to 40% Off</h3>\n                <p class=\"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\" class=\"group/btn w-full\">\n                Shop Sale\n                <ArrowRight class=\"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</template>\n",
      "type": "registry:block",
      "target": "~/app/components/blocks/CategoryShowcase.vue"
    }
  ],
  "dependencies": [
    "lucide-vue-next"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/vue/badge.json",
    "https://uipkge.dev/r/vue/button.json",
    "https://uipkge.dev/r/vue/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"
  ]
}