{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-editorial",
  "type": "registry:block",
  "title": "Editorial scene hero",
  "description": "Full-bleed scene photograph with a directional scrim, bottom-left headline, CTA pair and a trust chip.",
  "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-editorial.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/* Full-bleed editorial hero. A scene photograph with a left-to-right scrim so\n   the headline reads in the negative space, bottom-left. Text on photography\n   uses a fixed dark scrim and fixed light text, so contrast holds for light\n   and dark brands alike. From sm to lg the scrim runs bottom-up and the copy\n   sits at the bottom. Under sm the photo stacks on top with no text over it\n   and the copy follows on the paper token. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\n\nexport function HeroEditorial({\n  image = \"/placeholder.webp\",\n  imageAlt = \"\",\n  eyebrow = \"New season routines\",\n  headline = \"Clean ingredients. Shipped the same day.\",\n  subcopy = \"Daily essentials that taste good, with third-party test results for every batch.\",\n  primaryCta = { label: \"Shop the range\", href: \"#\" },\n  secondaryCta = { label: \"See lab results\", href: \"#\" },\n  chipLabel = \"Third-party tested\",\n  chipHref = \"#\",\n  className,\n}: {\n  image?: string\n  imageAlt?: string\n  eyebrow?: string\n  headline?: string\n  subcopy?: string\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  chipLabel?: string\n  chipHref?: string\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-editorial\")\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 : 0.15 + i * 0.06 },\n  })\n\n  return (\n    <section\n      ref={sk.ref}\n      {...sk.attrs}\n      className={cn(\"relative isolate flex flex-col overflow-hidden bg-sk-paper sm:min-h-[600px] sm:flex-row sm:bg-[rgb(0_0_0)]\", className)}\n    >\n      <motion.img\n        src={image}\n        alt={imageAlt}\n        initial={{ opacity: 0, scale: reduce ? 1 : 1.04 }}\n        animate={{ opacity: 1, scale: 1 }}\n        transition={{ duration: 0.9, ease: EASE }}\n        className=\"aspect-[4/5] w-full object-cover object-[72%_center] sm:absolute sm:inset-0 sm:-z-10 sm:aspect-auto sm:h-full\"\n      />\n      <div\n        aria-hidden\n        className=\"absolute inset-0 -z-10 hidden bg-[linear-gradient(0deg,rgb(0_0_0/0.9),rgb(0_0_0/0.78)_45%,rgb(0_0_0/0.25)_75%,rgb(0_0_0/0.05))] sm:block lg:hidden\"\n      />\n      <div\n        aria-hidden\n        className=\"absolute inset-0 -z-10 hidden bg-[linear-gradient(90deg,rgb(0_0_0/0.66),rgb(0_0_0/0.4)_38%,rgb(0_0_0/0)_70%)] lg:block\"\n      />\n\n      <div className=\"mx-auto flex w-full max-w-6xl items-end px-4 pb-12 pt-8 sm:px-8 sm:pb-14 sm:pt-24 lg:pb-20\">\n        <div className=\"flex max-w-xl flex-col text-sk-ink sm:block sm:text-[rgb(255_255_255)] sm:[text-shadow:0_1px_16px_rgb(0_0_0/0.35)]\">\n          <motion.p {...rise(0)} className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted sm:text-[rgb(255_255_255/0.72)]\">\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.25rem, 5vw, 4rem)\" }}\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 sm:text-[rgb(255_255_255/0.78)]\">\n            {subcopy}\n          </motion.p>\n          <motion.div {...rise(3)} 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 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] sm:focus-visible:ring-[rgb(255_255_255)] sm:focus-visible:ring-offset-[rgb(0_0_0)]\"\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.05] 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:border-[rgb(255_255_255/0.4)] sm:text-[rgb(255_255_255)] sm:hover:bg-[rgb(255_255_255/0.1)] sm:focus-visible:ring-[rgb(255_255_255)] sm:focus-visible:ring-offset-0\"\n            >\n              {secondaryCta.label}\n            </a>\n          </motion.div>\n          <motion.a\n            {...rise(4)}\n            href={chipHref}\n            onClick={() => sk.emit(\"interact\", \"chip\")}\n            className=\"mt-6 inline-flex min-h-11 items-center gap-2 self-start rounded-sk-chip border border-sk-line px-3.5 font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-ink outline-none transition-transform duration-200 ease-sk-out [text-shadow:none] hover:-translate-y-0.5 focus-visible:ring-2 focus-visible:ring-sk-accent sm:absolute sm:right-8 sm:top-8 sm:mt-0 sm:border-[rgb(255_255_255/0.28)] sm:bg-[rgb(0_0_0/0.35)] sm:text-[rgb(255_255_255)] sm:focus-visible:ring-[rgb(255_255_255)]\"\n          >\n            <BadgeCheck size={14} aria-hidden />\n            {chipLabel}\n          </motion.a>\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-editorial.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "editorial",
    "niche": [
      "any"
    ],
    "commerce": [
      "cta"
    ],
    "previewHeight": 600
  }
}