Gradient Border

import { GradientBorder } from "@/components/ui/gradient-border";
import { Sparkles } from "lucide-react";

export function GradientBorderDemo() {
  return (
    <div className="flex justify-center p-10">
      <GradientBorder gradient="from-red-500 to-yellow-500" borderWidth={4} duration={3} borderRadius={24} className="bg-zinc-950">
        <div className="max-w-xs text-center p-2">
            <div className="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-indigo-500/10 mb-4">
                <Sparkles className="h-6 w-6 text-indigo-400" />
            </div>
            <h3 className="text-xl font-bold text-white mb-2">Legendary</h3>
            <p className="text-zinc-400 mb-6 text-sm">
                Unlock premium features with our animated borders.
            </p>
            <button className="w-full rounded-md bg-white py-2 text-xs font-semibold text-black hover:bg-zinc-200 transition-colors">
                Get Started
            </button>
        </div>
      </GradientBorder>
    </div>
  );
}