Animated Pricing Cards

1export default function PricingCards() {
2  const tiers = [
3    { name: "Free", price: "$0", period: "/forever", features: ["Browse all components", "Copy React code", "5 submissions/month", "Community support"], cta: "Get Started", featured: false },
4    { name: "Pro", price: "$9", period: "/month", features: ["Everything in Free", "All language exports", "Full prompt access", "Unlimited submissions", "Collections", "Priority review"], cta: "Go Pro", featured: true },
5    { name: "Enterprise", price: "$49", period: "/month", features: ["Everything in Pro", "API access", "Custom integrations", "SSO/SAML", "Dedicated support", "SLA guarantee"], cta: "Contact Sales", featured: false },
6  ];
7 
8  return (
9    <section className="flex min-h-screen items-center justify-center bg-[#09090b] px-6 py-20">
10      <div className="mx-auto w-full max-w-5xl">
11        <div className="mb-12 text-center">
12          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">Simple pricing</h2>
13          <p className="mt-3 text-zinc-400">Start free. Upgrade when you need more.</p>
14        </div>
15        
16        <div className="grid gap-6 md:grid-cols-3">
17          {tiers.map((tier) => (
18            <div
19              key={tier.name}
20              className={`relative flex flex-col rounded-xl border p-8 transition-all duration-300 hover:-translate-y-1 hover:shadow-xl ${
21                tier.featured
22                  ? "border-orange-500/50 bg-[#111113] shadow-lg shadow-orange-500/5"
23                  : "border-zinc-800 bg-[#111113] hover:border-zinc-700"
24              }`}
25            >
26              {tier.featured && (
27                <div className="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-orange-500 px-3 py-1 text-xs font-semibold text-white">
28                  Most Popular
29                </div>
30              )}
31              <div className="mb-6">
32                <h3 className="text-lg font-semibold text-white">{tier.name}</h3>
33                <div className="mt-3 flex items-baseline gap-1">
34                  <span className="text-4xl font-bold text-white">{tier.price}</span>
35                  <span className="text-sm text-zinc-500">{tier.period}</span>
36                </div>
37              </div>
38              <ul className="mb-8 flex-1 space-y-3">
39                {tier.features.map((f) => (
40                  <li key={f} className="flex items-start gap-2 text-sm text-zinc-300">
41                    <svg className="mt-0.5 h-4 w-4 shrink-0 text-orange-400" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
42                      <path strokeLinecap="round" strokeLinejoin="round" d="M5 13l4 4L19 7" />
43                    </svg>
44                    {f}
45                  </li>
46                ))}
47              </ul>
48              <button
49                className={`w-full rounded-lg py-2.5 text-sm font-semibold transition ${
50                  tier.featured
51                    ? "bg-orange-500 text-white hover:bg-orange-600"
52                    : "border border-zinc-700 text-zinc-300 hover:bg-zinc-800 hover:text-white"
53                }`}
54              >
55                {tier.cta}
56              </button>
57            </div>
58          ))}
59        </div>
60      </div>
61    </section>
62  );
63}