FEAT: Add floating "Book a call" button and modal

apps/website/src/components/BookACallButton.astro

@@ -0,0 +1,55 @@
+---
+import { Image } from "astro:assets";
+import crocoderLogo from "../assets/crocoder-logo.png";
+import BookACallModal from "./BookACallModal.astro";
+import ArrowTopRight from "./icons/ArrowTopRight.astro";
+
+export interface Props {
+  calLink: string;
+  eventType: string;
+}
+---
+
+<BookACallModal {...Astro.props} modalId="book-a-call-modal" />
+<button
+  id="book-a-call-modal-button"
+  class="rounded-full
+    bg-periwinkle
+    p-4
+    pr-8
+    text-white
+    hidden
+    gap-4
+    items-center
+    fixed
+    bottom-4
+    right-4
+    z-20
+    cursor-pointer
+    sm:flex
+    md:bottom-7
+    md:right-7"
+>
+  <Image
+    src={crocoderLogo}
+    alt="Crocoder Crocodile Logo"
+    class="h-9 md:h-[51px] w-auto"
+    widths={[160, 320]}
+    sizes={"160px"}
+    loading="eager"
+  />
+  <span class="flex gap-6 text-base md:text-xl items-center font-medium">
+    Book a call <ArrowTopRight classNames="w-4 h-4 md:w-6 md:h-6" />
+  </span>
+</button>
+
+<script>
+  const modalButton = document.getElementById("book-a-call-modal-button");
+  const modal = document.getElementById(
+    "book-a-call-modal"
+  ) as HTMLDialogElement;
+
+  modalButton?.addEventListener("click", () => {
+    modal.showModal();
+  });
+</script>

apps/website/src/components/BookACallForm.astro

@@ -12,22 +12,27 @@ export interface Props {
   eventType?: string;
   className?: string;
   contentClassName?: string;
+  deferLoad?: boolean;
 }
 
 const {
   calLink = "team/crocoder/hello",
   eventType = "hello",
   className,
   contentClassName,
+  deferLoad,
 } = Astro.props;
 ---
 
 <Section
   className={classNames(
     "bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]",
-    className,
+    className
+  )}
+  contentClassName={classNames(
+    `${grid_classes} items-center`,
+    contentClassName
   )}
-  contentClassName={classNames(`${grid_classes} items-center`, contentClassName)}
 >
   <div
     class="col-span-6 md:col-span-8 md:col-start-3 -translate-y-1/2 -mb-40 xl:col-span-6 xl:col-start-4 lg:-mb-60"
