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

refactor: enhance layout of PricingSection by restructuring button group and adding promotional text for yearly subscription

Browse Source
This commit is contained in:
Usman Baig
2026-01-31 19:51:05 +01:00
parent c78874ea88
commit 181837f5a4
1 changed files with 26 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
components/PricingSection.tsx
View File

@@ -245,10 +245,14 @@ export default function PricingSection() {
/> />
</div> </div>
<div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex shrink-0"> <div className="flex flex-col items-end gap-2 shrink-0">
<span className="text-[10px] text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
Get 1 month free with yearly
</span>
<div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex">
<button <button
onClick={() => setIsYearly(false)} onClick={() => setIsYearly(false)}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${ className={`min-w-[88px] px-4 py-2 rounded-md text-sm font-medium transition-all ${
!isYearly !isYearly
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white' : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
@@ -258,19 +262,17 @@ export default function PricingSection() {
</button> </button>
<button <button
onClick={() => setIsYearly(true)} onClick={() => setIsYearly(true)}
className={`px-4 py-2 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${ className={`min-w-[88px] px-4 py-2 rounded-md text-sm font-medium transition-all ${
isYearly isYearly
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
: 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white' : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
}`} }`}
> >
Yearly Yearly
<span className="text-[10px] bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded-full font-bold uppercase tracking-wide">
1 month free
</span>
</button> </button>
</div> </div>
</div> </div>
</div>
{/* Pricing Grid */} {/* Pricing Grid */}
<div className="grid md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800"> <div className="grid md:grid-cols-4 divide-y md:divide-y-0 md:divide-x divide-neutral-200 dark:divide-neutral-800">