Update: contact form

src/components/forms/ContactForm.astro

@@ -20,7 +20,7 @@ const inputFields = [
     : ["bg-black lg:min-w-[40rem] max-w-xl rounded-3xl px-8 py-4 w-full"]}
 >
   <form
-    class="flex flex-col items-start gap-8"
+    class="flex flex-col items-start gap-3 md:gap-4 w-full min-w-0"
     id="contact-form"
     data-contact-form={form_id}
     method={modal_id ? "modal" : "get"}

src/components/sections/Contact.astro

@@ -14,14 +14,20 @@ if (content) {
 }
 ---
 
-<div class:list={["items-center gap-12", styles?.card]}>
-  <article
-    set:html={markdownContent}
-    class:list={["text-white w-2/3", styles.content]}
-  />
+<div class:list={["flex flex-col items-center gap-2 md:gap-4 text-center w-full max-w-full", styles?.card]}>
+  <h2 class="text-2xl sm:text-4xl md:text-5xl lg:text-6xl linaro-gradient-text font-bold">
+    Contact Linaro
+  </h2>
+  {
+    content && (
+      <article
+        set:html={markdownContent}
+        class:list={["text-white text-base md:text-lg lg:text-xl max-w-2xl w-full px-2", styles?.content]}
+      />
+    )
+  }
   <ContactForm
     form_id={form_id}
-    description={description}
     formName={formName}
     styles={styles}
   />

src/content/pages/contact.md

@@ -3,41 +3,30 @@ slug: contact
 title: Contact
 description: |
   Linaro empowers rapid product deployment within the dynamic ARM ecosystem. Our cutting-edge solutions and collaborative platform facilitate the swift development, testing, and delivery of ARM-based innovations, enabling businesses to stay ahead in today's competitive technology landscape.
-hero:
-  title: >
-    Contact Linaro
-  background_image: /linaro-website/graphics/young-woman-with-curly-hair-using-phone-street_1_zfsbea.png
-  description: ""
-  styles:
-    main_container: lg:h-[calc(100vh)] h-[calc(35vh)]
-    text_container: text-center w-full lg:pl-40
-    title: w-full text-left
-    background: w-full
-    description: text-md sm:text-lg
 flow:
   - row: container_row
     styles:
-      outer: purple-gradient-container
+      outer: "purple-gradient-container !pt-0 !pb-8 !mb-0"
+      inner: "!pt-0 pb-8"
     sections:
       - component: contact
         form_id: "7"
         formName: "sales_contact"
         styles:
-          card: flex flex-col md:flex-row bg-background border rounded-xl p-8
-          form: w-full md:w-1/2 bg-background
-          content: w-full md:w-1/2 text-2xl
+          card: pt-0 px-4 pb-4 md:px-8 md:pb-8 w-full max-w-full
+          form: w-full max-w-xl min-w-0 px-4 md:px-8
         content: We’d love to hear from you so please send us a message and one of our team will be in touch!
   - row: container_row
+    styles:
+      inner: "!pt-8 py-12"
     sections:
       - component: faded_line
       - component: cards
         styles:
-          card: max-w-[40ch]  flex flex-col items-start
+          card: max-w-[40ch] flex flex-col items-center text-center gap-6
+          card_title: whitespace-normal sm:whitespace-nowrap
           container: justify-center gap-24
         cards:
-          - title: Legal Information
-            text: Linaro's legal information can be found on the [Legal page](/legal).
-
           - title: <span class="text-linaro-yellow">Subscribe to our newsletter</span>
             contact_button:
               button_text: Subscribe