{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-spec-sheet",
  "type": "registry:block",
  "title": "Spec sheet hero",
  "description": "Data sheet composition: giant mono figure, wide product banner on graph hairlines and a ledger with a lab results chip.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "hero",
    "supplements",
    "wellness"
  ],
  "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-spec-sheet.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { BadgeCheck } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Data sheet hero. A giant mono figure (servings, by default) top-right, the headline left, a\n   wide product banner on graph-paper hairlines, then a one-row ledger with\n   the lab results link in the last cell. Everything sits on a hairline grid. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\ntype Spec = { label: string; value: string }\n\nexport function HeroSpecSheet({\n  eyebrow = \"Data sheet\",\n  headline = \"Everything in the scoop, on the label.\",\n  subcopy = \"Every batch is third-party tested and the results are public. You see what is in it and how much.\",\n  figure = \"30\",\n  figureLabel = \"Servings\",\n  image = \"/placeholder.webp\",\n  imageAlt = \"Product render\",\n  specs = [\n    { label: \"Product\", value: \"Daily Greens\" },\n    { label: \"Per serving\", value: \"$1.63\" },\n    { label: \"Ingredients\", value: \"28 greens\" },\n  ],\n  badge = { label: \"Third-party tested\", href: \"#\" },\n  primaryCta = { label: \"Shop Daily Greens\", href: \"#\" },\n  secondaryCta = { label: \"See lab results\", href: \"#\" },\n  className,\n}: {\n  eyebrow?: string\n  headline?: string\n  subcopy?: string\n  /** Big mono figure top-right, e.g. servings per pouch. */\n  figure?: string\n  figureLabel?: string\n  image?: string\n  imageAlt?: string\n  specs?: Spec[]\n  badge?: Cta\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-spec-sheet\")\n  const rise = (i: number) => ({\n    initial: { opacity: 0, y: reduce ? 0 : 8 },\n    animate: { opacity: 1, y: 0 },\n    transition: { duration: 0.45, ease: EASE, delay: reduce ? 0 : i * 0.06 },\n  })\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-12 sm:px-8 sm:py-16 lg:min-h-[480px]\">\n        <div className=\"grid gap-8 border-b border-sk-line pb-8 lg:grid-cols-12 lg:items-end\">\n          <div className=\"lg:col-span-7\">\n            <motion.p {...rise(0)} className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">\n              {eyebrow}\n            </motion.p>\n            <motion.h1\n              {...rise(1)}\n              className=\"mt-4 text-balance font-sk-display font-semibold leading-[1.1] tracking-[-0.02em]\"\n              style={{ fontSize: \"clamp(2.1rem, 4.4vw, 3.5rem)\" }}\n            >\n              {headline}\n            </motion.h1>\n            <motion.p {...rise(2)} className=\"mt-4 max-w-md text-[15px] leading-[1.5] text-sk-muted\">\n              {subcopy}\n            </motion.p>\n            <motion.div {...rise(3)} className=\"mt-7 flex flex-col gap-3 sm:flex-row\">\n              <a\n                href={primaryCta.href}\n                onClick={() => sk.emit(\"interact\", \"cta\")}\n                className=\"sk-btn inline-flex min-h-12 items-center justify-center py-2.5 text-center leading-tight rounded-sk-btn bg-sk-accent px-7 text-[15px] 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]\"\n              >\n                {primaryCta.label}\n              </a>\n              <a\n                href={secondaryCta.href}\n                onClick={() => sk.emit(\"interact\", \"cta_secondary\")}\n                className=\"sk-btn inline-flex min-h-12 items-center justify-center py-2.5 text-center leading-tight rounded-sk-btn border border-sk-line px-7 text-[15px] font-medium text-sk-ink outline-none transition-[background-color,transform] duration-200 ease-sk-out hover:bg-sk-ink/[0.04] focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n              >\n                {secondaryCta.label}\n              </a>\n            </motion.div>\n          </div>\n          <motion.div {...rise(1)} className=\"lg:col-span-5 lg:text-right\">\n            <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{figureLabel}</p>\n            <p\n              className=\"mt-1 font-sk-mono font-medium leading-none tracking-[-0.04em] tabular-nums text-sk-ink\"\n              style={{ fontSize: \"clamp(3rem, 9vw, 6.5rem)\" }}\n            >\n              {figure}\n            </p>\n          </motion.div>\n        </div>\n\n        <motion.div\n          initial={{ opacity: 0, scale: reduce ? 1 : 0.98 }}\n          animate={{ opacity: 1, scale: 1 }}\n          transition={{ duration: 0.5, ease: EASE, delay: reduce ? 0 : 0.2 }}\n          className=\"relative mt-8 aspect-[16/9] overflow-hidden rounded-sk-card border border-sk-line bg-sk-surface sm:aspect-[16/6]\"\n        >\n          <div\n            aria-hidden\n            className=\"absolute inset-0 bg-[linear-gradient(rgb(var(--sk-line))_1px,transparent_1px),linear-gradient(90deg,rgb(var(--sk-line))_1px,transparent_1px)] bg-[size:32px_32px] opacity-60\"\n          />\n          <img\n            src={image}\n            alt={imageAlt}\n            className=\"absolute inset-y-[18%] left-1/2 h-[64%] w-auto -translate-x-1/2 rounded-sk-card border border-sk-line object-contain sm:inset-y-[8%] sm:h-[84%]\"\n          />\n          <span className=\"absolute left-4 top-3 z-10 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">Fig. 01</span>\n          <span className=\"absolute bottom-3 right-4 z-10 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">Scale 1:1</span>\n        </motion.div>\n\n        <motion.dl\n          {...rise(5)}\n          className=\"mt-4 grid grid-cols-1 gap-px overflow-hidden rounded-sk-card border border-sk-line bg-sk-line sm:grid-cols-2 lg:grid-cols-4\"\n        >\n          {specs.slice(0, 3).map((s) => (\n            <div key={s.label} className=\"flex items-baseline justify-between gap-4 bg-sk-paper px-4 py-3 sm:flex-col sm:items-start sm:justify-start sm:gap-1 sm:py-4\">\n              <dt className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{s.label}</dt>\n              <dd className=\"font-sk-mono text-[15px] tabular-nums text-sk-ink\">{s.value}</dd>\n            </div>\n          ))}\n          <div className=\"flex flex-col justify-center bg-sk-paper px-4 py-3\">\n            <a\n              href={badge.href}\n              onClick={() => sk.emit(\"interact\", \"badge\")}\n              className=\"inline-flex min-h-11 items-center gap-2 self-stretch justify-center whitespace-nowrap rounded-sk-chip sm:self-start sm:justify-start bg-sk-ink px-3.5 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-paper outline-none transition-transform duration-200 ease-sk-out hover:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-sk-accent focus-visible:ring-offset-2 focus-visible:ring-offset-sk-paper active:scale-[0.97]\"\n            >\n              <BadgeCheck size={14} aria-hidden className=\"text-sk-accent\" />\n              {badge.label}\n            </a>\n          </div>\n        </motion.dl>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-spec-sheet.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "spec-sheet",
    "niche": [
      "supplements",
      "wellness"
    ],
    "commerce": [
      "cta"
    ],
    "previewHeight": 760
  }
}