Feat: vibe code ship mvp section (#594)

* feat: add get in touch section

* fix: add smaller text on mobile

Author: gloriababic

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

@@ -1,8 +1,8 @@
 ---
-import Field from "./Field.astro";
+import classnames from "classnames";
 import * as formContent from "../content/contact/form.md";
 import "../styles/loader.css";
-import classnames from "classnames";
+import Field from "./Field.astro";
 
 type Props = {
   onDark?: boolean;
@@ -93,7 +93,7 @@ const { onDark, classNames } = Astro.props;
         id="form-consent-text"
         for="form-consent"
         class={classnames(
-          "[&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer",
+          "[&>em]:not-italic [&_b]:text-[#67a807] [&>em]:font-semibold cursor-pointer text-sm sm:text-base",
           {
             "text-secondary": !onDark,
             "text-neutral-50": onDark,

apps/website/src/components/BaseContactForm.astro

@@ -0,0 +1,58 @@
+---
+import { Image } from "astro:assets";
+import getInTouchImage from "../../assets/get-in-touch.png";
+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";
+---
+
+<Section
+  contentClassName={`${grid_classes} bg-[#5362DBE5]/[0.9] text-white rounded-[48px] mt-12 md:mt-22 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 classNames="pb-6 lg:pb-12 max-sm:gap-0">
+      <span
+        slot="submit-button-content"
+        class="flex items-center justify-center gap-2.5 text-sm sm:text-base"
+      >
+        Get a free build review <RightArrow />
+      </span>
+    </BaseContactForm>
+  </div>
+</Section>

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

@@ -1,6 +1,7 @@
 ---
 import Footer from "../components/footer.astro";
 import Navigation from "../components/navigation.astro";
+import GetInTouch from "../components/vibe-code-mvp/GetInTouch.astro";
 import Hero from "../components/vibe-code-mvp/Hero.astro";
 import Base from "../layouts/base.astro";
 import "../styles/main.css";
@@ -12,5 +13,6 @@ const { ogImage = "https://www.crocoder.dev/homepage-metadata-img.png" } =
 <Base className="bg-white !justify-start" ogImage={ogImage}>
   <Navigation />
   <Hero />
+  <GetInTouch />
   <Footer />
 </Base>