{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "card-hover-reveal-demo",
  "title": "Card Hover Reveal Demo",
  "description": "Demo showing Card Hover Reveal Component.",
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/card-hover-reveal"
  ],
  "files": [
    {
      "path": "registry/demo/cards/card-hover-reveal/index.tsx",
      "content": "import {\n  CardHoverReveal,\n  CardHoverRevealContent,\n  CardHoverRevealMain,\n} from '@/components/systaliko-ui/cards/card-hover-reveal';\n\nexport const CardHoverRevealDemo = () => (\n  <CardHoverReveal className=\"h-[512px] w-[385px] rounded-xl\">\n    <CardHoverRevealMain>\n      <img\n        width={385}\n        height={498}\n        alt=\"product image\"\n        src=\"https://images.unsplash.com/photo-1619551734325-81aaf323686c?q=80&w=385&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\"\n        className=\"inline-block size-full max-h-full max-w-full object-cover align-middle\"\n      />\n    </CardHoverRevealMain>\n\n    <CardHoverRevealContent className=\"space-y-4 rounded-2xl bg-foreground/80 text-background p-4\">\n      <div className=\"space-y-2\">\n        <h3 className=\"text-sm \">Services</h3>\n        <div className=\"flex flex-wrap gap-2 \">\n          <div className=\" rounded-full bg-secondary-foreground px-2 py-1\">\n            <p className=\" text-xs leading-normal\">Branding</p>\n          </div>\n          <div className=\" rounded-full bg-secondary-foreground px-2 py-1\">\n            <p className=\" text-xs leading-normal\">3D Modeling</p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-2\">\n        <h3 className=\" text-sm \">Stack</h3>\n        <div className=\"flex flex-wrap gap-2 \">\n          <div className=\" rounded-full bg-primary px-2 py-1\">\n            <p className=\" text-xs leading-normal\">Auto CAD</p>\n          </div>\n          <div className=\" rounded-full bg-primary px-2 py-1\">\n            <p className=\" text-xs leading-normal\">Key Shot</p>\n          </div>\n          <div className=\" rounded-full bg-primary px-2 py-1\">\n            <p className=\" text-xs leading-normal\">In Design</p>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-2\">\n        <h3 className=\"text-sm \">Profile</h3>\n        {/* tag */}\n        <div className=\"flex flex-wrap gap-2 \">\n          <p className=\"text-sm text-secondary\">\n            Comprehensive platform designed for an agency, Creating professional\n            and business-oriented brand.\n          </p>\n        </div>\n      </div>\n    </CardHoverRevealContent>\n  </CardHoverReveal>\n);\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/demo/cards/card-hover-reveal.tsx"
    }
  ],
  "type": "registry:ui"
}