{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-category-tiles",
  "type": "registry:block",
  "title": "Category tiles hero",
  "description": "Compact headline over three to six category, goal or audience tiles with counts; an optional feature tile spans two columns.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "hero",
    "any"
  ],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/sk-analytics.json"
  ],
  "files": [
    {
      "path": "hero/hero-category-tiles.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { ArrowUpRight } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Category tiles as the hero. For catalogs where the fastest path is \"pick\n   your aisle\": a compact headline row, then three to six large tiles for\n   top categories, goals or audiences. Every tile is one link with an image\n   on the surface token, a label and an item count. The first tile can be\n   marked `feature` to span two columns on desktop. Two columns on mobile,\n   three on desktop. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\nexport type CategoryTile = { label: string; href: string; image: string; count?: number; note?: string; feature?: boolean; focus?: string }\n\nconst SAMPLE: CategoryTile[] = [\n  { label: \"Powders\", href: \"#\", image: \"/placeholder.webp\", count: 3, feature: true, note: \"Greens, protein, electrolytes\" },\n  { label: \"Capsules and gummies\", href: \"#\", image: \"/placeholder.webp\", count: 2 },\n  { label: \"Drinks\", href: \"#\", image: \"/placeholder.webp\", count: 1 },\n  { label: \"Bundles\", href: \"#\", image: \"/placeholder.webp\", count: 4 },\n  { label: \"Best sellers\", href: \"#\", image: \"/placeholder.webp\", count: 6 },\n]\n\nexport function HeroCategoryTiles({\n  eyebrow = \"Shop by category\",\n  headline = \"Find what fits your day.\",\n  link = { label: \"Shop all\", href: \"#\" },\n  tiles = SAMPLE,\n  className,\n}: {\n  eyebrow?: string\n  headline?: string\n  link?: { label: string; href: string } | null\n  tiles?: CategoryTile[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-category-tiles\")\n\n  return (\n    <section ref={sk.ref} {...sk.attrs} className={cn(\"bg-sk-paper text-sk-ink\", className)}>\n      <div className=\"mx-auto w-full max-w-6xl px-4 py-10 sm:px-8 sm:py-14\">\n        <div className=\"flex items-end justify-between gap-6\">\n          <div>\n            <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{eyebrow}</p>\n            <h1 className=\"mt-3 text-balance font-sk-display font-semibold leading-[1.08] tracking-[-0.02em]\" style={{ fontSize: \"clamp(1.85rem, 3.6vw, 2.75rem)\" }}>\n              {headline}\n            </h1>\n          </div>\n          {link ? (\n            <a\n              href={link.href}\n              onClick={() => sk.emit(\"interact\", \"shop_all\")}\n              className=\"hidden shrink-0 items-center gap-1 text-sm font-medium underline decoration-sk-line underline-offset-4 outline-none transition-[text-decoration-color] hover:decoration-sk-ink focus-visible:ring-2 focus-visible:ring-sk-accent sm:inline-flex\"\n            >\n              {link.label}\n              <ArrowUpRight size={15} aria-hidden />\n            </a>\n          ) : null}\n        </div>\n\n        <ul className=\"mt-7 grid grid-cols-2 gap-3 sm:gap-4 lg:grid-cols-3\">\n          {tiles.map((t, i) => (\n            <motion.li\n              key={t.label}\n              initial={{ opacity: 0, y: reduce ? 0 : 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.5, ease: EASE, delay: reduce ? 0 : i * 0.05 }}\n              className={cn(t.feature && \"col-span-2 lg:row-span-2 lg:col-span-1\")}\n            >\n              <a\n                href={t.href}\n                onClick={() => sk.emit(\"interact\", \"category\", i)}\n                className=\"group flex h-full flex-col overflow-hidden rounded-sk-card border border-sk-line bg-sk-card outline-none transition-[border-color,transform] duration-300 ease-sk-out hover:-translate-y-0.5 hover:border-sk-ink/25 focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\"\n              >\n                <div className={cn(\"relative overflow-hidden bg-sk-surface\", t.feature ? \"aspect-[16/10] lg:aspect-auto lg:flex-1\" : \"aspect-[4/3]\")}>\n                  <img\n                    src={t.image}\n                    alt=\"\"\n                    className=\"absolute inset-0 h-full w-full object-cover transition-transform duration-700 ease-sk-out group-hover:scale-[1.04]\"\n                    style={{ objectPosition: t.focus }}\n                  />\n                </div>\n                <div className={cn(\"flex items-center justify-between gap-2 px-3.5 py-3 sm:gap-3 sm:px-4\", !t.feature && \"flex-1\")}>\n                  <div className=\"min-w-0\">\n                    <h2 className=\"line-clamp-2 text-[13px] font-semibold leading-tight sm:truncate sm:text-[15px] sm:leading-normal\">{t.label}</h2>\n                    {t.note ? <p className=\"mt-0.5 hidden truncate text-[12px] text-sk-muted sm:block\">{t.note}</p> : null}\n                  </div>\n                  <span className=\"flex shrink-0 items-center gap-2\">\n                    {typeof t.count === \"number\" ? <span className={cn(\"font-sk-mono text-[11px] tabular-nums text-sk-muted\", !t.feature && \"hidden sm:inline\")}>{t.count}</span> : null}\n                    <span className={cn(\"h-7 w-7 place-items-center rounded-full bg-sk-ink/[0.05] text-sk-ink transition-[background-color,color,transform] duration-300 ease-sk-out group-hover:rotate-45 group-hover:bg-sk-accent group-hover:text-sk-accent-ink\", t.feature ? \"grid\" : \"hidden sm:grid\")}>\n                      <ArrowUpRight size={14} aria-hidden />\n                    </span>\n                  </span>\n                </div>\n              </a>\n            </motion.li>\n          ))}\n        </ul>\n        {link ? (\n          <a href={link.href} className=\"mt-5 inline-flex min-h-11 items-center gap-1 text-sm font-medium underline decoration-sk-line underline-offset-4 sm:hidden\">\n            {link.label}\n            <ArrowUpRight size={15} aria-hidden />\n          </a>\n        ) : null}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-category-tiles.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "category-tiles",
    "niche": [
      "any"
    ],
    "commerce": [
      "navigation"
    ],
    "previewHeight": 660
  }
}