{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-trio",
  "type": "registry:block",
  "title": "Fanned trio hero",
  "description": "Centered headline with a drawn underline over three fanned, gently floating product renders.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "hero",
    "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-trio.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/* Three product renders fanned under a centered headline. Each render drifts\n   on a slow 6s loop (off for reduced motion). One headline word gets a hand\n   drawn underline that strokes in once. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\nconst FAN = [\n  { rotate: -8, x: 18, y: 12 },\n  { rotate: 0, x: 0, y: -8 },\n  { rotate: 8, x: -18, y: 12 },\n]\n\ntype Cta = { label: string; href: string }\ntype Render = { image: string; title: string }\n\nexport function HeroTrio({\n  headlineStart = \"Three daily habits.\",\n  headlineAccent = \"One\",\n  headlineEnd = \"easy routine.\",\n  subcopy = \"Greens in the morning, focus at noon, magnesium at night. Subscribe and save 15%.\",\n  products = [],\n  primaryCta = { label: \"Shop the trio\", href: \"#\" },\n  secondaryCta = { label: \"Build your routine\", href: \"#\" },\n  className,\n}: {\n  headlineStart?: string\n  headlineAccent?: string\n  headlineEnd?: string\n  subcopy?: string\n  products?: Render[]\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-trio\")\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  const trio = products.slice(0, 3)\n\n  return (\n    <section ref={sk.ref} {...sk.attrs} className={cn(\"overflow-hidden bg-sk-paper text-sk-ink\", className)}>\n      <div className=\"mx-auto flex w-full max-w-5xl flex-col items-center px-4 py-12 text-center sm:px-8 sm:py-16 lg:min-h-[480px]\">\n        <motion.h1\n          {...rise(0)}\n          className=\"max-w-3xl text-balance font-sk-display font-semibold leading-[1.1] tracking-[-0.02em]\"\n          style={{ fontSize: \"clamp(2.1rem, 4.8vw, 3.75rem)\" }}\n        >\n          {headlineStart}{\" \"}\n          <span className=\"relative inline-block whitespace-nowrap\">\n            {headlineAccent}\n            <svg\n              aria-hidden\n              viewBox=\"0 0 200 12\"\n              preserveAspectRatio=\"none\"\n              className=\"absolute -bottom-[0.12em] left-0 h-[0.22em] w-full overflow-visible text-sk-accent\"\n            >\n              <motion.path\n                d=\"M3 8.5C42 3.5 118 2.5 197 6.5\"\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={3.5}\n                strokeLinecap=\"round\"\n                vectorEffect=\"non-scaling-stroke\"\n                initial={{ pathLength: reduce ? 1 : 0 }}\n                animate={{ pathLength: 1 }}\n                transition={{ duration: 0.8, ease: EASE, delay: reduce ? 0 : 0.45 }}\n              />\n            </svg>\n          </span>{\" \"}\n          {headlineEnd}\n        </motion.h1>\n        <motion.p {...rise(1)} className=\"mt-5 max-w-md text-[15px] leading-[1.5] text-sk-muted\">\n          {subcopy}\n        </motion.p>\n\n        <div className=\"mt-10 flex w-full max-w-2xl items-end justify-center sm:mt-12\">\n          {trio.map((p, i) => (\n            <motion.div\n              key={p.image + i}\n              initial={{ opacity: 0, y: reduce ? FAN[i].y : FAN[i].y + 24, rotate: reduce ? FAN[i].rotate : 0, x: FAN[i].x }}\n              animate={{ opacity: 1, y: FAN[i].y, rotate: FAN[i].rotate, x: FAN[i].x }}\n              transition={{ duration: 0.5, ease: EASE, delay: reduce ? 0 : 0.15 + i * 0.06 }}\n              className={cn(\"relative w-1/3 max-w-[220px]\", i === 1 ? \"z-10\" : \"z-0\")}\n            >\n              <motion.div\n                animate={reduce ? undefined : { y: [0, -8, 0] }}\n                transition={reduce ? undefined : { duration: 6, ease: \"easeInOut\", repeat: Infinity, delay: i * 0.9 }}\n                className=\"aspect-[4/5] overflow-hidden rounded-sk-card border border-sk-line bg-sk-surface\"\n              >\n                <img src={p.image} alt={p.title} className=\"h-full w-full object-cover\" />\n              </motion.div>\n            </motion.div>\n          ))}\n        </div>\n\n        <motion.div {...rise(3)} className=\"mt-12 flex w-full flex-col justify-center gap-3 sm:w-auto 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    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-trio.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "trio",
    "niche": [
      "any"
    ],
    "commerce": [
      "cta"
    ],
    "previewHeight": 620
  }
}