Pricing 03

1"use client";
2 
3import { useState } from "react";
4import { Check } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Badge } from "@/components/ui/badge";
7import { Button } from "@/components/ui/button";
8import { Card } from "@/components/ui/card";
9import { Separator } from "@/components/ui/separator";
10import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
11 
12interface Plan {
13  name: string;
14  prices: {
15    monthly: string;
16    yearly: string;
17  };
18  description: string;
19  features: string[];
20  popular?: boolean;
21  cta: { text: string; url: string };
22}
23 
24interface Pricing03Props {
25  title?: string;
26  description?: string;
27  plans?: Plan[];
28  className?: string;
29}
30 
31const Pricing03 = ({
32  title = "Flexible Plans for Every Budget",
33  description = "Choose the plan that fits your needs. No hidden fees.",
34  plans = [
35    {
36      name: "Free",
37      prices: { monthly: "$0", yearly: "$0" },
38      description: "Great for personal projects and exploration.",
39      features: ["50+ components", "Community support", "Free updates"],
40      cta: { text: "Get Started", url: "#" },
41    },
42    {
43      name: "Pro",
44      prices: { monthly: "$12", yearly: "$99" },
45      description: "Perfect for professionals and small teams.",
46      features: [
47        "200+ components",
48        "Priority support",
49        "Premium templates",
50        "API access",
51      ],
52      popular: true,
53      cta: { text: "Start Free Trial", url: "#" },
54    },
55    {
56      name: "Enterprise",
57      prices: { monthly: "$49", yearly: "$399" },
58      description: "For large teams with custom needs.",
59      features: [
60        "Everything in Pro",
61        "Dedicated support",
62        "Custom components",
63        "SLA guarantee",
64      ],
65      cta: { text: "Contact Sales", url: "#" },
66    },
67  ],
68  className,
69}: Pricing03Props) => {
70  const [isAnnual, setIsAnnual] = useState(false);
71 
72  return (
73    <section
74      className={cn(
75        "relative w-full overflow-hidden py-16 md:py-24",
76        className,
77      )}
78    >
79      <div className="container mx-auto px-4">
80        <div className="flex flex-col items-center gap-4 text-center">
81          <h2 className="text-4xl font-medium tracking-tight md:text-5xl">
82            {title}
83          </h2>
84          <p className="text-muted-foreground">{description}</p>
85 
86          <Tabs
87            value={isAnnual ? "yearly" : "monthly"}
88            onValueChange={(value) => setIsAnnual(value === "yearly")}
89          >
90// … truncated