From edb4a6fd55b8cd31e5d93a9ccf659777ba27c4a7 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Thu, 15 Jan 2026 13:41:20 +0000
Subject: [PATCH] Update app/pricing/pricing-table.tsx

---
 app/pricing/pricing-table.tsx | 173 ++++++++++++++++++++++++++++++++++
 1 file changed, 173 insertions(+)
 create mode 100644 app/pricing/pricing-table.tsx

diff --git a/app/pricing/pricing-table.tsx b/app/pricing/pricing-table.tsx
new file mode 100644
index 0000000..27006a4
--- /dev/null
+++ b/app/pricing/pricing-table.tsx
@@ -0,0 +1,173 @@
+"use client";
+import React from "react";
+
+import { IconCheck } from "@tabler/icons-react";
+import { tiers } from "@/constants/tier";
+
+export function PricingTable({ _pricing }: any) {
+  const CheckIcon = () => {
+    return (
+      <IconCheck className="mx-auto h-4 w-4 flex-shrink-0 text-black dark:text-white" />
+    );
+  };
+
+  const tableFeatures = [
+    {
+      title: "Create APIs",
+      hobby: <CheckIcon />,
+      starter: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Access to Dashboard",
+      hobby: <CheckIcon />,
+      starter: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Share functionality",
+      hobby: <CheckIcon />,
+      starter: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Playground Editor",
+      hobby: <CheckIcon />,
+      starter: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Marketplace access",
+      hobby: <CheckIcon />,
+      starter: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "On call support",
+      hobby: <CheckIcon />,
+      starter: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Developer Program",
+      starter: <CheckIcon />,
+      hobby: <CheckIcon />,
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Advanced Analytics",
+      hobby: "On demand",
+      starter: "If you ask nicely",
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Long running APIs",
+      hobby: "Probably never",
+      starter: "Nuh uh",
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Zero Downtime Guarantee",
+      hobby: "",
+      starter: "",
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Custom Analytics",
+      hobby: "",
+      starter: "",
+      professional: <CheckIcon />,
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Single Sign On",
+      hobby: "",
+      starter: "",
+      professional: "",
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Security certificate",
+      hobby: "",
+      starter: "",
+      professional: "",
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "Retweets from us",
+      hobby: "",
+      starter: "",
+      professional: "",
+      enterprise: <CheckIcon />,
+    },
+    {
+      title: "We send you flowers",
+      hobby: "",
+      starter: "",
+      professional: "",
+      enterprise: <CheckIcon />,
+    },
+  ];
+
+  return (
+    <div className="mx-auto w-full relative z-20 px-4 py-40">
+      <div className="mt-8 flow-root">
+        <div className="-mx-4 -my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
+          <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
+            <table className="min-w-full divide-y divide-neutral-200 dark:divide-neutral-800">
+              <thead className="">
+                <tr>
+                  <th
+                    scope="col"
+                    className="max-w-xs py-3.5 pl-4 pr-3 text-left text-3xl  font-extrabold text-neutral-900 dark:text-white sm:pl-0"
+                  ></th>
+                  {tiers?.map((item, index) => (
+                    <th
+                      scope="col"
+                      className="px-3 py-3.5 text-center text-lg font-semibold text-neutral-900 dark:text-white"
+                      key={`pricing-${index}`}
+                    >
+                      {item.name}
+                    </th>
+                  ))}
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-gray-200 dark:divide-neutral-800">
+                {tableFeatures.map((feature) => (
+                  <tr key={feature.title}>
+                    <td className="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-neutral-900 dark:text-white sm:pl-0">
+                      {feature.title}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-muted dark:text-muted-dark text-center">
+                      {feature.hobby}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-muted dark:text-muted-dark text-center">
+                      {feature.starter}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-muted dark:text-muted-dark text-center">
+                      {feature.professional}
+                    </td>
+                    <td className="whitespace-nowrap px-3 py-4 text-sm text-muted dark:text-muted-dark text-center">
+                      {feature.enterprise}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+        </div>
+        {/* <FreeTrial /> */}
+      </div>
+    </div>
+  );
+}