Merge pull request #66 from Manishhhsys/feat/replace_contact_us_with_cal

[FEAT] Replace "Contact Us" email with meeting booking form(Cal)

Author: idanlodzki

components/Navbar.tsx

@@ -2,14 +2,13 @@
 
 import React, { useState, useEffect } from "react";
 import Link from "next/link";
-import { Menu, X, Slack } from "lucide-react";
+import { Menu, X, Slack, Plus } from "lucide-react";
 import Logo from "./Logo";
 import ThemeToggle from "./ThemeToggle";
 import GitHubStarButton from "./GitHubStarsButton";
+import { getCalApi } from "@calcom/embed-react";
+import Image from "next/image";
 
-// constants/contact.ts
-export const CONTACT_EMAIL = '[email protected]';
-export const CONTACT_MAILTO = `mailto:${CONTACT_EMAIL}`;
 
 interface NavigationItem {
   name: string;
@@ -21,7 +20,19 @@ const Navbar: React.FC = () => {
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [activeSection, setActiveSection] = useState<string>("");
   const [scrolled, setScrolled] = useState(false);
-
+  const rawCalLink = process.env.NEXT_PUBLIC_CAL_DATA_LINK ?? "";
+  const calLink = rawCalLink.trim();
+  const isCalReady = calLink.length > 0;
+  if(!isCalReady){
+    console.error("NEXT_PUBLIC_CAL_DATA_LINK environment variable is not set")
+  }
+  const CAL_CONFIG = {
+  theme: "light",
+  hideEventTypeDetails: true,
+  layout: "month_view"
+} as const;
+
+const CAL_CONFIG_STRING = JSON.stringify(CAL_CONFIG);
   const navigation: NavigationItem[] = [
     { name: "Features", href: "/#features" },
     { name: "Integrations", href: "/#integrations" },
@@ -39,12 +50,45 @@ const Navbar: React.FC = () => {
     href: "https://join.slack.com/t/opsimate/shared_invite/zt-39bq3x6et-NrVCZzH7xuBGIXmOjJM7gA",
     external: true,
   };
+  useEffect(() => {
+    if(!isCalReady){
+      return;
+    }
+    (async function () {
+      try{
+        const cal = await getCalApi({ "namespace": "30min" });
+        cal("ui", { "hideEventTypeDetails": true, "layout": "month_view" });
+      }catch(error){
+        console.error("Failed to initialize Cal.com:", error);
+      }
+    })();
+  }, [isCalReady])
 
-  const contactLink: NavigationItem = {
-    name: "Contact Us",
-    href: CONTACT_MAILTO,
-    external: true,
-  };
+  // Highlight active section on scroll
+  useEffect(() => {
+    const sections = document.querySelectorAll("section[id]");
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveSection(entry.target.id);
+          }
+        });
+      },
+      { rootMargin: "-50% 0px -50% 0px" }
+    );
+
+    sections.forEach((section) => observer.observe(section));
+    return () => sections.forEach((section) => observer.unobserve(section));
+  }, []);
+
+  // Blur effect on scroll
+  useEffect(() => {
+    const handleScroll = () => setScrolled(window.scrollY > 20);
+    handleScroll();
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   // Highlight active section on scroll
   useEffect(() => {
@@ -121,29 +165,37 @@ const Navbar: React.FC = () => {
               <Slack size={18} aria-hidden="true" />
               {slackLink.name}
             </Link>
-
             {/* Contact Us button */}
-            <a
-              href={contactLink.href}
-              className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 transition-colors duration-200"
-            >
-              {contactLink.name}
-            </a>
-
+              {
+                isCalReady &&(
+                  <button className="px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 
+            duration-200 
+            flex items-center gap-2 flex-shrink-0
+            transition-all group"
+            data-cal-namespace="30min" data-cal-link={calLink} data-cal-config={CAL_CONFIG_STRING}>
+              <div className="flex items-center gap-2 group-hover:gap-8 transition-all duration-300 relative">
+              <Image src={'/images/logo.png'} width={28} height={28} alt="logo" className="rounded-full bg-white flex-shrink-0"></Image>
+              <div className="flex items-center gap-0 absolute left-[28px] transform -translate-x-full opacity-0 group-hover:translate-x-0 group-hover:opacity-100 transition-all duration-300">     
+                <div className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] ml-1 mr-1"><Plus width={20} height={20}></Plus></div>
+                <div className="w-7 h-7 rounded-full dark:bg-white/10 bg-white/20 flex items-center justify-center text-[10px] ml-1 mr-1">You</div>
+              </div>
+              <span className="whitespace-nowrap relative block text-base font-bold ml-0 group-hover:ml-10 transition-all duration-300">Book a Call</span>
+            </div>  
+            </button>
+                )
+              }
             <ThemeToggle />
           </div>
-
           {/* Mobile menu button */}
           <div className="md:hidden">
-            <button
+              <button
               onClick={() => setIsMenuOpen(!isMenuOpen)}
               className="text-surface-700 dark:text-surface-300 hover:text-primary-500 dark:hover:text-primary-400 transition-colors duration-200"
             >
               {isMenuOpen ? <X size={24} /> : <Menu size={24} />}
             </button>
           </div>
         </div>
-
         {/* Mobile Navigation */}
         {isMenuOpen && (
           <div className="md:hidden py-4 border-t border-surface-200 dark:border-surface-800">
@@ -168,13 +220,13 @@ const Navbar: React.FC = () => {
               ))}
 
               {/* Mobile Contact Us link */}
-              <a
-                href={contactLink.href}
-                className="text-surface-700 dark:text-surface-300 hover:text-primary-500 dark:hover:text-primary-400 font-medium transition-colors duration-200 px-2 py-1"
-                onClick={() => setIsMenuOpen(false)}
-              >
-                {contactLink.name}
-              </a>
+              {
+                isCalReady && (
+                  <button className="font-medium transition-colors duration-200 px-2 py-2 md:w-[20%] w-[35%] bg-primary-600 text-white rounded-lg hover:bg-primary-700 cursor-pointer" data-cal-namespace="30min" data-cal-link={calLink} data-cal-config={CAL_CONFIG_STRING}>
+                Book A Call
+                 </button>
+                )
+              }
             </div>
           </div>
         )}

package-lock.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@calcom/embed-react": "^1.5.3",
     "@vercel/analytics": "^1.5.0",
     "front-matter": "^4.0.2",
     "lucide-react": "^0.294.0",
@@ -18,6 +19,7 @@
     "remark": "^15.0.1"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20.8.0",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
@@ -29,7 +31,6 @@
     "rehype-sanitize": "^6.0.0",
     "rehype-stringify": "^10.0.0",
     "remark-rehype": "^11.1.0",
-    "@tailwindcss/typography": "^0.5.15",
     "tailwindcss": "^3.3.0",
     "typescript": "^5.2.0"
   }