{
  "schemaVersion": 1,
  "name": "testimonials",
  "useFor": "Pass cases with name, logo, quote, context and tag. Use approved customer quotes and attribution.",
  "constraints": [
    "More than one quote per window",
    "Bold or italic quotes",
    "Tilted or hung windows",
    "Photos in place of the company's mark"
  ],
  "documentation": "",
  "source": "Extension in the opencommerce site's voice (its windows and mono tags; opencommerce-agentcard-web src/components/window.tsx, pricing.tsx)",
  "exports": [
    "Testimonials",
    "Case"
  ],
  "client": false,
  "docsUrl": "https://opencommerce-ds.vercel.app/components/testimonials",
  "markdownUrl": "https://opencommerce-ds.vercel.app/r/testimonials.md",
  "examples": [
    {
      "path": "examples/testimonials.tsx",
      "content": "import { Testimonials } from \"@/components/site/testimonials\";\n\nconst Mark = ({ d }: { d: string }) => (\n  <svg viewBox=\"0 0 20 20\" className=\"fill-current\">\n    <path d={d} />\n  </svg>\n);\n\nexport function Site() {\n  return (\n    <section className=\"mx-auto w-full max-w-(--ds-frame-column) py-20\">\n      <div className=\"mx-auto max-w-(--ds-layout-heading) pb-12 text-center\">\n        <h2 className=\"font-display text-h2 leading-display font-medium tracking-tighter\">Agents that already buy</h2>\n        <p className=\"mx-auto mt-4 max-w-(--ds-layout-text) text-body leading-lead text-fg-muted\">Consumer apps, B2B companies and crypto teams run their agents’ purchases through opencommerce.</p>\n      </div>\n      <Testimonials\n        cases={[\n          {\n            name: \"Orchid\",\n            logo: <Mark d=\"M10 2a3 3 0 0 1 3 3 3 3 0 1 1 2 5 3 3 0 1 1-3 5 3 3 0 1 1-4 0 3 3 0 1 1-3-5 3 3 0 1 1 2-5 3 3 0 0 1 3-3Z\" />,\n            context: \"Consumer apps like Orchid buy on Amazon for customers using Agentcard:\",\n            quote: \"Orchid uses Agentcard to store customers’ cards safely and buy things on their behalf.”\",\n            tag: \"Consumer\",\n          },\n          {\n            name: \"Almanac\",\n            logo: <Mark d=\"M10 1a9 9 0 1 1 0 18 9 9 0 0 1 0-18Zm0 3a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z\" />,\n            context: \"B2B companies like Almanac use Agentcard to give cards to company agents:\",\n            quote: \"Almanac stores corporate cards using Agentcard and automates company purchases with their Slack agent.”\",\n            tag: \"B2B\",\n          },\n          {\n            name: \"Laso Finance\",\n            file: \"laso.case\",\n            logo: <Mark d=\"M3 5l7-3 7 3v10l-7 3-7-3Z\" />,\n            context: \"Crypto companies like Laso use Agentcard as their payment infrastructure:\",\n            quote: \"When users have funds in crypto and their agent wants to make purchases using them, they can use Laso (powered by Agentcard) and create cards their agent can use.”\",\n            tag: \"Crypto\",\n          },\n        ]}\n      />\n    </section>\n  );\n}\n",
      "exports": [
        "Site"
      ],
      "requires": [
        "testimonials"
      ],
      "packages": [],
      "previews": [
        {
          "name": "Site",
          "url": "https://opencommerce-ds.vercel.app/preview/testimonials/Site"
        }
      ]
    }
  ],
  "type": "site",
  "title": "Testimonials",
  "description": "Customer quotes with names, logos and optional context.",
  "surface": "site",
  "kinds": [
    "window",
    "window-bar",
    "card"
  ],
  "requires": [
    "theme",
    "window",
    "utils"
  ],
  "packages": [],
  "files": [
    {
      "path": "components/site/testimonials.tsx",
      "content": "import * as React from \"react\";\n\nimport { Window } from \"@/components/ui/window\";\nimport { cn } from \"@/lib/utils\";\n\n// Customer quotes, in the home page's windows: one window per case (orchid.case), three to a row on wide screens and\n// stacked on a phone. The body is white: a blue opening quote mark in the display face, the context in small muted text,\n// the quote at 20px in the display face, then on a hairline the company's mark and name and a small mono tag at the\n// right. Flat on the page, as every window on the site; nothing tilts or hangs.\n\ntype Case = {\n  name: string;\n  /** The company's mark, about 20px (an svg or img, decorative: the name is beside it). */\n  logo?: React.ReactNode;\n  /** The quote itself, set large. The closing mark is part of your text. */\n  quote: React.ReactNode;\n  /** The sentence before the quote, in small muted text (\"Consumer apps like Orchid buy on Amazon:\"). */\n  context?: React.ReactNode;\n  /** The kind of company, a small tag at the right (Consumer, B2B, Crypto). */\n  tag?: React.ReactNode;\n  /** The bar's name; defaults to the company's slug with .case. */\n  file?: string;\n};\n\nconst slug = (s: string) => s.toLowerCase().replace(/[^a-z0-9]+/g, \"-\").replace(/^-|-$/g, \"\");\n\nfunction CaseWindow({ item }: { item: Case }) {\n  return (\n    <li className=\"flex\">\n      <Window name={item.file ?? `${slug(item.name)}.case`} className=\"w-full\" bodyClassName=\"flex flex-col\">\n        <figure className=\"m-0 flex flex-1 flex-col px-6 pt-6 pb-6\">\n          <span aria-hidden className=\"block h-6 font-display text-h1 leading-none text-fg-brand\">\n            “\n          </span>\n          <blockquote className=\"m-0 mt-3 flex-1\">\n            {item.context && <p className=\"text-body-sm leading-relaxed text-pretty text-fg-muted\">{item.context}</p>}\n            <p className={cn(\"font-display text-h4 leading-snug font-medium tracking-tight text-balance\", item.context && \"mt-2\")}>{item.quote}</p>\n          </blockquote>\n          <figcaption className=\"mt-6 flex items-center gap-2 border-t border-line pt-4 text-body-sm\">\n            {item.logo && (\n              <span aria-hidden className=\"flex size-5 flex-none items-center justify-center [&>img]:size-full [&>svg]:size-full\">\n                {item.logo}\n              </span>\n            )}\n            <span className=\"font-medium\">{item.name}</span>\n            {item.tag && <span className=\"ml-auto rounded-chip bg-tint px-2 py-1 font-mono text-caption leading-none text-fg-brand\">{item.tag}</span>}\n          </figcaption>\n        </figure>\n      </Window>\n    </li>\n  );\n}\n\n/** The customer cases: three to a row on wide screens, stacked on a phone. */\nfunction Testimonials({ cases, className, ...props }: React.ComponentProps<\"ul\"> & { cases: Case[] }) {\n  return (\n    <ul data-slot=\"testimonials\" className={cn(\"m-0 grid list-none grid-cols-1 gap-5 p-0 md:grid-cols-2 lg:grid-cols-3\", className)} {...props}>\n      {cases.map((item) => (\n        <CaseWindow key={item.name} item={item} />\n      ))}\n    </ul>\n  );\n}\n\nexport { Testimonials, type Case };\n"
    }
  ]
}