{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-color-field",
  "type": "registry:block",
  "title": "Color field hero",
  "description": "Packshot in a framed tile on a full accent color field, with an inverted CTA, fact row and a pinned price tag.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "hero",
    "beverage",
    "wellness",
    "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-color-field.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { cn, money } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Product on a color field. The whole section is the brand accent; copy sits\n   in accent-ink so contrast follows the brand pack, and the packshot rides in\n   a framed tile with a price tag pinned to its corner. The CTA inverts to\n   accent-ink fill so it stays the strongest mark on the field. Stacks with\n   the packshot first under lg. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\n\nexport function HeroColorField({\n  eyebrow = \"New flavor\",\n  headline = \"Hydration that tastes like summer.\",\n  subcopy = \"Citrus salt electrolytes with zero sugar. Third-party tested and made in the USA.\",\n  primaryCta = { label: \"Shop Electrolytes\", href: \"#\" },\n  secondaryCta = { label: \"See lab results\", href: \"#\" },\n  product = { title: \"Electrolytes\", image: \"/placeholder.webp\", price: 3200 },\n  facts = [\"Zero sugar\", \"30 servings\", \"Ships in 24h\"],\n  className,\n}: {\n  eyebrow?: string\n  headline?: string\n  subcopy?: string\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  product?: { title: string; image: string; price: number }\n  facts?: string[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-color-field\")\n\n  return (\n    <section ref={sk.ref} {...sk.attrs} className={cn(\"overflow-hidden bg-sk-accent text-sk-accent-ink\", className)}>\n      <div className=\"mx-auto grid w-full max-w-6xl items-center gap-10 px-4 py-12 sm:px-8 sm:py-16 lg:min-h-[540px] lg:grid-cols-[1.05fr_0.95fr] lg:gap-16\">\n        <motion.div\n          initial={{ opacity: 0, y: reduce ? 0 : 8 }}\n          animate={{ opacity: 1, y: 0 }}\n          transition={{ duration: 0.5, ease: EASE }}\n          className=\"order-2 lg:order-1\"\n        >\n          <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-accent-ink/75\">{eyebrow}</p>\n          <h1\n            className=\"mt-4 max-w-xl text-balance font-sk-display font-semibold leading-[1.05] tracking-[-0.02em]\"\n            style={{ fontSize: \"clamp(2.25rem, 5vw, 4rem)\" }}\n          >\n            {headline}\n          </h1>\n          <p className=\"mt-5 max-w-md text-[15px] leading-[1.5] text-sk-accent-ink/80\">{subcopy}</p>\n          <div className=\"mt-8 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-ink px-7 text-[15px] font-medium text-sk-accent outline-none transition-[opacity,transform] duration-200 ease-sk-out hover:opacity-90 focus-visible:ring-2 focus-visible:ring-sk-accent-ink focus-visible:ring-offset-2 focus-visible:ring-offset-sk-accent 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-accent-ink/35 px-7 text-[15px] font-medium text-sk-accent-ink outline-none transition-[background-color,transform] duration-200 ease-sk-out hover:bg-sk-accent-ink/10 focus-visible:ring-2 focus-visible:ring-sk-accent-ink focus-visible:ring-offset-2 focus-visible:ring-offset-sk-accent active:scale-[0.97]\"\n            >\n              {secondaryCta.label}\n            </a>\n          </div>\n          <ul className=\"mt-10 flex flex-wrap gap-x-6 gap-y-2 border-t border-sk-accent-ink/20 pt-5\">\n            {facts.map((f) => (\n              <li key={f} className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-accent-ink/80\">\n                {f}\n              </li>\n            ))}\n          </ul>\n        </motion.div>\n\n        <div className=\"relative order-1 mx-auto w-full max-w-[420px] lg:order-2 lg:max-w-none\">\n          <div className=\"relative aspect-square overflow-hidden rounded-sk-card border border-sk-accent-ink/15 bg-sk-surface\">\n            <img src={product.image} alt={product.title} className=\"absolute inset-0 h-full w-full object-cover\" />\n          </div>\n          <div className=\"absolute -bottom-4 left-4 flex items-baseline gap-3 rounded-sk-chip border border-sk-line bg-sk-paper px-4 py-2.5 text-sk-ink shadow-[0_24px_60px_-24px_rgb(var(--sk-ink)/0.25)] sm:left-6\">\n            <span className=\"text-sm font-medium\">{product.title}</span>\n            <span className=\"text-sm font-semibold tabular-nums text-sk-price\">{money(product.price)}</span>\n          </div>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-color-field.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "color-field",
    "niche": [
      "beverage",
      "wellness",
      "any"
    ],
    "commerce": [
      "cta"
    ],
    "previewHeight": 540
  }
}