{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-macro",
  "type": "registry:block",
  "title": "Macro detail hero",
  "description": "Hard crop into one texture or ingredient with a zoom and focal point, a corner copy card and a mono caption.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "hero",
    "beauty",
    "supplements",
    "any"
  ],
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/sk-analytics.json"
  ],
  "files": [
    {
      "path": "hero/hero-macro.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Macro product hero. The image is cropped hard into one detail (label,\n   powder, cap texture) with `zoom` and a `focus` point, and a small copy card\n   sits in the lower corner on the paper token so it reads on any photo. A\n   mono caption names what the crop shows. Under md the card drops below the\n   crop instead of covering it. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\n\nexport function HeroMacro({\n  image = \"/placeholder.webp\",\n  imageAlt = \"\",\n  zoom = 2.2,\n  focus = { x: 50, y: 62 },\n  caption = \"Detail: Daily Greens, one scoop\",\n  eyebrow = \"Up close\",\n  headline = \"Real greens look like this.\",\n  subcopy = \"Deep color, fine grind, no fillers. It mixes smooth in water with a quick shake.\",\n  primaryCta = { label: \"Shop Daily Greens\", href: \"#\" },\n  className,\n}: {\n  image?: string\n  imageAlt?: string\n  /** Scale factor for the crop. 1 shows the whole image. */\n  zoom?: number\n  /** Focal point in percent of the image. */\n  focus?: { x: number; y: number }\n  caption?: string\n  eyebrow?: string\n  headline?: string\n  subcopy?: string\n  primaryCta?: Cta\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-macro\")\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-8 sm:px-8 sm:py-12\">\n        <div className=\"relative\">\n          <div className=\"relative aspect-[4/5] overflow-hidden rounded-sk-card border border-sk-line bg-sk-surface sm:aspect-[16/10] lg:aspect-[16/8]\">\n            <img\n              src={image}\n              alt={imageAlt}\n              className=\"absolute inset-0 h-full w-full object-cover\"\n              style={{ transform: `scale(${zoom})`, transformOrigin: `${focus.x}% ${focus.y}%` }}\n            />\n            <p className=\"absolute right-3 top-3 rounded-sk-chip bg-[rgb(0_0_0/0.55)] px-2.5 py-1 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-[rgb(255_255_255)]\">\n              {zoom.toFixed(1)}x\n            </p>\n          </div>\n\n          <motion.div\n            initial={{ opacity: 0, y: reduce ? 0 : 8 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.5, ease: EASE, delay: reduce ? 0 : 0.15 }}\n            className=\"relative mt-4 rounded-sk-card border border-sk-line bg-sk-paper p-5 sm:p-6 md:absolute md:bottom-6 md:left-6 md:mt-0 md:max-w-sm\"\n          >\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 text-[28px] font-semibold leading-[1.1] tracking-[-0.02em]\">\n              {headline}\n            </h1>\n            <p className=\"mt-3 text-sm leading-[1.5] text-sk-muted\">{subcopy}</p>\n            <a\n              href={primaryCta.href}\n              onClick={() => sk.emit(\"interact\", \"cta\")}\n              className=\"sk-btn mt-5 inline-flex h-11 w-full items-center justify-center rounded-sk-btn bg-sk-accent px-6 text-sm font-medium text-sk-accent-ink outline-none transition-[filter,transform] duration-200 ease-sk-out hover:brightness-[1.06] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97] sm:w-auto\"\n            >\n              {primaryCta.label}\n            </a>\n          </motion.div>\n        </div>\n        <p className=\"mt-3 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted md:text-right\">{caption}</p>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-macro.tsx"
    }
  ],
  "docs": "Set `zoom` and `focus` to crop into the detail; the card drops below the crop under md.",
  "meta": {
    "section": "hero",
    "variant": "macro",
    "niche": [
      "beauty",
      "supplements",
      "any"
    ],
    "commerce": [
      "cta"
    ],
    "previewHeight": 620
  }
}