From cc910cec593411e8071f24b1693ee23fab8fb967 Mon Sep 17 00:00:00 2001
From: Ben Parker <ben.parker@linaro.org>
Date: Wed, 26 Nov 2025 10:34:45 +0000
Subject: [PATCH] changes to contact page

---
 src/components/sections/CardGrid.astro | 137 +++++++++++++++++--------
 src/content/pages/contact.md           |  57 +++++-----
 src/content/schemas/sections.ts        |  10 ++
 3 files changed, 128 insertions(+), 76 deletions(-)

diff --git a/src/components/sections/CardGrid.astro b/src/components/sections/CardGrid.astro
index d11e7589..d69e320d 100644
--- a/src/components/sections/CardGrid.astro
+++ b/src/components/sections/CardGrid.astro
@@ -3,56 +3,109 @@ import type { cardsSchema } from "@/content/schemas/sections";
 import { Icon } from "astro-icon/components";
 import type { z } from "astro/zod";
 import { marked } from "marked";
+import ContactModal from "../forms/ContactModal.astro";
+import InsightModal from "../forms/InsightModal.astro";
 type Props = z.infer<typeof cardsSchema>;
 const { cards, styles, divider } = Astro.props;
 ---
 
 <ul class:list={["list-none flex flex-wrap", styles?.container]}>
   {
-    cards.map(async ({ icon, title, text, button, style }, index) => {
-      const content = text ? await marked.parse(text) : null;
-      const isLast = index === cards.length - 1;
+    cards.map(
+      async ({ icon, title, text, button, style, contact_button }, index) => {
+        const content = text ? await marked.parse(text) : null;
+        const isLast = index === cards.length - 1;
+        const parseTitle = title ? await marked.parse(title) : null;
 
-      return (
-        <>
-          <li class:list={[styles?.card, style]}>
-            {icon && <Icon name={icon} size={100} class="my-0" />}
-            {title && (
-              <h3 class:list={[styles?.card_title, "text-4xl my-5 z-50"]}>
-                {title}
-              </h3>
-            )}
-
-            <div
-              class:list={[
-                `text-xl prose-a:text-blue-300 text-inherit`,
-                styles?.content,
-              ]}
-              set:html={content}
-            />
-
-            {button && (
-              <a
-                href={button.url}
-                target={button.url.startsWith("https") ? "_blank" : "_self"}
-                class="no-underline inline-block mt-auto"
-              >
-                <div
-                  class:list={[
-                    `linaro-gradient-button mt-auto`,
-                    styles?.button,
-                  ]}
+        return (
+          <>
+            <li class:list={[styles?.card, style]}>
+              {icon && <Icon name={icon} size={100} class="my-0" />}
+              {title && (
+                <h3
+                  class:list={[styles?.card_title, "text-4xl my-5 z-50"]}
+                  set:html={parseTitle}
+                />
+              )}
+              <div
+                class:list={[
+                  `text-xl prose-a:text-blue-300 text-inherit`,
+                  styles?.content,
+                ]}
+                set:html={content}
+              />
+              {button && (
+                <a
+                  href={button.url}
+                  target={button.url.startsWith("https") ? "_blank" : "_self"}
+                  class="no-underline inline-block mt-auto"
                 >
-                  {button.text}
-                </div>
-              </a>
+                  <div
+                    class:list={[
+                      `linaro-gradient-button mt-auto`,
+                      styles?.button,
+                    ]}
+                  >
+                    {button.text}
+                  </div>
+                </a>
+              )}
+              {contact_button &&
+                (() => {
+                  if (contact_button.type === "form") {
+                    return (
+                      <ContactModal
+                        form_id={contact_button.form_id}
+                        modal_id={contact_button.modal_id}
+                        button_text={contact_button.button_text}
+                        description={contact_button.title}
+                        formName={contact_button.formName}
+                      />
+                    );
+                  }
+
+                  if (contact_button.type === "insight") {
+                    return (
+                      <InsightModal
+                        button_text={contact_button.button_text}
+                        formName={contact_button.formName}
+                      />
+                    );
+                  }
+                  return null;
+                })()}
+            </li>
+            {divider && !isLast && (
+              <li class="not-prose w-[100px] h-[2px] bg-gradient-to-r md:bg-gradient-to-b from-transparent via-white to-transparent opacity-50 my-4 md:w-[2px] md:h-[160px] md:mx-4" />
             )}
-          </li>
-          {divider && !isLast && (
-            <li class="not-prose w-[100px] h-[2px] bg-gradient-to-r md:bg-gradient-to-b from-transparent via-white to-transparent opacity-50 my-4 md:w-[2px] md:h-[160px] md:mx-4" />
-          )}
-        </>
-      );
-    })
+          </>
+        );
+      },
+    )
   }
 </ul>
+<script>
+  ["DOMContentLoaded", "astro:after-swap"].forEach((event) => {
+    document.addEventListener(event, addListeners);
+  });
+
+  function addListeners() {
+    const dialogs = document.querySelectorAll(
+      "[data-contact-modal]",
+    ) as NodeListOf<HTMLDialogElement>;
+
+    dialogs.forEach((dialog) => {
+      dialog.addEventListener("click", function (event) {
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog =
+          rect.top <= event.clientY &&
+          event.clientY <= rect.top + rect.height &&
+          rect.left <= event.clientX &&
+          event.clientX <= rect.left + rect.width;
+        if (!isInDialog) {
+          dialog.close();
+        }
+      });
+    });
+  }
+</script>
diff --git a/src/content/pages/contact.md b/src/content/pages/contact.md
index 32bb05f6..2315e1d7 100644
--- a/src/content/pages/contact.md
+++ b/src/content/pages/contact.md
@@ -7,47 +7,30 @@ description: |
 hero:
   title: >
     Contact Linaro
-  background_image: linaro-website/graphics/close-up-woman_sbf1xz
+  background_image: /linaro-website/graphics/young-woman-with-curly-hair-using-phone-street_1_zfsbea.png
   description: ""
   styles:
-    text_container: text-center w-full
-    title: w-full text-center
-    background: bg-right-top md:bg-top opacity-50
+    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
-    main_container: max-h-[30rem] min-h-[30ch] h-[30vh]
 flow:
   - row: container_row
+    styles:
+      outer: purple-gradient-container
     sections:
-      - component: contact_buttons
+      - component: contact
+        form_id: "7"
+        formName: "sales_contact"
         styles:
-          card: max-w-[30ch]  mx-auto flex flex-col justify-center items-center
-          container: justify-around gap-x-5 gap-y-20
-          button: mt-8
-          card_title: text-[2rem] text-center
-        buttons:
-          - title: Sales Enquiries
-            type: form
-            icon: workspaces
-            button_text: Get in Touch
-            form_id: "7"
-            modal_id: general
-            formName: "sales_contact"
-          - title: Media Enquiries
-            type: form
-            icon: flash_on
-            button_text: Get in Touch
-            form_id: "8"
-            modal_id: marketing
-            formName: "media_contact"
-          - title: Careers Enquiries
-            type: link
-            icon: handshake
-            button_text: Get in Touch
-            url: /careers
+          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
+        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:
-      outer: purple-gradient-container
     sections:
+      - component: faded_line
       - component: cards
         styles:
           card: max-w-[40ch]  flex flex-col items-start
@@ -55,10 +38,16 @@ flow:
         cards:
           - title: Technical Support
             text: |
+              96Boards Technical Support - If you have a technical support query relating to 96Boards, please post your question on [96Boards](https://discuss.96boards.org/).
+
+              Linaro Technical Support - If you have a technical support query relating to Linaro, please go to our support page.
               If you have a technical support query relating to Linaro, please go to our [support page](https://support.linaro.org/).
           - title: Legal Information
             text: Linaro's legal information can be found on the [Legal page](/legal).
 
-          - title: Getting Involved with the Community
-            text: For discussion around Linux and Open Source on Arm, subscribe to the lists on [Linaro Lists Site](https://lists.linaro.org/mailman3/lists/).
+          - title: <span class="text-linaro-yellow">Subscribe to our newsletter</span>
+            contact_button:
+              button_text: Subscribe
+              type: insight
+              formName: newsletter
 ---
diff --git a/src/content/schemas/sections.ts b/src/content/schemas/sections.ts
index f828d44b..692e8f44 100644
--- a/src/content/schemas/sections.ts
+++ b/src/content/schemas/sections.ts
@@ -53,6 +53,16 @@ export const cardsSchema = z.object({
           url: z.string(),
         })
         .optional(),
+      contact_button: z
+        .object({
+          form_id: z.string().optional(),
+          modal_id: z.string().optional(),
+          button_text: z.string(),
+          type: z.string(),
+          title: z.string().optional(),
+          formName: z.string(),
+        })
+        .optional(),
     }),
   ),
   divider: z.boolean().optional(),