feat: restyle feature comparison table

Merge version_22_1778183346446 into main

src/components/sections/pricing/FeatureComparison.tsx

@@ -0,0 +1,96 @@
+import { CheckCircle, Minus } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+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] },
+    ],
+  },
+];
+
+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="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-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>
+
+          <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>
+  );
+}

src/components/sections/pricing/PricingMediaCards.tsx

@@ -68,7 +68,10 @@ const PricingMediaCards = ({
             </div>
 
             <div className="flex flex-col justify-center gap-5 w-full md:w-1/2">
-              <span className="px-3 py-1 w-fit text-sm card rounded">{plan.price}{plan.period}</span>
+              <div className="flex items-baseline gap-2">
+                <span className="text-5xl font-bold">{plan.price}</span>
+                <span className="text-sm text-muted-foreground">/{plan.period}</span>
+              </div>
               <h3 className="text-4xl md:text-5xl font-medium truncate">{plan.tag}</h3>
 
               <div className="flex flex-col gap-3">

src/pages/HomePage.tsx

@@ -155,7 +155,7 @@ export default function HomePage() {
             text: "Start Free Trial",
             href: "#",
           },
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-minimalist-graphic-representing-a-star-1778165800791-0c8ad310.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-minimalist-graphic-representing-a-star-1778165800791-0c8ad310.png?_wi=1",
         },
         {
           tag: "For Growing Businesses",
@@ -172,7 +172,7 @@ export default function HomePage() {
             text: "Get Pro Plan",
             href: "#",
           },
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-image-symbolizing-a-growing--1778165802033-739245ed.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/an-abstract-image-symbolizing-a-growing--1778165802033-739245ed.png?_wi=1",
         },
         {
           tag: "For Enterprises",
@@ -189,7 +189,7 @@ export default function HomePage() {
             text: "Contact Sales",
             href: "#contact",
           },
-          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-powerful-abstract-representation-of-a--1778165802382-ab2df0f2.png",
+          imageSrc: "https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-powerful-abstract-representation-of-a--1778165802382-ab2df0f2.png?_wi=1",
         },
       ]}
     />

src/pages/Pricing.tsx

@@ -1,5 +1,64 @@
-import PricingSection from '@/components/sections/pricing/PricingSection';
+import PricingCenteredCards from '@/components/sections/pricing/PricingCenteredCards';
+import FeatureComparison from '@/components/sections/pricing/FeatureComparison';
 
 export default function PricingPage() {
-  return <PricingSection />;
+  return (
+    <>
+      <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: '#',
+            },
+          },
+          {
+            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 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',
+            },
+          },
+        ]}
+      />
+      <FeatureComparison />
+    </>
+  );
 }