Installation
npm install lucide-reactSource Code
ai-pricing.tsx
1"use client";
2
3import { Check, Package, UserCheck, Building2, Menu, ArrowRight } from "lucide-react";
4import { useState } from "react";
5
6export const AIPricing = () => {
7 const [billingCycle, setBillingCycle] = useState<"monthly" | "yearly">("monthly");
8
9 return (
10 <div className="min-h-screen bg-black py-20 px-6 relative overflow-hidden">
11 {/* Large Background Text */}
12 <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
13 <h1 className="text-[20rem] font-bold text-[#0A0A0A] select-none leading-none">
14 PRICING
15 </h1>
16 </div>
17
18 <div className="max-w-7xl mx-auto relative z-10">
19 {/* Pricing Badge */}
20 <div className="flex justify-start mb-8">
21 <div className="flex items-center gap-2 bg-[#1A1A1A] border border-[#2A2A2A] px-4 py-2 rounded-xl">
22 <Menu className="w-4 h-4 text-white" />
23 <span className="text-white text-sm font-medium">Pricing</span>
24 </div>
25 </div>
26
27 {/* Header Section */}
28 <div className="flex justify-between items-start mb-16">
29 <h2 className="text-6xl font-bold text-white max-w-md">
30 Our pricing plans
31 </h2>
32
33 <div className="flex flex-col items-end gap-6">
34 {/* Toggle */}
35 <div className="flex items-center gap-2 bg-[#1A1A1A] p-1 rounded-full">
36 <button
37 onClick={() => setBillingCycle("monthly")}
38 className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${billingCycle === "monthly"
39 ? "bg-[#2A2A2A] text-white"
40 : "text-gray-400"
41 }`}
42 >
43 Monthly
44 </button>
45 <button
46 onClick={() => setBillingCycle("yearly")}
47 className={`px-6 py-2 rounded-full text-sm font-medium transition-colors ${billingCycle === "yearly"
48 ? "bg-[#2A2A2A] text-white"
49 : "text-gray-400"
50 }`}
51 >
52 Yearly
53 </button>
54 </div>
55
56 {/* Description */}
57 <p className="text-gray-400 text-sm max-w-md text-right">
58 Here are three different plans tailored to Beginner,
59 Professional, and Enterprise levels for your AI solution:
60 </p>
61 </div>
62 </div>
63
64 {/* Pricing Cards */}
65 <div className="grid md:grid-cols-3 gap-6 mb-8">
66 {/* Beginner Plan */}
67 <div className="bg-[#0F0F0F] border border-[#2A2A2A] rounded-2xl p-8">
68 {/* Icon */}
69 <div className="w-12 h-12 bg-[#1A1A1A] border border-[#2A2A2A] rounded-xl flex items-center justify-center mb-6">
70 <Package className="w-6 h-6 text-white" />
71 </div>
72
73 {/* Price */}
74 <div className="mb-6">
75 <span className="text-5xl font-bold text-white">$29</span>
76 <span className="text-gray-500 text-sm ml-2">/ Per Month</span>
77 </div>
78
79 {/* Title & Description */}
80 <h3 className="text-2xl font-bold text-white mb-3">Beginner</h3>
81 <p className="text-gray-400 text-sm mb-8">
82 Perfect for small businesses and startups looking to explore AI capabilities.
83 </p>
84
85 {/* Button */}
86 <button className="w-full bg-transparent hover:bg-[#1A1A1A] border border-[#2A2A2A] text-white font-medium py-3 px-6 rounded-xl transition-colors flex items-center justify-center gap-2 group mb-8">
87 Get Started
88 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
89 </button>
90
91 {/* Features */}
92 <div className="space-y-1 mb-4">
93 <p className="text-sm text-gray-500 font-medium">Features:</p>
94 </div>
95
96 <ul className="space-y-3">
97 <li className="flex items-center gap-3">
98 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
99 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
100 </div>
101 <span className="text-gray-300 text-sm">Basic Predictive Analytics</span>
102 </li>
103 <li className="flex items-center gap-3">
104 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
105 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
106 </div>
107 <span className="text-gray-300 text-sm">Automated Workflows</span>
108 </li>
109 <li className="flex items-center gap-3">
110 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
111 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
112 </div>
113 <span className="text-gray-300 text-sm">Standard Natural Language Processing</span>
114 </li>
115 <li className="flex items-center gap-3">
116 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
117 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
118 </div>
119 <span className="text-gray-300 text-sm">Real-Time Data Analysis</span>
120 </li>
121 <li className="flex items-center gap-3">
122 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
123 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
124 </div>
125 <span className="text-gray-300 text-sm">Basic Customizable Dashboards</span>
126 </li>
127 <li className="flex items-center gap-3">
128 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
129 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
130 </div>
131 <span className="text-gray-300 text-sm">Email Support</span>
132 </li>
133 </ul>
134 </div>
135
136 {/* Professional Plan - Featured */}
137 <div className="bg-[#0F0F0F] border-2 border-transparent bg-gradient-to-br from-purple-500/20 via-transparent to-transparent rounded-2xl p-[2px] relative">
138 <div className="bg-[#0F0F0F] rounded-2xl p-8 h-full">
139 {/* Icon */}
140 <div className="w-12 h-12 bg-gradient-to-br from-purple-500 to-violet-600 rounded-xl flex items-center justify-center mb-6">
141 <UserCheck className="w-6 h-6 text-white" />
142 </div>
143
144 {/* Price */}
145 <div className="mb-6">
146 <span className="text-5xl font-bold text-white">$59</span>
147 <span className="text-gray-500 text-sm ml-2">/ Per Month</span>
148 </div>
149
150 {/* Title & Description */}
151 <h3 className="text-2xl font-bold text-white mb-3">Professional</h3>
152 <p className="text-gray-400 text-sm mb-8">
153 Ideal for growing businesses that need more advanced tools to enhance productivity.
154 </p>
155
156 {/* Button */}
157 <button className="w-full bg-white hover:bg-gray-100 text-black font-medium py-3 px-6 rounded-xl transition-colors flex items-center justify-center gap-2 group mb-8">
158 Get Started
159 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
160 </button>
161
162 {/* Features */}
163 <div className="space-y-1 mb-4">
164 <p className="text-sm text-gray-500 font-medium">Features:</p>
165 </div>
166
167 <ul className="space-y-3">
168 <li className="flex items-center gap-3">
169 <div className="w-5 h-5 rounded-full bg-white flex items-center justify-center flex-shrink-0">
170 <Check className="w-3 h-3 text-black stroke-[3]" />
171 </div>
172 <span className="text-white text-sm">Advanced Predictive Analytics</span>
173 </li>
174 <li className="flex items-center gap-3">
175 <div className="w-5 h-5 rounded-full bg-white flex items-center justify-center flex-shrink-0">
176 <Check className="w-3 h-3 text-black stroke-[3]" />
177 </div>
178 <span className="text-white text-sm">Automated Workflows</span>
179 </li>
180 <li className="flex items-center gap-3">
181 <div className="w-5 h-5 rounded-full bg-white flex items-center justify-center flex-shrink-0">
182 <Check className="w-3 h-3 text-black stroke-[3]" />
183 </div>
184 <span className="text-white text-sm">Enhanced Natural Language Processing</span>
185 </li>
186 <li className="flex items-center gap-3">
187 <div className="w-5 h-5 rounded-full bg-white flex items-center justify-center flex-shrink-0">
188 <Check className="w-3 h-3 text-black stroke-[3]" />
189 </div>
190 <span className="text-white text-sm">Real-Time Data Analysis</span>
191 </li>
192 <li className="flex items-center gap-3">
193 <div className="w-5 h-5 rounded-full bg-white flex items-center justify-center flex-shrink-0">
194 <Check className="w-3 h-3 text-black stroke-[3]" />
195 </div>
196 <span className="text-white text-sm">Advanced Customizable Dashboards</span>
197 </li>
198 <li className="flex items-center gap-3">
199 <div className="w-5 h-5 rounded-full bg-white flex items-center justify-center flex-shrink-0">
200 <Check className="w-3 h-3 text-black stroke-[3]" />
201 </div>
202 <span className="text-white text-sm">Priority Email Support</span>
203 </li>
204 </ul>
205 </div>
206 </div>
207
208 {/* Enterprise Plan */}
209 <div className="bg-[#0F0F0F] border border-[#2A2A2A] rounded-2xl p-8">
210 {/* Icon */}
211 <div className="w-12 h-12 bg-[#1A1A1A] border border-[#2A2A2A] rounded-xl flex items-center justify-center mb-6">
212 <Building2 className="w-6 h-6 text-white" />
213 </div>
214
215 {/* Price */}
216 <div className="mb-6">
217 <span className="text-5xl font-bold text-white">$89</span>
218 <span className="text-gray-500 text-sm ml-2">/ Per Month</span>
219 </div>
220
221 {/* Title & Description */}
222 <h3 className="text-2xl font-bold text-white mb-3">Enterprise</h3>
223 <p className="text-gray-400 text-sm mb-8">
224 Designed for enterprises requiring comprehensive AI solutions.
225 </p>
226
227 {/* Button */}
228 <button className="w-full bg-transparent hover:bg-[#1A1A1A] border border-[#2A2A2A] text-white font-medium py-3 px-6 rounded-xl transition-colors flex items-center justify-center gap-2 group mb-8">
229 Get Started
230 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
231 </button>
232
233 {/* Features */}
234 <div className="space-y-1 mb-4">
235 <p className="text-sm text-gray-500 font-medium">Features:</p>
236 </div>
237
238 <ul className="space-y-3">
239 <li className="flex items-center gap-3">
240 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
241 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
242 </div>
243 <span className="text-gray-300 text-sm">Comprehensive Predictive Analytics</span>
244 </li>
245 <li className="flex items-center gap-3">
246 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
247 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
248 </div>
249 <span className="text-gray-300 text-sm">Automated Workflows</span>
250 </li>
251 <li className="flex items-center gap-3">
252 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
253 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
254 </div>
255 <span className="text-gray-300 text-sm">Premium Natural Language Processing</span>
256 </li>
257 <li className="flex items-center gap-3">
258 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
259 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
260 </div>
261 <span className="text-gray-300 text-sm">Real-Time Data Analysis</span>
262 </li>
263 <li className="flex items-center gap-3">
264 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
265 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
266 </div>
267 <span className="text-gray-300 text-sm">Fully Customizable Dashboards</span>
268 </li>
269 <li className="flex items-center gap-3">
270 <div className="w-5 h-5 rounded-full border-2 border-[#2A2A2A] flex items-center justify-center flex-shrink-0">
271 <Check className="w-3 h-3 text-gray-400 stroke-[3]" />
272 </div>
273 <span className="text-gray-300 text-sm">24/7 Dedicated Support</span>
274 </li>
275 </ul>
276 </div>
277 </div>
278 </div>
279 </div>
280 );
281};
282