@@ -62,12 +67,13 @@ const {
   <div
     class="relative col-span-6 md:col-span-10 md:col-start-2 overflow-hidden flex flex-col justify-center bg-white rounded lg:min-h-[460px]"
   >
-    <div id="book-a-call"></div>
+    <div id="book-a-call" class="min-h-[460px]"></div>
     <CalcomEmbedInline
       calLink={calLink}
       eventType={eventType}
       elementOrSelector="#book-a-call"
       hideEventTypeDetails={false}
+      deferLoad={deferLoad}
     />
   </div>
 </Section>

apps/website/src/components/BookACallModal.astro

@@ -0,0 +1,157 @@
+---
+import CloseCrossX from "./icons/CloseCrossX.astro";
+import Modal from "./Modal.astro";
+import Pill from "./Pill.astro";
+
+export interface Props {
+  calLink: string;
+  eventType: string;
+  modalId: string;
+}
+
+const { calLink, eventType, modalId } = Astro.props;
+---
+
+<Modal
+  id={modalId}
+  classNames="w-[1017px] max-w-[calc(100%-16px)] max-h-[calc(100vh-64px)]"
+>
+  <section class="p-7" slot="main">
+    <header class="flex flex-col gap-4 sm:items-center mb-8 relative">
+      <button id="close-modal" class="absolute -top-3 -right-3 cursor-pointer"
+        ><span class="relative z-[-1]">
+          <CloseCrossX />
+        </span>
+      </button>
+      <Pill className="max-[350px]:text-sm">Book your call today</Pill>
+      <h2 class="text-4xl font-medium">
+        Let's Build <span class="text-crocoder-green">Together</span>
+      </h2>
+      <p class="text-secondary text-base max-w-[700px] sm:text-center">
+        Tell us what you're working on — we'll match you with our engineers who
+        can ramp up quickly, integrate seamlessly, and bring real product
+        impact.
+      </p>
+    </header>
+    <!-- This element is used for calcom to append iframe to it when loaded -->
+    <div id="book-a-call-calendar-wrapper" class="min-h-[460px]"></div>
+  </section>
+</Modal>
+<script
+  type="text/javascript"
+  is:inline
+  define:vars={{
+    calLink,
+    layout: "month_view",
+    elementOrSelector: "#book-a-call-calendar-wrapper",
+    hideEventTypeDetails: false,
+    eventType,
+    modalId,
+  }}
+>
+  const modal = document.getElementById(modalId);
+
+  const loadCalEmbed = () => {
+    (function (C, A, L) {
+      let p = function (a, ar) {
+        a.q.push(ar);
+      };
+      let d = C.document;
+      C.Cal =
+        C.Cal ||
+        function () {
+          let cal = C.Cal;
+          let ar = arguments;
+          if (!cal.loaded) {
+            cal.ns = {};
+            cal.q = cal.q || [];
+            d.head.appendChild(d.createElement("script")).src = A;
+            cal.loaded = true;
+          }
+          if (ar[0] === L) {
+            const api = function () {
+              p(api, arguments);
+            };
+            const namespace = ar[1];
+            api.q = api.q || [];
+            if (typeof namespace === "string") {
+              cal.ns[namespace] = cal.ns[namespace] || api;
+              p(cal.ns[namespace], ar);
+              p(cal, ["initNamespace", namespace]);
+            } else p(cal, ar);
+            return;
+          }
+          p(cal, ar);
+        };
+    })(window, "https://app.cal.com/embed/embed.js", "init");
+    Cal("init", eventType, { origin: "https://cal.com" });
+
+    Cal.ns[eventType]("inline", {
+      elementOrSelector,
+      config: { layout, theme: "light" },
+      calLink,
+    });
+
+    Cal.ns[eventType]("ui", {
+      styles: {
+        body: {
+          background: "transparent",
+        },
+        branding: {
+          brandColor: "#FEB534",
+          lightColor: "#494545",
+          lighterColor: "#4c4848",
+          lightestColor: "#7c7777",
+          highlightColor: "#1E1A1A",
+          medianColor: "#1E1A1A",
+        },
+        enabledDateButton: {
+          backgroundColor: "rgba(254, 181, 52, 0.65)", //"rgba(254, 181, 52, 0.40)",
+        },
+        disabledDateButton: {
+          backgroundColor: "rgba(232,232,232,0.30)",
+        },
+      },
+      hideEventTypeDetails,
+      layout,
+    });
+
+    Cal.ns[eventType]("on", {
+      action: "bookingSuccessful",
+      callback: (e) => {
+        const { data, type, namespace } = e.detail;
+        console.log("Booking successful:", { data, type, namespace });
+        window.location.href = "/contact/success?src=calcom";
+      },
+    });
+
+    Cal("on", {
+      action: "bookingSuccessful",
+      callback: (e) => {
+        const { data, type, namespace } = e.detail;
+        console.log("Global booking successful:", { data, type, namespace });
+        window.location.href = "/contact/success?src=calcom";
+      },
+    });
+  };
+
+  modal.addEventListener("click", (e) => {
+    if (!e.currentTarget) return;
+
+    const dialogElem = e.currentTarget;
+
+    if (e.target === dialogElem || e.target.id === "close-modal") {
+      dialogElem.close();
+    }
+  });
+
+  modal.addEventListener("beforetoggle", (e) => {
+    const calendarWrapper = e.currentTarget.querySelector(
+      "#book-a-call-calendar-wrapper"
+    );
+    /* Avoid loading calcom embed if already exists */
+    if (calendarWrapper.children?.length) return;
+
+    loadCalEmbed();
+  });
+</script>

apps/website/src/components/CalcomEmbedInline.astro

@@ -3,8 +3,9 @@ export interface Props {
   calLink: string;
   eventType: string;
   layout?: "month_view" | "week_view" | "column_view";
-  elementOrSelector: string;
+  elementOrSelector: `#${string}`;
   hideEventTypeDetails?: boolean;
+  deferLoad?: boolean;
 }
 
 const {
@@ -13,6 +14,7 @@ const {
   layout = "month_view",
   elementOrSelector,
   hideEventTypeDetails = false,
+  deferLoad = false,
 } = Astro.props;
 ---
 
@@ -25,8 +27,8 @@ const {
     elementOrSelector,
     hideEventTypeDetails,
     eventType,
+    deferLoad,
   }}
-  async
 >
   const loadCalEmbed = () => {
     (function (C, A, L) {
@@ -111,10 +113,36 @@ const {
       },
     });
   };
+  if (deferLoad) {
+    const calcomWrapper = document.getElementById(
+      elementOrSelector.substring(1)
+    );
 
-  if ("requestIdleCallback" in window) {
+    const handleLoadEmbed = (entries, observer) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          loadCalEmbed();
+          observer.unobserve(calcomWrapper);
+        }
+      });
+    };
+
+    const opts = {
+      rootMargin: "1000px 0px",
+    };
+
+    const observer = new IntersectionObserver(handleLoadEmbed, opts);
+
+    observer.observe(calcomWrapper);
+  }
+
+  const isRicSupported = "requestIdleCallback" in window;
+
+  if (!deferLoad && isRicSupported) {
     requestIdleCallback(loadCalEmbed);
-  } else {
+  }
+
+  if (!deferLoad && !isRicSupported) {
     window.addEventListener("load", loadCalEmbed);
   }
 </script>

