SaaS 4-Tier Enterprise Pricing

1'use client';
2
3import React, { useState } from 'react';
4import { Check } from 'lucide-react';
5
6export default function SaaSTierPricing() {
7  const [currency, setCurrency] = useState<'USD' | 'INR'>('USD');
8  const [billing, setBilling] = useState<'monthly' | 'yearly'>('monthly');
9
10  const symbol = currency === 'USD' ? '$' : '₹';
11  const multiplier = currency === 'USD' ? 1 : 80;
12  const discount = billing === 'yearly' ? 0.8 : 1;
13
14  const plans = [
15    {
16      name: 'Starter',
17      price: Math.round(15 * multiplier * discount),
18      description: 'Essential toolkit for solo builders & indie developers.',
19      features: ['Up to 3 team members', '10GB Storage & CDN', 'Standard analytics dashboard', 'Community Discord support']
20    },
21    {
22      name: 'Pro Developer',
23      price: Math.round(39 * multiplier * discount),
24      popular: true,
25      description: 'Ideal for scaling startups and fast-growing teams.',
26      features: ['Up to 15 team members', '100GB Storage & CDN', 'Advanced AI analytics', '24/7 priority support', 'Custom domain mapping']
27    },
28    {
29      name: 'Team Scale',
30      price: Math.round(79 * multiplier * discount),
31      description: 'High capacity infrastructure for mature tech products.',
32      features: ['Up to 50 team members', '500GB Storage & CDN', 'Real-time telemetry alerts', 'Dedicated Discord channel', 'SAML SSO integration']
33    },
34    {
35      name: 'Enterprise',
36      price: Math.round(199 * multiplier * discount),
37      description: 'Custom SLA, dedicated cloud infrastructure & 1-on-1 support.',
38      features: ['Unlimited storage & bandwidth', 'Dedicated VPC deployment', 'Full security audit logs', 'Dedicated account manager', '99.99% uptime SLA']
39    }
40  ];
41
42  return (
43    <div className="w-full max-w-7xl mx-auto p-4 sm:p-6 transition-colors select-none">
44      {/* Section Header */}
45      <div className="flex flex-col items-center text-center mb-8">
46        <span className="rounded-full bg-blue-50 dark:bg-blue-950/60 border border-blue-200 dark:border-blue-800 px-3.5 py-1 text-[11px] font-bold text-blue-600 dark:text-blue-400 uppercase tracking-widest">
47          TRANSPARENT PRICING
48        </span>
49        <h2 className="text-2xl sm:text-3xl font-extrabold text-slate-900 dark:text-slate-100 mt-3 tracking-tight">
50          Predictable pricing for projects of any size
51        </h2>
52        <p className="text-xs sm:text-sm text-slate-500 dark:text-slate-400 mt-2 max-w-md font-medium">
53          Choose the plan that fits your growth. Upgrade or cancel anytime with zero lock-in contracts.
54        </p>
55      </div>
56
57      {/* Currency & Billing Controls */}
58      <div className="flex flex-col items-center gap-4 mb-10 text-center">
59        <div className="inline-flex items-center rounded-2xl border border-slate-200 dark:border-slate-800 bg-slate-100 dark:bg-slate-900 p-1.5 shadow-md">
60          <div className="flex items-center rounded-xl bg-white dark:bg-slate-800 p-1 shadow-xs">
61            <button
62              onClick={() => setCurrency('USD')}
63              className={`flex items-center gap-1 px-3.5 py-1.5 text-xs font-bold rounded-lg transition ${
64                currency === 'USD'
65                  ? 'bg-blue-600 text-white shadow-xs'
66                  : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100'
67              }`}
68            >
69              {currency === 'USD' && <Check className="h-3.5 w-3.5" />}
70              <span>USD ($)</span>
71            </button>
72            <button
73              onClick={() => setCurrency('INR')}
74              className={`flex items-center gap-1 px-3.5 py-1.5 text-xs font-bold rounded-lg transition ${
75                currency === 'INR'
76                  ? 'bg-blue-600 text-white shadow-xs'
77                  : 'text-slate-600 dark:text-slate-400 hover:text-slate-900 dark:hover:text-slate-100'
78              }`}
79            >
80              {currency === 'INR' && <Check className="h-3.5 w-3.5" />}
81              <span>INR (₹)</span>
82            </button>
83          </div>
84
85          <div className="h-5 w-px bg-slate-300 dark:bg-slate-800 mx-2" />
86
87          <div className="flex items-center gap-1 px-1">
88            <button
89              onClick={() => setBilling('monthly')}
90              className={`flex items-center gap-1 px-3.5 py-1.5 text-xs font-bold rounded-lg transition ${
91                billing === 'monthly'
92                  ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900'
93                  : 'text-slate-600 dark:text-slate-400'
94              }`}
95            >
96              {billing === 'monthly' && <Check className="h-3.5 w-3.5" />}
97              <span>Monthly</span>
98            </button>
99            <button
100              onClick={() => setBilling('yearly')}
101              className={`flex items-center gap-1.5 px-3.5 py-1.5 text-xs font-bold rounded-lg transition ${
102                billing === 'yearly'
103                  ? 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900'
104                  : 'text-slate-600 dark:text-slate-400'
105              }`}
106            >
107              {billing === 'yearly' && <Check className="h-3.5 w-3.5" />}
108              <span>Yearly</span>
109              <span className="rounded-full bg-emerald-500/20 px-2 py-0.5 text-[10px] font-black text-emerald-600 dark:text-emerald-400">
110                SAVE 20%
111              </span>
112            </button>
113          </div>
114        </div>
115      </div>
116
117      {/* Grid */}
118      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
119        {plans.map((plan, idx) => (
120          <div
121            key={idx}
122            className={`relative rounded-3xl p-6 min-h-[480px] transition-all flex flex-col justify-between ${
123              plan.popular
124                ? 'border-2 border-blue-600 bg-white dark:bg-slate-900 shadow-2xl scale-[1.02]'
125                : 'border border-slate-200 dark:border-slate-800 bg-slate-50/50 dark:bg-slate-900/50 shadow-lg'
126            }`}
127          >
128            {plan.popular && (
129              <span className="absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full bg-blue-600 px-3.5 py-1 text-[10px] font-black tracking-widest text-white uppercase shadow-md">
130                MOST POPULAR
131              </span>
132            )}
133            <div>
134              <h3 className="text-lg font-extrabold text-slate-900 dark:text-slate-100">{plan.name}</h3>
135              <p className="text-xs text-slate-500 dark:text-slate-400 mt-2 min-h-[36px] leading-relaxed">{plan.description}</p>
136              <div className="mt-6 flex items-baseline gap-1">
137                <span className="text-3xl sm:text-4xl font-black text-slate-900 dark:text-slate-100">{symbol}{plan.price.toLocaleString()}</span>
138                <span className="text-xs font-semibold text-slate-400">/{billing === 'monthly' ? 'mo' : 'yr'}</span>
139              </div>
140
141              <div className="mt-6 space-y-3 border-t border-slate-200/60 dark:border-slate-800/60 pt-5">
142                {plan.features.map((feat, fIdx) => (
143                  <div key={fIdx} className="flex items-center gap-2 text-xs text-slate-700 dark:text-slate-300">
144                    <span className="flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-blue-100 dark:bg-blue-950/80 text-blue-600 dark:text-blue-400">
145                      <Check className="h-2.5 w-2.5" />
146                    </span>
147                    <span>{feat}</span>
148                  </div>
149                ))}
150              </div>
151            </div>
152
153            <button
154              className={`mt-8 w-full rounded-2xl py-3 text-xs font-bold transition shadow-md ${
155                plan.popular
156                  ? 'bg-blue-600 hover:bg-blue-700 text-white'
157                  : 'bg-slate-900 dark:bg-slate-100 text-white dark:text-slate-900 hover:bg-slate-800 dark:hover:bg-slate-200'
158              }`}
159            >
160              Choose {plan.name}
161            </button>
162          </div>
163        ))}
164      </div>
165    </div>
166  );
167}