fixup join page form (#756)

* fixup join page form * add tests
adoptium · Feb 5, 2025 · 96bf02e · 96bf02e
1 parent 7918669
commit 96bf02e
Show file tree

Hide file tree

Showing 10 changed files with 851 additions and 59 deletions.
diff --git 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
@@ -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
@@ -190,4 +190,4 @@ pre code::after,
 pre tt::before,
 pre tt::after {
   content: none;
-}
+}
diff --git 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
@@ -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
@@ -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>
 `;