bender/9527794b-5aa3-49cb-ad65-39cc456fb97a
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat: restyle feature comparison table

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-05-07 19:53:27 +00:00
parent ab9cc6e162
commit 553301f21f
1 changed files with 51 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
src/components/sections/pricing/FeatureComparison.tsx
View File

@@ -1,4 +1,5 @@
import { CheckCircle } from 'lucide-react';
import { CheckCircle, Minus } from 'lucide-react';
import { cn } from '@/lib/utils';
const features = [
{
@@ -29,42 +30,65 @@ const features = [
},
];
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="py-8">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 dark:text-white sm:text-4xl">
Compare plans
</h2>
<p className="mt-4 text-lg leading-8 text-gray-600 dark:text-gray-300">
Choose the right plan for your business.
<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-8">
<div className="text-lg font-bold">Features</div>
<div className="text-center text-lg font-bold">Startups</div>
<div className="text-center text-lg font-bold">Growing Businesses</div>
<div className="text-center text-lg font-bold">Enterprises</div>
<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>
{features.map((category) => (
<div key={category.category} className="mt-8">
<h3 className="text-xl font-bold">{category.category}</h3>
<div className="mt-4 space-y-4">
{category.items.map((item) => (
<div key={item.name} className="grid grid-cols-4 items-center gap-8">
<div>{item.name}</div>
{item.tiers.map((included, i) => (
<div key={i} className="flex justify-center">
{included ? <CheckCircle className="h-6 w-6 text-green-500" /> : <div className="h-6 w-6" />}
<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>
</div>