Pricing 04

1"use client";
2 
3import { useState } from "react";
4import { Check } from "lucide-react";
5import { cn } from "@/lib/utils";
6import { Button } from "@/components/ui/button";
7import { Card } from "@/components/ui/card";
8import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
9 
10interface Plan {
11  name: string;
12  prices: {
13    monthly: { amount: string; suffix: string };
14    yearly: { amount: string; suffix: string };
15  };
16  description: string;
17  features: string[];
18  popular?: boolean;
19  cta: { text: string; url: string; disabled?: boolean };
20}
21 
22interface Pricing04Props {
23  title?: string;
24  plans?: Plan[];
25  className?: string;
26}
27 
28const Pricing04 = ({
29  title = "Choose your plan",
30  plans = [
31    {
32      name: "Free",
33      prices: {
34        monthly: { amount: "0", suffix: "USD / month" },
35        yearly: { amount: "0", suffix: "USD / year" },
36      },
37      description: "Perfect for hobbyists, students, or early-stage creators.",
38      features: [
39        "Access to a basic asset library",
40        "15-second video animation",
41        "Generate up to 10 scenes/month",
42        "Watermarked exports",
43        "Try basic AI prompts",
44      ],
45      cta: { text: "You're on Creator", url: "#", disabled: true },
46    },
47    {
48      name: "Creator",
49      prices: {
50        monthly: { amount: "20", suffix: "USD / month" },
51        yearly: { amount: "16", suffix: "USD / month" },
52      },
53      description:
54        "For indie creators, and startups who need high-quality output.",
55      features: [
56        "Everything in Free",
57        "Unlimited 3D scene generation",
58        "Premium asset library access",
59        "Animations up to 30 seconds",
60        "20+ Video AI models",
61      ],
62      popular: true,
63      cta: { text: "Current Plan", url: "#" },
64    },
65    {
66      name: "Studio",
67      prices: {
68        monthly: { amount: "40", suffix: "USD / month" },
69        yearly: { amount: "32", suffix: "USD / month" },
70      },
71      description: "For teams and studios that need power, speed.",
72      features: [
73        "Everything in Creator",
74        "Unlimited 3D scene generation",
75        "Full access to premium asset library",
76        "Animations up to 60 seconds",
77        "Unlimited Video AI models",
78      ],
79      cta: { text: "Get Studio", url: "#" },
80    },
81  ],
82  className,
83}: Pricing04Props) => {
84  const [billing, setBilling] = useState<"monthly" | "yearly">("monthly");
85 
86  return (
87    <section
88      className={cn(
89// … truncated