feat: add get in touch section

Author: gloriababic

apps/website/src/assets/get-in-touch.png

@@ -5,15 +5,18 @@ import "../styles/loader.css";
 import classnames from "classnames";
 
 type Props = {
-  buttonText?: HTMLElement | string;
   onDark?: boolean;
+  className?: string;
 };
 
-const { onDark, buttonText } = Astro.props;
+const { onDark, className } = Astro.props;
 ---
 
 <form
-  class="group/contact-us flex flex-col gap-2 relative -top-6"
+  class={classnames(
+    "group/contact-us flex flex-col gap-2 relative -top-6",
+    className,
+  )}
   id="contact-us-form"
   novalidate
 >

apps/website/src/components/BaseContactForm.astro

@@ -0,0 +1,58 @@
+---
+import { grid_classes } from "../_grid";
+import BaseContactForm from "../BaseContactForm.astro";
+import RightArrow from "../icons/RightArrow.astro";
+import Pill from "../Pill.astro";
+import Section from "../Section.astro";
+import { Image } from "astro:assets";
+import getInTouchImage from "../../assets/get-in-touch.png";
+---
+
+<Section
+  contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] mt-12 max-sm:gap-0`}
+  className="bg-contrast"
+>
+  <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"
+  >
+    <div class="-translate-y-1/3 -mb-20">
+      <Image
+        class="object-cover"
+        src={getInTouchImage}
+        alt="Croco and client talking"
+        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 class="w-full pb-2 lg:pb-4 md:py-0 lg:px-0 z-10">
+      <Pill
+        className="text-[10px] min-[340px]:text-xs min-[390px]:text-sm sm:text-base md:text-lg px-2 py-1 min-[390px]:px-3 min-[390px]:py-1.5 sm:px-4 sm:py-2 max-h-[36px]"
+        >Get in touch</Pill
+      >
+    </div>
+    <h1
+      class="text-[18px] leading-[22px] min-[390px]:text-[24px] min-[390px]:leading-[28px] sm:text-[32px] sm:leading-[36px] md:text-[54px] md:leading-[59.4px] font-medium tracking-tight"
+    >
+      Let’s <span class="text-[#FEB534]"> Ship </span> Your MVP!
+    </h1>
+    <p
+      class="font-normal text-sm leading-5 min-[390px]:text-base min-[390px]:leading-6 sm:text-lg sm:leading-7 md:text-[22px] md:leading-8 tracking-normal"
+    >
+      We’ll review what you’ve built and tell you exactly what it’ll take to
+      finish. Simple, honest, no commitment.
+    </p>
+  </div>
+  <div
+    class="max-md:px-4 md:col-span-12 md:px-8 lg:px-0 lg:mt-28 lg:flex lg:flex-col row-start-2 col-start-1 col-span-6 lg:col-span-5 lg:col-start-7 lg:row-start-1"
+  >
+    <BaseContactForm onDark className="top-0 pb-6 lg:pb-12 max-sm:gap-0">
+      <span
+        slot="submit-button-content"
+        class="flex items-center justify-center gap-2.5"
+      >
+        Get a free build review <RightArrow />
+      </span>
+    </BaseContactForm>
+  </div>
+</Section>

apps/website/src/components/vibe-code-mvp/GetInTouch.astro

@@ -20,6 +20,7 @@ import circleCheckIcon from "../assets/circle-check-icon.svg";
 import quoteIcon from "../assets/quote-icon.svg";
 import "../styles/main.css";
 import Hero from "../components/vibe-code-mvp/Hero.astro";
+import GetInTouch from "../components/vibe-code-mvp/GetInTouch.astro";
 
 const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
   Astro.props;
@@ -28,6 +29,6 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
 <Base className="bg-white !justify-start" ogImage={ogImage}>
   <Navigation />
   <Hero />
-
+  <GetInTouch />
   <Footer />
 </Base>