3D Tilt Card

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

export default function Example() {
  return (
    <div className="flex flex-wrap gap-8 items-center justify-center p-10 text-white">
      <TiltCard className="w-72 bg-gradient-to-br from-neutral-900 to-neutral-800 border border-neutral-700 rounded-xl p-6">
        <h3 className="text-xl font-bold mb-2">Hover me</h3>
        <p className="text-neutral-400 text-sm">
          Move your cursor over this card to see the 3D tilt effect with glare.
        </p>
        <div className="mt-4 h-24 rounded-lg bg-gradient-to-br from-purple-600/20 to-pink-600/20 border border-neutral-700/50" />
      </TiltCard>
      <TiltCard
        tiltMaxDeg={25}
        glare={true}
        className="w-72 bg-gradient-to-br from-purple-950 to-indigo-950 border border-purple-800/50 rounded-xl p-6"
      >
        <h3 className="text-xl font-bold mb-2 text-purple-200">Extra Tilt</h3>
        <p className="text-purple-300/60 text-sm">
          This card has a stronger tilt angle for a more dramatic effect.
        </p>
        <div className="mt-4 flex gap-2">
          <div className="h-12 w-12 rounded-lg bg-purple-500/20 border border-purple-500/30" />
          <div className="h-12 w-12 rounded-lg bg-pink-500/20 border border-pink-500/30" />
          <div className="h-12 w-12 rounded-lg bg-indigo-500/20 border border-indigo-500/30" />
        </div>
      </TiltCard>
    </div>
  );
}