ciphera-net/pulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 15 Wiki Activity

refactor: update pricing display in PricingSection component to reflect yearly total and improve monthly breakdown comparison

Browse Source
This commit is contained in:
Usman Baig
2026-01-30 21:29:47 +01:00
parent 6f4180ae38
commit 0150762b7d
1 changed files with 7 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
components/PricingSection.tsx
View File

@@ -186,26 +186,21 @@ export default function PricingSection() {
isYearly ? ( isYearly ? (
// YEARLY VIEW // YEARLY VIEW
<div> <div>
{/* 1. Effective Monthly Price */} {/* 1. Big Price = Yearly Total */}
<div className="flex items-baseline gap-1"> <div className="flex items-baseline gap-1">
<span className="text-4xl font-bold text-neutral-900 dark:text-white"> <span className="text-4xl font-bold text-neutral-900 dark:text-white">
€{priceDetails.effectiveMonthly} €{priceDetails.yearlyTotal}
</span> </span>
<span className="text-neutral-500">/mo</span> <span className="text-neutral-500">/year</span>
</div> </div>
{/* 2. Yearly Total */} {/* 2. Subtext = Monthly Breakdown Comparison */}
<p className="text-sm text-neutral-500 mt-2 font-medium"> <div className="flex items-center gap-2 mt-2 text-sm font-medium">
Billed €{priceDetails.yearlyTotal} yearly
</p>
{/* 3. Comparison (Original -> Discounted) */}
<div className="flex items-center gap-2 mt-1 text-sm">
<span className="text-neutral-400 line-through decoration-neutral-400"> <span className="text-neutral-400 line-through decoration-neutral-400">
€{priceDetails.baseMonthly}/mo €{priceDetails.baseMonthly}/mo
</span> </span>
<span className="text-brand-orange font-medium"> <span className="text-brand-orange">
→ €{priceDetails.effectiveMonthly}/mo €{priceDetails.effectiveMonthly}/mo
</span> </span>
</div> </div>
</div> </div>