Pricing Table One

1"use client";
2 
3import { Check, Zap } from "lucide-react";
4import { useState, useId } from "react";
5import { motion, AnimatePresence } from "motion/react";
6import { cva, type VariantProps } from "class-variance-authority";
7 
8import { Badge } from "@/components/ui/badge";
9import { Button } from "@/components/ui/button";
10import { Label } from "@/components/ui/label";
11import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
12import { Separator } from "@/components/ui/separator";
13import { type Plan } from "@/lib/billingsdk-config";
14import { cn } from "@/lib/utils";
15 
16const sectionVariants = cva("py-32", {
17  variants: {
18    size: {
19      small: "py-6 md:py-12",
20      medium: "py-10 md:py-20",
21      large: "py-16 md:py-32",
22    },
23    theme: {
24      minimal: "",
25      classic:
26        "bg-gradient-to-b from-background to-muted/20 relative overflow-hidden",
27    },
28  },
29  defaultVariants: {
30    size: "medium",
31    theme: "minimal",
32  },
33});
34 
35const titleVariants = cva("text-pretty text-left font-bold", {
36  variants: {
37    size: {
38      small: "text-3xl lg:text-4xl",
39      medium: "text-4xl lg:text-5xl",
40      large: "text-4xl lg:text-6xl",
41    },
42    theme: {
43      minimal: "",
44      classic:
45        "text-center bg-gradient-to-r from-foreground to-muted-foreground bg-clip-text text-transparent p-1",
46    },
47  },
48  defaultVariants: {
49    size: "large",
50    theme: "minimal",
51  },
52});
53 
54const descriptionVariants = cva("text-muted-foreground max-w-3xl", {
55  variants: {
56    size: {
57      small: "text-base lg:text-lg",
58      medium: "text-lg lg:text-xl",
59      large: "lg:text-xl",
60    },
61    theme: {
62      minimal: "text-left",
63      classic: "text-center mx-auto",
64    },
65  },
66  defaultVariants: {
67    size: "large",
68    theme: "minimal",
69  },
70});
71 
72const cardVariants = cva(
73  "flex w-full flex-col rounded-lg border text-left h-full transition-all duration-300",
74  {
75    variants: {
76      size: {
77        small: "p-4",
78        medium: "p-5",
79        large: "p-6",
80      },
81      theme: {
82        minimal: "",
83        classic: "hover:shadow-xl backdrop-blur-sm bg-card/50 border-border/50",
84      },
85      highlight: {
86        true: "",
87        false: "",
88      },
89    },
90    compoundVariants: [
91      {
92        theme: "classic",
93        highlight: true,
94        className:
95          "ring-2 ring-primary/20 border-primary/30 bg-gradient-to-b from-primary/5 to-transparent relative overflow-hidden",
96      },
97      {
98        theme: "minimal",
99        highlight: true,
100// … truncated