{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "creative-hover-card",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/card/creative-hover-card.tsx",
      "content": "// https://cruip-tutorials.vercel.app/cards-hover-effect/\nimport Image from 'next/image';\nimport React from 'react';\n\nfunction CreativeHoverCard() {\n  return (\n    <>\n      <section className='grid md:grid-cols-3 gap-6 max-md:max-w-xs mx-auto '>\n        <div className=\"group  bg-linear-to-t from-[#242424] to-[#020202] hover:from-[#182135] hover:to-[#080808] relative before:absolute before:inset-0 before:bg-[url('/noise.gif')] before:opacity-5 rounded-2xl border \">\n          <div className='relative'>\n            <div className='px-6 py-5'>\n              <div className='group-hover:bg-blue-400 bg-white transition-all duration-500 ease-in-out w-fit px-3 rounded-full text-sm py-1 text-black group-hover:text-white mb-1'>\n                stastic\n              </div>\n              <span className='text-lg group-hover:hidden inline-block font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>\n                Subscriber Reports\n              </span>\n              <span className='text-lg group-hover:inline-block hidden font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>\n                Subscriber Highlights\n              </span>\n              <p className='text-sm text-slate-500'>\n                Building truly great products is both art and science. It's part intuition and part\n                data.\n              </p>\n            </div>\n            <div className='relative group-hover:-translate-y-2 transition-transform duration-500 ease-in-out '>\n              <Image\n                className='group-hover:opacity-0 transition-opacity duration-500  object-cover h-full m-0 p-0'\n                src='/simplechartt.webp'\n                width={350}\n                height={240}\n                alt='Card image 01'\n              />\n              <Image\n                className='absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity  object-cover duration-300  h-full  m-0 p-0'\n                src='/chartt.webp'\n                width={350}\n                height={240}\n                alt='Card image 01 displaying on hover'\n                aria-hidden='true'\n              />\n            </div>\n          </div>\n        </div>\n        <div className=\"group  bg-linear-to-t from-[#050a0a] to-[#051818] hover:from-[#05070a] hover:to-[#0b1a3b] relative before:absolute before:inset-0 before:bg-[url('/noise.gif')] before:opacity-5 rounded-2xl border \">\n          <div className='relative'>\n            <div className='px-6 py-5'>\n              <div className='bg-green-400 group-hover:bg-blue-600  transition-all duration-500 ease-in-out w-fit px-3 rounded-full text-sm py-1 text-white mb-1'>\n                Password\n              </div>\n              <span className='text-lg group-hover:hidden inline-block font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>\n                Don't Show Your Password\n              </span>\n              <span className='text-lg group-hover:inline-block hidden font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>\n                Hide Your Password\n              </span>\n              <p className='text-sm text-slate-500'>\n                If you don't hide your password then we can see it and know it and then can enter\n                your account\n              </p>\n            </div>\n            <div className='relative group-hover:-translate-y-2 transition-transform duration-500 ease-in-out'>\n              <Image\n                className='group-hover:opacity-0 transition-opacity duration-500'\n                src='/fullverificationtwo_fpi9eo.webp'\n                width={350}\n                height={240}\n                alt='Card image 01'\n              />\n              <Image\n                className='absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300'\n                src='/verification_iwnfmj.webp'\n                width={350}\n                height={240}\n                alt='Card image 01 displaying on hover'\n                aria-hidden='true'\n              />\n            </div>\n          </div>\n        </div>\n        <div className=\"group  bg-linear-to-t from-[#171c35] to-[#000000] hover:from-[#2b131e] hover:to-[#141414] relative before:absolute before:inset-0 bbefore:bg-[url('/noise.gif')] before:opacity-5  rounded-2xl border \">\n          <div className='relative'>\n            <div className='px-6 py-5'>\n              <div className='bg-blue-400 group-hover:bg-red-500 transition-all duration-500 ease-in-out w-fit px-3 rounded-full text-sm py-1 text-white mb-1'>\n                Alert\n              </div>\n              <span className='text-lg group-hover:hidden inline-block font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>\n                Chatting Seemlessly\n              </span>\n              <span className='text-lg group-hover:inline-block hidden font-semibold pt-2 text-slate-200 mb-1 transition-all duration-500 ease-in-out'>\n                Don't Hide Chat\n              </span>\n              <p className='text-sm text-slate-500'>\n                Building truly great products is both art and science. It's part intuition and part\n                data.\n              </p>\n            </div>\n            <div className='relative group-hover:-translate-y-2 transition-transform duration-500 ease-in-out'>\n              <Image\n                className='group-hover:opacity-0 transition-opacity duration-500'\n                src='/chat_zinhdw.webp'\n                width={350}\n                height={240}\n                alt='Card image 01'\n              />\n              <Image\n                className='absolute top-0 left-0 opacity-0 group-hover:opacity-100 transition-opacity duration-300'\n                src='/hide_chat_egk7h4.webp'\n                width={350}\n                height={240}\n                alt='Card image 01 displaying on hover'\n                aria-hidden='true'\n              />\n            </div>\n          </div>\n        </div>\n      </section>\n    </>\n  );\n}\n\nexport default CreativeHoverCard;\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}