{
  "name": "cards-demo-1",
  "type": "registry:block",
  "dependencies": [
    "react-icons"
  ],
  "files": [
    {
      "path": "components/cards-demo-1.tsx",
      "content": "\"use client\";\nimport { cn } from \"@/lib/utils\";\n\nexport default function CardDemo() {\n  return (\n    <div className=\"max-w-xs w-full\">\n      <div\n        className={cn(\n          \"group w-full cursor-pointer overflow-hidden relative card h-96 rounded-md shadow-xl mx-auto flex flex-col justify-end p-4 border border-transparent dark:border-neutral-800\",\n          \"bg-[url(https://images.unsplash.com/photo-1476842634003-7dcca8f832de?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80)] bg-cover\",\n          // Preload hover image by setting it in a pseudo-element\n          \"before:bg-[url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWlodTF3MjJ3NnJiY3Rlc2J0ZmE0c28yeWoxc3gxY2VtZzA5ejF1NSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/syEfLvksYQnmM/giphy.gif)] before:fixed before:inset-0 before:opacity-0 before:z-[-1]\",\n          \"hover:bg-[url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExNWlodTF3MjJ3NnJiY3Rlc2J0ZmE0c28yeWoxc3gxY2VtZzA5ejF1NSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/syEfLvksYQnmM/giphy.gif)]\",\n          \"hover:after:content-[''] hover:after:absolute hover:after:inset-0 hover:after:bg-black hover:after:opacity-50\",\n          \"transition-all duration-500\"\n        )}\n      >\n        <div className=\"text relative z-50\">\n          <h1 className=\"font-bold text-xl md:text-3xl text-gray-50 relative\">\n            Background Overlays\n          </h1>\n          <p className=\"font-normal text-base text-gray-50 relative my-4\">\n            This card is for some special elements, like displaying background\n            gifs on hover only.\n          </p>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:block",
      "target": "components/cards-demo-1.tsx"
    }
  ],
  "author": "Manu Arora <hi@manuarora.in>",
  "title": "Cards Demo 1"
}