1import { Button } from "./ui/button";
2
3type Plan = {
4  name: string;
5  price: number;
6  features: string[];
7};
8
9const plans: Plan[] = [
10  {
11    name: "Starter Plan",
12    price: 19,
13    features: [
14      "Standard email support",
15      "Basic analytics dashboard",
16      "Limited automation actions",
17      "1 project/workspace included",
18      "Essential tools for basic workflow management",
19    ],
20  },
21  {
22    name: "Growth Plan",
23    price: 29,
24    features: [
25      "Priority customer support",
26      "Integrations with popular apps",
27      "Advanced automation workflows",
28      "Detailed analytics & performance insights",
29      "Unlimited projects and team collaboration",
30    ],
31  },
32  {
33    name: "Enterprise Plan",
34    price: 49,
35    features: [
36      "Dedicated account manager",
37      "Enterprise-level security & controls",
38      "API access and custom integrations",
39      "Custom workflows and advanced rules",
40      "Unlimited team members with admin controls",
41    ],
42  },
43];
44
45function CheckIcon() {
46  return (
47    <svg viewBox="0 0 12 10" aria-hidden="true" className="size-2.25 fill-zinc-300">
48      <path d="M4 9.4L0.6 6L2 4.6L4 6.6L10 0.6L11.4 2L4 9.4Z" />
49    </svg>
50  );
51}
52
53export function RadiantPricing() {
54  return (
55    <div className="relative flex min-h-screen items-center justify-center overflow-x-hidden dark bg-background px-6 py-12 text-primary">
56      <div className="pointer-events-none absolute -right-72 -top-60 h-192 w-3xl bg-[radial-gradient(closest-side_at_30%_30%,rgba(255,255,255,0.85),rgba(110,74,255,0.35),rgba(10,10,12,0)_70%),radial-gradient(closest-side_at_72%_18%,rgba(140,120,255,0.7),rgba(10,10,12,0)_62%),radial-gradient(closest-side_at_55%_60%,rgba(100,80,255,0.45),rgba(10,10,12,0)_75%)] blur-3xl" />
57      <div className="relative z-10 w-full max-w-7xl px-2 sm:px-6 lg:px-10">
58        <header className="mb-16 max-w-150">
59          <h2 className="text-[2.5rem] font-medium leading-[1.05] tracking-[-0.03em] sm:text-[3.75rem]">
60            Smart pricing for
61            <br />
62            every stage
63          </h2>
64          <p className="mt-5 text-[1.05rem] font-light leading-normal">
65            Find the perfect balance of features, performance, and affordability.
66          </p>
67        </header>
68
69        <div className="grid grid-cols-1 gap-6 lg:grid-cols-3">
70          {plans.map((plan, index) => (
71            <div
72              key={plan.name}
73              className="relative flex h-full flex-col overflow-hidden rounded-4xl border border-gray-100/7 p-8 shadow-sm hover:shadow-md transition duration-300 bg-muted/50"
74            >
75              <div className="relative flex h-full flex-col">
76                <div className="mb-3 text-[1.1rem] font-bold">{plan.name}</div>
77
78                <div className="mb-9 flex items-baseline">
79                  <span className="text-[4rem] font-medium font-mono leading-none">
80                    {plan.price}$
81                  </span>
82                  <span className="ml-1.5 text-[1.05rem] font-light">/month</span>
83                </div>
84
85                <div className="mb-7 flex items-center">
86                  <span className="h-px flex-1 bg-zinc-800" />
87                  <span className="px-4 text-[0.95rem] font-medium text-primary">Features</span>
88                  <span className="h-px flex-1 bg-zinc-800" />
89                </div>
90
91                <ul className="mb-10 flex flex-1 flex-col gap-4 text-[0.9rem]">
92                  {plan.features.map((feature) => (
93                    <li key={feature} className="flex items-center gap-2 leading-[1.4] tracking-[-0.01em]">
94                      <span className="flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-zinc-800 bg-[#121214]">
95                        <CheckIcon />
96                      </span>
97                      <span>{feature}</span>
98                    </li>
99                  ))}
100                </ul>
101
102                <Button
103                  className={"rounded-full py-7 px-6 text-lg font-medium leading-none transition"}
104                  variant={"secondary"}
105                  size={"lg"}
106                >
107                  Get Started
108                </Button>
109              </div>
110            </div>
111          ))}
112        </div>
113      </div>
114    </div>
115  );
116}
117