Pricing Page

1"use client";
2 
3import { useState } from "react";
4import { Check, Sparkles, Zap, Building2, ArrowRight } from "lucide-react";
5import {
6  GlassCard,
7  GlassCardContent,
8  GlassCardDescription,
9  GlassCardHeader,
10  GlassCardTitle,
11} from "@/registry/liquid-glass/glass-card";
12import { GlassButton } from "@/registry/liquid-glass/glass-button";
13import { GlassBadge } from "@/registry/liquid-glass/glass-badge";
14import { GlassSwitch } from "@/registry/liquid-glass/glass-switch";
15 
16const plans = [
17  {
18    name: "Starter",
19    icon: Zap,
20    price: { monthly: 29, yearly: 24 },
21    description: "Perfect for individuals and small projects",
22    badge: null,
23    features: ["Up to 5 projects", "2GB storage", "Basic analytics", "Single user"],
24    cta: "Get Started",
25    highlighted: false,
26    gradient: "from-blue-400 to-cyan-500",
27  },
28  {
29    name: "Professional",
30    icon: Sparkles,
31    price: { monthly: 79, yearly: 66 },
32    description: "Best for growing teams and businesses",
33    badge: "Most Popular",
34    features: [
35      "Unlimited projects",
36      "50GB storage",
37      "Advanced analytics",
38      "Up to 10 team members",
39      "Custom domain",
40      "API access",
41      "Integrations",
42    ],
43    cta: "Subscribe Now",
44    highlighted: true,
45    gradient: "from-purple-400 to-pink-500",
46  },
47  {
48    name: "Enterprise",
49    icon: Building2,
50    price: { monthly: null, yearly: null },
51    description: "For large organizations with custom needs",
52    badge: "Custom",
53    features: [
54      "Everything in Professional",
55      "Unlimited storage",
56      "24/7 phone support",
57      "On-premise deployment",
58      "Security compliance",
59    ],
60    cta: "Contact Sales",
61    highlighted: false,
62    gradient: "from-orange-400 to-red-500",
63  },
64];
65 
66export default function PricingBlockPage() {
67  const [isYearly, setIsYearly] = useState(false);
68 
69  return (
70    <div className="min-h-full py-4 flex items-center justify-center bg-linear-to-br from-slate-950 via-purple-900 to-slate-950 px-3">
71      <div className="w-full max-w-4xl mx-auto space-y-12">
72        {/* Header */}
73        <div className="text-center space-y-4">
74          <GlassBadge variant="default" className="mb-2">
75            <Sparkles className="size-3 mr-1" /> Simple Pricing
76          </GlassBadge>
77          <h1 className="text-3xl lg:text-4xl font-bold text-white">Choose Your Perfect Plan</h1>
78          <p className="text-lg text-white/60 max-w-2xl mx-auto">
79// … truncated