1"use client";
2
3import { Check } from "lucide-react";
4import { useState } from "react";
5
6export const FlexiblePricing = () => {
7 const [isAnnual, setIsAnnual] = useState(false);
8
9 const plans = [
10 {
11 name: "Free Plan",
12 monthlyPrice: 0,
13 annualPrice: 0,
14 description: "Perfect for individuals just getting started with secure, simple, reliable storage",
15 buttonText: "Get started for free",
16 buttonStyle: "bg-gray-200 hover:bg-gray-300 text-gray-900",
17 features: [
18 "50GB Storage Space",
19 "Cross Platform Sync",
20 "Basic File sharing",
21 "Dedicated \\ support",
22 "Upto 5 Connected Devices"
23 ]
24 },
25 {
26 name: "Pro Plan",
27 monthlyPrice: 19,
28 annualPrice: 15, // 20% off
29 description: "Built for professionals who need more space and control.",
30 buttonText: "Upgrade to pro",
31 buttonStyle: "bg-indigo-600 hover:bg-indigo-700 text-white",
32 popular: true,
33 features: [
34 "1 TB cloud storage",
35 "Automated Backups",
36 "AI-Powered malware detection",
37 "File version History",
38 "Upto 15 connected devices"
39 ]
40 },
41 {
42 name: "Team Plan",
43 monthlyPrice: 49,
44 annualPrice: 39, // 20% off
45 description: "Designed for teams and businesses that need to scale.",
46 buttonText: "Upgrade to team",
47 buttonStyle: "bg-gray-200 hover:bg-gray-300 text-gray-900",
48 features: [
49 "Unlimited Storage Space",
50 "Team roles and admin control",
51 "App Integrations",
52 "Advanced Analytics & Reports",
53 "Upto 30 Connected Devices"
54 ]
55 }
56 ];
57
58 return (
59 <div className="min-h-screen bg-gradient-to-b from-gray-50 to-white py-20 px-6">
60 <div className="max-w-7xl mx-auto">
61 <div className="text-center mb-16">
62 <h1 className="text-5xl font-bold text-gray-600 mb-6">
63 Flexible Pricing for all
64 </h1>
65 <p className="text-gray-600 text-lg max-w-2xl mx-auto mb-8">
66 Different plans that fits your needs, affordable and backed<br />
67 with special features.
68 </p>
69
70 {/* Toggle */}
71 <div className="inline-flex items-center bg-gray-100 rounded-full p-1 mb-3 relative">
72 <div
73 className={`absolute bg-white rounded-full shadow-sm transition-all duration-300 ease-in-out ${
74 isAnnual ? "left-[calc(50%)] w-[calc(50%-4px)]" : "left-1 w-[calc(50%-4px)]"
75 }`}
76 style={{ top: "4px", bottom: "4px" }}
77 />
78 <button
79 onClick={() => setIsAnnual(false)}
80 className={`px-8 py-2.5 rounded-full font-medium transition-all relative z-10 flex-1 ${
81 !isAnnual
82 ? "text-gray-900"
83 : "text-gray-600 hover:text-gray-900"
84 }`}
85 >
86 Monthly
87 </button>
88 <button
89 onClick={() => setIsAnnual(true)}
90 className={`px-8 py-2.5 rounded-full font-medium transition-all relative z-10 flex-1 ${
91 isAnnual
92 ? "text-gray-900"
93 : "text-gray-600 hover:text-gray-900"
94 }`}
95 >
96 Annual
97 </button>
98 </div>
99 <p className="text-indigo-600 text-sm font-medium">
100 -20% off on annual payments
101 </p>
102 </div>
103
104 {/* Pricing Cards */}
105 <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
106 {plans.map((plan, index) => (
107 <div
108 key={index}
109 className={`bg-white rounded-3xl p-8 flex flex-col relative border-2 ${
110 plan.popular
111 ? "bg-gradient-to-b from-indigo-50 to-white border-indigo-200"
112 : "border-gray-200"
113 }`}
114 >
115 {/* Most Popular Badge */}
116 {plan.popular && (
117 <div className="absolute -top-3 right-8">
118 <span className="bg-indigo-600 text-white px-4 py-1.5 rounded-full text-xs font-semibold">
119 Most popular
120 </span>
121 </div>
122 )}
123
124 <div className="space-y-6 flex-1">
125 <div>
126 <h3 className="text-lg font-semibold text-gray-800 mb-4">
127 {plan.name}
128 </h3>
129
130 {/* Price */}
131 <div className="mb-4">
132 <span className="text-5xl font-bold text-gray-900">
133 ${isAnnual ? plan.annualPrice : plan.monthlyPrice}
134 </span>
135 <span className="text-gray-600 text-lg ml-2">/ per month</span>
136 </div>
137
138 <p className="text-gray-600 text-sm leading-relaxed">
139 {plan.description}
140 </p>
141 </div>
142
143 <button className={`w-full font-medium py-3.5 px-6 rounded-xl transition-colors ${plan.buttonStyle}`}>
144 {plan.buttonText}
145 </button>
146
147 {/* Features */}
148 <div className="pt-4">
149 <p className="text-xs uppercase font-semibold text-gray-500 mb-4">
150 {plan.name === "Free Plan" ? "FREE" : plan.name === "Pro Plan" ? "EVERYTHING IN FREE" : "EVERYTHING IN PRO"} PLAN INCLUDES:
151 </p>
152 <ul className="space-y-3">
153 {plan.features.map((feature, idx) => (
154 <li key={idx} className="flex items-start gap-3">
155 <div className="w-5 h-5 rounded-full bg-gray-900 flex items-center justify-center flex-shrink-0 mt-0.5">
156 <Check className="w-3 h-3 text-white stroke-[3]" />
157 </div>
158 <span className="text-gray-700 text-sm">{feature}</span>
159 </li>
160 ))}
161 </ul>
162 </div>
163 </div>
164 </div>
165 ))}
166 </div>
167 </div>
168 </div>
169 );
170};
171