refactor: enhance layout and styling of PricingSection component; update header, controls, and pricing grid for improved user experience
This commit is contained in:
Usman Baig
@@ -121,149 +121,167 @@ export default function PricingSection() {
|
||||
|
||||
return (
|
||||
<section className="py-24 px-4 max-w-7xl mx-auto">
|
||||
<div className="text-center mb-16">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6">
|
||||
Traffic based plans that match your growth
|
||||
<div className="text-center mb-12">
|
||||
<h2 className="text-4xl md:text-5xl font-bold text-neutral-900 dark:text-white mb-6 tracking-tight">
|
||||
Transparent Pricing
|
||||
</h2>
|
||||
<p className="text-xl text-neutral-600 dark:text-neutral-400">
|
||||
Sign up for 30-day free trial. No credit card required.
|
||||
Scale with your traffic. No hidden fees.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Controls Container */}
|
||||
<div className="max-w-3xl mx-auto mb-20 bg-neutral-100 dark:bg-neutral-800/50 rounded-2xl p-8 border border-neutral-200 dark:border-neutral-800">
|
||||
{/* Unified Container */}
|
||||
<div className="max-w-7xl mx-auto border border-neutral-200 dark:border-neutral-800 rounded-3xl bg-white/50 dark:bg-neutral-900/50 backdrop-blur-xl shadow-sm overflow-hidden mb-20">
|
||||
|
||||
{/* Slider */}
|
||||
<div className="mb-12">
|
||||
<div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
|
||||
<span>10k</span>
|
||||
<span className="text-brand-orange font-bold text-lg">
|
||||
Up to {currentTraffic.label} monthly pageviews
|
||||
</span>
|
||||
<span>10M+</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={TRAFFIC_TIERS.length - 1}
|
||||
step="1"
|
||||
value={sliderIndex}
|
||||
onChange={(e) => setSliderIndex(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Toggle */}
|
||||
<div className="flex justify-center items-center gap-4">
|
||||
<span className={!isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>Monthly</span>
|
||||
<button
|
||||
onClick={() => setIsYearly(!isYearly)}
|
||||
className="relative w-14 h-8 bg-neutral-200 dark:bg-neutral-700 rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-brand-orange/50"
|
||||
>
|
||||
<div
|
||||
className={`absolute top-1 left-1 w-6 h-6 bg-white rounded-full shadow-sm transition-transform duration-200 ${
|
||||
isYearly ? 'translate-x-6 bg-brand-orange' : 'translate-x-0'
|
||||
}`}
|
||||
{/* Top Toolbar */}
|
||||
<div className="p-8 border-b border-neutral-200 dark:border-neutral-800 flex flex-col md:flex-row items-center justify-between gap-8 bg-neutral-50/50 dark:bg-neutral-900/50">
|
||||
<div className="w-full md:w-2/3">
|
||||
<div className="flex justify-between text-sm font-medium text-neutral-500 mb-4">
|
||||
<span>10k</span>
|
||||
<span className="text-brand-orange font-bold text-lg">
|
||||
Up to {currentTraffic.label} monthly pageviews
|
||||
</span>
|
||||
<span>10M+</span>
|
||||
</div>
|
||||
<input
|
||||
type="range"
|
||||
min="0"
|
||||
max={TRAFFIC_TIERS.length - 1}
|
||||
step="1"
|
||||
value={sliderIndex}
|
||||
onChange={(e) => setSliderIndex(parseInt(e.target.value))}
|
||||
className="w-full h-2 bg-neutral-200 rounded-lg appearance-none cursor-pointer dark:bg-neutral-700 accent-brand-orange"
|
||||
/>
|
||||
</button>
|
||||
<span className={isYearly ? 'text-neutral-900 dark:text-white font-medium' : 'text-neutral-500'}>
|
||||
Yearly <span className="text-xs text-brand-orange bg-brand-orange/10 px-2 py-0.5 rounded-full ml-1">1 month free</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="bg-neutral-200 dark:bg-neutral-800 p-1 rounded-lg flex shrink-0">
|
||||
<button
|
||||
onClick={() => setIsYearly(false)}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
|
||||
!isYearly
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
Monthly
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setIsYearly(true)}
|
||||
className={`px-4 py-2 rounded-md text-sm font-medium transition-all flex items-center gap-2 ${
|
||||
isYearly
|
||||
? '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'
|
||||
}`}
|
||||
>
|
||||
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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pricing Cards Grid */}
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{PLANS.map((plan) => {
|
||||
const priceDetails = getPriceDetails(plan.id)
|
||||
{/* 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">
|
||||
{PLANS.map((plan) => {
|
||||
const priceDetails = getPriceDetails(plan.id)
|
||||
const isTeam = plan.id === 'team'
|
||||
|
||||
return (
|
||||
<div key={plan.id} className="card-glass p-8 flex flex-col relative overflow-hidden">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-medium text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
|
||||
return (
|
||||
<div key={plan.id} className={`p-8 flex flex-col relative transition-colors ${isTeam ? 'bg-brand-orange/[0.02]' : 'hover:bg-neutral-50/50 dark:hover:bg-neutral-800/50'}`}>
|
||||
{isTeam && (
|
||||
<div className="absolute top-0 left-0 w-full h-1 bg-brand-orange" />
|
||||
)}
|
||||
|
||||
{priceDetails ? (
|
||||
isYearly ? (
|
||||
// YEARLY VIEW
|
||||
<div>
|
||||
{/* 1. Big Price = Yearly Total */}
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">{plan.name}</h3>
|
||||
<p className="text-sm text-neutral-500 min-h-[40px] mb-4">{plan.description}</p>
|
||||
|
||||
{priceDetails ? (
|
||||
isYearly ? (
|
||||
<div>
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
€{priceDetails.yearlyTotal}
|
||||
</span>
|
||||
<span className="text-neutral-500 font-medium">/year</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 mt-2 text-sm font-medium">
|
||||
<span className="text-neutral-400 line-through decoration-neutral-400">
|
||||
€{priceDetails.baseMonthly}/mo
|
||||
</span>
|
||||
<span className="text-brand-orange">
|
||||
€{priceDetails.effectiveMonthly}/mo
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
€{priceDetails.yearlyTotal}
|
||||
€{priceDetails.baseMonthly}
|
||||
</span>
|
||||
<span className="text-neutral-500">/year</span>
|
||||
<span className="text-neutral-500 font-medium">/mo</span>
|
||||
</div>
|
||||
|
||||
{/* 2. Subtext = Monthly Breakdown Comparison */}
|
||||
<div className="flex items-center gap-2 mt-2 text-sm font-medium">
|
||||
<span className="text-neutral-400 line-through decoration-neutral-400">
|
||||
€{priceDetails.baseMonthly}/mo
|
||||
</span>
|
||||
<span className="text-brand-orange">
|
||||
€{priceDetails.effectiveMonthly}/mo
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
// MONTHLY VIEW
|
||||
<div className="flex items-baseline gap-1">
|
||||
<span className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
€{priceDetails.baseMonthly}
|
||||
</span>
|
||||
<span className="text-neutral-500">/mo</span>
|
||||
<div className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
Custom
|
||||
</div>
|
||||
)
|
||||
) : (
|
||||
// CUSTOM VIEW
|
||||
<div className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
Custom
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button
|
||||
className={`w-full mb-8 ${
|
||||
isTeam
|
||||
? 'bg-brand-orange hover:bg-brand-orange/90 text-white shadow-lg shadow-brand-orange/20'
|
||||
: 'bg-neutral-900 dark:bg-white text-white dark:text-neutral-900 hover:bg-neutral-800 dark:hover:bg-neutral-100'
|
||||
}`}
|
||||
>
|
||||
Start free trial
|
||||
</Button>
|
||||
|
||||
<ul className="space-y-4 flex-grow">
|
||||
{plan.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<CheckCircleIcon className={`w-5 h-5 shrink-0 ${isTeam ? 'text-brand-orange' : 'text-neutral-400'}`} />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
<Button className="w-full mb-8 bg-brand-orange hover:bg-brand-orange/90 text-white">
|
||||
Start free trial
|
||||
</Button>
|
||||
|
||||
<ul className="space-y-4 flex-grow">
|
||||
{plan.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<CheckCircleIcon className="w-5 h-5 text-brand-orange shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
{/* Enterprise Section */}
|
||||
<div className="p-8 bg-neutral-50/50 dark:bg-neutral-900/50 flex flex-col">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-bold text-neutral-900 dark:text-white mb-2">Enterprise</h3>
|
||||
<p className="text-sm text-neutral-500 min-h-[40px] mb-4">For high volume sites and custom needs</p>
|
||||
<div className="text-4xl font-bold text-neutral-900 dark:text-white">
|
||||
Custom
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{/* Enterprise Card (Dark Style) */}
|
||||
<div className="p-8 rounded-2xl bg-neutral-900 text-white border border-neutral-800 flex flex-col shadow-2xl">
|
||||
<div className="mb-8">
|
||||
<h3 className="text-lg font-medium text-white mb-2">Enterprise</h3>
|
||||
<div className="text-4xl font-bold text-white">Custom</div>
|
||||
<p className="text-neutral-400 mt-2 text-sm">For high volume sites</p>
|
||||
<Button variant="outline" className="w-full mb-8 border-neutral-200 dark:border-neutral-700 hover:bg-neutral-100 dark:hover:bg-neutral-800">
|
||||
Contact us
|
||||
</Button>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Everything in Business',
|
||||
'10+ sites',
|
||||
'Unlimited team members',
|
||||
'SLA & Priority Support',
|
||||
'Managed Proxy',
|
||||
'Raw data export'
|
||||
].map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-600 dark:text-neutral-400">
|
||||
<CheckCircleIcon className="w-5 h-5 text-neutral-400 shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<Button variant="secondary" className="w-full mb-8 bg-white text-neutral-900 hover:bg-neutral-100">
|
||||
Contact us
|
||||
</Button>
|
||||
|
||||
<ul className="space-y-4">
|
||||
{[
|
||||
'Everything in Business',
|
||||
'10+ sites',
|
||||
'Unlimited team members',
|
||||
'SLA & Priority Support',
|
||||
'Managed Proxy',
|
||||
'Raw data export'
|
||||
].map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-3 text-sm text-neutral-300">
|
||||
<CheckCircleIcon className="w-5 h-5 text-white shrink-0" />
|
||||
<span>{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user