Pricing Table Eight

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