{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "hero-trust-strip",
  "type": "registry:block",
  "title": "Trust strip hero",
  "description": "Split product hero with a welded strip of three to five reassurances (shipping, returns, testing, rating) above or below it.",
  "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-trust-strip.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { FlaskConical, RotateCcw, ShieldCheck, Star, Truck, type LucideIcon } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { useSkBlock } from \"@/components/storekit/lib/sk-analytics\"\n\n/* Hero with an attached trust strip. A split product hero, then a strip of\n   three to five reassurances welded to it (shipping, returns, testing,\n   rating) so objections are answered before the first scroll. `stripAt`\n   puts the strip above or below the hero. On mobile the strip is a two\n   column grid, never a ticker, so every item stays readable. Icons come from\n   a small named set so the data stays serializable. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Cta = { label: string; href: string }\nconst ICONS: Record<string, LucideIcon> = { truck: Truck, returns: RotateCcw, lab: FlaskConical, shield: ShieldCheck, star: Star }\nexport type TrustItem = { icon: \"truck\" | \"returns\" | \"lab\" | \"shield\" | \"star\"; title: string; detail?: string; href?: string }\n\nconst SAMPLE: TrustItem[] = [\n  { icon: \"truck\", title: \"Free shipping over $50\", detail: \"Ships in 24 hours\" },\n  { icon: \"returns\", title: \"30-day guarantee\", detail: \"Empty tub? Still refundable\" },\n  { icon: \"lab\", title: \"Third-party tested\", detail: \"Every batch, results online\" },\n  { icon: \"star\", title: \"4.8 from 12,400 reviews\", detail: \"Verified buyers only\" },\n]\n\nconst PRIMARY =\n  \"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]\"\nconst SECONDARY =\n  \"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\nexport function HeroTrustStrip({\n  eyebrow = \"Daily wellness\",\n  headline = \"Clean daily essentials, without the guesswork.\",\n  subcopy = \"Greens, electrolytes and sleep support, made in the USA and tested by a lab we don't own.\",\n  primaryCta = { label: \"Shop best sellers\", href: \"#\" },\n  secondaryCta = { label: \"Take the quiz\", href: \"#\" },\n  image = \"/placeholder.webp\",\n  imageAlt = \"\",\n  items = SAMPLE,\n  stripAt = \"below\",\n  className,\n}: {\n  eyebrow?: string\n  headline?: string\n  subcopy?: string\n  primaryCta?: Cta\n  secondaryCta?: Cta\n  image?: string\n  imageAlt?: string\n  items?: TrustItem[]\n  stripAt?: \"above\" | \"below\"\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const sk = useSkBlock(\"hero\", \"hero-trust-strip\")\n\n  const list = items.slice(0, 5)\n  const n = list.length\n  const lastRowStart = n - (n % 2 || 2)\n\n  const strip = (\n    <ul\n      aria-label=\"Why shop with us\"\n      className={cn(\n        \"grid grid-cols-2 border-sk-line bg-sk-surface lg:grid-flow-col lg:auto-cols-fr lg:grid-cols-none\",\n        stripAt === \"below\" ? \"border-t\" : \"border-b\"\n      )}\n    >\n      {list.map((it, i) => {\n        const Icon = ICONS[it.icon] ?? ShieldCheck\n        const body = (\n          <>\n            <span className=\"grid h-9 w-9 shrink-0 place-items-center rounded-full bg-sk-paper text-sk-accent\">\n              <Icon size={17} aria-hidden />\n            </span>\n            <span className=\"min-w-0\">\n              <span className=\"block text-[13px] font-semibold leading-tight sm:text-sm\">{it.title}</span>\n              {it.detail ? <span className=\"mt-0.5 block text-[12px] leading-tight text-sk-muted\">{it.detail}</span> : null}\n            </span>\n          </>\n        )\n        return (\n          <motion.li\n            key={it.title}\n            initial={{ opacity: 0, y: reduce ? 0 : 6 }}\n            animate={{ opacity: 1, y: 0 }}\n            transition={{ duration: 0.45, ease: EASE, delay: reduce ? 0 : 0.25 + i * 0.05 }}\n            className={cn(\n              \"border-sk-line\",\n              i % 2 === 0 && i < n - 1 && \"border-r\",\n              i < n - 1 && \"lg:border-r\",\n              i === n - 1 && \"lg:border-r-0\",\n              i < lastRowStart && \"border-b lg:border-b-0\"\n            )}\n          >\n            {it.href ? (\n              <a\n                href={it.href}\n                onClick={() => sk.emit(\"interact\", \"trust\", i)}\n                className=\"flex h-full flex-col items-start gap-2 px-4 py-4 sm:flex-row sm:items-center sm:gap-3 outline-none transition-colors hover:bg-sk-ink/[0.03] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-sk-accent sm:px-5\"\n              >\n                {body}\n              </a>\n            ) : (\n              <div className=\"flex h-full flex-col items-start gap-2 px-4 py-4 sm:flex-row sm:items-center sm:gap-3 sm:px-5\">{body}</div>\n            )}\n          </motion.li>\n        )\n      })}\n    </ul>\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-6 sm:px-8 sm:py-8\">\n        <div className=\"overflow-hidden rounded-sk-card border border-sk-line\">\n          {stripAt === \"above\" ? strip : null}\n          <div className=\"grid items-center lg:grid-cols-2\">\n            <div className=\"order-2 p-6 sm:p-10 lg:order-1 lg:p-14\">\n              <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 0.4 }} className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">\n                {eyebrow}\n              </motion.p>\n              <motion.h1\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.05 }}\n                className=\"mt-4 text-balance font-sk-display font-semibold leading-[1.08] tracking-[-0.02em]\"\n                style={{ fontSize: \"clamp(2rem, 3.8vw, 3rem)\" }}\n              >\n                {headline}\n              </motion.h1>\n              <p className=\"mt-4 max-w-md text-[15px] leading-[1.55] text-sk-muted\">{subcopy}</p>\n              <div className=\"mt-8 flex flex-col gap-3 sm:flex-row\">\n                <a href={primaryCta.href} onClick={() => sk.emit(\"interact\", \"cta\")} className={PRIMARY}>\n                  {primaryCta.label}\n                </a>\n                <a href={secondaryCta.href} onClick={() => sk.emit(\"interact\", \"cta_secondary\")} className={SECONDARY}>\n                  {secondaryCta.label}\n                </a>\n              </div>\n            </div>\n            <div className=\"relative order-1 aspect-[4/3] bg-sk-surface lg:order-2 lg:aspect-auto lg:h-full lg:min-h-[480px]\">\n              <img src={image} alt={imageAlt} className=\"absolute inset-0 h-full w-full object-cover\" />\n            </div>\n          </div>\n          {stripAt === \"below\" ? strip : null}\n        </div>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/hero/hero-trust-strip.tsx"
    }
  ],
  "meta": {
    "section": "hero",
    "variant": "trust-strip",
    "niche": [
      "any"
    ],
    "commerce": [
      "cta",
      "trust"
    ],
    "previewHeight": 640
  }
}