Installation
npm install lucide-reactSource Code
power-pricing.tsx
1"use client";
2
3import { Check, ArrowRight } from "lucide-react";
4
5export const PowerPricing = () => {
6 return (
7 <div className="min-h-screen bg-[#ffffff58] py-20 px-6">
8 <div className="max-w-7xl mx-auto">
9 {/* Header */}
10 <div className="text-center mb-16">
11 <p className="text-sm uppercase tracking-wider text-[#16776f] mb-4">
12 POWER PRICING
13 </p>
14 <h1 className="text-4xl font-semibold text-gray-600 mb-6 max-w-5xl mx-auto leading-tight">
15 Lorem ipsum dolor sit amet <br /> consectetur adipisicing
16 </h1>
17 <p className="text-gray-600 text-lg max-w-3xl mx-auto">
18 Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni quasi maxime saepe
19 </p>
20 </div>
21
22 {/* Pricing Cards */}
23 <div className="grid md:grid-cols-3 gap-6 max-w-6xl mx-auto">
24 {/* Starter Card */}
25 <div className="bg-white rounded-3xl border-2 border-gray-200/40 px-3 py-4 flex flex-col">
26 <div className="space-y-6 flex-1">
27 <div>
28 <div className="bg-gray-100 rounded-2xl p-6 mb-6 relative overflow-hidden">
29 <div className="absolute inset-0 opacity-20" style={{
30 backgroundImage: 'radial-gradient(circle, #c1c1c1 1px, transparent 1px)',
31 backgroundSize: '8px 8px'
32 }}></div>
33 <div className="relative">
34 <p className="text-xs uppercase text-gray-600 font-bold! mb-6">
35 STARTER
36 </p>
37 <span className="text-5xl font-semibold text-gray-600">$0</span>
38 <span className="text-gray-600 text-lg ml-2">/ month</span>
39 </div>
40 </div>
41
42 <p className="text-gray-700 mb-6 ml-2">
43 Ideal for startups and solopreneurs.
44 </p>
45 </div>
46
47 <button className="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-4 px-6 rounded-2xl transition-colors flex items-center justify-center gap-2 group">
48 Start Membership
49 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
50 </button>
51
52 <div className="px-2">
53 <ul className="space-y-3 mt-0">
54 <li className="flex items-start gap-3">
55 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
56 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
57 </div>
58 <span className="text-gray-700 text-sm">Instant, stunning websites</span>
59 </li>
60 <li className="flex items-start gap-3">
61 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
62 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
63 </div>
64 <span className="text-gray-700 text-sm">Core features for presence</span>
65 </li>
66 <li className="flex items-start gap-3">
67 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
68 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
69 </div>
70 <span className="text-gray-700 text-sm">Launch in minutes</span>
71 </li>
72 <li className="flex items-start gap-3">
73 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
74 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
75 </div>
76 <span className="text-gray-700 text-sm">Affordable innovation</span>
77 </li>
78 </ul>
79 </div>
80 </div>
81 </div>
82
83 {/* Professional Card - Featured */}
84 <div className="bg-white rounded-3xl border-4 border-[#6bcebebe] px-3 py-4 flex flex-col relative">
85 <div className="space-y-6 flex-1">
86 <div>
87 {/* Price with teal gradient and pattern */}
88 <div className="bg-gradient-to-br from-[#7DD3C0] to-[#5BC4B0] rounded-2xl p-6 mb-6 relative overflow-hidden">
89 <div className="absolute inset-0 opacity-20" style={{
90 backgroundImage: 'radial-gradient(circle, #f1f1f1 1px, transparent 1px)',
91 backgroundSize: '8px 8px'
92 }}></div>
93 <div className="relative">
94 <p className="text-xs uppercase text-gray-100 font-bold! mb-6">
95 PROFESSIONAL
96 </p>
97 <span className="text-5xl font-semibold text-gray-50">$199</span>
98 <span className="text-gray-50 text-lg ml-2">/ month</span>
99 </div>
100 </div>
101
102 <p className="text-gray-700 mb-6 ml-2">
103 For growing businesses and agencies.
104 </p>
105 </div>
106
107 <button className="w-full bg-[#1A4D4D] hover:bg-[#163D3D] text-white font-medium py-4 px-6 rounded-2xl transition-colors flex items-center justify-center gap-2 group">
108 Start Membership
109 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
110 </button>
111
112 <div className="px-2">
113 <ul className="space-y-3 mt-0">
114 <li className="flex items-start gap-3">
115 <div className="w-5 h-5 rounded-full bg-[#6BCEBD] flex items-center justify-center flex-shrink-0 mt-0.5">
116 <Check className="w-3 h-3 text-white stroke-[3]" />
117 </div>
118 <span className="text-gray-700 text-sm">Advanced AI for performance</span>
119 </li>
120 <li className="flex items-start gap-3">
121 <div className="w-5 h-5 rounded-full bg-[#6BCEBD] flex items-center justify-center flex-shrink-0 mt-0.5">
122 <Check className="w-3 h-3 text-white stroke-[3]" />
123 </div>
124 <span className="text-gray-700 text-sm">Scalable multi-page sites</span>
125 </li>
126 <li className="flex items-start gap-3">
127 <div className="w-5 h-5 rounded-full bg-[#6BCEBD] flex items-center justify-center flex-shrink-0 mt-0.5">
128 <Check className="w-3 h-3 text-white stroke-[3]" />
129 </div>
130 <span className="text-gray-700 text-sm">Seamless tool integration</span>
131 </li>
132 <li className="flex items-start gap-3">
133 <div className="w-5 h-5 rounded-full bg-[#6BCEBD] flex items-center justify-center flex-shrink-0 mt-0.5">
134 <Check className="w-3 h-3 text-white stroke-[3]" />
135 </div>
136 <span className="text-gray-700 text-sm">Priority expert support</span>
137 </li>
138 </ul>
139 </div>
140 </div>
141 </div>
142
143 {/* Enterprise Card */}
144 <div className="bg-white rounded-3xl border-2 border-gray-200/40 px-3 py-4 flex flex-col">
145 <div className="space-y-6 flex-1">
146 <div>
147 {/* Price with dotte d pattern */}
148 <div className="bg-gray-100 rounded-2xl p-6 mb-6 relative overflow-hidden">
149 <div className="absolute inset-0 opacity-20" style={{
150 backgroundImage: 'radial-gradient(circle, #c1c1c1 1px, transparent 1px)',
151 backgroundSize: '8px 8px'
152 }}></div>
153 <div className="relative">
154 <p className="text-xs uppercase text-gray-600 font-bold! mb-6">
155 ENTERPRISE
156 </p>
157 <span className="text-5xl font-semibold text-gray-600">$499</span>
158 <span className="text-gray-600 text-lg ml-2">/ month</span>
159 </div>
160 </div>
161
162 <p className="text-gray-700 mb-6 ml-2">
163 For large organizations and high traffic.
164 </p>
165 </div>
166
167 <button className="w-full bg-gray-200 hover:bg-gray-300 text-gray-700 font-medium py-4 px-6 rounded-2xl transition-colors flex items-center justify-center gap-2 group">
168 Start Membership
169 <ArrowRight className="w-4 h-4 group-hover:translate-x-1 transition-transform" />
170 </button>
171
172 <div className="px-2">
173 <ul className="space-y-3 mt-0">
174 <li className="flex items-start gap-3">
175 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
176 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
177 </div>
178 <span className="text-gray-700 text-sm">Custom AI solutions</span>
179 </li>
180 <li className="flex items-start gap-3">
181 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
182 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
183 </div>
184 <span className="text-gray-700 text-sm">Top-tier security</span>
185 </li>
186 <li className="flex items-start gap-3">
187 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
188 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
189 </div>
190 <span className="text-gray-700 text-sm">Dedicated success team</span>
191 </li>
192 <li className="flex items-start gap-3">
193 <div className="w-5 h-5 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0 mt-0.5">
194 <Check className="w-3 h-3 text-gray-600 stroke-[3]" />
195 </div>
196 <span className="text-gray-700 text-sm">Unrivaled performance</span>
197 </li>
198 </ul>
199 </div>
200 </div>
201 </div>
202 </div>
203 </div>
204 </div>
205 );
206};
207
