1export function GlowPricingCard() {
2 return (
3 <div className="flex min-h-screen items-center justify-center bg-primary px-6 py-12 text-white">
4 <div className="relative w-full max-w-90 overflow-hidden rounded-4xl bg-zinc-900 p-8 border border-white/10 shadow-xl shadow-black/20">
5 <div className="pointer-events-none absolute -right-12 -top-12 size-65 rounded-full bg-[radial-gradient(circle_at_center,rgba(192,38,211,0.6)_0%,transparent_70%)] blur-3xl" />
6 <div className="pointer-events-none absolute right-0 top-0 h-37.5 w-full">
7 <span
8 className="absolute right-6 top-6 h-0.5 w-0.5 rounded-full bg-white/90"
9 />
10 </div>
11
12 <div className="relative z-10">
13 <h2 className="text-[22px] font-medium">Team</h2>
14
15 <div className="mt-5">
16 <div className="text-[56px] font-semibold font-mono leading-none tracking-tight">$5.99</div>
17 <div className="mt-2 text-[15px] text-white/80">per month / billed annually</div>
18 </div>
19
20 <button className="mt-6 w-full rounded-full bg-white py-3.5 text-[17px] font-medium text-black transition-opacity hover:opacity-90">
21 Upgrade
22 </button>
23
24 <ul className="mt-8 space-y-4 text-[15px] text-zinc-100">
25 {[
26 "Unlimited workflows",
27 "Unlimited messages",
28 "4 workspaces",
29 "User provisioning",
30 "Unlimited app integrations",
31 "Audio and video calls"
32 ].map((feature) => (
33 <li key={feature} className="flex items-center gap-3">
34 <span className="flex h-5 w-5 items-center justify-center rounded-full bg-zinc-800">
35 <svg
36 viewBox="0 0 24 24"
37 className="h-3 w-3"
38 fill="none"
39 stroke="currentColor"
40 strokeWidth="3"
41 strokeLinecap="round"
42 strokeLinejoin="round"
43 >
44 <polyline points="20 6 9 17 4 12" />
45 </svg>
46 </span>
47 <span>{feature}</span>
48 </li>
49 ))}
50 </ul>
51 </div>
52 </div>
53 </div>
54 );
55}
56