feat: add feature comparison table to pricing page

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,7 +1,9 @@
 import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
+import FeatureComparison from '@/components/sections/pricing/FeatureComparison';
 
 export default function PricingPage() {
   return (
+    <>
       <PricingCenteredCards
         tag="Flexible Pricing"
         title="Plans Designed for Growth"
@@ -56,5 +58,7 @@ export default function PricingPage() {
           },
         ]}
       />
+      <FeatureComparison />
+    </>
   );
 }