{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-bento",
  "type": "registry:block",
  "title": "Feature bento",
  "description": "Five tiles of different kinds: product image, stat, customer quote and two benefits. Staggered in, 2px hover lift.",
  "author": "StoreKit <hello@storekit.dev>",
  "categories": [
    "marketing",
    "any"
  ],
  "dependencies": [
    "motion",
    "lucide-react"
  ],
  "registryDependencies": [
    "https://storekit-eight.vercel.app/r/cn.json",
    "https://storekit-eight.vercel.app/r/product-image.json",
    "https://storekit-eight.vercel.app/r/stars.json"
  ],
  "files": [
    {
      "path": "marketing/feature-bento.tsx",
      "content": "\"use client\"\n\nimport { motion, useReducedMotion } from \"motion/react\"\nimport { RotateCcw, Truck, type LucideIcon } from \"lucide-react\"\nimport { cn } from \"@/components/storekit/lib/cn\"\nimport { ProductImage } from \"@/components/storekit/ui/product-image\"\nimport { Stars } from \"@/components/storekit/ui/stars\"\n\n/* Benefit bento, 3 x 2 on desktop. Five tiles of different kinds: a wide\n   product image tile, a stat, a customer quote and two short benefits.\n   Tiles rise in staggered on view and lift 2px on hover. */\n\ntype Benefit = { icon: LucideIcon; title: string; body: string }\n\nconst EASE: [number, number, number, number] = [0.16, 1, 0.3, 1]\n\nconst BENEFITS: Benefit[] = [\n  { icon: Truck, title: \"Subscribe and save\", body: \"15% off every delivery. Skip or cancel any time.\" },\n  { icon: RotateCcw, title: \"30-day guarantee\", body: \"Not for you? Get your money back, even if the pouch is empty.\" },\n]\n\nexport function FeatureBento({\n  eyebrow = \"Why people reorder\",\n  title = \"Made to drink daily, not to sit in a cupboard.\",\n  image = \"/brands/morrow/greens.webp\",\n  imageTitle = \"One scoop, 28 greens, no grassy aftertaste.\",\n  imageBody = \"Scan the code on the pouch to see the third-party lab results for your batch.\",\n  stat = \"94%\",\n  statEyebrow = \"Subscriber survey\",\n  statLabel = \"of subscribers say they have more steady energy after two weeks\",\n  quote = \"It actually tastes good, mixes in ten seconds, and my afternoon slump is gone.\",\n  quoteAuthor = \"Priya N.\",\n  quoteRole = \"Verified buyer\",\n  benefits = BENEFITS,\n  className,\n}: {\n  eyebrow?: string\n  title?: string\n  image?: string\n  imageTitle?: string\n  imageBody?: string\n  stat?: string\n  statEyebrow?: string\n  statLabel?: string\n  quote?: string\n  quoteAuthor?: string\n  quoteRole?: string\n  benefits?: Benefit[]\n  className?: string\n}) {\n  const reduce = useReducedMotion()\n  const tile = \"rounded-sk-card border border-sk-line bg-sk-card transition-transform duration-200 ease-sk-out hover:-translate-y-0.5 motion-reduce:hover:translate-y-0\"\n  const item = { hidden: { opacity: 0, y: reduce ? 0 : 8 }, show: { opacity: 1, y: 0, transition: { duration: 0.5, ease: EASE } } }\n\n  return (\n    <section data-sk-section=\"marketing\" data-sk-variant=\"feature-bento\" className={cn(\"w-full px-4 py-16 sm:px-8 sm:py-24\", className)}>\n      <div className=\"mx-auto max-w-6xl\">\n        <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{eyebrow}</p>\n        <h2 className=\"mt-3 max-w-xl font-sk-display text-3xl font-semibold leading-[1.1] tracking-[-0.02em] sm:text-4xl\">{title}</h2>\n\n        <motion.ul\n          className=\"mt-10 grid gap-3 sm:grid-cols-2 lg:grid-cols-3\"\n          initial=\"hidden\"\n          whileInView=\"show\"\n          viewport={{ once: true, amount: 0.2 }}\n          variants={{ hidden: {}, show: { transition: { staggerChildren: reduce ? 0 : 0.06 } } }}\n        >\n          {/* Image tile */}\n          <motion.li variants={item} className=\"sm:col-span-2\">\n            <div className={cn(tile, \"grid h-full overflow-hidden sm:grid-cols-[1fr_1fr]\")}>\n              <div className=\"flex flex-col justify-end gap-2 p-6 sm:order-1\">\n                <p className=\"font-sk-display text-xl font-semibold leading-[1.1] tracking-[-0.02em]\">{imageTitle}</p>\n                <p className=\"text-sm leading-[1.5] text-sk-muted\">{imageBody}</p>\n              </div>\n              <ProductImage src={image} alt=\"\" fit=\"cover\" className=\"min-h-[220px] sm:order-2 sm:aspect-auto sm:h-full\" />\n            </div>\n          </motion.li>\n\n          {/* Stat tile */}\n          <motion.li variants={item}>\n            <div className={cn(tile, \"flex h-full flex-col justify-between gap-8 bg-sk-surface p-6\")}>\n              <p className=\"font-sk-mono text-[11px] uppercase tracking-[0.14em] text-sk-muted\">{statEyebrow}</p>\n              <div>\n                <p className=\"font-sk-display text-5xl font-semibold leading-[1.1] tracking-[-0.02em] tabular-nums text-sk-accent\">{stat}</p>\n                <p className=\"mt-2 text-sm leading-[1.5] text-sk-muted\">{statLabel}</p>\n              </div>\n            </div>\n          </motion.li>\n\n          {/* Quote tile */}\n          <motion.li variants={item}>\n            <figure className={cn(tile, \"flex h-full flex-col justify-between gap-6 p-6\")}>\n              <div>\n                <Stars value={5} size={12} />\n                <blockquote className=\"mt-3 text-[15px] leading-[1.5] text-sk-ink\">{quote}</blockquote>\n              </div>\n              <figcaption className=\"text-sm\">\n                <span className=\"font-medium text-sk-ink\">{quoteAuthor}</span>\n                <span className=\"text-sk-muted\"> / {quoteRole}</span>\n              </figcaption>\n            </figure>\n          </motion.li>\n\n          {/* Benefit tiles */}\n          {benefits.slice(0, 2).map(({ icon: Icon, title: t, body }) => (\n            <motion.li key={t} variants={item}>\n              <div className={cn(tile, \"flex h-full flex-col gap-6 p-6\")}>\n                <span className=\"grid h-10 w-10 place-items-center rounded-sk-chip bg-sk-accent/10 text-sk-accent\">\n                  <Icon size={18} />\n                </span>\n                <div>\n                  <p className=\"text-[15px] font-semibold text-sk-ink\">{t}</p>\n                  <p className=\"mt-1 text-sm leading-[1.5] text-sk-muted\">{body}</p>\n                </div>\n              </div>\n            </motion.li>\n          ))}\n        </motion.ul>\n      </div>\n    </section>\n  )\n}\n",
      "type": "registry:block",
      "target": "components/storekit/marketing/feature-bento.tsx"
    }
  ],
  "meta": {
    "section": "marketing",
    "variant": "bento",
    "niche": [
      "any"
    ],
    "commerce": [
      "benefits",
      "trust",
      "social-proof"
    ],
    "previewHeight": 720
  }
}