PricingToggle

1"use client";
2
3import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
4import { Button } from '@/components/ui/button';
5import { Badge } from '@/components/ui/badge';
6import { Check } from 'lucide-react';
7
8const plans = [
9  {
10    name: 'Starter',
11    price: 9,
12    description: 'Perfect for individuals and small projects',
13    features: ['5 projects', '10GB storage', 'Basic analytics', 'Email support'],
14    highlighted: false,
15  },
16  {
17    name: 'Pro',
18    price: 29,
19    description: 'Best for growing teams and businesses',
20    features: ['Unlimited projects', '100GB storage', 'Advanced analytics', 'Priority support', 'Custom domains', 'API access'],
21    highlighted: true,
22  },
23  {
24    name: 'Enterprise',
25    price: 99,
26    description: 'For large organizations with custom needs',
27    features: ['Everything in Pro', 'Unlimited storage', 'Dedicated support', 'SLA guarantee', 'Custom integrations', 'SSO & SAML'],
28    highlighted: false,
29  },
30];
31
32export default function PricingToggle() {
33  return (
34    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6">
35      <div className="container mx-auto max-w-6xl">
36        <div className="text-center mb-12">
37          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
38            Simple, transparent pricing
39          </h2>
40          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
41            Choose the plan that\'s right for you
42          </p>
43        </div>
44        
45        {/* Toggle */}
46        <div className="flex items-center justify-center gap-4 mb-12">
47          <span className="text-slate-400">Monthly</span>
48          <div className="relative w-16 h-8 bg-gradient-to-r from-purple-600 to-indigo-600 rounded-full cursor-pointer">
49            <div className="absolute right-1 top-1 w-6 h-6 bg-white rounded-full shadow-md" />
50          </div>
51          <span className="text-white font-semibold">Annual</span>
52          <Badge className="bg-green-500/20 text-green-400 border-green-500/30 ml-2">
53            Save 20%
54          </Badge>
55        </div>
56        
57        {/* Pricing cards */}
58        <div className="grid md:grid-cols-3 gap-6">
59          {plans.map((plan, index) => (
60            <Card
61              key={index}
62              className={
63                plan.highlighted
64                  ? 'bg-gradient-to-br from-purple-900/50 to-indigo-900/50 border-purple-500/50 ring-2 ring-purple-500 relative scale-105'
65                  : 'bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50'
66              }
67            >
68              {plan.highlighted && (
69                <div className="absolute -top-3 left-1/2 -translate-x-1/2">
70                  <Badge className="bg-gradient-to-r from-purple-600 to-indigo-600 text-white border-0">
71                    Most Popular
72                  </Badge>
73                </div>
74              )}
75              
76              <CardHeader className="text-center pb-6">
77                <CardTitle className="text-2xl text-white">{plan.name}</CardTitle>
78                <CardDescription className="text-slate-400">{plan.description}</CardDescription>
79                <div className="mt-6">
80                  <span className="text-5xl font-bold text-white">
81                    ${plan.price}
82                  </span>
83                  <span className="text-slate-400">/month</span>
84                </div>
85              </CardHeader>
86              
87              <CardContent className="space-y-6">
88                <ul className="space-y-3">
89                  {plan.features.map((feature, i) => (
90                    <li key={i} className="flex items-center gap-3 text-slate-300">
91                      <Check className="h-5 w-5 text-green-400 flex-shrink-0" />
92                      {feature}
93                    </li>
94                  ))}
95                </ul>
96                
97                <Button
98                  className={
99                    plan.highlighted
100                      ? 'w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white'
101                      : 'w-full bg-slate-700 hover:bg-slate-600 text-white'
102                  }
103                  size="lg"
104                >
105                  Get Started
106                </Button>
107              </CardContent>
108            </Card>
109          ))}
110        </div>
111      </div>
112    </div>
113  );
114}