Merge version_23_1778183524439 into main

Merge version_23_1778183524439 into main

src/components/sections/pricing/FeatureComparison.tsx

@@ -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>