From 5412409ef86fb6a83a7418d0086248ae30e55bef Mon Sep 17 00:00:00 2001
From: kaihere14 <yashpalsharma9950@gmail.com>
Date: Sat, 2 May 2026 12:45:52 +0530
Subject: [PATCH] feat: add Cal.com integration via new Calbutton component and
 update project link

---
 components/Comments/Comments.tsx |  2 +-
 components/Footer/Calbutton.tsx  | 46 +++++++++++++++++
 components/Footer/Footer.tsx     | 85 +++++++++++++++++---------------
 components/Projects/Projects.tsx |  2 +-
 package-lock.json                | 30 +++++++++++
 package.json                     |  1 +
 6 files changed, 124 insertions(+), 42 deletions(-)
 create mode 100644 components/Footer/Calbutton.tsx

diff --git a/components/Comments/Comments.tsx b/components/Comments/Comments.tsx
index 64e021f..862fe68 100644
--- a/components/Comments/Comments.tsx
+++ b/components/Comments/Comments.tsx
@@ -207,7 +207,7 @@ const Comments = ({ showAll = false, hideHeader = false }: CommentsProps) => {
             </p>
             <button
               onClick={handleLogin}
-              className="flex items-center gap-2 rounded-md border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-black shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:bg-neutral-200 hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:shadow-[0_4px_0_0_#0a0a0a] dark:hover:bg-neutral-800 dark:hover:shadow-[0_2px_0_0_#0a0a0a] dark:active:shadow-none"
+              className="flex cursor-pointer items-center gap-2 rounded-md border border-neutral-300 bg-neutral-100 px-4 py-2 text-sm font-medium text-black shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:bg-neutral-200 hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:shadow-[0_4px_0_0_#0a0a0a] dark:hover:bg-neutral-800 dark:hover:shadow-[0_2px_0_0_#0a0a0a] dark:active:shadow-none"
             >
               <svg className="h-4 w-4" viewBox="0 0 24 24">
                 <path
diff --git a/components/Footer/Calbutton.tsx b/components/Footer/Calbutton.tsx
new file mode 100644
index 0000000..f060171
--- /dev/null
+++ b/components/Footer/Calbutton.tsx
@@ -0,0 +1,46 @@
+/* First make sure that you have installed the package */
+
+/* If you are using yarn */
+// yarn add @calcom/embed-react
+
+/* If you are using npm */
+// npm install @calcom/embed-react
+"use client";
+
+import { useEffect } from "react";
+
+import Image from "next/image";
+
+import { getCalApi } from "@calcom/embed-react";
+
+export default function Calbutton() {
+  useEffect(() => {
+    (async function () {
+      const cal = await getCalApi({ namespace: "connect" });
+      cal("ui", { hideEventTypeDetails: false, layout: "month_view" });
+    })();
+  }, []);
+  return (
+    <button
+      data-cal-namespace="connect"
+      data-cal-link="arman-dmt7pl/connect"
+      className="group flex cursor-pointer items-center rounded-lg border bg-neutral-100 px-5 py-1 text-sm font-semibold shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-200 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
+      data-cal-config='{"layout":"month_view","useSlotsViewOnSmallScreen":"true"}'
+    >
+      <Image
+        src={"/Logo.webp"}
+        alt="Logo"
+        width={100}
+        height={100}
+        className="mr-1 size-6 object-cover pb-[3px]"
+      />
+      <div className="flex max-w-0 items-center gap-1.5 overflow-hidden whitespace-nowrap opacity-0 transition-all duration-300 ease-in-out group-hover:mr-2 group-hover:max-w-[120px] group-hover:opacity-100">
+        <span className="text-xs">+</span>
+        <span className="rounded-full bg-neutral-700 p-1 text-xs text-white dark:bg-neutral-600">
+          You
+        </span>
+      </div>
+      Book a call
+    </button>
+  );
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
index 5e12c6f..fc5eb3f 100644
--- a/components/Footer/Footer.tsx
+++ b/components/Footer/Footer.tsx
@@ -2,51 +2,56 @@ import React from "react";
 
 import { Github, Linkedin, Mail } from "lucide-react";
 
+import Calbutton from "./Calbutton";
 import { VisitorCounter } from "./VisitorCounter";
 
 const Footer = () => {
   return (
     <footer className="mt-15 space-y-8 pb-24">
-      <div className="flex flex-col items-center justify-between gap-6 pb-8 md:flex-row">
-        <div className="text-center md:text-left">
-          <p
-            className={`mb-2 bg-linear-to-r bg-clip-text text-2xl font-bold text-transparent`}
-          >
-            Let&apos;s build something amazing.
-          </p>
-          <p className={`mb-3 text-sm`}>
-            Open to freelance projects and collaborations
-          </p>
-          <a
-            href="mailto:armanthakur200814@gmail.com"
-            className={`group inline-flex items-center gap-2 text-sm transition-colors`}
-          >
-            <Mail
-              size={16}
-              className="transition-transform group-hover:scale-110"
-            />
-            armanthakur200814@gmail.com
-          </a>
-        </div>
-        <div className="flex gap-3">
-          <a
-            href="https://github.com/kaihere14"
-            className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
-          >
-            <Github size={22} />
-          </a>
-          <a
-            href="https://www.linkedin.com/in/arman-thakur14/"
-            className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
-          >
-            <Linkedin size={22} />
-          </a>
-          <a
-            href="mailto:armanthakur200814@gmail.com"
-            className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
-          >
-            <Mail size={22} />
-          </a>
+      <div className="flex flex-col items-center">
+        {/* cal.com connect button  */}
+        <Calbutton />
+        <div className="flex w-full flex-row items-center justify-between">
+          <div className="text-center md:text-left">
+            <p
+              className={`mb-2 bg-linear-to-r bg-clip-text text-2xl font-bold text-transparent`}
+            >
+              Let&apos;s build something amazing.
+            </p>
+            <p className={`mb-3 text-sm`}>
+              Open to freelance projects and collaborations
+            </p>
+            <a
+              href="mailto:armanthakur200814@gmail.com"
+              className={`group inline-flex items-center gap-2 text-sm transition-colors`}
+            >
+              <Mail
+                size={16}
+                className="transition-transform group-hover:scale-110"
+              />
+              armanthakur200814@gmail.com
+            </a>
+          </div>
+          <div className="flex gap-3">
+            <a
+              href="https://github.com/kaihere14"
+              className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
+            >
+              <Github size={22} />
+            </a>
+            <a
+              href="https://www.linkedin.com/in/arman-thakur14/"
+              className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
+            >
+              <Linkedin size={22} />
+            </a>
+            <a
+              href="mailto:armanthakur200814@gmail.com"
+              className="rounded-xl border bg-neutral-100 p-3 shadow-[0_4px_0_0_rgba(0,0,0,0.15)] transition-all duration-300 hover:translate-y-[2px] hover:shadow-[0_2px_0_0_rgba(0,0,0,0.15)] active:translate-y-[4px] active:shadow-none dark:bg-neutral-800 dark:shadow-[0_4px_0_0_rgba(0,0,0,0.4)] dark:hover:shadow-[0_2px_0_0_rgba(0,0,0,0.4)] dark:active:shadow-none"
+            >
+              <Mail size={22} />
+            </a>
+          </div>
         </div>
       </div>
       <div className={`border-t pt-8 text-center`}>
diff --git a/components/Projects/Projects.tsx b/components/Projects/Projects.tsx
index 1b6a483..e390468 100644
--- a/components/Projects/Projects.tsx
+++ b/components/Projects/Projects.tsx
@@ -57,7 +57,7 @@ const projects: ProjectType[] = [
       "Drizzle ORM",
     ],
     status: "All Systems Operational",
-    link: "https://www.clura.armandev.space/",
+    link: "https://clura.armandev.space/",
     githubLink: "https://github.com/kaihere14/clura",
   },
   {
diff --git a/package-lock.json b/package-lock.json
index 2cf486e..172540e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "next_portfolio",
       "version": "0.1.0",
       "dependencies": {
+        "@calcom/embed-react": "^1.5.3",
         "@radix-ui/react-avatar": "^1.1.11",
         "@trivago/prettier-plugin-sort-imports": "^6.0.2",
         "@vercel/analytics": "^1.6.1",
@@ -285,6 +286,35 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@calcom/embed-core": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@calcom/embed-core/-/embed-core-1.5.3.tgz",
+      "integrity": "sha512-GeId9gaByJ5EWiPmuvelZOvFWPOTWkcWZr5vGTCbIUTX125oE5yn0n8lDF1MJk5Xj1WO+/dk9jKIE08Ad9ytiQ==",
+      "license": "SEE LICENSE IN LICENSE"
+    },
+    "node_modules/@calcom/embed-react": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/@calcom/embed-react/-/embed-react-1.5.3.tgz",
+      "integrity": "sha512-JCgge04pc8fhdvUmPNVLhW8/lCWK+AAziKecKWWPfv1nn2s+qKP2BwsEAnxhxK9yPOBgE1EIEgmYkrrNB1iajA==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@calcom/embed-core": "1.5.3",
+        "@calcom/embed-snippet": "1.3.3"
+      },
+      "peerDependencies": {
+        "react": "^18.2.0 || ^19.0.0",
+        "react-dom": "^18.2.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@calcom/embed-snippet": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@calcom/embed-snippet/-/embed-snippet-1.3.3.tgz",
+      "integrity": "sha512-pqqKaeLB8R6BvyegcpI9gAyY6Xyx1bKYfWvIGOvIbTpguWyM1BBBVcT9DCeGe8Zw7Ujp5K56ci7isRUrT2Uadg==",
+      "license": "SEE LICENSE IN LICENSE",
+      "dependencies": {
+        "@calcom/embed-core": "1.5.3"
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.8.1.tgz",
diff --git a/package.json b/package.json
index 17d16a5..c33c8e2 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "check-types": "tsc --noEmit"
   },
   "dependencies": {
+    "@calcom/embed-react": "^1.5.3",
     "@radix-ui/react-avatar": "^1.1.11",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@vercel/analytics": "^1.6.1",