Installation
npm install lucide-reactSource Code
stellar-pricing.tsx
1"use client";
2
3import { Check } from "lucide-react";
4
5export const StellarPricing = () => {
6 return (
7 <div className="min-h-screen">
8 {/* Hero Section */}
9 <div className="max-w-7xl mx-auto px-6 py-20">
10 <div className="text-center mb-16">
11 <h1 className="text-5xl md:text-6xl font-bold text-gray-600 mb-4">
12 A plan for every need
13 </h1>
14 <p className="text-gray-500 text-lg">
15 Safely trade, earn, & borrow digital assets with top-tier security.
16 </p>
17 </div>
18
19 {/* Pricing Cards */}
20 <div className="grid lg:grid-cols-3 gap-6 max-w-6xl mx-auto">
21 {/* Basic Plan */}
22 <div className="bg-white rounded-2xl p-8 border border-gray-200">
23 <div className="mb-6">
24 <h3 className="text-lg font-medium text-gray-900 mb-4">Basic plan</h3>
25 <div className="flex items-baseline gap-1 mb-3">
26 <span className="text-5xl font-bold text-gray-900">$10</span>
27 <span className="text-gray-500 text-sm">per month</span>
28 </div>
29 <p className="text-gray-600 text-sm">
30 Basic features for up to 10 users.
31 </p>
32 </div>
33
34 <button className="w-full py-3 bg-gray-50 hover:bg-gray-100 text-gray-900 font-medium rounded-lg transition-colors mb-8">
35 Get started
36 </button>
37
38 <div className="space-y-6">
39 <div>
40 <h4 className="text-xs font-semibold text-gray-900 mb-4 tracking-wide">FEATURES</h4>
41 <p className="text-sm text-gray-400 mb-4">
42 Everything in our <span className="text-gray-900 font-medium">free plan</span> plus...
43 </p>
44 </div>
45
46 <ul className="space-y-3">
47 <li className="flex items-start gap-3">
48 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
49 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
50 </div>
51 <span className="text-gray-600 text-sm">Access to basic features</span>
52 </li>
53 <li className="flex items-start gap-3">
54 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
55 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
56 </div>
57 <span className="text-gray-600 text-sm">Basic reporting and analytics</span>
58 </li>
59 <li className="flex items-start gap-3">
60 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
61 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
62 </div>
63 <span className="text-gray-600 text-sm">Up to 10 individual users</span>
64 </li>
65 <li className="flex items-start gap-3">
66 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
67 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
68 </div>
69 <span className="text-gray-600 text-sm">20GB individual data each user</span>
70 </li>
71 <li className="flex items-start gap-3">
72 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
73 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
74 </div>
75 <span className="text-gray-600 text-sm">Basic chat and email support</span>
76 </li>
77 </ul>
78 </div>
79 </div>
80
81 {/* Business Plan (Popular) */}
82 <div className="relative bg-gradient-to-br from-[#6B7FFF] via-[#7C5FFF] to-[#8B5FFF] rounded-2xl p-8 shadow-xl overflow-hidden">
83 {/* Decorative Stars */}
84 <div className="absolute top-8 right-12 text-white opacity-40">
85 <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
86 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
87 </svg>
88 </div>
89 <div className="absolute top-20 right-20 text-white opacity-20">
90 <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 24 24">
91 <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
92 </svg>
93 </div>
94
95 <div className="relative z-10">
96 <div className="flex items-center gap-3 mb-6">
97 <h3 className="text-lg font-medium text-white">Business plan</h3>
98 <span className="px-3 py-1 bg-white/20 backdrop-blur-sm text-white text-xs font-medium rounded-full">
99 Popular
100 </span>
101 </div>
102
103 <div className="mb-6">
104 <div className="flex items-baseline gap-1 mb-3">
105 <span className="text-5xl font-bold text-white">$20</span>
106 <span className="text-white/70 text-sm">per month</span>
107 </div>
108 <p className="text-white/90 text-sm">
109 Growing teams up to 20 users.
110 </p>
111 </div>
112
113 <button className="w-full py-3 bg-white hover:bg-gray-50 text-purple-600 font-medium rounded-lg transition-colors mb-8 shadow-lg">
114 Get started
115 </button>
116
117 <div className="space-y-6">
118 <div>
119 <h4 className="text-xs font-semibold text-white mb-4 tracking-wide">FEATURES</h4>
120 <p className="text-sm text-white/60 mb-4">
121 Everything in <span className="text-white font-medium">Basic</span> plus...
122 </p>
123 </div>
124
125 <ul className="space-y-3">
126 <li className="flex items-start gap-3">
127 <div className="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center flex-shrink-0 mt-0.5">
128 <Check className="w-3 h-3 text-white" strokeWidth={3} />
129 </div>
130 <span className="text-white/90 text-sm">Access to basic features</span>
131 </li>
132 <li className="flex items-start gap-3">
133 <div className="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center flex-shrink-0 mt-0.5">
134 <Check className="w-3 h-3 text-white" strokeWidth={3} />
135 </div>
136 <span className="text-white/90 text-sm">Basic reporting and analytics</span>
137 </li>
138 <li className="flex items-start gap-3">
139 <div className="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center flex-shrink-0 mt-0.5">
140 <Check className="w-3 h-3 text-white" strokeWidth={3} />
141 </div>
142 <span className="text-white/90 text-sm">Up to 10 individual users</span>
143 </li>
144 <li className="flex items-start gap-3">
145 <div className="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center flex-shrink-0 mt-0.5">
146 <Check className="w-3 h-3 text-white" strokeWidth={3} />
147 </div>
148 <span className="text-white/90 text-sm">20GB individual data each user</span>
149 </li>
150 <li className="flex items-start gap-3">
151 <div className="w-5 h-5 rounded-full border-2 border-white/40 flex items-center justify-center flex-shrink-0 mt-0.5">
152 <Check className="w-3 h-3 text-white" strokeWidth={3} />
153 </div>
154 <span className="text-white/90 text-sm">Basic chat and email support</span>
155 </li>
156 </ul>
157 </div>
158 </div>
159 </div>
160
161 {/* Enterprise Plan */}
162 <div className="bg-white rounded-2xl p-8 border border-gray-200">
163 <div className="mb-6">
164 <h3 className="text-lg font-medium text-gray-900 mb-4">Enterprise plan</h3>
165 <div className="flex items-baseline gap-1 mb-3">
166 <span className="text-5xl font-bold text-gray-900">$40</span>
167 <span className="text-gray-500 text-sm">per month</span>
168 </div>
169 <p className="text-gray-600 text-sm">
170 Advanced features + unlimited users.
171 </p>
172 </div>
173
174 <button className="w-full py-3 bg-gray-50 hover:bg-gray-100 text-gray-900 font-medium rounded-lg transition-colors mb-8">
175 Get started
176 </button>
177
178 <div className="space-y-6">
179 <div>
180 <h4 className="text-xs font-semibold text-gray-900 mb-4 tracking-wide">FEATURES</h4>
181 <p className="text-sm text-gray-400 mb-4">
182 Everything in <span className="text-gray-900 font-medium">Business</span> plus...
183 </p>
184 </div>
185
186 <ul className="space-y-3">
187 <li className="flex items-start gap-3">
188 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
189 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
190 </div>
191 <span className="text-gray-600 text-sm">Access to basic features</span>
192 </li>
193 <li className="flex items-start gap-3">
194 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
195 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
196 </div>
197 <span className="text-gray-600 text-sm">Basic reporting and analytics</span>
198 </li>
199 <li className="flex items-start gap-3">
200 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
201 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
202 </div>
203 <span className="text-gray-600 text-sm">Up to 10 individual users</span>
204 </li>
205 <li className="flex items-start gap-3">
206 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
207 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
208 </div>
209 <span className="text-gray-600 text-sm">20GB individual data each user</span>
210 </li>
211 <li className="flex items-start gap-3">
212 <div className="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
213 <Check className="w-3 h-3 text-gray-400" strokeWidth={3} />
214 </div>
215 <span className="text-gray-600 text-sm">Basic chat and email support</span>
216 </li>
217 </ul>
218 </div>
219 </div>
220 </div>
221 </div>
222 </div>
223 );
224};
225