apps/website/src/components/ExternalLink.astro

@@ -1,5 +1,7 @@
 ---
 import classnames from "classnames";
+import ArrowTopRight from "./icons/ArrowTopRight.astro";
+
 interface Props {
   href: string;
   text: string;
@@ -16,10 +18,5 @@ const { href, text, classNames } = Astro.props;
   >
     {text}
   </a>
-  <img
-    src={"arrow-top-right.svg"}
-    alt="Arrow Top Right"
-    role="presentation"
-    class="h-3 w-3 sm:h-4 sm:w-4"
-  />
+  <ArrowTopRight classNames="h-3 w-3 sm:h-4 sm:w-4" stroke="#1E1A1A" />
 </div>

apps/website/src/components/Pill.astro

@@ -1,13 +1,17 @@
 ---
 import classNames from "classnames";
 
+type Props = {
+  className?: string;
+};
+
 const { className } = Astro.props;
 ---
 
 <div
   class={classNames(
     "bg-white py-2 px-4 gap-2.5 border border-[rgb(60,56,67)]/[0.2] rounded-full uppercase font-bold text-base w-fit leading-none tracking-normal text-secondary whitespace-nowrap",
-    className,
+    className
   )}
 >
   <slot />

apps/website/src/components/ServiceCard.astro

@@ -4,6 +4,7 @@ import classnames from "classnames";
 import BlogLink from "./BlogLink.astro";
 import CTA from "./CTA.astro";
 import IconSubtitle from "./IconSubtitle.astro";
+import ArrowTopRight from "./icons/ArrowTopRight.astro";
 
 interface Props {
   idx: number;
@@ -105,11 +106,9 @@ const image = await src();
             ) : (
               <CTA id="contact-cta" href={link.href}>
                 {link.text}
-                <img
-                  src={"arrow-top-right.svg"}
-                  alt="Arrow Top Right"
-                  role="presentation"
-                  class="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4"
+                <ArrowTopRight
+                  classNames="hidden min-[330px]:block h-3 w-3 sm:h-4 sm:w-4"
+                  stroke="#1E1A1A"
                 />
               </CTA>
             )