{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "collection-benefits",
  "type": "registry:block",
  "title": "Shop by goal",
  "description": "Six goal tiles with an icon and a product count; the border turns accent on hover.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "collection",
    "any"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "collection/collection-benefits.tsx",
      "content": "import { Activity, Brain, Flame, Hourglass, Moon, Sparkles, type LucideIcon } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Shop by goal. Six small link tiles, each with an icon and a product count.\n   The border turns accent on hover and focus. */\n\ntype Goal = { label: string; count: number; href: string; icon: LucideIcon }\n\nexport function CollectionBenefits({\n  goals = [\n    { label: \"Recovery\", count: 12, href: \"#\", icon: Activity },\n    { label: \"Skin\", count: 8, href: \"#\", icon: Sparkles },\n    { label: \"Metabolic\", count: 9, href: \"#\", icon: Flame },\n    { label: \"Sleep\", count: 5, href: \"#\", icon: Moon },\n    { label: \"Cognition\", count: 7, href: \"#\", icon: Brain },\n    { label: \"Longevity\", count: 11, href: \"#\", icon: Hourglass },\n  ],\n  className,\n}: {\n  goals?: Goal[]\n  className?: string\n}) {\n  return (\n    <ul data-sk-section=\"collection\" data-sk-variant=\"collection-benefits\" className={cn(\"grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6\", className)}>\n      {goals.map(({ label, count, href, icon: Icon }) => (\n        <li key={label}>\n          <a\n            href={href}\n            className=\"group flex h-full min-h-[132px] flex-col justify-between gap-6 rounded-sk-card border border-sk-line bg-sk-card p-4 sm:p-5 outline-none transition-[border-color,transform] duration-200 ease-sk-out hover:border-sk-accent active:scale-[0.97] focus-visible:border-sk-accent focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\"\n          >\n            <span className=\"grid h-10 w-10 place-items-center rounded-sk-chip bg-sk-surface text-sk-ink transition-colors duration-200 group-hover:text-sk-accent\">\n              <Icon size={18} strokeWidth={1.75} aria-hidden />\n            </span>\n            <span className=\"flex flex-col gap-1\">\n              <span className=\"text-[15px] font-medium text-sk-ink\">{label}</span>\n              <span className=\"whitespace-nowrap font-sk-mono text-[11px] uppercase tracking-[0.1em] text-sk-muted tabular-nums sm:tracking-[0.14em]\">\n                {count} {count === 1 ? \"product\" : \"products\"}\n              </span>\n            </span>\n          </a>\n        </li>\n      ))}\n    </ul>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/collection/collection-benefits.tsx"
    }
  ],
  "meta": {
    "section": "collection",
    "variant": "benefits",
    "niche": [
      "any"
    ],
    "commerce": [
      "navigation"
    ],
    "previewHeight": 420
  }
}