Bento Feature Grid

import { BarChart3, Globe, Lock, Zap } from "lucide-react";

const ITEMS = [
  { Icon: Zap, title: "Fast", span: "col-span-2" },
  { Icon: Lock, title: "Secure", span: "" },
  { Icon: Globe, title: "Global", span: "" },
  { Icon: BarChart3, title: "Insights", span: "col-span-2" },
];

export function BentoGrid() {
  return (
    <div className="grid max-w-md grid-cols-3 gap-2.5">
      {ITEMS.map(({ Icon, title, span }) => (
        <div
          key={title}
          className={
            "group relative overflow-hidden rounded-xl border border-neutral-800 bg-neutral-900 p-4 transition-all duration-300 hover:-translate-y-0.5 hover:border-neutral-700 " +
            span
          }
        >
          <span
            aria-hidden="true"
            className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
            style={{
              background:
                "radial-gradient(120% 120% at 100% 0%, rgba(245,158,11,0.12) 0%, transparent 55%)",
            }}
          />
          <Icon className="size-4 text-amber-400" />
          <p className="mt-2 text-xs font-semibold text-neutral-50">{title}</p>
          <p className="mt-0.5 text-[10px] text-neutral-400">
            Feature description
          </p>
        </div>
      ))}
    </div>
  );
}