Implement newly designed post download page

adoptium · Jan 28, 2025 · 73fde25 · 73fde25
1 parent b385944
commit 73fde25
Show file tree

Hide file tree

Showing 21 changed files with 578 additions and 456 deletions.
diff --git a/src/components/Layout/layout.scss b/src/components/Layout/layout.scss
@@ -1,4 +1,4 @@
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;
 
 :root {
   --border-radius: 4px;

diff --git a/src/components/Marketplace/AllReleaseCard/index.tsx b/src/components/Marketplace/AllReleaseCard/index.tsx
@@ -54,7 +54,16 @@ const AllReleaseCard = ({ results }) => {
           <div className="flex items-end justify-between mt-4 md:mt-0 gap-5">
             <Link
               placeholder="Download"
-              to={release.binary.package.link}
+              to="/download"
+              state={{
+                link: release.binary.package.link,
+                checksum: release.binary.package.checksum,
+                os: release.binary.os,
+                arch: release.binary.architecture,
+                pkg_type: release.binary.package.type,
+                java_version: release.release_name,
+                vendor: release.vendor,
+              }}
               className="rounded-[80px] hover:shadow-2xl transition-all duration-300 bg-[#FF1464] border ease-in-out border-[#FF1464] flex items-center justify-center gap-3 px-8 py-4 text-white font-bold leading-6 text-base "
             >
               Download ({fetchExtension(release.binary.package.name)})

diff --git a/src/components/PageHeader/index.tsx b/src/components/PageHeader/index.tsx
@@ -4,7 +4,7 @@ import { RedIcon } from "../Common/Icon"
 interface Props {
   title: string
   subtitle: string
-  description?: string
+  description?: string | React.ReactNode
   className?: string
 }
 

diff --git a/src/components/Temurin/Features/Features.scss b/src/components/Temurin/Features/Features.scss
@@ -1,4 +1,4 @@
-@import "../../../styles/variables.scss";
+@use "../../../styles/variables.scss" as *;
 
 .temurin-features {
   position: relative;

diff --git a/src/components/Testimonials/Testimonials.scss b/src/components/Testimonials/Testimonials.scss
@@ -1,4 +1,4 @@
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;
 
 .arrow-button {
   border-radius: 50%;

diff --git a/src/components/UiVirtualScroll/UiVirtualScroll.scss b/src/components/UiVirtualScroll/UiVirtualScroll.scss
@@ -1,4 +1,4 @@
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;
 
 .scroll-container {
   position: relative;

diff --git a/src/components/WorkingGroup/Support/__tests__/Support.test.tsx b/src/components/WorkingGroup/Support/__tests__/Support.test.tsx
@@ -0,0 +1,12 @@
+import React from "react"
+import { render } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+import Support from "../index"
+
+describe("Working Group Support component", () => {
+  it("should render correctly", () => {
+    const { container } = render(<Support/>)
+
+    expect(container).toMatchSnapshot()
+  })
+})
diff --git a/src/components/WorkingGroup/Support/__tests__/__snapshots__/Support.test.tsx.snap b/src/components/WorkingGroup/Support/__tests__/__snapshots__/Support.test.tsx.snap
@@ -0,0 +1,67 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Working Group Support component > should render correctly 1`] = `
+<div>
+  <section
+    class="  pt-0 md:pt-14 md:pb-28"
+  >
+    <div
+      class="pt-12   pb-8 md:pb-16 max-w-[1048px] flex-col lg:flex-row mx-auto w-full px-6 lg:px-2 xl:px-0 flex justify-center gap-16 items-center"
+    >
+      <div
+        class=" w-full lg:w-[55%] text-center lg:text-left"
+      >
+        <div>
+          <h2
+            class="text-4xl leading-[122%] md:text-5xl md:[116%] text-white font-semibold"
+          >
+            Support the Elcipse Adoptium Working Group 
+          </h2>
+          <p
+            class="text-grey mt-6 font-normal text-base"
+          >
+            Lorem ipsum dolor sit amet consectetur. Ante cursus adipiscing feugiat aliquam. Adipiscing nulla arcu turpis tortor leo integer justo. Ut turpis adipiscing aliquam phasellus aliquam. Lectus etiam dictum nunc magna gravida bibendum nibh aliquam. Eget arcu neque cursus mattis sollicitudin malesuada urna ridiculus metus. Pharetra volutpat neque fames gravida tellus. 
+          </p>
+        </div>
+        <div>
+          <p
+            class="text-grey mt-6 font-normal text-base"
+          >
+            Nibh arcu consequat aliquet in eget non. Turpis id posuere quam sit magnis. Aliquam imperdiet odio odio vulputate. Vel molestie porttitor tellus accumsan. Dui ipsum fringilla sit sit elementum. 
+          </p>
+        </div>
+        <button
+          class=" text-white text-base leading-6 font-normal bg-primary px-6 py-3 mt-8 rounded-[80px] "
+        >
+          Donate Now
+        </button>
+      </div>
+      <div>
+        <div
+          class="p-10 flex flex-col max-w-[400px] newscard-2 h-[440px] md:h-[480px] bg-[#200E46]"
+        >
+          <div
+            class="grow"
+          >
+            <h3
+              class="text-white text-[30px] font-semibold  whitespace-nowrap  md:whitespace-normal leading-[120%] md:text-[40px]"
+            >
+              Media & Promotion
+            </h3>
+            <p
+              class="mt-6 text-xl text-lightgrey font-normal"
+            >
+              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-supportus"
+          >
+            Learn More
+          </button>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
+`;
diff --git a/src/components/WorkingGroup/Support/index.tsx b/src/components/WorkingGroup/Support/index.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import "./support.scss"
+import CommonHeading from "../../Common/CommonHeading"
+
+const Support = () => {
+    return (
+        <section className="  pt-0 md:pt-14 md:pb-28">
+            <div className="pt-12   pb-8 md:pb-16 max-w-[1048px] flex-col lg:flex-row mx-auto w-full px-6 lg:px-2 xl:px-0 flex justify-center gap-16 items-center">
+                <div className=" w-full lg:w-[55%] text-center lg:text-left">
+                    <CommonHeading
+                        title={"Support the Elcipse Adoptium Working Group "}
+                        description={
+                            "Lorem ipsum dolor sit amet consectetur. Ante cursus adipiscing feugiat aliquam. Adipiscing nulla arcu turpis tortor leo integer justo. Ut turpis adipiscing aliquam phasellus aliquam. Lectus etiam dictum nunc magna gravida bibendum nibh aliquam. Eget arcu neque cursus mattis sollicitudin malesuada urna ridiculus metus. Pharetra volutpat neque fames gravida tellus. "
+                        }
+                        className={undefined}
+                    />
+                    <CommonHeading
+                        description={
+                            "Nibh arcu consequat aliquet in eget non. Turpis id posuere quam sit magnis. Aliquam imperdiet odio odio vulputate. Vel molestie porttitor tellus accumsan. Dui ipsum fringilla sit sit elementum. "
+                        }
+                        title={undefined}
+                        className={undefined}
+                    />
+                    <button className=" text-white text-base leading-6 font-normal bg-primary px-6 py-3 mt-8 rounded-[80px] ">
+                        Donate Now
+                    </button>
+                </div>
+                <div>
+                    <div className="p-10 flex flex-col max-w-[400px] newscard-2 h-[440px] md:h-[480px] bg-[#200E46]">
+                        <div className="grow">
+                            <h3 className="text-white text-[30px] font-semibold  whitespace-nowrap  md:whitespace-normal leading-[120%] md:text-[40px]">
+                                Media & Promotion
+                            </h3>
+                            <p className="mt-6 text-xl text-lightgrey font-normal">
+                                Eclipse Temurin offers high-performance, cross-platform,
+                                open-source Java runtime
+                            </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-supportus">
+                            Learn More
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
+
+export default Support
diff --git a/src/components/WorkingGroup/Support/support.scss b/src/components/WorkingGroup/Support/support.scss
@@ -0,0 +1,15 @@
+.gradient-supportus {
+    border-radius: 80px;
+    border: solid 2px transparent;
+    background-image: linear-gradient(#200d46, #200d46),
+      linear-gradient(90deg, #ff1464, #ff14620b);
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    cursor: pointer;
+    transition: ease-in-out;
+    transition-duration: 300ms;
+
+    &:hover {
+      transform: scale(110%);
+    }
+  }