1interface PricingCardProps {
 2  name: string;
 3  price: string;
 4  features: string[];
 5  highlighted?: boolean;
 6}
 7
 8export function PricingCard({ name, price, features, highlighted }: PricingCardProps) {
 9  return (
10    <div
11      className={`rounded-2xl p-8 ${
12        highlighted
13          ? "bg-black border-t-4 border-violet-500 text-white"
14          : "bg-white border border-gray-200"
15      }`}
16    >
17      <h3 className="text-xl font-bold mb-2">{name}</h3>
18      <div className="text-4xl font-bold mb-6 bg-gradient-to-r from-violet-500 to-fuchsia-500 bg-clip-text text-transparent">
19        {price}
20        <span className="text-sm text-gray-400">/mo</span>
21      </div>
22      <ul className="space-y-3">
23        {features.map((feature) => (
24          <li key={feature} className="flex items-center gap-2">
25            <span className="text-violet-500">✓</span>
26            {feature}
27          </li>
28        ))}
29      </ul>
30      <button className="mt-8 w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-indigo-500 text-white font-semibold transition-all hover:scale-105">
31        Get Started
32      </button>
33    </div>
34  );
35}