Skip to content

Commit f95e69b

Browse files
davidabramdavidabram
authored
Contact success page (#540)
* sucess.astro * add success contact * staff augmentation proper calcom
1 parent b7b53ca commit f95e69b

5 files changed

Lines changed: 147 additions & 13 deletions

File tree

‎apps/website/src/assets/contact-success-hero.png‎

470 KB
Loading

‎apps/website/src/components/CalcomEmbedInline.astro‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ const loadCalEmbed = () => {
6060
p(cal, ar);
6161
};
6262
})(window, "https://app.cal.com/embed/embed.js", "init");
63-
Cal("init", "hello", { origin: "https://cal.com" });
63+
Cal("init", eventType, { origin: "https://cal.com" });
6464

6565
Cal.ns[eventType]("inline", {
6666
elementOrSelector,
@@ -91,6 +91,24 @@ const loadCalEmbed = () => {
9191
hideEventTypeDetails,
9292
layout,
9393
});
94+
95+
Cal.ns[eventType]("on", {
96+
action: "bookingSuccessful",
97+
callback: (e) => {
98+
const {data, type, namespace} = e.detail;
99+
console.log("Booking successful:", {data, type, namespace});
100+
window.location.href = "/contact/success?src=calcom";
101+
}
102+
});
103+
104+
Cal("on", {
105+
action: "bookingSuccessful",
106+
callback: (e) => {
107+
const {data, type, namespace} = e.detail;
108+
console.log("Global booking successful:", {data, type, namespace});
109+
window.location.href = "/contact/success?src=calcom";
110+
}
111+
});
94112
}
95113

96114
if ("requestIdleCallback" in window) {

‎apps/website/src/components/ContactUsForm.astro‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -197,12 +197,8 @@ import "../styles/loader.css";
197197
return;
198198
}
199199

200-
if (notificationElem) {
201-
notificationElem.classList.add("text-[#67a807]");
202-
notificationElem.innerHTML = notification.frontmatter.success;
203-
hideLoader();
204-
clearForm();
205-
}
200+
// Redirect to success page
201+
window.location.href = "/contact/success";
206202
});
207203
}
208204
</script>

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

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
import Base from "../../layouts/base.astro";
3+
import Navigation from "../../components/navigation.astro";
4+
import Section from "../../components/Section.astro";
5+
import { Image } from "astro:assets";
6+
import contactSuccessHero from "../../assets/contact-success-hero.png";
7+
---
8+
9+
<Base>
10+
<Navigation />
11+
<main class="min-h-screen bg-gray-100">
12+
<div class="w-full h-screen flex items-center justify-center">
13+
<Section className="!py-0 !px-7 flex items-center justify-center w-full">
14+
<div class="max-w-[1440px] w-full flex flex-col lg:flex-row items-center justify-center gap-7">
15+
<!-- Content Column -->
16+
<div class="w-full max-w-[501px] flex flex-col gap-7 text-center lg:text-left">
17+
<!-- Main Content -->
18+
<div class="flex flex-col gap-7">
19+
<!-- Header -->
20+
<div class="flex flex-col gap-4">
21+
<h1 class="font-medium text-4xl md:text-[54px] leading-[1.1] text-secondary">
22+
You're All Set!
23+
</h1>
24+
</div>
25+
26+
<!-- Description -->
27+
<p class="text-lg md:text-[22px] leading-[1.45] text-secondary">
28+
<span id="meeting-confirmation">
29+
Your meeting is confirmed.<br>
30+
A calendar invite is on its way to your inbox.<br>
31+
</span>
32+
Talk soon — we're looking forward to it.
33+
</p>
34+
35+
<!-- Button -->
36+
<div class="flex flex-col gap-[10px]">
37+
<a
38+
href="/"
39+
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"
40+
>
41+
Back to homepage
42+
</a>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<!-- Image Container -->
48+
<div class="hidden md:flex w-full max-w-[706px] items-center justify-center">
49+
<div class="w-full h-[529px] flex items-center justify-center">
50+
<Image
51+
src={contactSuccessHero}
52+
alt="Success illustration"
53+
class="w-full h-full object-contain"
54+
loading="eager"
55+
fetchpriority="high"
56+
width={1652}
57+
height={939}
58+
widths={[320, 480, 640, 800, 1200]}
59+
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 706px"
60+
/>
61+
</div>
62+
</div>
63+
</Section>
64+
</div>
65+
</main>
66+
</Base>
67+
68+
<script is:inline>
69+
// Check if the page was accessed from Calcom
70+
const urlParams = new URLSearchParams(window.location.search);
71+
const src = urlParams.get('src');
72+
const meetingConfirmation = document.getElementById('meeting-confirmation');
73+
74+
if (src !== 'calcom' && meetingConfirmation) {
75+
// Hide only the meeting-specific text if not from Calcom
76+
meetingConfirmation.style.display = 'none';
77+
}
78+
</script>

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

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import BookACallForm from "../components/BookACallForm.astro";
2+
import CalcomEmbedInline from "../components/CalcomEmbedInline.astro";
33
import Footer from "../components/footer.astro";
44
import Navigation from "../components/navigation.astro";
55
import Base from "../layouts/base.astro";
@@ -18,6 +18,7 @@ import handsPuzzleServiceIcon from "../assets/hands-puzzle-service-icon.svg";
1818
import crmServiceIcon from "../assets/crm-service-icon.svg";
1919
import circleCheckIcon from "../assets/circle-check-icon.svg";
2020
import quoteIcon from "../assets/quote-icon.svg";
21+
import meetingImage from "../assets/meeting-croc.png";
2122
import "../styles/main.css";
2223
2324
const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
@@ -466,11 +467,52 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
466467
</Section>
467468

