From d852ee1a69b7ade4bf1e4e03a0bd30af82543414 Mon Sep 17 00:00:00 2001
From: Mohamed Bassem <me@mbassem.com>
Date: Tue, 30 Dec 2025 09:41:52 +0000
Subject: feat(landing): add corporate pricing

---
 apps/landing/src/Pricing.tsx | 151 +++++++++++++++++++++++++++----------------
 1 file changed, 95 insertions(+), 56 deletions(-)

diff --git a/apps/landing/src/Pricing.tsx b/apps/landing/src/Pricing.tsx
index af5a5cb6..962a09fe 100644
--- a/apps/landing/src/Pricing.tsx
+++ b/apps/landing/src/Pricing.tsx
@@ -5,6 +5,8 @@ import { Check, ExternalLink } from "lucide-react";
 import { CLOUD_SIGNUP_LINK, DOCS_LINK, GITHUB_LINK } from "./constants";
 import NavBar from "./Navbar";
 
+const CONTACT_EMAIL = "mailto:support@karakeep.app";
+
 const pricingTiers = [
   {
     name: "Free",
@@ -56,6 +58,23 @@ const pricingTiers = [
     popular: false,
     isGitHub: true,
   },
+  {
+    name: "Corporate",
+    price: "Custom",
+    period: "per seat",
+    description: "For teams and organizations",
+    features: [
+      "Everything in Pro",
+      "Custom deployment & domain",
+      "Single Sign-On (SSO)",
+      "User management",
+      "Priority support",
+    ],
+    buttonText: "Contact Us",
+    buttonVariant: "outline" as const,
+    popular: false,
+    isContact: true,
+  },
 ];
 
 function PricingHeader() {
@@ -75,66 +94,86 @@ function PricingHeader() {
 }
 
 function PricingCards() {
-  return (
-    <div className="mx-auto mt-16 grid max-w-6xl grid-cols-1 gap-8 px-6 md:grid-cols-3">
-      {pricingTiers.map((tier) => (
-        <div
-          key={tier.name}
-          className={cn(
-            "relative rounded-2xl border bg-white p-8 shadow-sm",
-            tier.popular && "border-purple-500 shadow-lg",
+  const renderCard = (tier: (typeof pricingTiers)[number]) => (
+    <div
+      key={tier.name}
+      className={cn(
+        "relative rounded-2xl border bg-white p-8 shadow-sm",
+        tier.popular && "border-purple-500 shadow-lg",
+      )}
+    >
+      <div className="text-center">
+        <h3 className="text-xl font-semibold">{tier.name}</h3>
+        <div className="mt-4 flex items-baseline justify-center">
+          <span className="text-4xl font-bold">{tier.price}</span>
+          {tier.period && (
+            <span className="ml-1 text-gray-500">/{tier.period}</span>
           )}
-        >
-          <div className="text-center">
-            <h3 className="text-xl font-semibold">{tier.name}</h3>
-            <div className="mt-4 flex items-baseline justify-center">
-              <span className="text-4xl font-bold">{tier.price}</span>
-              {tier.period && (
-                <span className="ml-1 text-gray-500">/{tier.period}</span>
-              )}
-            </div>
-            <p className="mt-2 text-gray-600">{tier.description}</p>
-          </div>
+        </div>
+        <p className="mt-2 text-gray-600">{tier.description}</p>
+      </div>
 
-          <ul className="mt-8 space-y-3">
-            {tier.features.map((feature) => (
-              <li key={feature} className="flex items-center">
-                <Check className="h-5 w-5 text-green-500" />
-                <span className="ml-3 text-gray-700">{feature}</span>
-              </li>
-            ))}
-          </ul>
+      <ul className="mt-8 space-y-3">
+        {tier.features.map((feature) => (
+          <li key={feature} className="flex items-center">
+            <Check className="h-5 w-5 text-green-500" />
+            <span className="ml-3 text-gray-700">{feature}</span>
+          </li>
+        ))}
+      </ul>
 
-          <div className="mt-8">
-            {tier.isGitHub ? (
-              <a
-                href={GITHUB_LINK}
-                target="_blank"
-                className={cn(
-                  "flex w-full items-center justify-center gap-2",
-                  buttonVariants({ variant: tier.buttonVariant, size: "lg" }),
-                )}
-                rel="noreferrer"
-              >
-                <ExternalLink className="h-4 w-4" />
-                {tier.buttonText}
-              </a>
-            ) : (
-              <a
-                href={CLOUD_SIGNUP_LINK}
-                target="_blank"
-                className={cn(
-                  "flex w-full items-center justify-center",
-                  buttonVariants({ variant: tier.buttonVariant, size: "lg" }),
-                )}
-                rel="noreferrer"
-              >
-                {tier.buttonText}
-              </a>
+      <div className="mt-8">
+        {tier.isContact ? (
+          <a
+            href={CONTACT_EMAIL}
+            className={cn(
+              "flex w-full items-center justify-center",
+              buttonVariants({ variant: tier.buttonVariant, size: "lg" }),
             )}
-          </div>
-        </div>
-      ))}
+          >
+            {tier.buttonText}
+          </a>
+        ) : tier.isGitHub ? (
+          <a
+            href={GITHUB_LINK}
+            target="_blank"
+            className={cn(
+              "flex w-full items-center justify-center gap-2",
+              buttonVariants({ variant: tier.buttonVariant, size: "lg" }),
+            )}
+            rel="noreferrer"
+          >
+            <ExternalLink className="h-4 w-4" />
+            {tier.buttonText}
+          </a>
+        ) : (
+          <a
+            href={CLOUD_SIGNUP_LINK}
+            target="_blank"
+            className={cn(
+              "flex w-full items-center justify-center",
+              buttonVariants({ variant: tier.buttonVariant, size: "lg" }),
+            )}
+            rel="noreferrer"
+          >
+            {tier.buttonText}
+          </a>
+        )}
+      </div>
+    </div>
+  );
+
+  return (
+    <div className="mx-auto mt-16 max-w-6xl px-6">
+      {/* First 3 tiers */}
+      <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+        {pricingTiers.slice(0, 3).map(renderCard)}
+      </div>
+
+      {/* Corporate tier - centered below */}
+      <div className="mt-8 flex justify-center">
+        <div className="w-full md:max-w-sm">{renderCard(pricingTiers[3])}</div>
+      </div>
     </div>
   );
 }
-- 
cgit v1.2.3-70-g09d2