pricing-2

1import type React from "react";
2import { cn } from "@/lib/utils";
3 
4function Card({ className, ...props }: React.ComponentProps<"div">) {
5  return (
6    <div
7      className={cn(
8        "relative w-full max-w-xs rounded-xl border bg-card dark:bg-transparent",
9        "p-1.5 shadow-sm backdrop-blur-xl",
10        className
11      )}
12      {...props}
13    />
14  );
15}
16 
17function Header({
18  className,
19  children,
20  glassEffect = true,
21  ...props
22}: React.ComponentProps<"div"> & {
23  glassEffect?: boolean;
24}) {
25  return (
26    <div
27      className={cn(
28        "relative mb-4 rounded-xl border bg-muted/50 p-4 shadow",
29        className
30      )}
31      {...props}
32    >
33      {/* Top glass gradient */}
34      {glassEffect && (
35        <div
36          aria-hidden="true"
37          className="-z-10 absolute inset-x-0 top-0 h-48 rounded-[inherit]"
38          style={{
39            background:
40              "linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.03) 40%, rgba(0,0,0,0) 100%)",
41          }}
42        />
43      )}
44      {children}
45    </div>
46  );
47}
48 
49function Plan({ className, ...props }: React.ComponentProps<"div">) {
50  return (
51    <div
52      className={cn("mb-8 flex items-center justify-between", className)}
53      {...props}
54    />
55  );
56}
57 
58function Description({ className, ...props }: React.ComponentProps<"p">) {
59  return (
60    <p className={cn("text-muted-foreground text-xs", className)} {...props} />
61  );
62}
63 
64function PlanName({ className, ...props }: React.ComponentProps<"div">) {
65  return (
66    <div
67      className={cn(
68        "flex items-center gap-2 font-medium text-muted-foreground text-sm [&_svg:not([class*='size-'])]:size-4",
69        className
70      )}
71      {...props}
72    />
73  );
74}
75 
76function Badge({ className, ...props }: React.ComponentProps<"span">) {
77  return (
78    <span
79      className={cn(
80        "rounded-full border border-foreground/20 px-2 py-0.5 text-foreground/80 text-xs",
81        className
82      )}
83      {...props}
84    />
85  );
86}
87 
88function Price({ className, ...props }: React.ComponentProps<"div">) {
89  return (
90    <div className={cn("mb-3 flex items-end gap-1", className)} {...props} />
91  );
92}
93 
94function MainPrice({ className, ...props }: React.ComponentProps<"span">) {
95  return (
96    <span
97      className={cn("font-extrabold text-3xl tracking-tight", className)}
98      {...props}
99    />
100  );
101}
102 
103function Period({ className, ...props }: React.ComponentProps<"span">) {
104  return (
105    <span
106// … truncated