Implement newly designed post download page

src/components/Layout/layout.scss

@@ -1,14 +1,14 @@
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;
 
 :root {
   --border-radius: 4px;
   --color-text: white;
   --color-primary: #7026b9;
   --color-code-bg: grey;
   --color-code: white;
-  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
+  --font-sans: -apple-system, blinkmacsystemfont, "Segoe UI", helvetica, arial,
     sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-  --font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
+  --font-mono: sfmono-regular, menlo, monaco, consolas, "Liberation Mono",
     "Courier New", monospace;
   --font-lg: 18px;
   --font-md: 16px;
@@ -27,6 +27,7 @@
   --size-gutter: var(--space-5);
   --size-gap: var(--space-6);
 }
+
 html {
   -webkit-text-size-adjust: 100%;
   box-sizing: border-box;
@@ -35,6 +36,7 @@ html {
   line-height: var(--line-height-normal);
   overflow-y: scroll;
 }
+
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -45,16 +47,19 @@ body {
   margin: 0;
   word-wrap: break-word;
 }
+
 abbr[title] {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+  border-bottom: 1px dotted hsla(0deg, 0%, 0%, 50%);
   cursor: help;
   text-decoration: none;
 }
+
 b,
 strong {
   font-weight: inherit;
   font-weight: bolder;
 }
+
 dfn {
   font-style: italic;
 }
@@ -63,6 +68,7 @@ img {
   border-style: none;
   max-width: 100%;
 }
+
 code,
 kbd,
 pre,
@@ -71,27 +77,29 @@ samp {
   font-size: 1em;
   line-height: inherit;
 }
+
 hr {
   box-sizing: content-box;
   overflow: visible;
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
+  margin: 0 0 calc(var(--space-4) - 1px) 0;
   padding: 0;
-  margin-bottom: calc(var(--space-4) - 1px);
-  background: hsla(0, 0%, 0%, 0.2);
+  background: hsla(0deg, 0%, 0%, 20%);
   border: none;
   height: 1px;
 }
+
 * {
   box-sizing: inherit;
 }
-*:before {
+
+*::before {
   box-sizing: inherit;
 }
-*:after {
+
+*::after {
   box-sizing: inherit;
 }
+
 hgroup,
 img,
 figure,
@@ -105,49 +113,55 @@ p {
   padding: 0;
   margin-bottom: var(--space-4);
 }
+
 pre {
-  margin-left: 0;
-  margin-right: 0;
-  margin-top: 0;
-  margin-bottom: var(--space-4);
+  margin: 0 0 var(--space-4) 0;
   font-size: 0.875rem;
   line-height: var(--line-height-normal);
-  background: hsla(0, 0%, 0%, 0.04);
+  background: hsla(0deg, 0%, 0%, 4%);
   border-radius: var(--border-radius);
   overflow: auto;
   word-wrap: normal;
   padding: var(--space-4);
 }
+
 b,
 strong,
 dt,
 th {
   font-weight: bold;
 }
+
 blockquote *:last-child {
   margin-bottom: 0;
 }
+
 p *:last-child {
   margin-bottom: 0;
 }
 
 code {
   font-size: 0.875rem;
 }
+
 kbd {
   font-size: 0.875rem;
 }
+
 samp {
   font-size: 0.875rem;
 }
+
 abbr {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+  border-bottom: 1px dotted hsla(0deg, 0%, 0%, 50%);
   cursor: help;
 }
+
 acronym {
-  border-bottom: 1px dotted hsla(0, 0%, 0%, 0.5);
+  border-bottom: 1px dotted hsla(0deg, 0%, 0%, 50%);
   cursor: help;
 }
+
 tt,
 code {
   background-color: var(--color-code-bg);
@@ -158,19 +172,22 @@ code {
   padding-top: 0.25em;
   word-break: normal;
 }
+
 pre code {
   background: none;
 }
-code:before,
-code:after,
-tt:before,
-tt:after {
+
+code::before,
+code::after,
+tt::before,
+tt::after {
   content: "\00a0";
   letter-spacing: -0.2em;
 }
-pre code:before,
-pre code:after,
-pre tt:before,
-pre tt:after {
+
+pre code::before,
+pre code::after,
+pre tt::before,
+pre tt::after {
   content: none;
-}
+}

src/components/Marketplace/AllReleaseCard/index.tsx

@@ -54,7 +54,16 @@
           <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)})

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
 }
 

src/components/Temurin/Features/Features.scss

@@ -1,4 +1,4 @@
-@import "../../../styles/variables.scss";
+@use "../../../styles/variables.scss" as *;
 
 .temurin-features {
   position: relative;
@@ -9,7 +9,7 @@
   content: "";
   position: absolute;
   bottom: -450px;
-  right: 0px;
+  right: 0;
   background-size: 100% 100%;
   background-position: center;
   width: 100%;

src/components/Testimonials/Testimonials.scss

@@ -1,4 +1,4 @@
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;
 
 .arrow-button {
   border-radius: 50%;
@@ -36,6 +36,7 @@
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -46,6 +47,7 @@
     transform: translateX(-100%);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;
@@ -57,6 +59,7 @@
     transform: translateX(100%);
     opacity: 0;
   }
+
   to {
     transform: translateX(0);
     opacity: 1;

src/components/UiVirtualScroll/UiVirtualScroll.scss

@@ -1,4 +1,4 @@
-@import "../../styles/variables.scss";
+@use "../../styles/variables.scss" as *;
 
 .scroll-container {
   position: relative;
@@ -43,6 +43,7 @@
   transition: 0.5s ease-in-out;
   transform: scale(0.95);
 }
+
 .ui-virtual-common.active {
   opacity: 1 !important;
   transform: scale(1);

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()
+  })
+})

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>
+`;