{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "demo-spotlight-card2",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/spotlight-cards/demo-spotlight-card2.tsx",
      "content": "// @ts-nocheck\n'use client';\n\n// // https://buildui.com/recipes/spotlight\n\nimport { cn } from '@/lib/utils';\nimport Image from 'next/image';\nimport React, { type MouseEvent, useRef, useState } from 'react';\n\nexport default function DemoSpotlightCard2() {\n  const boxWrapper = useRef(null);\n  const [overlayColor, setOverlayColor] = useState({ x: 0, y: 0 });\n  const handleMouemove = ({ currentTarget, clientX, clientY }): MouseEvent => {\n    const { left, top } = currentTarget.getBoundingClientRect();\n\n    const x = clientX - left;\n    const y = clientY - top;\n\n    setOverlayColor({ x, y });\n  };\n\n  return (\n    <>\n      <div\n        onMouseMove={handleMouemove}\n        ref={boxWrapper}\n        className={`group relative rounded-lg border-2 bg-black   overflow-hidden w-fit mx-auto`}\n      >\n        <div\n          className='pointer-events-none absolute opacity-0 z-50 rounded-lg w-full h-full group-hover:opacity-100  transition duration-300 '\n          style={{\n            background: `\n            radial-gradient(\n              250px circle at ${overlayColor.x}px ${overlayColor.y}px,\n              rgba(255, 255, 255, 0.137),\n              transparent 80%\n            )\n          `,\n          }}\n        />\n\n        <div className=\"relative text-center z-10 px-0 py-16 rounded-lg w-fit   bg-[url('https://res.cloudinary.com/dzl9yxixg/image/upload/new-grid_ng16tf.png')] bg-cover  bg-black h-full mx-auto\">\n          <>\n            <Image\n              src={'https://res.cloudinary.com/dzl9yxixg/image/upload/chat_se21ao.png'}\n              alt='grid'\n              width={600}\n              className='mx-auto w-[85%]'\n              height={600}\n            />\n            <h1 className='text-xl font-semibold tracking-tight text-white'>\n              Create Group Effortlessly\n            </h1>\n            <p className='pt-2  lg:text-base text-sm  text-neutral-300 capitalize'>\n              Seamless chats, crystal-clear videos, and <br />\n              premium audio quality\n            </p>\n          </>\n        </div>\n      </div>\n    </>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}