Installation
npm install lucide-reactSource Code
simplified-pricing.tsx
1"use client";
2
3import { Check, Info } from "lucide-react";
4
5export const SimplifiedPricing = () => {
6 return (
7 <div className="min-h-screen bg-[#f8f8f850] py-20 px-6">
8 {/* Header */}
9 <div className="text-center mb-16">
10 <h1 className="text-5xl font-bold text-gray-600 mb-3">Simplified pricing</h1>
11 <p className="text-gray-600 text-lg">No hidden fees, just clear plans</p>
12 </div>
13
14 {/* Pricing Cards */}
15 <div className="max-w-7xl mx-auto grid lg:grid-cols-3 gap-6">
16 {/* Standard Plan */}
17 <div className="bg-white rounded-3xl p-8 border border-gray-200">
18 <h3 className="text-2xl font-semibold text-gray-900 mb-1">Standard</h3>
19
20 <div className="flex items-baseline gap-1 mb-6 mt-6">
21 <span className="text-5xl font-bold text-gray-900">$9</span>
22 <span className="text-gray-600 text-sm uppercase tracking-wide">per month</span>
23 </div>
24
25 <p className="text-gray-600 text-sm mb-8">
26 Suited for ideas, entrepreneurs and small enterprises.
27 </p>
28
29 <button className="w-full bg-[#2D2D39] hover:bg-[#1f1f27] text-white font-medium py-4 rounded-full transition-colors mb-10">
30 Get Standard
31 </button>
32
33 <div className="space-y-1 mb-4">
34 <p className="text-sm text-gray-500 mb-4">Starter plan includes:</p>
35 </div>
36
37 <ul className="space-y-4">
38 <li className="flex items-start gap-3">
39 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
40 <span className="text-gray-700 text-[15px]">10 GB storage</span>
41 </li>
42 <li className="flex items-start gap-3">
43 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
44 <span className="text-gray-700 text-[15px]">1 user account</span>
45 </li>
46 <li className="flex items-start gap-3">
47 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
48 <span className="text-gray-700 text-[15px]">Email support</span>
49 </li>
50 <li className="flex items-start gap-3">
51 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
52 <span className="text-gray-700 text-[15px] flex items-center gap-2">
53 Integration with third-party apps
54 <Info className="w-4 h-4 text-gray-400" />
55 </span>
56 </li>
57 <li className="flex items-start gap-3">
58 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
59 <span className="text-gray-700 text-[15px]">Basic analytics and reporting</span>
60 </li>
61 </ul>
62 </div>
63
64 {/* Professional Plan (Popular) */}
65 <div className="bg-[#F3F3F5] rounded-3xl p-8 border border-gray-200 relative">
66 {/* Popular Badge */}
67 <div className="absolute -top-3 left-1/2 -translate-x-1/2">
68 <span className="bg-[#6366F1] text-white px-4 py-1.5 rounded-full text-sm font-medium flex items-center gap-1.5">
69 <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
70 <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
71 </svg>
72 Popular
73 </span>
74 </div>
75
76 <h3 className="text-2xl font-semibold text-gray-900 mb-1">Professional</h3>
77
78 <div className="flex items-baseline gap-1 mb-6 mt-6">
79 <span className="text-5xl font-bold text-gray-900">$29</span>
80 <span className="text-gray-600 text-sm uppercase tracking-wide">per month</span>
81 </div>
82
83 <p className="text-gray-600 text-sm mb-8">
84 Suited for mid-sized to large businesses, foundations and teams.
85 </p>
86
87 <button className="w-full bg-[#2D2D39] hover:bg-[#1f1f27] text-white font-medium py-4 rounded-full transition-colors mb-10">
88 Get Professional
89 </button>
90
91 <div className="space-y-1 mb-4">
92 <p className="text-sm text-gray-500 mb-4">Professional plan includes:</p>
93 </div>
94
95 <ul className="space-y-4">
96 <li className="flex items-start gap-3">
97 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
98 <span className="text-gray-700 text-[15px]">100 GB storage</span>
99 </li>
100 <li className="flex items-start gap-3">
101 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
102 <span className="text-gray-700 text-[15px]">5 user accounts</span>
103 </li>
104 <li className="flex items-start gap-3">
105 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
106 <span className="text-gray-700 text-[15px]">Priority email support</span>
107 </li>
108 <li className="flex items-start gap-3">
109 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
110 <span className="text-gray-700 text-[15px] flex items-center gap-2">
111 Integration with third-party apps
112 <Info className="w-4 h-4 text-gray-400" />
113 </span>
114 </li>
115 <li className="flex items-start gap-3">
116 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
117 <span className="text-gray-700 text-[15px]">Advanced analytics and reporting</span>
118 </li>
119 </ul>
120 </div>
121
122 {/* Enterprise Plan */}
123 <div className="bg-white rounded-3xl p-8 border border-gray-200">
124 <h3 className="text-2xl font-semibold text-gray-900 mb-1">Enterprise</h3>
125
126 <div className="flex items-baseline gap-1 mb-2 mt-6">
127 <span className="text-[40px] font-bold text-gray-900">Let's talk</span>
128 </div>
129
130 <p className="text-gray-600 text-sm mb-8">
131 Personalized for brands seeking unique, versatile and flexible solutions.
132 </p>
133
134 <button className="w-full bg-white hover:bg-gray-50 border-2 border-gray-900 text-gray-900 font-medium py-4 rounded-full transition-colors mb-10">
135 Contact Sales
136 </button>
137
138 <div className="space-y-1 mb-4">
139 <p className="text-sm text-gray-500 mb-4">Enterprise plan includes:</p>
140 </div>
141
142 <ul className="space-y-4">
143 <li className="flex items-start gap-3">
144 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
145 <span className="text-gray-700 text-[15px]">Unlimited storage</span>
146 </li>
147 <li className="flex items-start gap-3">
148 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
149 <span className="text-gray-700 text-[15px]">Unlimited user accounts</span>
150 </li>
151 <li className="flex items-start gap-3">
152 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
153 <span className="text-gray-700 text-[15px]">Dedicated account manager</span>
154 </li>
155 <li className="flex items-start gap-3">
156 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
157 <span className="text-gray-700 text-[15px] flex items-center gap-2">
158 Custom integrations and API access
159 <Info className="w-4 h-4 text-gray-400" />
160 </span>
161 </li>
162 <li className="flex items-start gap-3">
163 <Check className="w-5 h-5 text-gray-900 mt-0.5 flex-shrink-0 stroke-[2.5]" />
164 <span className="text-gray-700 text-[15px]">Custom analytics and reporting</span>
165 </li>
166 </ul>
167 </div>
168 </div>
169 </div>
170 );
171};
172
