Skip to content

Commit b19fdb2

Browse files
Bharani0012Bharani0012
committed
Refactor PricingPage layout and styles for improved user experience
1 parent 312f66d commit b19fdb2

1 file changed

Lines changed: 135 additions & 105 deletions

File tree

‎src/frontend/src/pages/PricingPage/index.tsx‎

Lines changed: 135 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -200,118 +200,148 @@ export default function PricingPage() {
200200
};
201201

202202
return (
203-
<div className="min-h-screen bg-[#0f1217] px-4 py-14 text-white">
204-
<div className="mx-auto max-w-7xl">
205-
<div className="rounded-2xl border border-white/10 bg-[#0f1217] p-8">
206-
<div className="text-center">
207-
<h1 className="text-2xl font-semibold">Simple, Scalable Pricing</h1>
208-
<p className="mt-3 text-white/70">
209-
Choose the plan that matches your team size and scale with
210-
confidence.
211-
</p>
212-
</div>
213-
214-
<div className="mt-10 grid gap-6 md:grid-cols-3">
215-
{STATIC_PLANS.map((plan) => {
216-
const seats = seatsByPlan[plan.key];
217-
const total = seats * plan.pricePerSeat;
218-
219-
return (
220-
<div
221-
key={plan.key}
222-
className={`flex flex-col rounded-xl border p-6 ${
223-
selectedPlan === plan.key
224-
? "border-cyan-400/50 bg-[#11161d]"
225-
: "border-white/10 bg-[#0f1217]"
226-
}`}
227-
>
228-
<div className="text-sm text-white/60">{plan.name}</div>
229-
<div className="mt-2 text-3xl font-semibold">
230-
${plan.pricePerSeat}/seat/month
203+
<div className="w-full overflow-hidden">
204+
<div style={{
205+
transform: "scale(0.67)",
206+
transformOrigin: "top center",
207+
width: "100%",
208+
display: "flex",
209+
justifyContent: "center",
210+
}}
211+
>
212+
<div style={{ width: "149.25%" }}>
213+
<div>
214+
<div className="min-h-screen px-4 py-12 text-slate-900 overflow-hidden">
215+
<div className="mx-auto max-w-6xl">
216+
<div className="rounded-[28px] border border-slate-200 bg-white p-8 shadow-[0_24px_80px_rgba(15,23,42,0.08)] sm:p-10">
217+
<div className="text-center">
218+
<span className="inline-flex rounded-full border border-sky-200 bg-sky-50 px-3 py-1 text-xs font-medium uppercase tracking-[0.2em] text-sky-700">
219+
Pricing
220+
</span>
221+
<h1 className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 sm:text-4xl">
222+
Simple, scalable pricing
223+
</h1>
224+
<p className="mt-3 text-base text-slate-600 sm:text-lg">
225+
Choose the plan that matches your team size and move from
226+
onboarding to workspace with a consistent experience.
227+
</p>
231228
</div>
232229

233-
{plan.hasTrial && (
234-
<div className="mt-1 text-sm text-cyan-300">
235-
{plan.trialDays}-day free trial
236-
</div>
237-
)}
230+
<div className="mt-10 grid gap-6 md:grid-cols-3">
231+
{STATIC_PLANS.map((plan) => {
232+
const seats = seatsByPlan[plan.key];
233+
const total = seats * plan.pricePerSeat;
234+
235+
return (
236+
<div
237+
key={plan.key}
238+
className={`flex flex-col rounded-2xl border p-6 transition-all ${
239+
selectedPlan === plan.key
240+
? "border-sky-400 bg-sky-50/80 shadow-[0_18px_45px_rgba(14,165,233,0.12)]"
241+
: "border-slate-200 bg-white shadow-sm"
242+
}`}
243+
>
244+
<div className="text-sm font-medium uppercase tracking-[0.18em] text-slate-500">
245+
{plan.name}
246+
</div>
247+
<div className="mt-2 text-3xl font-semibold text-slate-900">
248+
${plan.pricePerSeat}/seat/month
249+
</div>
250+
251+
{plan.hasTrial && (
252+
<div className="mt-1 text-sm font-medium text-sky-700">
253+
{plan.trialDays}-day free trial
254+
</div>
255+
)}
256+
257+
<div className="mt-5 rounded-2xl border border-slate-200 bg-slate-50 p-4">
258+
<div className="text-xs uppercase tracking-[0.18em] text-slate-500">
259+
Seats
260+
</div>
261+
262+
<div className="mt-2 flex items-center gap-3">
263+
<button
264+
type="button"
265+
onClick={() => handleDecrement(plan.key)}
266+
className="h-9 w-9 rounded-xl border border-slate-200 bg-white text-lg text-slate-700 transition hover:border-sky-300 hover:text-sky-700"
267+
>
268+
-
269+
</button>
270+
271+
<span className="min-w-8 text-center text-xl font-semibold text-slate-900">
272+
{seats}
273+
</span>
274+
275+
<button
276+
type="button"
277+
onClick={() => handleIncrement(plan.key)}
278+
className="h-9 w-9 rounded-xl border border-slate-200 bg-white text-lg text-slate-700 transition hover:border-sky-300 hover:text-sky-700"
279+
>
280+
+
281+
</button>
282+
</div>
283+
284+
<div className="mt-3 text-sm text-slate-500">
285+
Estimated monthly total
286+
</div>
287+
<div className="text-2xl font-semibold text-slate-900">
288+
${total} USD
289+
</div>
290+
</div>
291+
292+
<ul className="mt-5 space-y-3 text-sm text-slate-600">
293+
{plan.features.map((feature) => (
294+
<li key={feature} className="flex items-center gap-2">
295+
<CheckIcon className="h-4 w-4 text-sky-600" />
296+
{feature}
297+
</li>
298+
))}
299+
</ul>
300+
301+
<button
302+
type="button"
303+
onClick={() => handleSelectPlan(plan)}
304+
className={`mt-6 rounded-xl px-4 py-3 text-sm font-semibold transition ${
305+
plan.key === "enterprise"
306+
? "border border-slate-200 bg-white text-slate-700 hover:border-sky-300 hover:text-sky-700"
307+
: "bg-slate-900 text-white hover:bg-slate-800"
308+
}`}
309+
>
310+
Select {plan.name}
311+
</button>
312+
</div>
313+
);
314+
})}
315+
</div>
238316

239-
<div className="mt-5 rounded-lg border border-white/10 bg-black/20 p-4">
240-
<div className="text-xs uppercase text-white/60">Seats</div>
241-
242-
<div className="mt-2 flex items-center gap-3">
243-
<button
244-
type="button"
245-
onClick={() => handleDecrement(plan.key)}
246-
className="h-8 w-8 rounded-md border border-white/20"
247-
>
248-
-
249-
</button>
250-
251-
<span className="text-xl font-semibold">{seats}</span>
252-
253-
<button
254-
type="button"
255-
onClick={() => handleIncrement(plan.key)}
256-
className="h-8 w-8 rounded-md border border-white/20"
257-
>
258-
+
259-
</button>
260-
</div>
261-
262-
<div className="mt-3 text-sm text-white/70">
263-
Estimated monthly total
264-
</div>
265-
<div className="text-2xl font-semibold text-cyan-200">
266-
${total} USD
267-
</div>
317+
<div className="mt-10 flex flex-wrap justify-center gap-3">
318+
<button
319+
type="button"
320+
onClick={() => {
321+
navigate("/flows?pricing_bypass=1");
322+
}}
323+
className="rounded-xl bg-slate-900 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-slate-800"
324+
>
325+
Go to flows
326+
</button>
327+
<button
328+
type="button"
329+
onClick={() => navigate("/organization")}
330+
className="rounded-xl border border-slate-200 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 transition hover:border-sky-300 hover:text-sky-700"
331+
>
332+
Back to organization
333+
</button>
268334
</div>
269335

270-
<ul className="mt-4 space-y-2 text-sm text-white/80">
271-
{plan.features.map((feature) => (
272-
<li key={feature} className="flex items-center gap-2">
273-
<CheckIcon className="h-4 w-4" />
274-
{feature}
275-
</li>
276-
))}
277-
</ul>
278-
279-
<button
280-
type="button"
281-
onClick={() => handleSelectPlan(plan)}
282-
className="mt-6 rounded-lg border border-cyan-300/40 px-4 py-2 text-sm"
283-
>
284-
Select {plan.name}
285-
</button>
336+
{showEnterpriseContactMessage && (
337+
<p className="mt-5 text-center text-sm font-medium text-sky-700">
338+
For Enterprise plans, please contact us.
339+
</p>
340+
)}
286341
</div>
287-
);
288-
})}
289-
</div>
290-
291-
<div className="mt-8 flex justify-center">
292-
<button
293-
type="button"
294-
onClick={() => {
295-
navigate("/flows?pricing_bypass=1");
296-
}}
297-
className="mr-3 rounded-lg border border-cyan-300/40 px-4 py-2 text-sm"
298-
>
299-
Go to flows
300-
</button>
301-
<button
302-
type="button"
303-
onClick={() => navigate("/organization")}
304-
className="rounded-lg border border-white/15 px-4 py-2 text-sm"
305-
>
306-
Back to organization
307-
</button>
342+
</div>
343+
</div>
308344
</div>
309-
310-
{showEnterpriseContactMessage && (
311-
<p className="mt-4 text-center text-sm text-cyan-300">
312-
For Enterprise plans, please contact us.
313-
</p>
314-
)}
315345
</div>
316346
</div>
317347
</div>

0 commit comments

Comments
 (0)