Pricing 01

1"use client";
2 
3import { useState } from "react";
4import { CircleCheck } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/components/ui/button";
7import {
8  Card,
9  CardContent,
10  CardFooter,
11  CardHeader,
12} from "@/components/ui/card";
13import { Switch } from "@/components/ui/switch";
14import { Separator } from "@/components/ui/separator";
15 
16interface Plan {
17  name: string;
18  prices: {
19    monthly: string;
20    yearly: string;
21  };
22  features: string[];
23  popular?: boolean;
24  cta: { text: string; url: string };
25}
26 
27interface Pricing01Props {
28  title?: string;
29  description?: string;
30  plans?: Plan[];
31  className?: string;
32}
33 
34const Pricing01 = ({
35  title = "Simple, Transparent Pricing",
36  description = "Choose the plan that fits your needs. No hidden fees.",
37  plans = [
38    {
39      name: "Starter",
40      prices: { monthly: "$0", yearly: "$0" },
41      features: [
42        "All core components",
43        "Community support",
44        "Free updates",
45        "Free support",
46      ],
47      cta: { text: "Get Started", url: "#" },
48    },
49    {
50      name: "Pro",
51      prices: { monthly: "$49", yearly: "$490" },
52      popular: true,
53      features: [
54        "Everything in Starter",
55        "Premium components",
56        "Priority support",
57        "Early access",
58        "Pro support",
59        "Free updates",
60        "Community support",
61      ],
62      cta: { text: "Start Free Trial", url: "#" },
63    },
64    {
65      name: "Enterprise",
66      prices: { monthly: "$99", yearly: "$790" },
67      features: [
68        "Everything in Pro",
69        "Custom components",
70        "Dedicated support",
71        "SLA guarantee",
72        "Early access",
73        "Pro support",
74        "Free updates",
75        "Community support",
76      ],
77      cta: { text: "Contact Sales", url: "#" },
78    },
79  ],
80  className,
81}: Pricing01Props) => {
82  const [isAnnual, setIsAnnual] = useState(false);
83 
84  return (
85    <section
86      className={cn(
87        "relative w-full overflow-hidden py-16 md:py-24",
88        className,
89      )}
90    >
91      <div className="container mx-auto px-4">
92        <div className="flex flex-col items-center gap-4 text-center">
93          <h2 className="text-4xl font-medium tracking-tight md:text-5xl">
94            {title}
95          </h2>
96          <p className="text-muted-foreground">{description}</p>
97          <div className="flex items-center gap-4">
98            <span
99              className={cn(
100                "text-sm",
101// … truncated