FEAT: Add calcom booking to vibe code mvp page (#608)

* feat: Add calcom booking to page

* fix: text area word counter color contrast issue on dark background

Author: stefanskoricdev

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>

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"

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

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>