Pricing 02

1import { Check } from "lucide-react";
2import { cn } from "@/lib/utils";
3import { Button } from "@/components/ui/button";
4 
5interface Plan {
6  name: string;
7  price: string;
8  popular?: boolean;
9  cta?: { text: string; url: string };
10}
11 
12interface FeatureItem {
13  name: string;
14  values: (string | boolean)[];
15}
16 
17interface Pricing02Props {
18  title?: string;
19  description?: string;
20  plans?: Plan[];
21  features?: FeatureItem[];
22  className?: string;
23}
24 
25const Pricing02 = ({
26  title = "Compare Plans",
27  description = "Choose the plan that fits your needs.",
28  plans = [
29    { name: "Basic", price: "$29", cta: { text: "Get Started", url: "#" } },
30    { name: "Standard", price: "$59", cta: { text: "Get Started", url: "#" } },
31    {
32      name: "Pro",
33      price: "$99",
34      popular: true,
35      cta: { text: "Get Started", url: "#" },
36    },
37    {
38      name: "Enterprise",
39      price: "$199",
40      cta: { text: "Contact Sales", url: "#" },
41    },
42  ],
43  features = [
44    { name: "Components", values: ["50+", "100+", "200+", "Unlimited"] },
45    { name: "Templates", values: ["5", "15", "50", "Unlimited"] },
46    {
47      name: "Support",
48      values: ["Community", "Email", "Priority", "Dedicated"],
49    },
50    { name: "Updates", values: [true, true, true, true] },
51    { name: "Custom branding", values: [false, true, true, true] },
52    { name: "API access", values: [false, false, true, true] },
53  ],
54  className,
55}: Pricing02Props) => (
56  <section
57    className={cn("relative w-full overflow-hidden py-16 md:py-24", className)}
58  >
59    <div className="container mx-auto px-4">
60      <div className="flex flex-col items-center gap-4 text-center">
61        <h2 className="text-4xl font-medium tracking-tight md:text-5xl">
62          {title}
63        </h2>
64        <p className="text-muted-foreground">{description}</p>
65      </div>
66 
67      <div className="mt-12 overflow-x-auto">
68        <table className="w-full min-w-[800px] border-collapse">
69          <thead>
70            <tr>
71              <th className="p-4" />
72              {plans.map((plan) => (
73                <th
74                  key={plan.name}
75                  className={cn(
76                    "p-6 text-center",
77                    plan.popular &&
78                      "rounded-t-md bg-primary text-primary-foreground",
79                  )}
80                >
81                  <div className="text-sm font-medium">{plan.name}</div>
82                  <div className="text-3xl font-medium">{plan.price}</div>
83// … truncated