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

---
 components/pricing.tsx | 132 +++++++++++++++++++++++++++++++++++++++++
 1 file changed, 132 insertions(+)
 create mode 100644 components/pricing.tsx

diff --git a/components/pricing.tsx b/components/pricing.tsx
new file mode 100644
index 0000000..f40a4a0
--- /dev/null
+++ b/components/pricing.tsx
@@ -0,0 +1,132 @@
+"use client";
+import { IconCircleCheckFilled } from "@tabler/icons-react";
+import { cn } from "@/lib/utils";
+import { tiers } from "@/constants/tier";
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { Button } from "./ui/button";
+
+export function Pricing() {
+  const [active, setActive] = useState("monthly");
+  const tabs = [
+    { name: "Monthly", value: "monthly" },
+    { name: "Yearly", value: "yearly" },
+  ];
+
+  return (
+    <div className="relative">
+      <div className="flex items-center justify-center bg-neutral-100 dark:bg-neutral-800  w-fit mx-auto mb-12 rounded-md overflow-hidden">
+        {tabs.map((tab) => (
+          <button
+            key={tab.value}
+            className={cn(
+              "text-sm font-medium text-gray-500 dark:text-muted-dark p-4  rounded-md relative",
+              active === tab.value ? " text-white dark:text-black" : "",
+            )}
+            onClick={() => setActive(tab.value)}
+          >
+            {active === tab.value && (
+              <motion.span
+                layoutId="moving-div"
+                transition={{ type: "spring", bounce: 0.2, duration: 0.6 }}
+                className="absolute inset-0 bg-black dark:bg-white"
+              />
+            )}
+            <span className="relative z-10">{tab.name}</span>
+          </button>
+        ))}
+      </div>
+      <div className="mx-auto mt-4 md:mt-20   grid relative z-20 grid-cols-1 gap-4 items-center  md:grid-cols-2 xl:grid-cols-4">
+        {tiers.map((tier, _tierIdx) => (
+          <div
+            key={tier.id}
+            className={cn(
+              tier.featured
+                ? "relative bg-[radial-gradient(164.75%_100%_at_50%_0%,#334155_0%,#0F172A_48.73%)]  shadow-2xl"
+                : " bg-white dark:bg-black",
+              "rounded-lg px-6 py-8 sm:mx-8 lg:mx-0  h-full flex flex-col justify-between",
+            )}
+          >
+            <div className="">
+              <h3
+                id={tier.id}
+                className={cn(
+                  tier.featured
+                    ? "text-white"
+                    : "text-muted dark:text-muted-dark",
+                  "text-base font-semibold leading-7",
+                )}
+              >
+                {tier.name}
+              </h3>
+              <p className="mt-4">
+                <motion.span
+                  initial={{ x: -20, opacity: 0 }}
+                  animate={{ x: 0, opacity: 1 }}
+                  transition={{ duration: 0.2, ease: "easeOut" }}
+                  key={active}
+                  className={cn(
+                    "text-4xl font-bold tracking-tight  inline-block",
+                    tier.featured
+                      ? "text-white"
+                      : "text-neutral-900 dark:text-neutral-200",
+                  )}
+                >
+                  {active === "monthly" ? tier.priceMonthly : tier.priceYearly}
+                </motion.span>
+              </p>
+              <p
+                className={cn(
+                  tier.featured
+                    ? "text-neutral-300"
+                    : "text-neutral-600 dark:text-neutral-300",
+                  "mt-6 text-sm leading-7  h-12 md:h-12 xl:h-12",
+                )}
+              >
+                {tier.description}
+              </p>
+              <ul
+                role="list"
+                className={cn(
+                  tier.featured
+                    ? "text-neutral-300"
+                    : "text-neutral-600 dark:text-neutral-300",
+                  "mt-8 space-y-3 text-sm leading-6 sm:mt-10",
+                )}
+              >
+                {tier.features.map((feature) => (
+                  <li key={feature} className="flex gap-x-3">
+                    <IconCircleCheckFilled
+                      className={cn(
+                        tier.featured
+                          ? "text-white"
+                          : "text-muted dark:text-muted-dark",
+                        "h-6 w-5 flex-none",
+                      )}
+                      aria-hidden="true"
+                    />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+            <div>
+              <Button
+                onClick={tier.onClick}
+                aria-describedby={tier.id}
+                className={cn(
+                  tier.featured
+                    ? "bg-white text-black shadow-sm hover:bg-white/90 focus-visible:outline-white"
+                    : "",
+                  "mt-8 rounded-full py-2.5 px-3.5 text-center text-sm font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 sm:mt-10 block w-full",
+                )}
+              >
+                {tier.cta}
+              </Button>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}