Tilt Card: Feature Grid

import { TiltCard } from "@/components/ui/tilt-card";

const features = [
  { index: "01", title: "Pointer aware", body: "Rotation follows the cursor across the whole card." },
  { index: "02", title: "No re-renders", body: "Position is written to CSS variables, not React state." },
  { index: "03", title: "Reduced motion", body: "Tilt is skipped for people who ask for less movement." },
  { index: "04", title: "Fully themable", body: "Plain Tailwind classes. Bring your own colors." },
];

export function TiltCardFeatureGridDemo() {
  return (
    <div className="w-full max-w-3xl">
      <p className="font-mono text-xs uppercase tracking-widest text-zinc-500">
        Built for interaction
      </p>
      <h3 className="mt-3 max-w-md text-3xl font-semibold tracking-tight text-zinc-900 dark:text-zinc-50">
        One card, four small details
      </h3>
      <div className="mt-8 grid gap-4 sm:grid-cols-2">
        {features.map((feature) => (
          <TiltCard
            key={feature.index}
            glare={false}
            maxTilt={5}
            scale={1.015}
            className="border border-zinc-200 bg-zinc-50 p-5 dark:border-zinc-800 dark:bg-zinc-900/60"
          >
            <p className="font-mono text-xs text-zinc-500">{feature.index}</p>
            <h4 className="mt-6 font-medium text-zinc-900 dark:text-zinc-50">
              {feature.title}
            </h4>
            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
              {feature.body}
            </p>
          </TiltCard>
        ))}
      </div>
    </div>
  );
}