Interactive cards with a radial mouse-following spotlight glow, supporting proximity, hover-focus, and cursor-flow gradient lighting effects.
import { SpotLightItem, Spotlight } from '@/components/ui/spotlight';
import Image from 'next/image';
import React from 'react';
export default function SpotlightCard1() {
const boxes = [
{
id: '12',
chart: 'https://cdn.21st.dev/assets/mirror/bf/bfe33fa9053552a0a0d8012272e9e6084d4ae55d4f496b0543b5ad05a28fd539.webp',
className: 'grid xl:col-span-1 col-start-1 col-end-3',
},
{
id: '52',
chart: 'https://cdn.21st.dev/assets/mirror/f7/f7c8d1ac3dd37cd72731a0e0ba930de2e9165ceee69a64a0b25010a110d41e61.webp',
className: 'grid xl:col-span-1 col-start-3 col-end-6',
},
{
id: '42',
chart: 'https://cdn.21st.dev/assets/mirror/11/1175ba6f24487c3d9ef8bf9a75ef48d6c3ee1aabbe94eed93783f844130d985e.webp',
className: 'grid xl:col-span-1 col-start-1 col-end-3',
},
{
id: '22',
chart: 'https://cdn.21st.dev/assets/mirror/77/7787ee2845cbf43b70ac68a0f5440726658eb7130007caf494326bc929bda61f.webp',
className: 'grid xl:col-span-1 col-start-3 col-end-6',
},
{
id: '32',
title: 'Track Goals',
chart: 'https://cdn.21st.dev/assets/mirror/4c/4c769149f6d0bd9d03f618e2166f9714015c177f577f4c3d95bf951b08ee62f8.webp',
des: 'Keeping track of your goals helps you stay organized, motivated, and focused. Regularly monitoring your progress ensures you stay on course.',
className: 'xl:col-span-2 xl:row-span-2 row-start-2 row-end-3 col-start-1 col-end-6',
},
];
return (
<div className='relative bg-black sm:p-8 p-4 rounded-md'>
<Spotlight className='grid gap-2 grid-flow-col grid-cols-4'>
{boxes?.map((box) => {
return (
<SpotLightItem className={box.className} key={box.id}>
<div className='relative z-10 rounded-lg bg-linear-to-b from-[#0c0c0c] to-[#252525] w-full h-full mx-auto'>
<div className='rounded-lg grid place-content-center relative max-h-full h-full 2xl:p-3 p-0 w-full'>
<div className={`absolute rounded-lg top-0 left-0 h-full w-full -z-10 bg-center bg-cover`} />
<Image src={box?.chart} alt='grid' width={600} className='w-fit mx-auto' height={600} />
<h1 className='text-center xl:text-2xl lg:text-xl text-2xl font-semibold text-white'>{box?.title}</h1>
<p className='text-center lg:text-base text-xs text-white'>{box?.des}</p>
</div>
</div>
</SpotLightItem>
);
})}
</Spotlight>
</div>
);
}
