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

feat: add feature comparison table to pricing page

Browse Source
This commit is contained in:
kudinDmitriyUp
2026-05-07 19:50:16 +00:00
parent e893d918d7
commit 711960995b
2 changed files with 127 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/components/sections/pricing/FeatureComparison.tsx Normal file
View File

@@ -0,0 +1,72 @@
import { CheckCircle } from 'lucide-react';
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] },
],
},
];
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.
</p>
</div>
<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>
{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>
))}
</div>
))}
</div>
</div>
))}
</div>
</div>
</div>
);
}

106
src/pages/Pricing.tsx
View File

@@ -1,60 +1,64 @@
import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards'; import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
import FeatureComparison from '@/components/sections/pricing/FeatureComparison';
export default function PricingPage() { export default function PricingPage() {
return ( return (
<PricingCenteredCards <>
tag="Flexible Pricing" <PricingCenteredCards
title="Plans Designed for Growth" tag="Flexible Pricing"
description="Choose the Finflow plan that best fits your business size and evolving financial demands." title="Plans Designed for Growth"
plans={[ description="Choose the Finflow plan that best fits your business size and evolving financial demands."
{ plans={[
tag: 'For Startups', {
price: '$99', tag: 'For Startups',
period: 'month', price: '$99',
features: [ period: 'month',
'Basic Analytics', features: [
'Standard Security', 'Basic Analytics',
'500 Transactions/month', 'Standard Security',
'Email Support', '500 Transactions/month',
], 'Email Support',
primaryButton: { ],
text: 'Start Free Trial', primaryButton: {
href: '#', text: 'Start Free Trial',
href: '#',
},
}, },
}, {
{ tag: 'For Growing Businesses',
tag: 'For Growing Businesses', price: '$499',
price: '$499', period: 'month',
period: 'month', features: [
features: [ 'Advanced Analytics',
'Advanced Analytics', 'Enhanced Security',
'Enhanced Security', 'Unlimited Transactions',
'Unlimited Transactions', '24/7 Priority Support',
'24/7 Priority Support', 'Automated Reporting',
'Automated Reporting', ],
], primaryButton: {
primaryButton: { text: 'Get Pro Plan',
text: 'Get Pro Plan', href: '#',
href: '#', },
}, },
}, {
{ tag: 'For Enterprises',
tag: 'For Enterprises', price: 'Custom',
price: 'Custom', period: '',
period: '', features: [
features: [ 'All Pro Features',
'All Pro Features', 'Dedicated Account Manager',
'Dedicated Account Manager', 'Custom Integrations',
'Custom Integrations', 'On-premise Deployment',
'On-premise Deployment', 'SLA & Compliance Guarantees',
'SLA & Compliance Guarantees', ],
], primaryButton: {
primaryButton: { text: 'Contact Sales',
text: 'Contact Sales', href: '#contact',
href: '#contact', },
}, },
}, ]}
]} />
/> <FeatureComparison />
</>
); );
} }