From 96bf02e6e2afc6f0371b0b9582fb9764f3a5dc06 Mon Sep 17 00:00:00 2001
From: George Adams <georgeadams1995@gmail.com>
Date: Wed, 5 Feb 2025 02:40:20 +0000
Subject: [PATCH] fixup join page form (#756)

* fixup join page form

* add tests
---
 .../__snapshots__/CommonCard.test.tsx.snap    |  12 +-
 src/components/Common/CommonCard/index.tsx    |   9 +-
 src/components/Layout/layout.scss             |   2 +-
 src/components/NavBar/index.tsx               |   2 +-
 .../Support/WaysToSupport/index.tsx           |   3 +
 .../__snapshots__/join.test.tsx.snap          |  87 ++-
 .../__snapshots__/members.test.tsx.snap       | 707 ++++++++++++++++++
 .../__snapshots__/support-us.test.tsx.snap    |  48 +-
 src/pages/join.tsx                            |  23 +-
 src/pages/{supporters.tsx => members.tsx}     |  17 +-
 10 files changed, 851 insertions(+), 59 deletions(-)
 create mode 100644 src/pages/__tests__/__snapshots__/members.test.tsx.snap
 rename src/pages/{supporters.tsx => members.tsx} (87%)

diff --git a/src/components/Common/CommonCard/__tests__/__snapshots__/CommonCard.test.tsx.snap b/src/components/Common/CommonCard/__tests__/__snapshots__/CommonCard.test.tsx.snap
index 82f07fac..e3314b05 100644
--- a/src/components/Common/CommonCard/__tests__/__snapshots__/CommonCard.test.tsx.snap
+++ b/src/components/Common/CommonCard/__tests__/__snapshots__/CommonCard.test.tsx.snap
@@ -19,11 +19,13 @@ exports[`CommonButton component > should render correctly 1`] = `
         test
       </p>
     </div>
-    <button
-      class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
-    >
-      test
-    </button>
+    <a>
+      <button
+        class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+      >
+        test
+      </button>
+    </a>
   </div>
 </div>
 `;
diff --git a/src/components/Common/CommonCard/index.tsx b/src/components/Common/CommonCard/index.tsx
index 5f9893ba..aad518a6 100644
--- a/src/components/Common/CommonCard/index.tsx
+++ b/src/components/Common/CommonCard/index.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import { Link } from "gatsby-plugin-react-i18next"
 
 const CommonCard = ({ data }) => {
   return (
@@ -9,9 +10,11 @@ const CommonCard = ({ data }) => {
         </h3>
         <p className="mt-6 text-xl text-grey font-normal">{data.description}</p>
       </div>
-      <button className="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border ">
-        {data.button}
-      </button>
+      <Link to={data.href}>
+        <button className="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border ">
+          {data.button}
+        </button>
+      </Link>
     </div>
   )
 }
diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss
index 55a539ad..5246ce0a 100644
--- a/src/components/Layout/layout.scss
+++ b/src/components/Layout/layout.scss
@@ -190,4 +190,4 @@ pre code::after,
 pre tt::before,
 pre tt::after {
   content: none;
-}
\ No newline at end of file
+}
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 98f0e850..9affce05 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -27,7 +27,7 @@ const navigation: NavItem[] = [
     children: [
       { name: "What We do", href: "/what-we-do" },
       { name: "Business Benefits", href: "/business-benefits" },
-      { name: "Our Supporters", href: "/supporters" },
+      { name: "Our Members", href: "/members" },
       { name: "Our Adopters", href: "#" },
       { name: "Support Us", href: "/support-us" },
     ],
diff --git a/src/components/Support/WaysToSupport/index.tsx b/src/components/Support/WaysToSupport/index.tsx
index 1c060c79..86a4cf93 100644
--- a/src/components/Support/WaysToSupport/index.tsx
+++ b/src/components/Support/WaysToSupport/index.tsx
@@ -9,18 +9,21 @@ const WaysToSupport = () => {
       description:
         "Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime",
       button: "Learn More",
+      href: "#",
     },
     {
       title: "Become a sponsor",
       description:
         "Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime",
       button: "Become a sponsor",
+      href: "#",
     },
     {
       title: "Become a member",
       description:
         "Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime",
       button: "Learn More",
+      href: "/join",
     },
   ]
   return (
diff --git a/src/pages/__tests__/__snapshots__/join.test.tsx.snap b/src/pages/__tests__/__snapshots__/join.test.tsx.snap
index 44a335a9..320f725c 100644
--- a/src/pages/__tests__/__snapshots__/join.test.tsx.snap
+++ b/src/pages/__tests__/__snapshots__/join.test.tsx.snap
@@ -2,28 +2,89 @@
 
 exports[`Join page > renders correctly 1`] = `
 <main>
-  <section
-    class="py-5 text-center container"
+  <div
+    class="relative pt-40 pb-16 md:pb-36 md:pt-60 overflow-hidden"
   >
     <div
-      class="row py-lg-5"
+      class="w-full relative"
+    >
+      <div
+        class="absolute z-[-1] w-[2396px] h-[1340px] left-[23px] md:left-[112px] top-[21px] md:top-[171px] bg-[#410170] shadow-[0_0_400px_rgba(65,1,112,1)] rounded-full blur-[400px]"
+      />
+      <div
+        class="absolute z-[-1] w-[1487px] h-[893px] left-[120px] md:left-[676px] top-[120px] md:top-[395px] bg-[#B62987] shadow-[0_0_400px_rgba(182,41,135,1)] rounded-full blur-[400px]"
+      />
+      <div
+        class="absolute z-[-1] w-[688px] h-[446px] left-[400px] md:left-[1131px] top-[618px] bg-[#FE8492] shadow-[0_0_400px_rgba(254,132,146,1)] rounded-full blur-[400px]"
+      />
+    </div>
+    <div
+      class="mx-auto max-w-[1048px] w-full px-6 lg:px-0 flex flex-col items-center justify-center"
     >
       <div
-        class="col-lg-8 col-md-8 mx-auto"
+        class="self-stretch flex-col justify-center items-center gap-6 flex"
       >
-        <h1
-          class="fw-light"
+        <div
+          class="self-stretch  flex-col justify-center items-center gap-4 flex"
         >
-          Join the Eclipse Adoptium® Working Group
-        </h1>
-      </div>
-      <div>
+          <div
+            class="justify-start items-center gap-3 inline-flex"
+          >
+            <svg
+              fill="none"
+              height="14"
+              viewBox="0 0 14 14"
+              width="14"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                fill="#FF1464"
+                height="8"
+                rx="2"
+                width="8"
+                x="3"
+                y="3"
+              />
+              <rect
+                height="11"
+                rx="3.5"
+                stroke="#FF1464"
+                stroke-opacity="0.25"
+                stroke-width="3"
+                width="11"
+                x="1.5"
+                y="1.5"
+              />
+            </svg>
+            <div
+              class="text-rose-600 text-base font-bold leading-normal"
+            >
+              Join the Eclipse Adoptium® Working Group
+            </div>
+          </div>
+          <div
+            class="self-stretch text-center text-white   text-[56px] lg:text-[80px] leading-[114.286%] md:leading-[120%] font-semibold"
+          >
+            Joining the Working Group
+          </div>
+        </div>
         <div
-          id="reactHubspotForm0"
-          style="display: none;"
-        />
+          class="self-stretch text-center text-lightgrey text-[20px] font-normal leading-[140%] undefined"
+        >
+          Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+        </div>
       </div>
     </div>
+  </div>
+  <section
+    class="mx-auto max-w-4xl w-full p-6 lg:px-0 items-center justify-center"
+  >
+    <div>
+      <div
+        id="reactHubspotForm0"
+        style="display: none;"
+      />
+    </div>
   </section>
 </main>
 `;
diff --git a/src/pages/__tests__/__snapshots__/members.test.tsx.snap b/src/pages/__tests__/__snapshots__/members.test.tsx.snap
new file mode 100644
index 00000000..c3295124
--- /dev/null
+++ b/src/pages/__tests__/__snapshots__/members.test.tsx.snap
@@ -0,0 +1,707 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Members page > renders correctly 1`] = `
+<main>
+  <div
+    class="relative pt-40 pb-16 md:pb-36 md:pt-60 overflow-hidden"
+  >
+    <div
+      class="w-full relative"
+    >
+      <div
+        class="absolute z-[-1] w-[2396px] h-[1340px] left-[23px] md:left-[112px] top-[21px] md:top-[171px] bg-[#410170] shadow-[0_0_400px_rgba(65,1,112,1)] rounded-full blur-[400px]"
+      />
+      <div
+        class="absolute z-[-1] w-[1487px] h-[893px] left-[120px] md:left-[676px] top-[120px] md:top-[395px] bg-[#B62987] shadow-[0_0_400px_rgba(182,41,135,1)] rounded-full blur-[400px]"
+      />
+      <div
+        class="absolute z-[-1] w-[688px] h-[446px] left-[400px] md:left-[1131px] top-[618px] bg-[#FE8492] shadow-[0_0_400px_rgba(254,132,146,1)] rounded-full blur-[400px]"
+      />
+    </div>
+    <div
+      class="mx-auto max-w-[1048px] w-full px-6 lg:px-0 flex flex-col items-center justify-center"
+    >
+      <div
+        class="self-stretch flex-col justify-center items-center gap-6 flex"
+      >
+        <div
+          class="self-stretch  flex-col justify-center items-center gap-4 flex"
+        >
+          <div
+            class="justify-start items-center gap-3 inline-flex"
+          >
+            <svg
+              fill="none"
+              height="14"
+              viewBox="0 0 14 14"
+              width="14"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <rect
+                fill="#FF1464"
+                height="8"
+                rx="2"
+                width="8"
+                x="3"
+                y="3"
+              />
+              <rect
+                height="11"
+                rx="3.5"
+                stroke="#FF1464"
+                stroke-opacity="0.25"
+                stroke-width="3"
+                width="11"
+                x="1.5"
+                y="1.5"
+              />
+            </svg>
+            <div
+              class="text-rose-600 text-base font-bold leading-normal"
+            >
+              Our Members
+            </div>
+          </div>
+          <div
+            class="self-stretch text-center text-white   text-[56px] lg:text-[80px] leading-[114.286%] md:leading-[120%] font-semibold"
+          >
+            Who we work with
+          </div>
+        </div>
+        <div
+          class="self-stretch text-center text-lightgrey text-[20px] font-normal leading-[140%] undefined"
+        >
+          Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="overflow-auto px-3 py-5 w-full md:w-auto"
+  >
+    <h3
+      class="flex space-x-10 whitespace-nowrap  justify-center py-2"
+    >
+      <a
+        href="#strategic"
+      >
+        <span
+          class="text-[16px] py-2 border-primary w-full text-base font-normal leading-6
+                outline-none hover:text-white hover:border-b
+                hover:border-[#ff1464] text-[#8a809e] border-b
+                border-transparent cursor-pointer transition-all duration-200 ease-in-out"
+        >
+          Strategic Members
+        </span>
+      </a>
+      <a
+        href="#enterprise"
+      >
+        <span
+          class="text-[16px] py-3 border-primary w-full text-base font-normal leading-6
+                outline-none hover:text-white hover:border-b
+                hover:border-[#ff1464] text-[#8a809e] border-b
+                border-transparent cursor-pointer transition-all duration-200 ease-in-out"
+        >
+          Enterprise Members
+        </span>
+      </a>
+      <a
+        href="#participant"
+      >
+        <span
+          class="text-[16px] py-2 border-primary w-full text-base font-normal leading-6
+                outline-none hover:text-white hover:border-b
+                hover:border-[#ff1464] text-[#8a809e] border-b
+                border-transparent cursor-pointer transition-all duration-200 ease-in-out"
+        >
+          Participant Members
+        </span>
+      </a>
+    </h3>
+  </div>
+  <section
+    class="max-w-[1264px] md:px-0 px-6 w-full mx-auto flex flex-col items-center justify-center py-10"
+  >
+    <div
+      class="max-w-[700px] mx-auto"
+    >
+      <h3
+        class="text-[36px] sm:text-[42px] leading-[56px] text-center"
+      >
+        Strategic Members
+      </h3>
+      <p
+        class="text-[16px] leading-[24px] text-grey text-center mt-3"
+      >
+        Companies that use Eclipse Temurin in production.
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col items-center justify-center mt-3"
+    >
+      <div
+        class="w-full flex flex-col items-center justify-center mt-3"
+      >
+        <button
+          aria-hidden="true"
+          style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
+          type="button"
+        />
+        <div>
+          <div
+            class="w-full flex justify-between"
+            id="strategic"
+          >
+            <div
+              class="w-full"
+            >
+              <div
+                class="min-w-full overflow-auto"
+              >
+                <div
+                  class="grid grid-cols-4 gap-4 md:gap-6 min-w-[850px] md:min-w-[1220px]"
+                >
+                  <a
+                    href="https://opensource.microsoft.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Microsoft"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/microsoft.svg"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://www.redhat.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Red Hat"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/redhat.svg"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://www.azul.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Azul"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/azul.svg"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://alibabacloud.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Alibaba"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/alibaba.png"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://huawei.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Huawei"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/huawei.svg"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://www.rivosinc.com/"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Rivos"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/rivos.png"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://google.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Google"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/google.svg"
+                      />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section
+    class="max-w-[1264px] md:px-0 px-6 w-full mx-auto flex flex-col items-center justify-center py-10"
+  >
+    <div
+      class="max-w-[700px] mx-auto"
+    >
+      <h3
+        class="text-[36px] sm:text-[42px] leading-[56px] text-center"
+      >
+        Enterprise Members
+      </h3>
+      <p
+        class="text-[16px] leading-[24px] text-grey text-center mt-3"
+      >
+        Companies that use Eclipse Temurin in production.
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col items-center justify-center mt-3"
+    >
+      <div
+        class="w-full flex flex-col items-center justify-center mt-3"
+      >
+        <button
+          aria-hidden="true"
+          style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
+          type="button"
+        />
+        <div>
+          <div
+            class="w-full flex justify-between"
+            id="enterprise"
+          >
+            <div
+              class="w-full"
+            >
+              <div
+                class="min-w-full overflow-auto"
+              >
+                <div
+                  class="grid grid-cols-4 gap-4 md:gap-6 min-w-[850px] md:min-w-[1220px]"
+                >
+                  <a
+                    href="https://www.techatbloomberg.com/opensource"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Bloomberg"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/bloomberg.svg"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://canonical.com/"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Canonical"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/canonical.png"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://ibm.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="IBM"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/ibm-logo.png"
+                      />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section
+    class="max-w-[1264px] md:px-0 px-6 w-full mx-auto flex flex-col items-center justify-center py-10"
+  >
+    <div
+      class="max-w-[700px] mx-auto"
+    >
+      <h3
+        class="text-[36px] sm:text-[42px] leading-[56px] text-center"
+      >
+        Participant Members
+      </h3>
+      <p
+        class="text-[16px] leading-[24px] text-grey text-center mt-3"
+      >
+        Companies that use Eclipse Temurin in production.
+      </p>
+    </div>
+    <div
+      class="w-full flex flex-col items-center justify-center mt-3"
+    >
+      <div
+        class="w-full flex flex-col items-center justify-center mt-3"
+      >
+        <button
+          aria-hidden="true"
+          style="position: fixed; top: 1px; left: 1px; width: 1px; height: 0px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); white-space: nowrap; border-width: 0px;"
+          type="button"
+        />
+        <div>
+          <div
+            class="w-full flex justify-between"
+            id="participant"
+          >
+            <div
+              class="w-full"
+            >
+              <div
+                class="min-w-full overflow-auto"
+              >
+                <div
+                  class="grid grid-cols-4 gap-4 md:gap-6 min-w-[850px] md:min-w-[1220px]"
+                >
+                  <a
+                    href="https://open-elements.com"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="Open Elements"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/openelements.svg"
+                      />
+                    </div>
+                  </a>
+                  <a
+                    href="https://www.ijug.eu"
+                  >
+                    <div
+                      class="relative w-[200px] md:w-[296px] h-[86px] md:h-[112px] flex justify-center items-center bg-white rounded-3xl border border-white border-opacity-50 backdrop-blur-xl px-4 py-5"
+                    >
+                      <img
+                        alt="iJUG"
+                        class="w-5/6 max-h-5/6 m-0"
+                        src="/images/ijug.png"
+                      />
+                    </div>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <div
+    class="flex justify-center flex-wrap items-center gap-5 md:gap-14 m-5"
+  >
+    <p
+      class="text-[20px] leading-[28px] text-white my-0 text-center"
+    >
+      Are you interested in becoming a member?
+    </p>
+    <a
+      href="/join"
+    >
+      <button
+        class="rounded-2xl bg-transparent gradient-border border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[179px] h-[48px]  transition-all duration-500 ease-in-out "
+      >
+        Become a Member
+      </button>
+    </a>
+  </div>
+  <div
+    class="bg-purple py-16"
+  >
+    <div
+      class="mx-auto max-w-3xl px-6 lg:px-8 flex flex-col items-center justify-center mb-16"
+    >
+      <h2
+        class="text-center text-4xl lg:text-5xl leading-[44px] lg:leading-[56px] font-semibold text-white-900"
+      >
+        The Power of Eclipse Temurin™
+      </h2>
+      <h3
+        class="text-center text-base leading-6 font-normal text-grey mt-6"
+      >
+        Eclipse Temurin offers high-performance, cross-platform, open-source Java™ runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+      </h3>
+      <a
+        href="/business-benefits"
+      >
+        <button
+          class="bg-transparent mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-bold w-[191px] h-[48px] rounded-2xl gradient-border"
+        >
+          Business Benefits
+        </button>
+      </a>
+    </div>
+    <div
+      class="lg:hidden max-w-[500px] mx-auto flex flex-col text-center items-center"
+    >
+      <img
+        alt="Description"
+        class="w-full mb-0 max-w-[366px] object-cover"
+        src="/images/icons/feature-layers.svg"
+      />
+      <img
+        alt="scrol divider"
+        class="mb-0"
+      />
+      <div
+        class="flex flex-col flex-1 px-4"
+      >
+        <h1
+          class="text-xl my-5 font-bold"
+        >
+          OpenJDK-Based
+        </h1>
+        <p
+          class="text-base text-grey"
+        >
+          Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+        </p>
+      </div>
+    </div>
+    <div
+      class="lg:hidden max-w-[500px] mx-auto flex flex-col text-center items-center"
+    >
+      <img
+        alt="Description"
+        class="w-full mb-0 max-w-[366px] object-cover"
+        src="/images/icons/feature-layers.svg"
+      />
+      <img
+        alt="scrol divider"
+        class="mb-0"
+      />
+      <div
+        class="flex flex-col flex-1 px-4"
+      >
+        <h1
+          class="text-xl my-5 font-bold"
+        >
+          OpenJDK-Based
+        </h1>
+        <p
+          class="text-base text-grey"
+        >
+          Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+        </p>
+      </div>
+    </div>
+    <div
+      class="lg:hidden max-w-[500px] mx-auto flex flex-col text-center items-center"
+    >
+      <img
+        alt="Description"
+        class="w-full mb-0 max-w-[366px] object-cover"
+        src="/images/icons/feature-layers.svg"
+      />
+      <img
+        alt="scrol divider"
+        class="mb-0"
+      />
+      <div
+        class="flex flex-col flex-1 px-4"
+      >
+        <h1
+          class="text-xl my-5 font-bold"
+        >
+          OpenJDK-Based
+        </h1>
+        <p
+          class="text-base text-grey"
+        >
+          Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+        </p>
+      </div>
+    </div>
+    <div
+      class="lg:block hidden open-animation-wrapper"
+    >
+      <div
+        class="max-w-[1048px] ui-virtual-wrapper mt-10 relative mx-auto px-4 sm:px-0"
+      >
+        <div
+          class="progress absolute top-0 bottom-4 left-0 right-0"
+        >
+          <div
+            class="progress-fill w-full h-full"
+            style="transform: scaleY(1.0000);"
+          />
+        </div>
+        <div
+          class="absolute left-[50%] translate-x-[-6px] w-[16px] rounded-full bg-[#FF1464] h-[16px] top-0 bottom-4 right-0"
+          style="top: 100%;"
+        />
+        <div
+          class="flex h-[400px] opacity-50 ui-virtual-common items-center justify-between ui-virtual-box-1"
+        >
+          <div
+            class="w-[50%]"
+          >
+            <img
+              alt="Description"
+              class="max-w-[436px] mb-0"
+              src="/images/icons/feature-layers.svg"
+            />
+          </div>
+          <div
+            class="w-[50%]"
+          >
+            <div
+              class="max-w-[436px] ml-auto"
+            >
+              <h1
+                class="text-xl md-pt-6 my-5 font-bold"
+              >
+                OpenJDK-Based
+              </h1>
+              <p
+                class="text-base text-grey"
+              >
+                Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex h-[400px] opacity-50 ui-virtual-common items-center justify-between ui-virtual-box-2"
+        >
+          <div
+            class="w-[50%]"
+          >
+            <img
+              alt="Description"
+              class="max-w-[436px] mb-0"
+              src="/images/icons/feature-layers.svg"
+            />
+          </div>
+          <div
+            class="w-[50%]"
+          >
+            <div
+              class="max-w-[436px] ml-auto"
+            >
+              <h1
+                class="text-xl md-pt-6 my-5 font-bold"
+              >
+                OpenJDK-Based
+              </h1>
+              <p
+                class="text-base text-grey"
+              >
+                Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+              </p>
+            </div>
+          </div>
+        </div>
+        <div
+          class="flex h-[400px] opacity-50 ui-virtual-common items-center justify-between ui-virtual-box-3"
+        >
+          <div
+            class="w-[50%]"
+          >
+            <img
+              alt="Description"
+              class="max-w-[436px] mb-0"
+              src="/images/icons/feature-layers.svg"
+            />
+          </div>
+          <div
+            class="w-[50%]"
+          >
+            <div
+              class="max-w-[436px] ml-auto"
+            >
+              <h1
+                class="text-xl md-pt-6 my-5 font-bold"
+              >
+                OpenJDK-Based
+              </h1>
+              <p
+                class="text-base text-grey"
+              >
+                Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <section
+    class="relative  xl:px-0 px-6 md:py-32 py-16 undefined"
+  >
+    <img
+      alt="gradient overlay"
+      class="hidden md:block absolute bg-center top-0 left-0  right-0 w-full h-full z-[-10]"
+      src="/images/gradient-overlay.png"
+    />
+    <img
+      alt="gradient overlay mobile"
+      class="block md:hidden absolute bg-center top-0 left-0  right-0 w-full h-full z-[-10]"
+      src="/images/gradient-overlay-mobile.png"
+    />
+    <div
+      class="max-w-[832px] w-full mx-auto md:py-0 py-8 flex justify-center items-center flex-col text-center md:bg-transparent bg-tones-white rounded-3xl md:backdrop-blur-0 backdrop-blur-12 "
+    >
+      <img
+        aria-label="message icon"
+        class="!mb-0"
+        src="/images/icons/message.svg"
+      />
+      <p
+        class="text-white text-4xl md:text-5xl leading-[122.222%] md:leading-[116.667%] font-normal mt-8"
+      >
+        Speak to our team today
+      </p>
+      <span
+        class=" text-lightgrey tab-button-text"
+      >
+        Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem.
+      </span>
+      <button
+        class="bg-transparent mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[146px] h-[48px] rounded-[80px] gradient-border lg:block hidden"
+      >
+        Contact Us
+      </button>
+    </div>
+  </section>
+</main>
+`;
diff --git a/src/pages/__tests__/__snapshots__/support-us.test.tsx.snap b/src/pages/__tests__/__snapshots__/support-us.test.tsx.snap
index 82189d4b..d318817c 100644
--- a/src/pages/__tests__/__snapshots__/support-us.test.tsx.snap
+++ b/src/pages/__tests__/__snapshots__/support-us.test.tsx.snap
@@ -385,11 +385,15 @@ exports[`Support Us page > renders correctly 1`] = `
               Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime
             </p>
           </div>
-          <button
-            class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+          <a
+            href="#"
           >
-            Learn More
-          </button>
+            <button
+              class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+            >
+              Learn More
+            </button>
+          </a>
         </div>
       </div>
       <div
@@ -412,11 +416,15 @@ exports[`Support Us page > renders correctly 1`] = `
               Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime
             </p>
           </div>
-          <button
-            class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+          <a
+            href="#"
           >
-            Become a sponsor
-          </button>
+            <button
+              class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+            >
+              Become a sponsor
+            </button>
+          </a>
         </div>
       </div>
       <div
@@ -439,11 +447,15 @@ exports[`Support Us page > renders correctly 1`] = `
               Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime
             </p>
           </div>
-          <button
-            class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+          <a
+            href="/join"
           >
-            Learn More
-          </button>
+            <button
+              class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+            >
+              Learn More
+            </button>
+          </a>
         </div>
       </div>
     </div>
@@ -499,11 +511,13 @@ exports[`Support Us page > renders correctly 1`] = `
                 Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime
               </p>
             </div>
-            <button
-              class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
-            >
-              Learn More
-            </button>
+            <a>
+              <button
+                class="bg-transparent   border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[180px] h-[48px] rounded-[80px] gradient-border "
+              >
+                Learn More
+              </button>
+            </a>
           </div>
         </div>
       </div>
diff --git a/src/pages/join.tsx b/src/pages/join.tsx
index 38d463df..42684035 100644
--- a/src/pages/join.tsx
+++ b/src/pages/join.tsx
@@ -4,21 +4,20 @@ import { graphql } from "gatsby"
 
 import Layout from "../components/Layout"
 import Seo from "../components/Seo"
+import PageHeader from "../components/PageHeader"
 
 const JoinPage = () => (
   <Layout>
-    <section className="py-5 text-center container">
-      <div className="row py-lg-5">
-        <div className="col-lg-8 col-md-8 mx-auto">
-          <h1 className="fw-light">
-            Join the Eclipse Adoptium&reg; Working Group
-          </h1>
-        </div>
-        <HubspotForm
-          portalId="5413615"
-          formId="78aa6887-715f-420c-97be-b97860899cec"
-        />
-      </div>
+    <PageHeader
+      subtitle="Join the Eclipse Adoptium&reg; Working Group"
+      title="Joining the Working Group"
+      description="Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem."
+    />
+    <section className="mx-auto max-w-4xl w-full p-6 lg:px-0 items-center justify-center">
+      <HubspotForm
+        portalId="5413615"
+        formId="78aa6887-715f-420c-97be-b97860899cec"
+      />
     </section>
   </Layout>
 )
diff --git a/src/pages/supporters.tsx b/src/pages/members.tsx
similarity index 87%
rename from src/pages/supporters.tsx
rename to src/pages/members.tsx
index 3e66552d..f8f8be8e 100644
--- a/src/pages/supporters.tsx
+++ b/src/pages/members.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import { graphql } from "gatsby"
+import { Link } from "gatsby-plugin-react-i18next"
 
 import Layout from "../components/Layout"
 import Seo from "../components/Seo"
@@ -9,12 +10,12 @@ import PowerOfTemurin from "../components/Temurin/PowerOfTemurin"
 import ContactUs from "../components/ContactUs"
 import Logos, { LogoType } from "../components/Logos"
 
-const Supporters = () => {
+const Members = () => {
   return (
     <Layout>
       <PageHeader
         title="Who we work with"
-        subtitle="Our Supporters"
+        subtitle="Our Members"
         description="Eclipse Temurin offers high-performance, cross-platform, open-source Java runtime binaries that are enterprise-ready and Java SE TCK-tested for general use in the Java ecosystem."
       />
       <div className="overflow-auto px-3 py-5 w-full md:w-auto">
@@ -70,18 +71,20 @@ const Supporters = () => {
         <p className="text-[20px] leading-[28px] text-white my-0 text-center">
           Are you interested in becoming a member?
         </p>
-        <button className="rounded-2xl bg-transparent gradient-border border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[179px] h-[48px]  transition-all duration-500 ease-in-out ">
-          Become a Member
-        </button>
+        <Link to="/join">
+          <button className="rounded-2xl bg-transparent gradient-border border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[179px] h-[48px]  transition-all duration-500 ease-in-out ">
+            Become a Member
+          </button>
+        </Link>
       </div>
       <PowerOfTemurin />
       <ContactUs title="Speak to our team today" buttontitle="Contact Us" />
     </Layout>
   )
 }
-export default Supporters
+export default Members
 
-export const Head = () => <Seo title="Our Supporters" />
+export const Head = () => <Seo title="Our Members" />
 
 export const query = graphql`
   query ($language: String!) {