Spotlight card

import type { PointerEvent } from 'react';

type Feature = { title: string; description: string };

export function SpotlightGrid({ features }: { features: Feature[] }) {
  // Every card tracks the same pointer, so the glow spills across borders.
  // group-hover only applies on devices that can hover, so touch skips it.
  function onPointerMove(event: PointerEvent<HTMLDivElement>) {
    for (const card of event.currentTarget.children) {
      const rect = card.getBoundingClientRect();
      const style = (card as HTMLElement).style;
      style.setProperty('--x', `${event.clientX - rect.left}px`);
      style.setProperty('--y', `${event.clientY - rect.top}px`);
    }
  }

  return (
    <div
      onPointerMove={onPointerMove}
      className='group grid grid-cols-1 gap-4 sm:grid-cols-3'
    >
      {features.map((feature) => (
        // The 1px padding shows the base border and the glowing border layer.
        <div
          key={feature.title}
          className='relative rounded-2xl bg-border p-px'
        >
          <div
            aria-hidden
            className='absolute inset-0 rounded-[inherit] bg-[radial-gradient(200px_circle_at_var(--x)_var(--y),var(--color-blue-500),transparent)] opacity-0 transition-opacity duration-300 group-hover:opacity-100'
          />
          <div className='relative h-full rounded-[15px] bg-background p-6'>
            <div
              aria-hidden
              className='absolute inset-0 rounded-[inherit] bg-[radial-gradient(200px_circle_at_var(--x)_var(--y),--alpha(var(--color-blue-500)/8%),transparent)] opacity-0 transition-opacity duration-300 group-hover:opacity-100'
            />
            <h3 className='relative font-medium'>{feature.title}</h3>
            <p className='relative mt-1 text-sm text-muted-foreground'>
              {feature.description}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}