From 302e0daf233a755be4b232465d425ad3ea6ff104 Mon Sep 17 00:00:00 2001
From: stefanskoricdev <stefan@crocoder.dev>
Date: Fri, 12 Sep 2025 12:13:59 +0200
Subject: [PATCH 1/2] feat: Add calcom booking to page

---
 .../website/src/components/vibe-code-mvp/GetInTouch.astro | 1 +
 .../website/src/components/vibe-code-mvp/HowItWorks.astro | 2 +-
 apps/website/src/pages/vibe-code-mvp.astro                | 8 ++++++++
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/components/vibe-code-mvp/GetInTouch.astro b/apps/website/src/components/vibe-code-mvp/GetInTouch.astro
index 890a70a8..1bff6f40 100644
--- a/apps/website/src/components/vibe-code-mvp/GetInTouch.astro
+++ b/apps/website/src/components/vibe-code-mvp/GetInTouch.astro
@@ -11,6 +11,7 @@ import Section from "../Section.astro";
 <Section
   contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] max-sm:gap-0`}
   className="bg-contrast !pt-34 md:!pt-68"
+  idx="get-in-touch"
 >
   <div
     class="flex flex-col gap-2 md:gap-4 col-span-6 md:col-span-12 md:px-8 lg:col-span-5 lg:col-start-2 max-md:px-4 lg:px-0"
diff --git a/apps/website/src/components/vibe-code-mvp/HowItWorks.astro b/apps/website/src/components/vibe-code-mvp/HowItWorks.astro
index b0b26593..c2b1a318 100644
--- a/apps/website/src/components/vibe-code-mvp/HowItWorks.astro
+++ b/apps/website/src/components/vibe-code-mvp/HowItWorks.astro
@@ -48,7 +48,7 @@ const images = import.meta.glob<{ default: ImageMetadata }>(
       <div class="flex flex-wrap gap-2.5">
         <a
           id="book-a-call-action-hero"
-          href="#get-your-plan-section"
+          href="#get-in-touch"
           class="inline-block bg-crocoder-yellow rounded-md px-[25px] py-4 text-center text-contrast text-base font-medium hover:opacity-90 uppercase w-fit max-h-14"
         >
           Let's talk
diff --git a/apps/website/src/pages/vibe-code-mvp.astro b/apps/website/src/pages/vibe-code-mvp.astro
index 0e965323..501bc4b3 100644
--- a/apps/website/src/pages/vibe-code-mvp.astro
+++ b/apps/website/src/pages/vibe-code-mvp.astro
@@ -1,4 +1,5 @@
 ---
+import BookACallForm from "../components/BookACallForm.astro";
 import Footer from "../components/footer.astro";
 import Navigation from "../components/navigation.astro";
 import GetInTouch from "../components/vibe-code-mvp/GetInTouch.astro";
@@ -26,5 +27,12 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   <HowItWorks />
   <WhyWorkWithUs />
   <GetInTouch />
+  <div class="bg-contrast w-full">
+    <BookACallForm>
+      <span slot="title">
+        Build Your Business <span class="text-crocoder-yellow"> With Us </span>
+      </span>
+    </BookACallForm>
+  </div>
   <Footer />
 </Base>

From f324c582c0b389bd46e1c9b59b5f720eed15a81a Mon Sep 17 00:00:00 2001
From: stefanskoricdev <stefan@crocoder.dev>
Date: Fri, 12 Sep 2025 12:18:22 +0200
Subject: [PATCH 2/2] fix: text area word counter color contrast issue on dark
 background

---
 apps/website/src/components/BaseContactForm.astro | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/website/src/components/BaseContactForm.astro b/apps/website/src/components/BaseContactForm.astro
index 8d0f10b1..641cc87f 100644
--- a/apps/website/src/components/BaseContactForm.astro
+++ b/apps/website/src/components/BaseContactForm.astro
@@ -76,7 +76,12 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
         errorText={formContent.frontmatter.requiredField}
         onDark={onDark}
       />
-      <span class="text-secondary text-xs text-right mt-1 block">
+      <span
+        class={classnames("text-xs text-right mt-1 block", {
+          "text-secondary": !onDark,
+          "text-neutral-50": onDark,
+        })}
+      >
         <span id="char-counter">0</span>/1500
       </span>
     </div>