Installation
npm install lucide-reactSource Code
mental-pricing.tsx
1"use client";
2
3import { Check } from "lucide-react";
4
5export const MentalPricing = () => {
6 return (
7 <div className="min-h-screen bg-[#F7F7F7] py-20 px-6">
8 <div className="max-w-6xl mx-auto">
9 {/* Pricing Badge */}
10 <div className="flex justify-center mb-6">
11 <span className="bg-[#E5EDCA] text-green-700 text-sm font-medium px-4 py-2 rounded-3xl">
12 Pricing
13 </span>
14 </div>
15
16 {/* Header */}
17 <div className="text-center mb-16">
18 <h2 className="text-5xl font-bold text-gray-600">
19 Simple pricing for mentals
20 </h2>
21 </div>
22
23 {/* Pricing Cards */}
24 <div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
25 {/* Starter Plan */}
26 <div className="bg-white rounded-2xl">
27 <div className="bg-muted/50 rounded-2xl p-4 m-2 border border-gray-200/50">
28 <h3 className="text-3xl font-bold text-gray-900 mb-4">Starter</h3>
29
30 <p className="text-gray-600 text-[15px] mb-8">
31 Perfect for anyone getting started with thier mental journey.
32 </p>
33
34 <div className="mb-8">
35 <span className="text-6xl font-bold text-gray-900">Free</span>
36 </div>
37
38 <button className="w-full bg-white hover:bg-gray-50 border-2 border-gray-300 text-gray-900 font-medium py-4 rounded-xl transition-colors">
39 Get Started
40 </button>
41 </div>
42
43 <div className="p-5">
44 <div className="space-y-1 mb-2">
45 <p className="text-sm text-gray-500 font-medium">Basic Plan Include</p>
46 </div>
47
48 <ul className="space-y-4">
49 <li className="flex items-start gap-3">
50 <div className="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
51 <Check className="w-4 h-4 text-gray-600 stroke-[3]" />
52 </div>
53 <span className="text-gray-700 text-[15px]">Unlimited budgets</span>
54 </li>
55 <li className="flex items-start gap-3">
56 <div className="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
57 <Check className="w-4 h-4 text-gray-600 stroke-[3]" />
58 </div>
59 <span className="text-gray-700 text-[15px]">Smart insights & analytics</span>
60 </li>
61 <li className="flex items-start gap-3">
62 <div className="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
63 <Check className="w-4 h-4 text-gray-600 stroke-[3]" />
64 </div>
65 <span className="text-gray-700 text-[15px]">Export data (CSV)</span>
66 </li>
67 <li className="flex items-start gap-3">
68 <div className="w-6 h-6 rounded-full bg-gray-300 flex items-center justify-center flex-shrink-0 mt-0.5">
69 <Check className="w-4 h-4 text-gray-600 stroke-[3]" />
70 </div>
71 <span className="text-gray-700 text-[15px]">Priority email & chat support</span>
72 </li>
73 <li className="flex items-start gap-3">
74 <div className="w-6 h-6 rounded-full bg-black flex items-center justify-center flex-shrink-0 mt-0.5">
75 <Check className="w-4 h-4 text-white stroke-[3]" />
76 </div>
77 <span className="text-gray-900 text-[15px] font-medium">Dark mode</span>
78 </li>
79 </ul>
80 </div>
81 </div>
82
83 {/* Premium Plan */}
84 <div className="bg-white rounded-2xl">
85 <div className="bg-muted/50 rounded-2xl p-4 m-2 border border-gray-200/50">
86 <h3 className="text-3xl font-bold text-gray-900 mb-4">Premium</h3>
87
88 <p className="text-gray-600 text-[15px] mb-8">
89 Advanced tools for serious budgeters. Everything in Starter, plus
90 </p>
91
92 <div className="mb-8">
93 <span className="text-6xl font-bold text-gray-900">$299</span>
94 <span className="text-gray-600 text-lg">/month</span>
95 </div>
96
97 <button className="w-full bg-[#B1EB73] hover:bg-[#9dd65a] text-gray-700 font-medium py-4 rounded-xl transition-colors">
98 Get Started
99 </button>
100 </div>
101
102 <div className="p-5">
103 <div className="space-y-1 mb-2">
104 <p className="text-sm text-gray-500 font-medium">Pro Plan Include</p>
105 </div>
106
107 <ul className="space-y-4">
108 <li className="flex items-start gap-3">
109 <div className="w-6 h-6 rounded-full bg-black flex items-center justify-center flex-shrink-0 mt-0.5">
110 <Check className="w-4 h-4 text-white stroke-[3]" />
111 </div>
112 <span className="text-gray-900 text-[15px] font-medium">Unlimited budgets</span>
113 </li>
114 <li className="flex items-start gap-3">
115 <div className="w-6 h-6 rounded-full bg-black flex items-center justify-center flex-shrink-0 mt-0.5">
116 <Check className="w-4 h-4 text-white stroke-[3]" />
117 </div>
118 <span className="text-gray-900 text-[15px] font-medium">Smart insights & analytics</span>
119 </li>
120 <li className="flex items-start gap-3">
121 <div className="w-6 h-6 rounded-full bg-black flex items-center justify-center flex-shrink-0 mt-0.5">
122 <Check className="w-4 h-4 text-white stroke-[3]" />
123 </div>
124 <span className="text-gray-900 text-[15px] font-medium">Export data (CSV)</span>
125 </li>
126 <li className="flex items-start gap-3">
127 <div className="w-6 h-6 rounded-full bg-black flex items-center justify-center flex-shrink-0 mt-0.5">
128 <Check className="w-4 h-4 text-white stroke-[3]" />
129 </div>
130 <span className="text-gray-900 text-[15px] font-medium">Priority email & chat support</span>
131 </li>
132 <li className="flex items-start gap-3">
133 <div className="w-6 h-6 rounded-full bg-black flex items-center justify-center flex-shrink-0 mt-0.5">
134 <Check className="w-4 h-4 text-white stroke-[3]" />
135 </div>
136 <span className="text-gray-900 text-[15px] font-medium">Dark mode</span>
137 </li>
138 </ul>
139 </div>
140 </div>
141 </div>
142 </div>
143 </div>
144 );
145};
146
