feat: add feature comparison table to pricing page

Merge version_21_1778183201357 into main

src/components/sections/pricing/FeatureComparison.tsx

@@ -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>
+  );
+}

src/pages/Pricing.tsx

@@ -1,66 +1,64 @@
-import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
+import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
+import FeatureComparison from '@/components/sections/pricing/FeatureComparison';
 
 export default function PricingPage() {
   return (
-    <PricingMediaCards
-      tag="Flexible Pricing"
-      title="Plans Designed for Growth"
-      description="Choose the Finflow plan that best fits your business size and evolving financial demands."
-      plans={[
-        {
-          tag: 'For Startups',
-          price: '$99',
-          period: 'month',
-          features: [
-            'Basic Analytics',
-            'Standard Security',
-            '500 Transactions/month',
-            'Email Support',
-          ],
-          primaryButton: {
-            text: 'Start Free Trial',
-            href: '#',
+    <>
+      <PricingCenteredCards
+        tag="Flexible Pricing"
+        title="Plans Designed for Growth"
+        description="Choose the Finflow plan that best fits your business size and evolving financial demands."
+        plans={[
+          {
+            tag: 'For Startups',
+            price: '$99',
+            period: 'month',
+            features: [
+              'Basic Analytics',
+              'Standard Security',
+              '500 Transactions/month',
+              'Email Support',
+            ],
+            primaryButton: {
+              text: 'Start Free Trial',
+              href: '#',
+            },
           },
-          imageSrc:
-            'https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-minimalist-graphic-representing-a-star-1778165800791-0c8ad310.png?_wi=2',
-        },
-        {
-          tag: 'For Growing Businesses',
-          price: '$499',
-          period: 'month',
-          features: [
-            'Advanced Analytics',
-            'Enhanced Security',
-            'Unlimited Transactions',
-            '24/7 Priority Support',
-            'Automated Reporting',
-          ],
-          primaryButton: {
-            text: 'Get Pro Plan',
-            href: '#',
+          {
+            tag: 'For Growing Businesses',
+            price: '$499',
+            period: 'month',
+            features: [
+              'Advanced Analytics',
+              'Enhanced Security',
+              'Unlimited Transactions',
+              '24/7 Priority Support',
+              'Automated Reporting',
+            ],
+            primaryButton: {
+              text: 'Get Pro Plan',
+              href: '#',
+            },
           },
-          imageSrc:
-            'https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-image-symbolizing-a-growing--1778165802033-739245ed.png?_wi=2',
-        },
-        {
-          tag: 'For Enterprises',
-          price: 'Custom',
-          period: '',
-          features: [
-            'All Pro Features',
-            'Dedicated Account Manager',
-            'Custom Integrations',
-            'On-premise Deployment',
-            'SLA & Compliance Guarantees',
-          ],
-          primaryButton: {
-            text: 'Contact Sales',
-            href: '#contact',
+          {
+            tag: 'For Enterprises',
+            price: 'Custom',
+            period: '',
+            features: [
+              'All Pro Features',
+              'Dedicated Account Manager',
+              'Custom Integrations',
+              'On-premise Deployment',
+              'SLA & Compliance Guarantees',
+            ],
+            primaryButton: {
+              text: 'Contact Sales',
+              href: '#contact',
+            },
           },
-          imageSrc:
-            'https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-powerful-abstract-representation-of-a--1778165802382-ab2df0f2.png?_wi=2',
-        },
-      ]}
-    />
+        ]}
+      />
+      <FeatureComparison />
+    </>
   );
 }