97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
import { CheckCircle, Minus } from 'lucide-react';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const features = [
|
|
{
|
|
category: 'Core Features',
|
|
items: [
|
|
{ name: 'Basic Analytics', tiers: [true, true, true] },
|
|
{ name: 'Standard Security', tiers: [true, true, true] },
|
|
{ name: '500 Transactions/month', tiers: [true, false, false] },
|
|
{ name: 'Unlimited Transactions', tiers: [false, true, true] },
|
|
{ name: 'Automated Reporting', tiers: [false, true, true] },
|
|
],
|
|
},
|
|
{
|
|
category: 'Support & Services',
|
|
items: [
|
|
{ name: 'Email Support', tiers: [true, true, true] },
|
|
{ name: '24/7 Priority Support', tiers: [false, true, true] },
|
|
{ name: 'Dedicated Account Manager', tiers: [false, false, true] },
|
|
],
|
|
},
|
|
{
|
|
category: 'Enterprise Solutions',
|
|
items: [
|
|
{ name: 'Custom Integrations', tiers: [false, false, true] },
|
|
{ name: 'On-premise Deployment', tiers: [false, false, true] },
|
|
{ name: 'SLA & Compliance Guarantees', tiers: [false, false, true] },
|
|
],
|
|
},
|
|
];
|
|
|
|
const tiers = [
|
|
{ name: 'Startups', href: '#', price: '$99' },
|
|
{ name: 'Growing Businesses', href: '#', price: '$499' },
|
|
{ name: 'Enterprises', href: '#', price: 'Custom' },
|
|
];
|
|
|
|
export default function FeatureComparison() {
|
|
return (
|
|
<div className="isolate bg-background-subtle">
|
|
<div className="mx-auto max-w-7xl px-6 py-24 sm:py-32 lg:px-8">
|
|
<div className="mx-auto max-w-2xl text-center lg:max-w-4xl">
|
|
<h2 className="text-base font-semibold leading-7 text-brand">Pricing</h2>
|
|
<p className="mt-2 text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
|
|
The right price for you, whoever you are
|
|
</p>
|
|
</div>
|
|
<p className="mx-auto mt-6 max-w-2xl text-center text-lg leading-8 text-foreground-subtle">
|
|
Choose the plan that best fits your needs, from small startups to large enterprises.
|
|
</p>
|
|
|
|
{/* Comparison table */}
|
|
<div className="mt-16">
|
|
<div className="grid grid-cols-4 gap-y-6 sm:grid-cols-4">
|
|
{tiers.map((tier, index) => (
|
|
<div key={tier.name} className={cn('col-start-2 sm:col-start-2', {
|
|
'sm:col-start-3': index === 1,
|
|
'sm:col-start-4': index === 2,
|
|
})}>
|
|
<h3 className="text-lg font-semibold leading-6 text-foreground text-center">{tier.name}</h3>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="mt-8 space-y-4">
|
|
{features.map((category) => (
|
|
<div key={category.category}>
|
|
<h4 className="text-lg font-semibold leading-6 text-foreground">{category.category}</h4>
|
|
<div className="relative mt-6">
|
|
<div className="absolute inset-y-0 left-0 w-full bg-background-subtle" aria-hidden="true" />
|
|
<div className="relative grid grid-cols-4">
|
|
{category.items.map((item) => (
|
|
<div key={item.name} className="col-span-4 grid grid-cols-4 items-center border-b border-border-muted py-4">
|
|
<div className="col-span-1 text-sm font-medium leading-6 text-foreground-subtle">{item.name}</div>
|
|
{item.tiers.map((included, i) => (
|
|
<div key={i} className="col-span-1 flex justify-center">
|
|
{included ? (
|
|
<CheckCircle className="h-5 w-5 text-brand" aria-hidden="true" />
|
|
) : (
|
|
<Minus className="h-5 w-5 text-foreground-muted" aria-hidden="true" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|