Contact success page

apps/website/src/components/CalcomEmbedInline.astro

@@ -60,7 +60,7 @@ const loadCalEmbed = () => {
         p(cal, ar);
       };
   })(window, "https://app.cal.com/embed/embed.js", "init");
-  Cal("init", "hello", { origin: "https://cal.com" });
+  Cal("init", eventType, { origin: "https://cal.com" });
 
   Cal.ns[eventType]("inline", {
     elementOrSelector,
@@ -91,6 +91,24 @@ const loadCalEmbed = () => {
     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";
+    }
+  });
 }
 
 if ("requestIdleCallback" in window) {

apps/website/src/components/ContactUsForm.astro

@@ -197,12 +197,8 @@ import "../styles/loader.css";
           return;
         }
 
-        if (notificationElem) {
-          notificationElem.classList.add("text-[#67a807]");
-          notificationElem.innerHTML = notification.frontmatter.success;
-          hideLoader();
-          clearForm();
-        }
+        // Redirect to success page
+        window.location.href = "/contact/success";
       });
     }
   </script>

apps/website/src/pages/contact/success.astro

@@ -0,0 +1,78 @@
+---
+import Base from "../../layouts/base.astro";
+import Navigation from "../../components/navigation.astro";
+import Section from "../../components/Section.astro";
+import { Image } from "astro:assets";
+import contactSuccessHero from "../../assets/contact-success-hero.png";
+---
+
+<Base>
+  <Navigation />
+  <main class="min-h-screen bg-gray-100">
+    <div class="w-full h-screen flex items-center justify-center">
+      <Section className="!py-0 !px-7 flex items-center justify-center w-full">
+        <div class="max-w-[1440px] w-full flex flex-col lg:flex-row items-center justify-center gap-7">
+        <!-- Content Column -->
+        <div class="w-full max-w-[501px] flex flex-col gap-7 text-center lg:text-left">
+          <!-- Main Content -->
+          <div class="flex flex-col gap-7">
+            <!-- Header -->
+            <div class="flex flex-col gap-4">
+              <h1 class="font-medium text-4xl md:text-[54px] leading-[1.1] text-secondary">
+                You're All Set!
+              </h1>
+            </div>
+
+            <!-- Description -->
+            <p class="text-lg md:text-[22px] leading-[1.45] text-secondary">
+              <span id="meeting-confirmation">
+                Your meeting is confirmed.<br>
+                A calendar invite is on its way to your inbox.<br>
+              </span>
+              Talk soon — we're looking forward to it.
+            </p>
+
+            <!-- Button -->
+            <div class="flex flex-col gap-[10px]">
+              <a
+                href="/"
+                class="flex items-center justify-center gap-[10px] px-[25px] py-4 bg-crocoder-yellow rounded-md font-medium text-base leading-[1.8] tracking-[0.02em] uppercase text-contrast hover:opacity-90 w-fit mx-auto lg:mx-0"
+              >
+                Back to homepage
+              </a>
+            </div>
+          </div>
+        </div>
+
+        <!-- Image Container -->
+        <div class="hidden md:flex w-full max-w-[706px] items-center justify-center">
+          <div class="w-full h-[529px] flex items-center justify-center">
+            <Image
+              src={contactSuccessHero}
+              alt="Success illustration"
+              class="w-full h-full object-contain"
+              loading="eager"
+              fetchpriority="high"
+              width={1652}
+              height={939}
+              widths={[320, 480, 640, 800, 1200]}
+              sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 706px"
+            />
+          </div>
+        </div>
+      </Section>
+    </div>
+  </main>
+</Base>
+
+<script is:inline>
+  // Check if the page was accessed from Calcom
+  const urlParams = new URLSearchParams(window.location.search);
+  const src = urlParams.get('src');
+  const meetingConfirmation = document.getElementById('meeting-confirmation');
+
+  if (src !== 'calcom' && meetingConfirmation) {
+    // Hide only the meeting-specific text if not from Calcom
+    meetingConfirmation.style.display = 'none';
+  }
+</script>

apps/website/src/pages/staff-augmentation.astro

@@ -1,5 +1,5 @@
 ---
-import BookACallForm from "../components/BookACallForm.astro";
+import CalcomEmbedInline from "../components/CalcomEmbedInline.astro";
 import Footer from "../components/footer.astro";
 import Navigation from "../components/navigation.astro";
 import Base from "../layouts/base.astro";
@@ -18,6 +18,7 @@ import handsPuzzleServiceIcon from "../assets/hands-puzzle-service-icon.svg";
 import crmServiceIcon from "../assets/crm-service-icon.svg";
 import circleCheckIcon from "../assets/circle-check-icon.svg";
 import quoteIcon from "../assets/quote-icon.svg";
+import meetingImage from "../assets/meeting-croc.png";
 import "../styles/main.css";
 
 const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
@@ -466,11 +467,52 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   </Section>
 
   <!-- CTA Section -->
-  <BookACallForm>
-    <span slot="title">
-      Let's Build Together
-    </span>
-  </BookACallForm>
+  <Section
+    className="bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]"
+    contentClassName={`${grid_classes} items-center`}
+  >
+    <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"
+    >
+      <Image
+        class="object-cover xl:p-6 md:p-0 p-8"
+        src={meetingImage}
+        alt="CroCoder team member in a video call consultation"
+        widths={[320, 480, 640, 800, 964]}
+        sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(67vw - 32px), calc(50vw - 28px)"
+        loading="lazy"
+      />
+    </div>
+    <div
+      id="book-a-call-section"
+      class="col-span-6 grid gap-4 md:col-span-12 md:text-center md:justify-items-center text-white xl:col-span-8 xl:col-start-3 scroll-mt-20"
+    >
+      <Pill>Book your call today</Pill>
+      <h2
+        class="text-[44px] leading-[48px] tracking-tight font-medium md:text-[74px] md:leading-[82px]"
+      >
+        Let's Build Together
+      </h2>
+      <p class="text-base leading-[26px] pt-3">
+        Stop wasting time being caught in operational bottlenecks. Schedule your
+        free call today, and let's help you deliver on your strategic vision with
+        confidence. Select a date below or
+        <a class="bold underline" href="/contact"> contact us here.</a>
+      </p>
+    </div>
+
+    <div
+      class="relative col-span-6 md:col-span-10 md:col-start-2 overflow-hidden flex flex-col justify-center bg-white rounded"
+    >
+      <div id="book-a-call"></div>
+      <CalcomEmbedInline
+        calLink="team/crocoder/staff-augmentation-intro"
+        eventType="staff-augmentation-intro"
+        elementOrSelector="#book-a-call"
+        hideEventTypeDetails={false}
+      />
+    </div>
+  </Section>
 
   <Footer />
 </Base>