232 lines
7.4 KiB
TypeScript
232 lines
7.4 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Button, CheckCircleIcon } from '@ciphera-net/ui'
|
|
|
|
// 1. Define Plans with IDs and Site Limits
|
|
const PLANS = [
|
|
{
|
|
id: 'solo',
|
|
name: 'Solo',
|
|
description: 'For personal sites and freelancers',
|
|
features: [
|
|
'1 site',
|
|
'1 year data retention',
|
|
'Email reports',
|
|
'100% Data ownership'
|
|
]
|
|
},
|
|
{
|
|
id: 'team',
|
|
name: 'Team',
|
|
description: 'For startups and growing agencies',
|
|
features: [
|
|
'Up to 5 sites',
|
|
'3 years data retention',
|
|
'Team dashboard',
|
|
'Shared links'
|
|
]
|
|
},
|
|
{
|
|
id: 'business',
|
|
name: 'Business',
|
|
description: 'For large organizations',
|
|
features: [
|
|
'Up to 10 sites',
|
|
'Unlimited data retention',
|
|
'Priority support',
|
|
'Custom events'
|
|
]
|
|
}
|
|
]
|
|
|
|
// 2. Define Explicit Pricing per Tier (approx 20% cheaper than Plausible)
|
|
// Includes intermediate steps: 50k, 250k, 2.5M
|
|
const TRAFFIC_TIERS = [
|
|
{
|
|
label: '10k',
|
|
value: 10000,
|
|
prices: { solo: 7, team: 12, business: 19 }
|
|
},
|
|
{
|
|
label: '50k',
|
|
value: 50000,
|
|
prices: { solo: 11, team: 19, business: 29 }
|
|
},
|
|
{
|
|
label: '100k',
|
|
value: 100000,
|
|
prices: { solo: 15, team: 25, business: 39 }
|
|
},
|
|
{
|
|
label: '250k',
|
|
value: 250000,
|
|
prices: { solo: 25, team: 39, business: 59 }
|
|
},
|
|
{
|
|
label: '500k',
|
|
value: 500000,
|
|
prices: { solo: 39, team: 59, business: 89 }
|
|
},
|
|
{
|
|
label: '1M',
|
|
value: 1000000,
|
|
prices: { solo: 55, team: 79, business: 119 }
|
|
},
|
|
{
|
|
label: '2.5M',
|
|
value: 2500000,
|
|
prices: { solo: 79, team: 119, business: 169 }
|
|
},
|
|
{
|
|
label: '5M',
|
|
value: 5000000,
|
|
prices: { solo: 109, team: 159, business: 219 }
|
|
},
|
|
{
|
|
label: '10M+',
|
|
value: 10000000,
|
|
prices: { solo: null, team: null, business: null }
|
|
},
|
|
]
|
|
|
|
export default function PricingSection() {
|
|
const [isYearly, setIsYearly] = useState(false)
|
|
const [sliderIndex, setSliderIndex] = useState(2) // Default to 100k (index 2)
|
|
|
|
const currentTraffic = TRAFFIC_TIERS[sliderIndex]
|
|
|
|
const calculatePrice = (planId: string) => {
|
|
// @ts-ignore
|
|
const basePrice = currentTraffic.prices[planId]
|
|
|
|
// Handle "Custom" or missing prices
|
|
if (basePrice === null || basePrice === undefined) return 'Custom'
|
|
|
|
let price = basePrice
|
|
if (isYearly) {
|
|
price = price * 0.8 // 20% discount
|
|
}
|
|
return '€' + Math.round(price)
|
|
}
|
|
|
|
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
|
|
</h2>
|
|
<p className="text-xl text-neutral-600 dark:text-neutral-400">
|
|
Sign up for 30-day free trial. No credit card required.
|
|
</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">
|
|
|
|
{/* 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'
|
|
}`}
|
|
/>
|
|
</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">2 months free</span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pricing Cards Grid */}
|
|
<div className="grid md:grid-cols-4 gap-6">
|
|
{PLANS.map((plan) => (
|
|
<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>
|
|
<div className="flex items-baseline gap-1">
|
|
<span className="text-4xl font-bold text-neutral-900 dark:text-white">
|
|
{calculatePrice(plan.id)}
|
|
</span>
|
|
{calculatePrice(plan.id) !== 'Custom' && (
|
|
<span className="text-neutral-500">/{isYearly ? 'mo' : 'month'}</span>
|
|
)}
|
|
</div>
|
|
{isYearly && calculatePrice(plan.id) !== 'Custom' && (
|
|
<p className="text-xs text-brand-orange mt-2">Billed yearly</p>
|
|
)}
|
|
</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>
|
|
</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>
|
|
</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>
|
|
)
|
|
}
|