Hero Glassmorphic Radial Pricing

1'use client';
2
3import React, { useState } from 'react';
4import { Check, Sparkles } from 'lucide-react';
5
6export default function GlassmorphicPricing() {
7  const [currency, setCurrency] = useState<'USD' | 'INR'>('USD');
8  const [cycle, setCycle] = useState<'monthly' | 'yearly'>('monthly');
9
10  const symbol = currency === 'USD' ? '$' : '₹';
11  const rate = currency === 'USD' ? 1 : 80;
12  const factor = cycle === 'yearly' ? 0.85 : 1;
13
14  const tiers = [
15    { name: 'Hobby', price: Math.round(15 * rate * factor), desc: 'Essential tools for indie builders.', features: ['1 Active Project', '10GB Storage & CDN', 'Community Support', 'Standard Analytics'] },
16    { name: 'Pro', price: Math.round(39 * rate * factor), featured: true, desc: 'High performance for scaling apps.', features: ['Unlimited Projects', '500GB CDN Bandwidth', '24/7 Priority Support', 'Custom Domains', 'Team Analytics'] },
17    { name: 'Scale', price: Math.round(99 * rate * factor), desc: 'Dedicated cloud capacity.', features: ['Dedicated Infrastructure', 'Unlimited Bandwidth', 'Dedicated Manager', '99.9% Uptime SLA', 'SAML SSO Login'] }
18  ];
19
20  return (
21    <div className="w-full max-w-5xl mx-auto p-4 sm:p-6 select-none">
22      {/* Header */}
23      <div className="flex flex-col items-center text-center mb-8">
24        <span className="flex items-center gap-1.5 rounded-full border border-indigo-200/80 dark:border-indigo-800/80 bg-indigo-50/50 dark:bg-indigo-950/50 px-3.5 py-1 text-[11px] font-bold text-indigo-600 dark:text-indigo-400 uppercase tracking-widest">
25          <Sparkles className="h-3.5 w-3.5" /> GLASS PRICING
26        </span>
27        <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-slate-100 mt-3 tracking-tight">
28          Flexible plans for teams of all sizes
29        </h2>
30      </div>
31
32      <div className="flex flex-col items-center gap-4 mb-8">
33        <div className="inline-flex items-center gap-3 rounded-full border border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70 backdrop-blur-xl px-4 py-2 shadow-xl">
34          <div className="flex items-center gap-1">
35            <button
36              onClick={() => setCurrency('USD')}
37              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-full transition ${currency === 'USD' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500'}`}
38            >
39              {currency === 'USD' && <Check className="h-3 w-3" />}
40              <span>USD ($)</span>
41            </button>
42            <button
43              onClick={() => setCurrency('INR')}
44              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-full transition ${currency === 'INR' ? 'bg-indigo-600 text-white shadow-sm' : 'text-slate-500'}`}
45            >
46              {currency === 'INR' && <Check className="h-3 w-3" />}
47              <span>INR (₹)</span>
48            </button>
49          </div>
50
51          <div className="h-4 w-px bg-slate-300 dark:bg-slate-800" />
52
53          <div className="flex items-center gap-1">
54            <button
55              onClick={() => setCycle('monthly')}
56              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-full transition ${cycle === 'monthly' ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900' : 'text-slate-500'}`}
57            >
58              {cycle === 'monthly' && <Check className="h-3 w-3" />}
59              <span>Monthly</span>
60            </button>
61            <button
62              onClick={() => setCycle('yearly')}
63              className={`flex items-center gap-1 px-3 py-1 text-xs font-bold rounded-full transition ${cycle === 'yearly' ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900' : 'text-slate-500'}`}
64            >
65              {cycle === 'yearly' && <Check className="h-3 w-3" />}
66              <span>Yearly</span>
67              <span className="text-[9px] text-indigo-400 font-extrabold">-15%</span>
68            </button>
69          </div>
70        </div>
71      </div>
72
73      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
74        {tiers.map((t, idx) => (
75          <div
76            key={idx}
77            className={`rounded-3xl border p-6 min-h-[440px] backdrop-blur-xl shadow-xl transition-all flex flex-col justify-between ${
78              t.featured
79                ? 'border-indigo-500/60 bg-indigo-50/20 dark:bg-indigo-950/20 shadow-indigo-500/10 scale-[1.02]'
80                : 'border-slate-200/80 dark:border-slate-800/80 bg-white/70 dark:bg-slate-900/70'
81            }`}
82          >
83            <div>
84              <div className="flex items-center justify-between">
85                <h3 className="text-base font-bold text-slate-900 dark:text-slate-100">{t.name}</h3>
86                {t.featured && <Sparkles className="h-4 w-4 text-indigo-500" />}
87              </div>
88              <p className="text-xs text-slate-500 dark:text-slate-400 mt-1">{t.desc}</p>
89              <div className="mt-5 flex items-baseline gap-1">
90                <span className="text-3xl font-black text-slate-900 dark:text-slate-100">{symbol}{t.price.toLocaleString()}</span>
91                <span className="text-xs font-semibold text-slate-400">/{cycle === 'monthly' ? 'mo' : 'yr'}</span>
92              </div>
93              <div className="mt-6 space-y-2.5 border-t border-slate-200/50 dark:border-slate-800/50 pt-4">
94                {t.features.map((f, i) => (
95                  <div key={i} className="flex items-center gap-2 text-xs text-slate-700 dark:text-slate-300">
96                    <Check className="h-3.5 w-3.5 text-indigo-500 shrink-0" />
97                    <span>{f}</span>
98                  </div>
99                ))}
100              </div>
101            </div>
102            <button className="mt-8 w-full rounded-2xl bg-indigo-600 hover:bg-indigo-700 py-3 text-xs font-bold text-white shadow-md transition">
103              Choose {t.name} Plan
104            </button>
105          </div>
106        ))}
107      </div>
108    </div>
109  );
110}