{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shadow-card-demo",
  "type": "registry:component",
  "registryDependencies": [
    "shadow-card"
  ],
  "files": [
    {
      "path": "registry/default/example/shadow-card-demo.tsx",
      "content": "\"use client\"\n\nimport {\n  ShadowCard,\n  ShadowCardBackdrop,\n  ShadowCardBevel,\n  ShadowCardFooter,\n  ShadowCardGlow,\n  ShadowCardPixelGradient,\n  ShadowCardVerticalText,\n} from \"@/registry/default/ui/shadow-card\"\n\nconst CARD1_DOT_PATTERN = [\n  1, 1, 0, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 1, 1, 0, 1, 1, 0, 1, 1, 1, 1, 0, 1,\n  1, 1, 1, 0,\n]\n\nfunction ShadowCardDemoCard1() {\n  return (\n    <ShadowCard className=\"h-[420px] w-[280px]\">\n      <ShadowCardBackdrop\n        className=\"inset-0\"\n        style={{\n          background: `\n            radial-gradient(ellipse at 30% 20%, rgba(255, 100, 200, 0.8) 0%, transparent 50%),\n            radial-gradient(ellipse at 70% 70%, rgba(255, 180, 150, 0.6) 0%, transparent 40%),\n            linear-gradient(180deg, #e8ddd4 0%, #d4c8bc 50%, #e8ddd4 100%)\n          `,\n        }}\n      />\n      <ShadowCardGlow\n        className=\"top-20 left-32 h-20 w-16 rounded-full blur-xl\"\n        style={{ background: \"rgba(50, 50, 80, 0.4)\" }}\n      />\n      <ShadowCardVerticalText className=\"top-1/4 right-6 font-medium text-[10px] text-neutral-700 tracking-wide\">\n        <span className=\"block\">Where Design And Product Teams</span>\n        <span className=\"mt-1 block\">Build The Future Of Software</span>\n      </ShadowCardVerticalText>\n      <ShadowCardFooter>\n        <div className=\"grid grid-cols-6 gap-[2px]\">\n          {CARD1_DOT_PATTERN.map((visible, i) => (\n            <div\n              className=\"h-1.5 w-1.5 rounded-full bg-neutral-800\"\n              key={i}\n              style={{ opacity: visible === 1 ? 1 : 0.3 }}\n            />\n          ))}\n        </div>\n        <div className=\"flex flex-col text-[6px] text-neutral-600 leading-tight\">\n          <span>THE DESIGN</span>\n          <span>ZEPXEN</span>\n        </div>\n        <div className=\"flex h-4 w-4 items-center justify-center border border-neutral-800\">\n          <svg\n            aria-hidden=\"true\"\n            fill=\"none\"\n            focusable=\"false\"\n            height=\"10\"\n            viewBox=\"0 0 10 10\"\n            width=\"10\"\n          >\n            <path\n              d=\"M2 8L8 2M8 2H3M8 2V7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"1\"\n            />\n          </svg>\n        </div>\n      </ShadowCardFooter>\n      <ShadowCardBevel />\n    </ShadowCard>\n  )\n}\n\nfunction ShadowCardDemoCard2() {\n  return (\n    <ShadowCard className=\"flex h-[420px] w-[280px] flex-col bg-white\">\n      <div className=\"h-[52%] min-h-0 shrink-0 overflow-hidden\">\n        <ShadowCardPixelGradient />\n      </div>\n      <div className=\"flex h-[48%] flex-col justify-between px-5 pt-6 pb-5\">\n        <h2 className=\"font-semibold text-[22px] text-neutral-900 leading-tight tracking-tight\">\n          Where Design And Product Teams Build The Future Of Software.\n        </h2>\n        <p className=\"text-neutral-500 text-xs leading-relaxed\">\n          Design Is About To Have Its\n          <br />\n          GitHub Moment.\n        </p>\n      </div>\n      <ShadowCardBevel />\n    </ShadowCard>\n  )\n}\n\nfunction ShadowCardDemo() {\n  return (\n    <div className=\"flex min-h-full w-full items-center justify-center gap-6 bg-[#f7d9c4] p-8\">\n      <ShadowCardDemoCard1 />\n      <ShadowCardDemoCard2 />\n    </div>\n  )\n}\n\nexport { ShadowCardDemo }\nexport default ShadowCardDemo\n",
      "type": "registry:component"
    }
  ]
}