feat: update pricing page to show pricing more clearly

Merge version_19_1778182656766 into main

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/components/sections/pricing/PricingSection.tsx

@@ -0,0 +1,139 @@
+import { CheckIcon } from 'lucide-react';
+
+const tiers = [
+  {
+    name: 'Starter',
+    id: 'tier-starter',
+    href: '#',
+    price: { monthly: '$49', annually: '$490' },
+    description: 'For small teams just getting started.',
+    features: [
+      'Up to 1,000 subscribers',
+      'Basic analytics',
+      'Email support',
+    ],
+  },
+  {
+    name: 'Team',
+    id: 'tier-team',
+    href: '#',
+    price: { monthly: '$99', annually: '$990' },
+    description: 'For growing teams that need more power.',
+    features: [
+      'Up to 5,000 subscribers',
+      'Advanced analytics',
+      'Priority email support',
+      'Integration with popular tools',
+    ],
+  },
+  {
+    name: 'Enterprise',
+    id: 'tier-enterprise',
+    href: '#',
+    price: { monthly: 'Contact us', annually: 'Contact us' },
+    description: 'For large organizations with custom needs.',
+    features: [
+      'Unlimited subscribers',
+      'Custom analytics and reporting',
+      '24/7 phone and email support',
+      'Dedicated account manager',
+      'Custom integrations',
+    ],
+  },
+];
+
+export default function PricingSection() {
+  return (
+    <div className="isolate overflow-hidden bg-gray-900">
+      <div className="mx-auto max-w-7xl px-6 pb-96 pt-24 text-center sm:pt-32 lg:px-8">
+        <div className="mx-auto max-w-4xl">
+          <h2 className="text-base font-semibold leading-7 text-indigo-400">Pricing</h2>
+          <p className="mt-2 text-4xl font-bold tracking-tight text-white sm:text-5xl">
+            The right price for you, <br className="hidden sm:inline lg:hidden" />
+            whoever you are
+          </p>
+        </div>
+        <div className="relative mt-6">
+          <p className="mx-auto max-w-2xl text-lg leading-8 text-white/60">
+            Choose a plan that fits your needs. All plans come with a 30-day free trial.
+          </p>
+          <svg
+            viewBox="0 0 1208 1024"
+            className="absolute -top-10 left-1/2 -z-10 h-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:-top-12 md:-top-20 lg:-top-12 xl:top-0"
+          >
+            <ellipse
+              cx={604}
+              cy={512}
+              fill="url(#6d1bd035-0dd1-437e-93fa-59d316231eb0)"
+              rx={604}
+              ry={512}
+            />
+            <defs>
+              <radialGradient id="6d1bd035-0dd1-437e-93fa-59d316231eb0">
+                <stop stopColor="#7775D6" />
+                <stop offset={1} stopColor="#E935C1" />
+              </radialGradient>
+            </defs>
+          </svg>
+        </div>
+      </div>
+      <div className="flow-root bg-white pb-24 sm:pb-32">
+        <div className="-mt-80">
+          <div className="mx-auto max-w-7xl px-6 lg:px-8">
+            <div className="mx-auto grid max-w-md grid-cols-1 gap-8 lg:max-w-4xl lg:grid-cols-2">
+              {tiers.map((tier) => (
+                <div
+                  key={tier.id}
+                  className="flex flex-col justify-between rounded-3xl bg-white p-8 shadow-xl ring-1 ring-gray-900/10 sm:p-10"
+                >
+                  <div>
+                    <h3 id={tier.id} className="text-base font-semibold leading-7 text-indigo-600">
+                      {tier.name}
+                    </h3>
+                    <div className="mt-4 flex items-baseline gap-x-2">
+                      <span className="text-5xl font-bold tracking-tight text-gray-900">{tier.price.monthly}</span>
+                      <span className="text-base font-semibold leading-7 text-gray-600">/month</span>
+                    </div>
+                    <p className="mt-6 text-base leading-7 text-gray-600">{tier.description}</p>
+                    <ul
+                      role="list"
+                      className="mt-10 space-y-4 text-sm leading-6 text-gray-600"
+                    >
+                      {tier.features.map((feature) => (
+                        <li key={feature} className="flex gap-x-3">
+                          <CheckIcon className="h-6 w-5 flex-none text-indigo-600" aria-hidden="true" />
+                          {feature}
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                  <a
+                    href={tier.href}
+                    aria-describedby={tier.id}
+                    className="mt-8 block rounded-md bg-indigo-600 px-3.5 py-2 text-center text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  >
+                    Get started today
+                  </a>
+                </div>
+              ))}
+              <div className="flex flex-col items-start gap-x-8 gap-y-6 rounded-3xl p-8 ring-1 ring-gray-900/10 sm:gap-y-10 sm:p-10 lg:col-span-2 lg:flex-row lg:items-center">
+                <div className="lg:min-w-0 lg:flex-1">
+                  <h3 className="text-lg font-semibold leading-8 tracking-tight text-indigo-600">Enterprise Plan</h3>
+                  <p className="mt-1 text-base leading-7 text-gray-600">
+                    For large organizations with custom needs, contact us for a custom quote.
+                  </p>
+                </div>
+                <a
+                  href="#"
+                  className="rounded-md px-3.5 py-2 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-200 hover:ring-indigo-300 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                >
+                  Contact us <span aria-hidden="true">&rarr;</span>
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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,3 +1,66 @@
+import PricingMediaCards from '@/components/sections/pricing/PricingMediaCards';
+
 export default function PricingPage() {
-  return <h1>Pricing Page</h1>;
+  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: '#',
+          },
+          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: '#',
+          },
+          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',
+          },
+          imageSrc:
+            'https://storage.googleapis.com/webild/users/user_3AJoeL1kj3KAGCFdKZaVyRTrBRV/a-powerful-abstract-representation-of-a--1778165802382-ab2df0f2.png?_wi=2',
+        },
+      ]}
+    />
+  );
 }

src/pages/misc/AboutPage.tsx

@@ -17,22 +17,22 @@ const AboutPage: React.FC = () => {
           {
             name: 'John Doe',
             role: 'CEO & Founder',
-            imageSrc: 'https://via.placeholder.com/500x500',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=1',
           },
           {
             name: 'Jane Smith',
             role: 'Chief Technology Officer',
-            imageSrc: 'https://via.placeholder.com/500x500',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=2',
           },
           {
             name: 'Peter Jones',
             role: 'Head of Product',
-            imageSrc: 'https://via.placeholder.com/500x500',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=3',
           },
           {
             name: 'Mary Williams',
             role: 'Lead Designer',
-            imageSrc: 'https://via.placeholder.com/500x500',
+            imageSrc: 'https://via.placeholder.com/500x500?_wi=4',
           },
         ]}
       />