{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-multi-panel",
  "type": "registry:block",
  "title": "Multi-panel campaign hero",
  "description": "Two to four static campaign tiles at once instead of a rotating slider, lead tile carries the h1, each tile is one link.",
  "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-multi-panel.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { ArrowRight } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Static multi-panel campaign hero. Two to four campaigns shown at once\n   instead of rotating through them, so every message gets seen. The first\n   panel is the lead and carries the h1; the rest are supporting tiles.\n   Each panel is one link with a fixed dark scrim under its copy. Layouts:\n   2 panels split 60/40, 3 panels lead plus a stacked pair, 4 panels lead\n   plus three. On mobile the lead is full width and the rest pair up. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\nexport type CampaignPanel = {\n  image: string\n  alt: string\n  kicker?: string\n  title: string\n  cta?: string\n  href: string\n  focus?: string\n}\n\nconst SAMPLE: CampaignPanel[] = [\n  { image: \"/placeholder.webp\", alt: \"\", kicker: \"New\", title: \"The morning routine, rebuilt\", cta: \"Shop the routine\", href: \"#\" },\n  { image: \"/placeholder.webp\", alt: \"\", kicker: \"Bundles\", title: \"Build a set, save 20%\", cta: \"Build yours\", href: \"#\" },\n  { image: \"/placeholder.webp\", alt: \"\", kicker: \"Ingredients\", title: \"What goes in, and why\", cta: \"Read more\", href: \"#\" },\n]\n\nexport function HeroMultiPanel({ panels = SAMPLE, className }: { panels?: CampaignPanel[]; className?: string }) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-multi-panel\")\n  const list = panels.slice(0, 4)\n  const n = list.length\n\n  const grid =\n    n <= 1\n      ? \"grid-cols-1\"\n      : n === 2\n        ? \"grid-cols-1 sm:grid-cols-2 lg:grid-cols-[1.5fr_1fr]\"\n        : n === 3\n          ? \"grid-cols-2 lg:grid-cols-[1.5fr_1fr] lg:grid-rows-2\"\n          : \"grid-cols-2 lg:grid-cols-[1.4fr_1fr_1fr] lg:grid-rows-2\"\n\n  return (\n    <section ref={sk.ref} {...sk.attrs} className={cn(\"bg-sk-paper text-sk-ink\", className)}>\n      <div className={cn(\"mx-auto grid w-full max-w-6xl gap-3 px-4 py-6 sm:gap-4 sm:px-8 sm:py-8 lg:h-[600px]\", grid)}>\n        {list.map((p, i) => {\n          const lead = i === 0\n          const Heading = lead ? \"h1\" : \"h2\"\n          const span =\n            lead && n >= 3\n              ? \"col-span-2 lg:col-span-1 lg:row-span-2\"\n              : n === 4 && i === 3\n                ? \"col-span-2 lg:col-span-2\"\n                : n === 3 && i > 0\n                  ? \"col-span-1\"\n                  : \"\"\n          return (\n            <motion.a\n              key={p.title + i}\n              href={p.href}\n              onClick={() => sk.emit(\"interact\", \"panel\", i)}\n              initial={{ opacity: 0, y: reduce ? 0 : 10 }}\n              animate={{ opacity: 1, y: 0 }}\n              transition={{ duration: 0.55, ease: EASE, delay: reduce ? 0 : i * 0.07 }}\n              className={cn(\n                \"group relative isolate flex overflow-hidden rounded-sk-card border border-sk-line bg-sk-surface text-[rgb(255_255_255)] outline-none focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper\",\n                lead ? \"aspect-[4/5] sm:aspect-[16/10] lg:aspect-auto\" : span.includes(\"col-span-2\") || n === 2 ? \"aspect-[16/10] lg:aspect-auto\" : \"aspect-[4/5] sm:aspect-[4/3] lg:aspect-auto\",\n                span\n              )}\n            >\n              <img\n                src={p.image}\n                alt={p.alt}\n                className=\"absolute inset-0 -z-10 h-full w-full object-cover transition-transform duration-[900ms] ease-sk-out group-hover:scale-[1.035]\"\n                style={{ objectPosition: p.focus }}\n              />\n              <div aria-hidden className=\"absolute inset-0 -z-10 bg-[linear-gradient(0deg,rgb(0_0_0/0.7),rgb(0_0_0/0.18)_50%,transparent_75%)]\" />\n              <div className={cn(\"mt-auto w-full\", lead ? \"p-5 sm:p-8\" : \"p-4 sm:p-5\")}>\n                {p.kicker ? (\n                  <p className=\"font-sk-mono text-[10px] uppercase tracking-[0.16em] text-[rgb(255_255_255/0.75)] sm:text-[11px]\">{p.kicker}</p>\n                ) : null}\n                <Heading\n                  className={cn(\n                    \"mt-2 text-balance font-sk-display font-semibold tracking-[-0.015em]\",\n                    lead ? \"text-[28px] sm:text-[40px] lg:text-[48px]\" : \"text-[15px] [overflow-wrap:anywhere] min-[400px]:text-[17px] sm:text-[22px] sm:[overflow-wrap:normal]\",\n                    \"leading-[1.08]\"\n                  )}\n                >\n                  {p.title}\n                </Heading>\n                {p.cta ? (\n                  <span className={cn(\"mt-3 inline-flex items-center gap-1.5 font-medium\", lead ? \"text-[15px]\" : \"text-[13px]\")}>\n                    <span className=\"underline decoration-[rgb(255_255_255/0.45)] underline-offset-4 transition-[text-decoration-color] duration-200 group-hover:decoration-[rgb(255_255_255)]\">\n                      {p.cta}\n                    </span>\n                    <ArrowRight size={lead ? 16 : 14} aria-hidden className=\"transition-transform duration-300 ease-sk-out group-hover:translate-x-0.5\" />\n                  </span>\n                ) : null}\n              </div>\n            </motion.a>\n          )\n        })}\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-multi-panel.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "multi-panel",
    "niche": [
      "any"
    ],
    "commerce": [
      "cta"
    ],
    "previewHeight": 640
  }
}