{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trust-guarantees",
  "type": "registry:block",
  "title": "Guarantee cards",
  "description": "Three guarantee cards with tinted icons, a title and one line each.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "trust",
    "any"
  ],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json"
  ],
  "files": [
    {
      "path": "trust/trust-guarantees.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { FlaskConical, RotateCcw, Truck, type LucideIcon } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\n\n/* Three guarantee cards. Icon in an accent tinted circle, a title and one\n   line. Cards lift 2px on hover and reveal once as the row scrolls in. */\n\nconst EASE = [0.23, 1, 0.32, 1] as const\n\ntype Guarantee = { icon: LucideIcon; title: string; body: string }\n\nexport function TrustGuarantees({\n  items = [\n    { icon: RotateCcw, title: \"30-day guarantee\", body: \"Not right? Send it back within 30 days for a full refund.\" },\n    { icon: Truck, title: \"Free shipping over $150\", body: \"Tracked, temperature-aware shipping on every order.\" },\n    { icon: FlaskConical, title: \"Lot-level testing\", body: \"Every batch has its own certificate, published before it ships.\" },\n  ],\n  className,\n}: {\n  items?: Guarantee[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  return (\n    <ul data-sk-section=\"trust\" data-sk-variant=\"trust-guarantees\" className={cn(\"grid gap-4 sm:grid-cols-3\", className)}>\n      {items.map(({ icon: Icon, title, body }, i) => (\n        <motion.li\n          key={title}\n          initial={{ opacity: 0, y: reduce ? 0 : 8 }}\n          whileInView={{ opacity: 1, y: 0 }}\n          viewport={{ once: true, margin: \"0px 0px -10% 0px\" }}\n          transition={{ duration: 0.45, ease: EASE, delay: reduce ? 0 : i * 0.06 }}\n        >\n          <div className=\"h-full rounded-sk-card border border-sk-line bg-sk-card p-6 transition-transform duration-200 ease-sk-out hover:-translate-y-0.5 motion-reduce:hover:translate-y-0\">\n            <span className=\"grid h-11 w-11 place-items-center rounded-full bg-sk-accent/10 text-sk-accent\">\n              <Icon size={20} strokeWidth={1.75} aria-hidden />\n            </span>\n            <h3 className=\"mt-5 text-balance font-sk-display text-[17px] font-semibold tracking-[-0.01em] text-sk-ink\">{title}</h3>\n            <p className=\"mt-1.5 text-sm leading-[1.5] text-sk-muted\">{body}</p>\n          </div>\n        </motion.li>\n      ))}\n    </ul>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/trust/trust-guarantees.tsx"
    }
  ],
  "meta": {
    "section": "trust",
    "variant": "guarantees",
    "niche": [
      "any"
    ],
    "commerce": [],
    "previewHeight": 320
  }
}