Feat: Update contact form design (#639)

* feat: add new background for contact form

* fix: edit col start and span for lg screens

* fix: add more padding and text style for contact forms

Author: ivke995

apps/website/src/components/BaseContactForm.astro

@@ -17,7 +17,7 @@ const { onDark, classNames, formId, formClassNames } = Astro.props;
 <base-contact-form data-id={formId} class={classnames(classNames)}>
   <form
     class={classnames(
-      "group/contact-us flex flex-col gap-2 relative",
+      "group/contact-us flex flex-col gap-2 bg-white rounded-xl px-7 relative",
       formClassNames,
     )}
     id={formId}

apps/website/src/components/contact/Hero.astro

@@ -61,11 +61,10 @@ import RightArrow from "../icons/RightArrow.astro";
           </span>
         </p>
       </div>
-
       <BaseContactForm
         formId="contact-us"
-        onDark
-        classNames="col-span-6 md:col-span-12 lg:col-span-6 xl:col-span-5 lg:col-start-7 md:p-12 lg:pl-0"
+        classNames="col-span-6 md:col-span-12 lg:col-span-6 xl:col-span-5 lg:col-start-7 md:p-12 lg:pl-0 mb-7 md:mb-0"
+        formClassNames="py-7"
       >
         <span
           slot="submit-button-content"

apps/website/src/components/staff-agmentation/GetYourPlan.astro

@@ -48,7 +48,7 @@ import "../../styles/loader.css";
       />
     </div>
     <div
-      class="col-span-6 flex flex-wrap gap-7 items-center md:col-span-11 lg:col-start-2 lg:col-span-8 lg:row-start-1 xl:col-start-2 xl:col-span-5"
+      class="col-span-6 flex flex-wrap gap-7 items-center md:col-span-11 lg:col-start-1 lg:col-span-7 lg:row-start-1 xl:col-start-2 xl:col-span-5"
     >
       <h2 class="font-medium leading-none text-[32px] text-white tracking-[-0.7px]">
         Get Your <span class="text-crocoder-yellow"

apps/website/src/components/staff-agmentation/GetYourPlanForm.astro

@@ -5,15 +5,15 @@ import "../../styles/loader.css";
 import * as formContent from "../../content/contact/get-your-plan-form.md";
 ---
 
-<div class="col-span-6 lg:col-span-5 lg:col-start-2 md:row-start-2">
+<div class="col-span-6 lg:col-span-6 lg:col-start-1 md:row-start-2 xl:col-start-2 xl:col-span-5">
   <form
     id="get-your-plan-form"
-    class="group/contact-us mx-auto flex-col gap-2"
+    class="group/contact-us mx-auto bg-white rounded-xl flex-col py-7 gap-2 px-7"
     novalidate
   >
     <Field
       isTextArea={false}
-      onDark
+      classNames=""
       inputProps={{
         name: "form-full-name",
         id: "form-full-name",
@@ -30,7 +30,6 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
     />
     <Field
       isTextArea={false}
-      onDark
       inputProps={{
         name: "form-email",
         id: "form-email",
@@ -60,7 +59,7 @@ import * as formContent from "../../content/contact/get-your-plan-form.md";
           set:html={formContent.frontmatter.consent}
           id="form-consent-text"
           for="form-consent"
-          class="text-neutral-50 [&>em]:not-italic [&>em]:font-semibold cursor-pointer"
+          class="text-[#3C3843] [&>em]:not-italic [&>em]:font-semibold cursor-pointer"
         />
       </div>
       <button

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

@@ -45,12 +45,11 @@ import Section from "../Section.astro";
     </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"
+    class="max-md:px-4 md:col-span-12 md:px-8 lg:px-0 lg:mt-0 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
       formId="vibe-code-contact-us-footer"
-      onDark
-      formClassNames="pb-6 lg:pb-12 max-sm:gap-0"
+      formClassNames="my-24 py-7 max-sm:gap-0"
     >
       <span
         slot="submit-button-content"

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

@@ -90,8 +90,7 @@ import RightArrow from "../icons/RightArrow.astro";
       >
         <BaseContactForm
           formId="vibe-code-contact-us-hero"
-          onDark
-          formClassNames="lg:-top-6 max-lg:max-w-3xl max-lg:mx-auto"
+          formClassNames="lg:-top-6 py-7 max-lg:max-w-3xl max-lg:mx-auto"
         >
           <span
             slot="submit-button-content"