{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shop-landing",
  "title": "Shop landing page",
  "description": "A landing page for a homeware shop: hero, products, collections, story, reviews, FAQ and newsletter.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/manniche/shop-landing/shop-landing.tsx",
      "content": "// A full landing page for a small shop. Every interaction is plain HTML and CSS (details, :hover, :focus-within),\n// so the same markup works as React and as a static page. Colours come from the theme tokens.\nimport { ArrowRight, Leaf, Menu, RotateCcw, Search, ShieldCheck, ShoppingBag, Star, Truck, X } from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { ProductArt, type ProductArtKind } from './product-art'\n\nconst nav = ['Shop', 'Collections', 'Journal', 'About']\n\nconst products: { name: string; price: string; kind: ProductArtKind; colours: string[]; badge?: string }[] = [\n  { name: 'Morning mug', price: '€24', kind: 'mug', colours: ['bg-primary', 'bg-foreground/70', 'bg-muted-foreground/40'], badge: 'New' },\n  { name: 'Tall vase', price: '€58', kind: 'vase', colours: ['bg-primary', 'bg-foreground/70'] },\n  { name: 'Serving bowl', price: '€42', kind: 'bowl', colours: ['bg-primary', 'bg-muted-foreground/40'] },\n  { name: 'Water carafe', price: '€36', kind: 'carafe', colours: ['bg-primary/40'], badge: 'Back in stock' },\n]\n\nconst promises = [\n  { icon: Truck, title: 'Free delivery', text: 'On orders over €60' },\n  { icon: RotateCcw, title: '30-day returns', text: 'Free and no questions' },\n  { icon: Leaf, title: 'Small batches', text: 'From 12 workshops' },\n  { icon: ShieldCheck, title: '2-year guarantee', text: 'On every piece' },\n]\n\nconst reviews = [\n  { quote: 'The mugs keep coffee warm for ages and they look even better in person.', name: 'Ana R.', item: 'Morning mug, set of 4' },\n  { quote: 'Arrived in two days, packed in paper and straw. Not a single chip.', name: 'Jonas P.', item: 'Serving bowl' },\n  { quote: 'I bought one plate to try. I now own twelve. Send help.', name: 'Mei L.', item: 'Dinner plates' },\n]\n\nconst faq = [\n  ['Are the pieces dishwasher safe?', 'Yes. Everything is glazed and fired at 1,240 °C, so it goes in the dishwasher and the microwave.'],\n  ['How long does delivery take?', 'We pack within 48 hours. Most orders arrive two to four working days later.'],\n  ['Can I return something?', 'Within 30 days, for free. Print the label from your order page and drop it at any parcel shop.'],\n  ['Why do the colours vary a little?', 'Every piece is glazed by hand, so no two are quite the same. That is the point.'],\n]\n\nfunction Logo() {\n  return (\n    <a href=\"#top\" className=\"flex items-center gap-2 font-semibold tracking-tight\">\n      <svg viewBox=\"0 0 24 24\" className=\"size-7\" aria-hidden>\n        <circle cx=\"12\" cy=\"12\" r=\"11\" className=\"fill-primary\" />\n        <path d=\"M12 5c4 3 4 11 0 14-4-3-4-11 0-14Z\" className=\"fill-primary-foreground\" />\n      </svg>\n      Linden\n    </a>\n  )\n}\n\nfunction Stars({ className }: { className?: string }) {\n  return (\n    <span className={cn('flex text-primary', className)} aria-hidden>\n      {Array.from({ length: 5 }, (_, i) => (\n        <Star key={i} className=\"size-4 fill-current\" />\n      ))}\n    </span>\n  )\n}\n\n/** Landing page for a homeware shop: hero, promises, products, collections, story, reviews, FAQ and newsletter. */\nexport function ShopLanding() {\n  return (\n    <div id=\"top\" className=\"min-h-dvh bg-background font-sans text-foreground antialiased\">\n      <p className=\"bg-foreground px-4 py-2 text-center text-xs text-background sm:text-sm\">Free delivery over €60 · Returns within 30 days</p>\n\n      <header className=\"sticky top-0 z-20 border-b bg-background/85 backdrop-blur\">\n        <div className=\"mx-auto flex h-16 max-w-6xl items-center gap-6 px-4 sm:px-6\">\n          <Logo />\n          <nav aria-label=\"Main\" className=\"hidden md:block\">\n            <ul className=\"flex gap-6 text-sm text-muted-foreground\">\n              {nav.map((n) => (\n                <li key={n}>\n                  <a href={`#${n.toLowerCase()}`} className=\"transition-colors duration-150 hover:text-foreground\">\n                    {n}\n                  </a>\n                </li>\n              ))}\n            </ul>\n          </nav>\n          <div className=\"ml-auto flex items-center gap-1\">\n            <a href=\"#search\" aria-label=\"Search\" className=\"grid size-11 place-items-center rounded-full transition-colors hover:bg-muted\">\n              <Search className=\"size-5\" aria-hidden />\n            </a>\n            <a href=\"#bag\" aria-label=\"Bag, 2 items\" className=\"relative grid size-11 place-items-center rounded-full transition-colors hover:bg-muted\">\n              <ShoppingBag className=\"size-5\" aria-hidden />\n              <span className=\"absolute top-1.5 right-1.5 grid size-4 place-items-center rounded-full bg-primary text-[10px] font-semibold text-primary-foreground\">\n                2\n              </span>\n            </a>\n            <details className=\"group relative md:hidden\">\n              <summary className=\"grid size-11 cursor-pointer list-none place-items-center rounded-full hover:bg-muted [&::-webkit-details-marker]:hidden\">\n                <Menu className=\"size-5 group-open:hidden\" aria-hidden />\n                <X className=\"hidden size-5 group-open:block\" aria-hidden />\n                <span className=\"sr-only\">Menu</span>\n              </summary>\n              <nav aria-label=\"Mobile\" className=\"absolute top-12 right-0 w-56 rounded-2xl border bg-card p-2 shadow-lg\">\n                {nav.map((n) => (\n                  <a key={n} href={`#${n.toLowerCase()}`} className=\"block rounded-xl px-3 py-3 text-sm hover:bg-muted\">\n                    {n}\n                  </a>\n                ))}\n              </nav>\n            </details>\n          </div>\n        </div>\n      </header>\n\n      <main>\n        {/* Hero */}\n        <section className=\"mx-auto grid max-w-6xl items-center gap-12 px-4 pt-14 pb-20 sm:px-6 md:grid-cols-[1.05fr_1fr] md:pt-20\">\n          <div className=\"transition duration-700 ease-out starting:translate-y-3 starting:opacity-0 motion-reduce:transition-none\">\n            <a href=\"#shop\" className=\"inline-flex items-center gap-2 rounded-full border bg-card px-3 py-1 text-sm shadow-sm transition-colors hover:bg-muted\">\n              <span className=\"rounded-full bg-primary px-2 py-0.5 text-xs font-medium text-primary-foreground\">New</span>\n              The spring edit is here\n              <ArrowRight className=\"size-3.5\" aria-hidden />\n            </a>\n            <h1 className=\"mt-6 font-serif text-5xl leading-[1.05] tracking-tight text-balance sm:text-6xl\">Things for slow mornings and long tables.</h1>\n            <p className=\"mt-5 max-w-md text-lg text-pretty text-muted-foreground\">\n              Stoneware, glass and linen from small workshops. Made to be used every day and handed down after.\n            </p>\n            <div className=\"mt-8 flex flex-wrap gap-3\">\n              <a\n                href=\"#shop\"\n                className=\"inline-flex min-h-12 items-center gap-2 rounded-full bg-primary px-6 font-medium text-primary-foreground shadow-sm transition hover:opacity-90 active:scale-[0.98]\"\n              >\n                Shop the edit <ArrowRight className=\"size-4\" aria-hidden />\n              </a>\n              <a\n                href=\"#collections\"\n                className=\"inline-flex min-h-12 items-center rounded-full border bg-card px-6 font-medium transition-colors hover:bg-muted\"\n              >\n                See collections\n              </a>\n            </div>\n            <div className=\"mt-10 flex items-center gap-3 text-sm text-muted-foreground\">\n              <Stars />\n              <span>\n                <b className=\"font-semibold text-foreground\">4.9</b> from 2,300 reviews\n              </span>\n            </div>\n          </div>\n\n          <div className=\"relative grid aspect-square grid-cols-6 grid-rows-6 gap-3 transition delay-150 duration-700 ease-out starting:scale-95 starting:opacity-0 motion-reduce:transition-none\">\n            <div className=\"col-span-4 row-span-4 rounded-[2rem] bg-accent p-8\">\n              <ProductArt kind=\"vase\" />\n            </div>\n            <div className=\"col-span-2 row-span-3 rounded-[2rem] bg-muted p-4\">\n              <ProductArt kind=\"mug\" />\n            </div>\n            <div className=\"col-span-2 row-span-3 rounded-[2rem] bg-primary/15 p-4\">\n              <ProductArt kind=\"carafe\" />\n            </div>\n            <div className=\"col-span-4 row-span-2 flex items-center gap-4 rounded-[2rem] border bg-card p-4 shadow-sm\">\n              <div className=\"size-16 shrink-0 rounded-2xl bg-muted p-1\">\n                <ProductArt kind=\"bowl\" />\n              </div>\n              <div className=\"min-w-0\">\n                <p className=\"text-sm text-muted-foreground\">Bestseller</p>\n                <p className=\"truncate font-medium\">Serving bowl, sand</p>\n              </div>\n              <span className=\"ml-auto font-semibold\">€42</span>\n            </div>\n          </div>\n        </section>\n\n        {/* Promises */}\n        <section aria-label=\"Our promises\" className=\"border-y bg-card\">\n          <ul className=\"mx-auto grid max-w-6xl grid-cols-2 gap-px px-4 sm:px-6 lg:grid-cols-4\">\n            {promises.map(({ icon: Icon, title, text }) => (\n              <li key={title} className=\"flex items-center gap-3 py-6\">\n                <span className=\"grid size-10 shrink-0 place-items-center rounded-full bg-accent text-accent-foreground\">\n                  <Icon className=\"size-5\" aria-hidden />\n                </span>\n                <span>\n                  <span className=\"block text-sm font-medium\">{title}</span>\n                  <span className=\"block text-sm text-muted-foreground\">{text}</span>\n                </span>\n              </li>\n            ))}\n          </ul>\n        </section>\n\n        {/* Products */}\n        <section id=\"shop\" className=\"mx-auto max-w-6xl scroll-mt-20 px-4 py-20 sm:px-6\">\n          <div className=\"flex items-end justify-between gap-4\">\n            <div>\n              <p className=\"text-sm font-medium text-primary\">Most loved</p>\n              <h2 className=\"mt-1 font-serif text-3xl tracking-tight sm:text-4xl\">This week’s favourites</h2>\n            </div>\n            <a href=\"#shop\" className=\"hidden items-center gap-1 text-sm font-medium hover:underline sm:inline-flex\">\n              View all <ArrowRight className=\"size-4\" aria-hidden />\n            </a>\n          </div>\n          <ul className=\"mt-10 grid grid-cols-2 gap-x-4 gap-y-10 lg:grid-cols-4\">\n            {products.map((p) => (\n              <li key={p.name} className=\"group relative\">\n                <div className=\"relative aspect-[4/5] overflow-hidden rounded-3xl bg-muted p-6 transition duration-300 group-hover:-translate-y-1 group-hover:shadow-lg\">\n                  <div className=\"h-full transition duration-500 group-hover:scale-105\">\n                    <ProductArt kind={p.kind} />\n                  </div>\n                  {p.badge && <span className=\"absolute top-3 left-3 rounded-full bg-card px-2.5 py-1 text-xs font-medium shadow-sm\">{p.badge}</span>}\n                  <span className=\"absolute inset-x-3 bottom-3 translate-y-2 rounded-full bg-foreground py-2.5 text-center text-sm font-medium text-background opacity-0 transition duration-200 group-focus-within:translate-y-0 group-focus-within:opacity-100 group-hover:translate-y-0 group-hover:opacity-100\">\n                    Add to bag\n                  </span>\n                </div>\n                <div className=\"mt-4 flex items-start justify-between gap-2\">\n                  <h3 className=\"font-medium\">\n                    <a href=\"#shop\" className=\"after:absolute after:inset-0\">\n                      {p.name}\n                    </a>\n                  </h3>\n                  <span className=\"font-medium\">{p.price}</span>\n                </div>\n                <p className=\"mt-2 flex gap-1.5\" aria-label={`${p.colours.length} colours`}>\n                  {p.colours.map((c) => (\n                    <span key={c} className={cn('size-3.5 rounded-full ring-1 ring-border', c)} />\n                  ))}\n                </p>\n              </li>\n            ))}\n          </ul>\n        </section>\n\n        {/* Collections */}\n        <section id=\"collections\" className=\"mx-auto max-w-6xl scroll-mt-20 px-4 pb-20 sm:px-6\">\n          <h2 className=\"font-serif text-3xl tracking-tight sm:text-4xl\">Shop by collection</h2>\n          <div className=\"mt-10 grid gap-4 md:grid-cols-3 md:grid-rows-2\">\n            {[\n              { title: 'Tableware', count: '48 pieces', kind: 'plate' as const, cls: 'md:col-span-2 md:row-span-2 bg-accent', art: 'md:h-80' },\n              { title: 'Glass', count: '16 pieces', kind: 'carafe' as const, cls: 'bg-muted', art: '' },\n              { title: 'Linen', count: '22 pieces', kind: 'linen' as const, cls: 'bg-primary/15', art: '' },\n            ].map((c) => (\n              <a\n                key={c.title}\n                href=\"#collections\"\n                className={cn('group flex flex-col justify-between overflow-hidden rounded-[2rem] p-6 transition hover:shadow-lg', c.cls)}\n              >\n                <div className={cn('mx-auto h-40 w-full max-w-xs transition duration-500 group-hover:scale-105', c.art)}>\n                  <ProductArt kind={c.kind} />\n                </div>\n                <div className=\"mt-6 flex items-end justify-between\">\n                  <div>\n                    <h3 className=\"text-xl font-semibold\">{c.title}</h3>\n                    <p className=\"text-sm text-muted-foreground\">{c.count}</p>\n                  </div>\n                  <span className=\"grid size-11 place-items-center rounded-full bg-card shadow-sm transition group-hover:translate-x-1\">\n                    <ArrowRight className=\"size-4\" aria-hidden />\n                  </span>\n                </div>\n              </a>\n            ))}\n          </div>\n        </section>\n\n        {/* Story */}\n        <section id=\"about\" className=\"scroll-mt-20 bg-foreground text-background\">\n          <div className=\"mx-auto grid max-w-6xl gap-12 px-4 py-20 sm:px-6 md:grid-cols-2\">\n            <div>\n              <p className=\"text-sm font-medium opacity-70\">Our story</p>\n              <h2 className=\"mt-2 font-serif text-3xl tracking-tight text-balance sm:text-4xl\">Made slowly, by people who sign their work.</h2>\n              <p className=\"mt-5 max-w-md opacity-75\">\n                We started with one potter and a kiln in a garage. Today we work with twelve workshops, and every piece still carries the maker’s mark on the\n                base.\n              </p>\n              <a\n                href=\"#journal\"\n                className=\"mt-8 inline-flex min-h-12 items-center gap-2 rounded-full bg-background px-6 font-medium text-foreground transition hover:opacity-90\"\n              >\n                Meet the makers <ArrowRight className=\"size-4\" aria-hidden />\n              </a>\n            </div>\n            <dl className=\"grid grid-cols-2 gap-px self-end overflow-hidden rounded-3xl bg-background/15\">\n              {[\n                ['12', 'workshops'],\n                ['48 h', 'to dispatch'],\n                ['31,000', 'orders sent'],\n                ['4.9 / 5', 'average rating'],\n              ].map(([v, l]) => (\n                <div key={l} className=\"bg-foreground p-6\">\n                  <dt className=\"text-sm opacity-70\">{l}</dt>\n                  <dd className=\"mt-1 font-serif text-3xl\">{v}</dd>\n                </div>\n              ))}\n            </dl>\n          </div>\n        </section>\n\n        {/* Reviews */}\n        <section id=\"journal\" className=\"mx-auto max-w-6xl scroll-mt-20 px-4 py-20 sm:px-6\">\n          <h2 className=\"font-serif text-3xl tracking-tight sm:text-4xl\">Kind words</h2>\n          <ul className=\"mt-10 grid gap-4 md:grid-cols-3\">\n            {reviews.map((r) => (\n              <li key={r.name}>\n                <figure className=\"flex h-full flex-col rounded-3xl border bg-card p-6 shadow-sm\">\n                  <Stars />\n                  <blockquote className=\"mt-4 flex-1 text-lg text-pretty\">“{r.quote}”</blockquote>\n                  <figcaption className=\"mt-6 flex items-center gap-3 text-sm\">\n                    <span className=\"grid size-10 place-items-center rounded-full bg-accent font-semibold text-accent-foreground\">{r.name[0]}</span>\n                    <span>\n                      <span className=\"block font-medium\">{r.name}</span>\n                      <span className=\"block text-muted-foreground\">{r.item}</span>\n                    </span>\n                  </figcaption>\n                </figure>\n              </li>\n            ))}\n          </ul>\n        </section>\n\n        {/* FAQ */}\n        <section className=\"mx-auto grid max-w-6xl gap-10 px-4 pb-20 sm:px-6 md:grid-cols-[1fr_1.6fr]\">\n          <div>\n            <h2 className=\"font-serif text-3xl tracking-tight sm:text-4xl\">Questions</h2>\n            <p className=\"mt-3 text-muted-foreground\">\n              Something else? Write to{' '}\n              <a href=\"mailto:hello@example.com\" className=\"font-medium text-foreground underline underline-offset-4\">\n                hello@example.com\n              </a>\n              .\n            </p>\n          </div>\n          <div className=\"divide-y rounded-3xl border bg-card px-6\">\n            {faq.map(([q, a]) => (\n              <details key={q} className=\"group py-2\">\n                <summary className=\"flex min-h-12 cursor-pointer list-none items-center justify-between gap-4 font-medium [&::-webkit-details-marker]:hidden\">\n                  {q}\n                  <span\n                    className=\"grid size-8 shrink-0 place-items-center rounded-full bg-muted transition-transform duration-200 group-open:rotate-45\"\n                    aria-hidden\n                  >\n                    +\n                  </span>\n                </summary>\n                <p className=\"pb-4 text-muted-foreground\">{a}</p>\n              </details>\n            ))}\n          </div>\n        </section>\n\n        {/* Newsletter */}\n        <section className=\"mx-auto max-w-6xl px-4 pb-20 sm:px-6\">\n          <div className=\"relative overflow-hidden rounded-[2rem] bg-primary px-6 py-14 text-center text-primary-foreground sm:px-12\">\n            <div className=\"pointer-events-none absolute -top-24 -right-24 size-72 rounded-full bg-primary-foreground/10\" aria-hidden />\n            <div className=\"pointer-events-none absolute -bottom-32 -left-16 size-80 rounded-full bg-primary-foreground/10\" aria-hidden />\n            <h2 className=\"relative font-serif text-3xl tracking-tight sm:text-4xl\">10% off your first order</h2>\n            <p className=\"relative mx-auto mt-3 max-w-md opacity-85\">One letter a month with new pieces and the stories behind them. No spam.</p>\n            <form className=\"relative mx-auto mt-8 flex max-w-md flex-col gap-2 sm:flex-row\" action=\"#\">\n              <label htmlFor=\"nl-email\" className=\"sr-only\">\n                Email\n              </label>\n              <input\n                id=\"nl-email\"\n                type=\"email\"\n                required\n                placeholder=\"you@example.com\"\n                className=\"min-h-12 flex-1 rounded-full border-0 bg-primary-foreground px-5 text-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-foreground\"\n              />\n              <button\n                type=\"submit\"\n                className=\"min-h-12 rounded-full bg-foreground px-6 font-medium text-background transition hover:opacity-90 active:scale-[0.98]\"\n              >\n                Subscribe\n              </button>\n            </form>\n          </div>\n        </section>\n      </main>\n\n      <footer className=\"border-t bg-card\">\n        <div className=\"mx-auto grid max-w-6xl gap-10 px-4 py-14 sm:px-6 md:grid-cols-[1.5fr_repeat(3,1fr)]\">\n          <div>\n            <Logo />\n            <p className=\"mt-3 max-w-xs text-sm text-muted-foreground\">Everyday things from small workshops, since 2016.</p>\n          </div>\n          {[\n            ['Shop', ['Tableware', 'Glass', 'Linen', 'Gift cards']],\n            ['Help', ['Delivery', 'Returns', 'Care guide', 'Contact']],\n            ['Company', ['About', 'Makers', 'Journal', 'Wholesale']],\n          ].map(([title, links]) => (\n            <div key={title as string}>\n              <h3 className=\"text-sm font-semibold\">{title}</h3>\n              <ul className=\"mt-3 space-y-2 text-sm text-muted-foreground\">\n                {(links as string[]).map((l) => (\n                  <li key={l}>\n                    <a href=\"#top\" className=\"transition-colors hover:text-foreground\">\n                      {l}\n                    </a>\n                  </li>\n                ))}\n              </ul>\n            </div>\n          ))}\n        </div>\n        <p className=\"mx-auto max-w-6xl border-t px-4 py-6 text-xs text-muted-foreground sm:px-6\">© 2026 Linden. A template from Manniche UI.</p>\n      </footer>\n    </div>\n  )\n}\n",
      "type": "registry:component"
    },
    {
      "path": "registry/manniche/shop-landing/product-art.tsx",
      "content": "import { cn } from '@/lib/utils'\n\nexport type ProductArtKind = 'mug' | 'vase' | 'bowl' | 'carafe' | 'plate' | 'linen'\n\n/** Flat drawings of tableware, coloured from the theme, so the template needs no photos. Swap them for your own images. */\nexport function ProductArt({ kind, className }: { kind: ProductArtKind; className?: string }) {\n  return (\n    <svg viewBox=\"0 0 200 200\" className={cn('h-full w-full', className)} aria-hidden>\n      <ellipse cx=\"100\" cy=\"176\" rx=\"62\" ry=\"7\" className=\"fill-foreground/10\" />\n      {kind === 'mug' && (\n        <g>\n          <path d=\"M128 92h10a20 20 0 0 1 0 40h-10\" fill=\"none\" strokeWidth=\"10\" className=\"stroke-primary/70\" />\n          <path d=\"M58 70h76v78a26 26 0 0 1-26 26H84a26 26 0 0 1-26-26Z\" className=\"fill-primary\" />\n          <path d=\"M58 70h76v12H58Z\" className=\"fill-primary-foreground/25\" />\n          <path d=\"M84 44c0 8 8 8 8 16M102 40c0 8 8 8 8 16\" fill=\"none\" strokeWidth=\"4\" strokeLinecap=\"round\" className=\"stroke-foreground/25\" />\n        </g>\n      )}\n      {kind === 'vase' && (\n        <g>\n          <path d=\"M86 30h28v16c0 10 30 26 30 66 0 36-20 62-44 62s-44-26-44-62c0-40 30-56 30-66Z\" className=\"fill-primary\" />\n          <path d=\"M66 110c10 8 58 8 68 0\" fill=\"none\" strokeWidth=\"5\" className=\"stroke-primary-foreground/30\" />\n          <path d=\"M100 30c-6-14 4-22 10-26M100 30c8-10 22-8 28-2\" fill=\"none\" strokeWidth=\"3\" strokeLinecap=\"round\" className=\"stroke-success\" />\n        </g>\n      )}\n      {kind === 'bowl' && (\n        <g>\n          <path d=\"M34 100h132c0 40-30 68-66 68s-66-28-66-68Z\" className=\"fill-primary\" />\n          <ellipse cx=\"100\" cy=\"100\" rx=\"66\" ry=\"12\" className=\"fill-primary-foreground/30\" />\n          <circle cx=\"82\" cy=\"94\" r=\"10\" className=\"fill-foreground/20\" />\n          <circle cx=\"104\" cy=\"90\" r=\"12\" className=\"fill-foreground/15\" />\n          <circle cx=\"124\" cy=\"96\" r=\"9\" className=\"fill-foreground/25\" />\n        </g>\n      )}\n      {kind === 'carafe' && (\n        <g>\n          <path d=\"M88 24h24v34c0 8 34 24 34 70 0 28-20 46-46 46s-46-18-46-46c0-46 34-62 34-70Z\" className=\"fill-primary/25 stroke-primary\" strokeWidth=\"4\" />\n          <path d=\"M60 116c26 10 54 10 80 0v12c0 26-18 40-40 40s-40-14-40-40Z\" className=\"fill-primary/60\" />\n          <rect x=\"84\" y=\"18\" width=\"32\" height=\"10\" rx=\"4\" className=\"fill-primary\" />\n        </g>\n      )}\n      {kind === 'plate' && (\n        <g>\n          <ellipse cx=\"100\" cy=\"128\" rx=\"78\" ry=\"34\" className=\"fill-primary\" />\n          <ellipse cx=\"100\" cy=\"124\" rx=\"56\" ry=\"22\" className=\"fill-primary-foreground/25\" />\n          <ellipse cx=\"100\" cy=\"96\" rx=\"58\" ry=\"24\" className=\"fill-primary/60\" />\n          <ellipse cx=\"100\" cy=\"93\" rx=\"40\" ry=\"15\" className=\"fill-primary-foreground/30\" />\n        </g>\n      )}\n      {kind === 'linen' && (\n        <g>\n          <path d=\"M40 60h120l-8 106H48Z\" className=\"fill-primary/80\" />\n          <path d=\"M40 60h120v18H40Z\" className=\"fill-primary\" />\n          {[60, 80, 100, 120, 140].map((x) => (\n            <path key={x} d={`M${x} 80v84`} strokeWidth=\"2\" className=\"stroke-primary-foreground/20\" />\n          ))}\n          <path d=\"M40 104h118M44 132h112\" strokeWidth=\"2\" className=\"stroke-primary-foreground/20\" />\n        </g>\n      )}\n    </svg>\n  )\n}\n",
      "type": "registry:component"
    }
  ],
  "cssVars": {
    "theme": {
      "color-success": "var(--success)",
      "ease-out-quint": "cubic-bezier(0.23, 1, 0.32, 1)"
    },
    "light": {
      "success": "oklch(0.55 0.13 155)"
    },
    "dark": {
      "success": "oklch(0.72 0.13 155)"
    }
  },
  "categories": [
    "templates"
  ],
  "type": "registry:block"
}