Skip to content

Commit a6c7ff1

Browse files
SaifallakSaifallak
committed
feat: pricing — add 5 official plans with agents/numbers pills + Custom plan with WhatsApp & Calendly CTAs for both tabs
1 parent e608550 commit a6c7ff1

2 files changed

Lines changed: 363 additions & 162 deletions

File tree

‎src/components/Pricing.jsx‎

Lines changed: 140 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
import React, { useState } from "react";
2-
import { Check, Info } from "lucide-react";
2+
import { Check, Phone, Users } from "lucide-react";
33

44
export default function Pricing({ lang, t, plansData }) {
5-
const [activeTab, setActiveTab] = useState("official"); // 'official' or 'unofficial'
5+
const [activeTab, setActiveTab] = useState("official");
66

77
if (!plansData) return null;
88
const plans = activeTab === "official" ? plansData.officialPlans : plansData.unofficialPlans;
9+
const isAr = lang === "ar";
910

1011
return (
1112
<section id="pricing" className="py-20 bg-gray-50/60 dark:bg-gray-950/20 transition-theme">
1213
<div className="mx-auto max-w-7xl px-6 lg:px-12">
13-
14+
1415
{/* Title */}
1516
<div className="text-center max-w-3xl mx-auto mb-12">
1617
<h2 className="text-3xl sm:text-4xl font-black font-alexandria text-gray-900 dark:text-white mb-4">
@@ -21,7 +22,7 @@ export default function Pricing({ lang, t, plansData }) {
2122
</p>
2223
</div>
2324

24-
{/* Dynamic Selector Tabs */}
25+
{/* Tab Selector */}
2526
<div className="flex justify-center mb-16">
2627
<div className="inline-flex rounded-2xl bg-gray-200/60 dark:bg-gray-900/60 p-1.5 border border-gray-250 dark:border-gray-800">
2728
<button
@@ -47,32 +48,35 @@ export default function Pricing({ lang, t, plansData }) {
4748
</div>
4849
</div>
4950

50-
{/* Pricing Cards Grid */}
51-
<div className={`grid gap-8 justify-center mx-auto items-stretch ${
52-
activeTab === "official" ? "max-w-xl grid-cols-1" : "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 max-w-7xl"
53-
}`}>
51+
{/* Pricing Cards Grid — always scrollable row on mobile, auto cols on desktop */}
52+
<div className="grid gap-5 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 items-stretch">
5453
{plans.map((plan, index) => {
5554
const isHighlighted = plan.highlight;
55+
const isCustom = plan.price === "custom";
5656
const planName = plan.name[lang];
5757
const planBadge = plan.badge ? plan.badge[lang] : null;
5858
const planPeriod = plan.period[lang];
5959
const planFeatures = plan.features[lang];
6060
const planCta = plan.cta[lang];
61-
61+
const planNumbers = plan.numbers ? plan.numbers[lang] : null;
62+
const planAgents = plan.agents ? plan.agents[lang] : null;
63+
6264
return (
6365
<div
6466
key={index}
65-
className={`rounded-3xl p-8 flex flex-col justify-between transition-all duration-300 relative ${
67+
className={`rounded-3xl p-6 flex flex-col justify-between transition-all duration-300 relative ${
6668
isHighlighted
67-
? `bg-white dark:bg-gray-900 border-2 border-brand-purple dark:border-brand-violet shadow-2xl scale-[1.03] z-10`
68-
: "bg-white/50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 shadow-lg hover:shadow-xl hover:border-gray-300 dark:hover:border-gray-700"
69+
? `bg-white dark:bg-gray-900 border-2 border-brand-purple dark:border-brand-violet shadow-2xl scale-[1.02] z-10`
70+
: isCustom
71+
? "bg-gradient-to-br from-gray-900 to-gray-800 dark:from-gray-950 dark:to-gray-900 border border-gray-700 dark:border-gray-800 shadow-lg"
72+
: "bg-white/50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-800 shadow-md hover:shadow-xl hover:border-gray-300 dark:hover:border-gray-700"
6973
}`}
7074
>
71-
{/* Popular Badge */}
75+
{/* Badge */}
7276
{planBadge && (
7377
<span className={`absolute -top-3.5 left-1/2 -translate-x-1/2 rounded-full px-4 py-1 text-[10px] font-black font-alexandria tracking-wide text-white uppercase bg-gradient-to-r ${
74-
activeTab === "official"
75-
? "from-emerald-500 to-teal-500 shadow-emerald-500/20"
78+
activeTab === "official"
79+
? "from-emerald-500 to-teal-500 shadow-emerald-500/20"
7680
: "from-brand-purple to-brand-violet shadow-brand-purple/20"
7781
} shadow-md`}>
7882
{planBadge}
@@ -81,74 +85,150 @@ export default function Pricing({ lang, t, plansData }) {
8185

8286
<div>
8387
{/* Plan Name */}
84-
<h3 className="text-xl font-black font-alexandria text-gray-900 dark:text-white mb-4 text-center">
88+
<h3 className={`text-base font-black font-outfit tracking-widest mb-4 text-center uppercase ${
89+
isCustom ? "text-white" : "text-gray-900 dark:text-white"
90+
}`}>
8591
{planName}
8692
</h3>
8793

88-
{/* Price */}
89-
<div className="text-center mb-6">
90-
{plan.originalPrice && (
91-
<span className="text-sm font-semibold font-outfit text-gray-400 line-through block mb-1">
92-
${plan.originalPrice}
93-
</span>
94-
)}
95-
<div className="flex justify-center items-baseline gap-1">
96-
<span className="text-4xl sm:text-5xl font-black font-outfit text-gray-950 dark:text-white">
97-
${plan.price}
98-
</span>
99-
<span className="text-xs font-semibold font-alexandria text-gray-500 dark:text-gray-400">
100-
{plan.price === "0" ? "" : planPeriod === "month" ? t.pricing.perMonth : t.pricing.perYear}
101-
</span>
94+
{/* Numbers & Agents Pills */}
95+
{(planNumbers || planAgents) && (
96+
<div className="flex flex-col gap-2 mb-5">
97+
{planNumbers && (
98+
<div className={`flex items-center gap-2 rounded-xl px-3 py-2 ${
99+
isCustom
100+
? "bg-white/10 text-white"
101+
: activeTab === "official"
102+
? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
103+
: "bg-brand-purple/10 text-brand-purple dark:text-brand-violet"
104+
}`}>
105+
<Phone className="h-3.5 w-3.5 shrink-0" />
106+
<span className="text-xs font-black font-alexandria">{planNumbers}</span>
107+
</div>
108+
)}
109+
{planAgents && (
110+
<div className={`flex items-center gap-2 rounded-xl px-3 py-2 ${
111+
isCustom
112+
? "bg-white/10 text-white"
113+
: activeTab === "official"
114+
? "bg-emerald-500/10 text-emerald-700 dark:text-emerald-400"
115+
: "bg-brand-purple/10 text-brand-purple dark:text-brand-violet"
116+
}`}>
117+
<Users className="h-3.5 w-3.5 shrink-0" />
118+
<span className="text-xs font-black font-alexandria">{planAgents}</span>
119+
</div>
120+
)}
102121
</div>
103-
{plan.price === "0" && (
104-
<span className="text-[10px] font-bold font-alexandria text-gray-400 block mt-1">
105-
{planPeriod}
106-
</span>
122+
)}
123+
124+
{/* Price */}
125+
<div className="text-center mb-5">
126+
{isCustom ? (
127+
<div className="flex flex-col items-center gap-1">
128+
<span className="text-3xl font-black font-outfit text-white">
129+
{isAr ? "سعر مخصص" : "Custom Price"}
130+
</span>
131+
<span className="text-xs text-gray-400 font-alexandria">
132+
{isAr ? "يناسب احتياجاتك" : "Tailored to your needs"}
133+
</span>
134+
</div>
135+
) : (
136+
<>
137+
{plan.originalPrice && (
138+
<span className="text-sm font-semibold font-outfit text-gray-400 line-through block mb-1">
139+
${plan.originalPrice}
140+
</span>
141+
)}
142+
<div className="flex justify-center items-baseline gap-1">
143+
<span className="text-4xl font-black font-outfit text-gray-950 dark:text-white">
144+
{plan.price === "0" ? isAr ? "مجاناً" : "Free" : `$${plan.price}`}
145+
</span>
146+
{plan.price !== "0" && (
147+
<span className="text-xs font-semibold font-alexandria text-gray-500 dark:text-gray-400">
148+
{planPeriod === "month" ? t.pricing.perMonth : t.pricing.perYear}
149+
</span>
150+
)}
151+
</div>
152+
{plan.price === "0" && (
153+
<span className="text-[10px] font-bold font-alexandria text-gray-400 block mt-1">
154+
{planPeriod}
155+
</span>
156+
)}
157+
</>
107158
)}
108159
</div>
109160

110-
<div className="h-px bg-gray-200/60 dark:bg-gray-800/80 mb-6" />
161+
<div className={`h-px mb-5 ${isCustom ? "bg-white/10" : "bg-gray-200/60 dark:bg-gray-800/80"}`} />
111162

112-
{/* Bullet points */}
113-
<ul className="space-y-4 mb-8">
163+
{/* Features */}
164+
<ul className="space-y-3 mb-6">
114165
{planFeatures.map((feature, idx) => (
115-
<li key={idx} className="flex items-start gap-3 text-xs sm:text-sm font-medium font-alexandria text-gray-700 dark:text-gray-300">
116-
<Check className={`h-5 w-5 shrink-0 mt-0.5 ${
117-
activeTab === "official" ? "text-emerald-500" : "text-brand-purple dark:text-brand-violet"
166+
<li key={idx} className={`flex items-start gap-2.5 text-xs font-medium font-alexandria ${
167+
isCustom ? "text-gray-300" : "text-gray-700 dark:text-gray-300"
168+
}`}>
169+
<Check className={`h-4 w-4 shrink-0 mt-0.5 ${
170+
isCustom
171+
? "text-gray-400"
172+
: activeTab === "official"
173+
? "text-emerald-500"
174+
: "text-brand-purple dark:text-brand-violet"
118175
}`} />
119176
<span>{feature}</span>
120177
</li>
121178
))}
122179
</ul>
123180
</div>
124181

125-
{/* CTA Button */}
126-
<a
127-
href={plan.link}
128-
target="_blank"
129-
rel="noopener noreferrer"
130-
className={`w-full block text-center rounded-xl font-bold font-alexandria text-sm py-4 shadow-md transition-all ${
131-
isHighlighted
132-
? activeTab === "official"
133-
? "bg-gradient-to-r from-emerald-600 to-teal-500 text-white shadow-emerald-500/25 hover:shadow-lg hover:shadow-emerald-500/35 hover:scale-[1.01]"
134-
: "bg-gradient-to-r from-brand-purple to-brand-violet text-white shadow-brand-purple/20 hover:shadow-lg hover:shadow-brand-purple/35 hover:scale-[1.01]"
135-
: "border border-gray-250 dark:border-gray-800 text-gray-700 dark:text-gray-300 bg-white/40 dark:bg-gray-950/40 hover:bg-gray-50 dark:hover:bg-gray-900"
136-
}`}
137-
>
138-
{planCta}
139-
</a>
182+
{/* CTA — Custom plan gets 2 buttons, others get 1 */}
183+
{isCustom ? (
184+
<div className="flex flex-col gap-3">
185+
<a
186+
href="https://wa.me/201101782890"
187+
target="_blank"
188+
rel="noopener noreferrer"
189+
className="w-full flex items-center justify-center gap-2 text-center rounded-xl font-bold font-alexandria text-xs py-3.5 bg-emerald-500 hover:bg-emerald-400 text-white shadow-md transition-all hover:scale-[1.02]"
190+
>
191+
<svg className="h-4 w-4 fill-current shrink-0" viewBox="0 0 24 24">
192+
<path d="M.057 24l1.687-6.163c-1.041-1.804-1.588-3.849-1.587-5.946C.06 5.348 5.397.01 12.008.01c3.202.001 6.212 1.246 8.477 3.514 2.266 2.268 3.507 5.28 3.505 8.484-.004 6.657-5.34 11.997-11.953 11.997-2.005-.001-3.973-.502-5.725-1.458L0 24zm6.59-4.846c1.6.95 3.188 1.449 4.625 1.45 5.516 0 10.005-4.486 10.008-10.007.001-2.673-1.036-5.186-2.92-7.071C16.471 1.64 13.968.602 11.3.602c-5.524 0-10.016 4.487-10.02 10.01 0 1.57.433 3.097 1.253 4.453l-.974 3.56 3.65-.959z"/>
193+
</svg>
194+
{isAr ? "واتساب مباشر" : "WhatsApp Us"}
195+
</a>
196+
<a
197+
href="https://calendly.com/aquadicsoftwares/30min"
198+
target="_blank"
199+
rel="noopener noreferrer"
200+
className="w-full flex items-center justify-center gap-2 text-center rounded-xl font-bold font-alexandria text-xs py-3.5 border border-white/20 text-white hover:bg-white/10 transition-all hover:scale-[1.02]"
201+
>
202+
📅 {isAr ? "احجز موعداً مجانياً" : "Book Free Call"}
203+
</a>
204+
</div>
205+
) : (
206+
<a
207+
href={plan.link}
208+
target="_blank"
209+
rel="noopener noreferrer"
210+
className={`w-full block text-center rounded-xl font-bold font-alexandria text-sm py-4 shadow-md transition-all ${
211+
isHighlighted
212+
? activeTab === "official"
213+
? "bg-gradient-to-r from-emerald-600 to-teal-500 text-white shadow-emerald-500/25 hover:shadow-lg hover:shadow-emerald-500/35 hover:scale-[1.01]"
214+
: "bg-gradient-to-r from-brand-purple to-brand-violet text-white shadow-brand-purple/20 hover:shadow-lg hover:shadow-brand-purple/35 hover:scale-[1.01]"
215+
: "border border-gray-250 dark:border-gray-800 text-gray-700 dark:text-gray-300 bg-white/40 dark:bg-gray-950/40 hover:bg-gray-50 dark:hover:bg-gray-900"
216+
}`}
217+
>
218+
{planCta}
219+
</a>
220+
)}
140221
</div>
141222
);
142223
})}
143224
</div>
144225

145-
{/* Pricing Details Note */}
226+
{/* Official note */}
146227
{activeTab === "official" && (
147228
<div className="mt-12 max-w-2xl mx-auto rounded-2xl bg-emerald-500/5 border border-emerald-500/20 p-5 text-center text-xs font-semibold font-alexandria text-emerald-800 dark:text-emerald-300 leading-relaxed">
148-
<Info className="h-5 w-5 text-emerald-600 dark:text-emerald-400 mx-auto mb-2" />
149-
{lang === "ar"
150-
? "💡 ملحوظة: المنافسون يعطونك موظفين اثنين فقط و 5,000 عميل كحد أقصى، مع عمولة إضافية على الرسائل. نحن نعطيك 10 موظفين وعملاء غير محدودين بسعر ثابت وعمولة 0% على رسائل Meta."
151-
: "💡 Note: Competitors limit you to 2 agents and 5,000 contacts max, plus charging markups on message costs. CloudWA gives you 10 agents, unlimited contacts, and 0% markups on official Meta rates."}
229+
💡 {isAr
230+
? "ملحوظة: المنافسون يعطونك موظفين اثنين فقط و 5,000 عميل كحد أقصى مع عمولة إضافية على الرسائل. نحن نعطيك أرقاماً وموظفين حسب احتياجك وعمولة 0% على رسائل Meta."
231+
: "Note: Competitors limit you to 2 agents and 5,000 contacts max, plus charge markups on messages. CloudWA scales with your team needs and charges 0% markups on official Meta rates."}
152232
</div>
153233
)}
154234

0 commit comments

Comments
 (0)