AuroraCard

import AuroraCard from "@/components/ui/aurora-card";

export default function DemoOne() {
return (
    <div className="font-inter flex min-h-screen w-full items-center justify-center bg-zinc-950 text-white">
      <div className="grid w-full max-w-4xl grid-cols-1 gap-8 p-8 md:grid-cols-2">
        {/* Card 1 - Standard Use */}
        <AuroraCard>
          <div className="h-64">
            <h3 className="text-3xl font-bold">Modern</h3>
            <p className="mt-2 text-zinc-400">
              Mouse over this card to see the "crazy" aurora effect. It's built
              with Tailwind and React, following the shadcn/ui philosophy.
            </p>
            <button className="mt-6 rounded-lg bg-purple-600 px-4 py-2 font-semibold text-white transition-all hover:bg-purple-700">
              Get Started
            </button>
          </div>
        </AuroraCard>

        {/* Card 2 - With "Crazy" Text */}
        <AuroraCard>
          <div className="flex h-64 flex-col items-center justify-center text-center">
            <h3 className="bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-5xl font-extrabold text-transparent">
              Creative
            </h3>
            <p className="mt-4 max-w-xs text-zinc-300">
              Combine it with gradient text and other modern CSS for a truly
              unique feel.
            </p>
          </div>
        </AuroraCard>
      </div>
    </div>
  );
}