Pricing Table Seven

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