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

50
components/PricingSection.tsx
View File

@@ -245,30 +245,32 @@ 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">
<button <span className="text-[10px] text-neutral-500 dark:text-neutral-400 font-medium uppercase tracking-wide">
onClick={() => setIsYearly(false)} Get 1 month free with yearly
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${ </span>
!isYearly <div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex">
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' <button
: 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white' onClick={() => setIsYearly(false)}
}`} className={`min-w-[88px] px-4 py-2 rounded-md text-sm font-medium transition-all ${
> !isYearly
Monthly ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
</button> : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
<button }`}
onClick={() => setIsYearly(true)} >
className={`px-4 py-2 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${ Monthly
isYearly </button>
? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm' <button
: 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white' onClick={() => setIsYearly(true)}
}`} className={`min-w-[88px] px-4 py-2 rounded-md text-sm font-medium transition-all ${
> isYearly
Yearly ? 'bg-white dark:bg-neutral-700 text-neutral-900 dark:text-white shadow-sm'
<span className="text-[10px] bg-brand-orange/10 text-brand-orange px-1.5 py-0.5 rounded-full font-bold uppercase tracking-wide"> : 'text-neutral-500 hover:text-neutral-900 dark:hover:text-white'
1 month free }`}
</span> >
</button> Yearly
</button>
</div>
</div> </div>
</div> </div>