From facd9f986d7538e844a931fd2a7f31088b553d53 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 14:06:54 +0000
Subject: [PATCH] Update components/cta.tsx

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

diff --git a/components/cta.tsx b/components/cta.tsx
new file mode 100644
index 0000000..d67ca9c
--- /dev/null
+++ b/components/cta.tsx
@@ -0,0 +1,45 @@
+"use client";
+import React from "react";
+import Balancer from "react-wrap-balancer";
+
+import { Button } from "./ui/button";
+export const CTA = () => {
+  return (
+    <section className="py-60 w-full  overflow-hidden relative z-30">
+      <div className="bg-white dark:bg-black">
+        <div className="mx-auto w-full relative z-20 sm:max-w-[40rem]  md:max-w-[48rem] lg:max-w-[64rem] xl:max-w-[80rem] bg-gradient-to-br from-slate-800 dark:from-neutral-900 to-gray-900 sm:rounded-2xl">
+          <div className="relative -mx-6   sm:mx-0 sm:rounded-2xl overflow-hidden px-6  md:px-8 ">
+            <div
+              className="absolute inset-0 w-full h-full opacity-10 bg-noise fade-vignette [mask-image:radial-gradient(#fff,transparent,75%)]"
+              style={{
+                backgroundImage: "url(/noise.webp)",
+                backgroundSize: "30%",
+              }}
+            ></div>
+            <div
+              className="pointer-events-none absolute inset-y-0 right-0 select-none overflow-hidden rounded-2xl"
+              style={{
+                mask: "radial-gradient(33.875rem 33.875rem at calc(100% - 8.9375rem) 0, white 3%, transparent 70%)",
+              }}
+            ></div>
+
+            <div className="relative px-6 pb-14 pt-20 sm:px-10 sm:pb-20 lg:px-[4.5rem]">
+              <h2 className="  text-center text-balance mx-auto text-3xl md:text-5xl font-semibold tracking-[-0.015em] text-white">
+                Ready to build your predictable outbound engine?
+              </h2>
+              <p className="mt-4 max-w-[26rem] text-center mx-auto  text-base/6 text-neutral-200">
+                <Balancer>
+                  Stop guessing. Start closing. Book your strategy call today and see how we can scale your pipeline.
+                </Balancer>
+              </p>
+
+              <div className="relative z-10 mx-auto flex justify-center mt-6">
+                <Button>Book a Call</Button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+};