468469
<!-- CTA Section -->
469-
<BookACallForm>
470-
<span slot="title">
471-
Let's Build Together
472-
</span>
473-
</BookACallForm>
470+
<Section
471+
className="bg-secondary !pb-16 md:!pb-24 !pt-0 overflow-visible mt-[220px] xl:mt-[300px]"
472+
contentClassName={`${grid_classes} items-center`}
473+
>
474+
<div
475+
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"
476+
>
477+
<Image
478+
class="object-cover xl:p-6 md:p-0 p-8"
479+
src={meetingImage}
480+
alt="CroCoder team member in a video call consultation"
481+
widths={[320, 480, 640, 800, 964]}
482+
sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(67vw - 32px), calc(50vw - 28px)"
483+
loading="lazy"
484+
/>
485+
</div>
486+
<div
487+
id="book-a-call-section"
488+
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"
489+
>
490+
<Pill>Book your call today</Pill>
491+
<h2
492+
class="text-[44px] leading-[48px] tracking-tight font-medium md:text-[74px] md:leading-[82px]"
493+
>
494+
Let's Build Together
495+
</h2>
496+
<p class="text-base leading-[26px] pt-3">
497+
Stop wasting time being caught in operational bottlenecks. Schedule your
498+
free call today, and let's help you deliver on your strategic vision with
499+
confidence. Select a date below or
500+
<a class="bold underline" href="/contact"> contact us here.</a>
501+
</p>
502+
</div>
503+
504+
<div
505+
class="relative col-span-6 md:col-span-10 md:col-start-2 overflow-hidden flex flex-col justify-center bg-white rounded"
506+
>
507+
<div id="book-a-call"></div>
508+
<CalcomEmbedInline
509+
calLink="team/crocoder/staff-augmentation-intro"
510+
eventType="staff-augmentation-intro"
511+
elementOrSelector="#book-a-call"
512+
hideEventTypeDetails={false}
513+
/>
514+
</div>
515+
</Section>
474516

475517
<Footer />
476518
</Base>

0 commit comments

Comments
 (0)