Merge pull request #11 from him-Tech/developer2

eclipse-aqavit page added
him-Tech · Mar 1, 2024 · f27eb1d · f27eb1d
2 parents 4e4df90 + c062242
commit f27eb1d
Show file tree

Hide file tree

Showing 18 changed files with 161 additions and 61 deletions.
diff --git a/src/components/Eclipse-Aqavit/HeroSection.tsx b/src/components/Eclipse-Aqavit/HeroSection.tsx
@@ -0,0 +1,45 @@
+import React from "react"
+import herobgmoble from "../../img/eclipse-avarik-mobile-bg.png"
+import { Link } from "gatsby"
+import { FaApple } from "react-icons/fa"
+
+const HeroSection = () => {
+  return (
+    <div>
+      <div className="bg-purple sm:bg-contain bg-aqavit-hero bg-center bg-no-repeat relative lg:mb-8">
+        <div className="relative isolate">
+          <div className="max-w-[414px] w-full  absolute sm:hidden top-[80px] z-[-1] left-[50%] translate-x-[-50%]">
+            <img className="w-full h-full " src={herobgmoble} alt="" />
+          </div>
+          <div
+            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
+            aria-hidden="true"
+          ></div>
+          <div className="max-w-[1264px] mx-auto flex justify-center items-center">
+            <div className="mx-auto max-w-[832px] w-full h-[680px] sm:h-[720px] px-8 lg:px-0 flex items-center">
+              <div className="text-center w-full mt-20 md:mt-12">
+                <h1 className="font-semibold leading-[72px] lg:leading-[120px] text-white-900 text-[64px] lg:text-[104px]">
+                  Eclipse AQAvit
+                </h1>
+                <p className="lg:my-10 mt-6  mb-10 text-2xl leading-8 text-white-600  font-semibold">
+                  Download AQAvit for macOS aarch64
+                </p>
+                <div className="mt-10 flex items-center sm:flex-row flex-col-reverse justify-center gap-6">
+                  <Link
+                    to="#"
+                    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 w-[244px] h-[56px] text-white font-bold leading-6 text-base"
+                  >
+                    <FaApple size={25} />
+                    Download AQAvit
+                  </Link>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default HeroSection
diff --git a/src/components/Eclipse-Aqavit/OtherProject.tsx b/src/components/Eclipse-Aqavit/OtherProject.tsx
@@ -0,0 +1,74 @@
+import React from "react"
+import { Link } from "gatsby-plugin-react-i18next"
+import { RedIcon } from "../Common/Icon"
+import CommonHeading from "../Common/CommonHeading"
+
+interface Project {
+  title: string
+  imagePath: string
+  link: string
+}
+
+const projects: Project[] = [
+  {
+    title: "Eclipse Temurin™",
+    imagePath: "temurin-project.svg",
+    link: "/temurin",
+  },
+
+  {
+    title: "Eclipse Mission Control™",
+    imagePath: "mc-project.svg",
+    link: "/jmc",
+  },
+]
+
+const OtherProject = () => {
+  return (
+    <div className="bg-blue py-16 sm:pt-32 pb-20">
+      <div className=" max-w-[1264px] mx-auto px-6 ">
+        <div className="max-w-[700px] mx-auto">
+          <CommonHeading
+            title="Other projects"
+            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. "
+            }
+            className={"text-center "}
+          />
+        </div>
+        <div className="mt-16 mb-8 flex justify-center gap-6 flex-wrap ">
+          {projects.map((project, index) => (
+            <div
+              key={index}
+              className=" w-full  p-8 flex justify-between  flex-col  max-w-[400px] newscard-2 h-[420px] md:h-[520px]  bg-[#1A0D35] "
+            >
+              <img
+                src={`/images/projects/${project.imagePath}`}
+                alt={`${project.title} logo`}
+                className="w-[140px]"
+              />
+              <div className=" flex-col justify-center items-start gap-2">
+                <div className="justify-start items-center gap-3 inline-flex">
+                  <RedIcon />
+                  <p className="text-rose-600 mb-0 text-base leading-6 font-bold">
+                    Overline
+                  </p>
+                </div>
+                <h2 className="text-white text-xl md:text-3xl leading-8 md:leading-10 font-semibold mt-2">
+                  {project.title}
+                </h2>
+                <Link to={project.link} placeholder={undefined}>
+                  <button className="bg-transparent border-2 mt-8 sm:mt-10 border-pink-500/0 text-whit text-base leading-6 font-bold w-[148px] h-[48px] rounded-2xl gradient-media-btn">
+                    Learn More
+                  </button>
+                </Link>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default OtherProject
diff --git a/src/components/Eclipse-Temurin/HeroSection.tsx b/src/components/Eclipse-Temurin/HeroSection.tsx
@@ -17,7 +17,7 @@ const HeroSection = () => {
           ></div>
           <div className="max-w-[1264px] mx-auto flex justify-center items-center">
             <div className="mx-auto max-w-[832px] w-full h-[680px] sm:h-[720px] px-8 lg:px-0 flex items-center">
-              <div className="text-center w-full mt-20 md:mt-14">
+              <div className="text-center w-full mt-20 md:mt-12">
                 <h1 className="font-semibold leading-[112.5%]  lg:leading-[115.385%] text-white text-[64px] lg:text-[104px]">
                   Eclipse Temurin™
                 </h1>

diff --git a/src/components/Eclipse-Temurin/ReleaseRoadMap.tsx b/src/components/Eclipse-Temurin/ReleaseRoadMap.tsx
@@ -46,7 +46,7 @@ const ReleaseRoadMap = () => {
 
   return (
     <div className="bg-[#0E002A]">
-      <div className="max-w-[1264px] mx-auto px-6 py-24">
+      <div className="max-w-[1264px] mx-auto px-6 py-20 md:py-28">
         <CommonHeading
           className="text-center max-w-[740px] mx-auto"
           title={"Release Roadmap"}

diff --git a/src/components/Footer/MobileFooter.tsx b/src/components/Footer/MobileFooter.tsx
@@ -68,7 +68,7 @@ const CustomDisclosure = ({ title, links }) => (
 
 // Main App component
 const MobileFooter = ({ footerData }) => (
-  <div className="flex flex-col space-y-4 p-4">
+  <div className="flex flex-col space-y-4 !p-0">
     {footerData.map((data, index) => (
       <CustomDisclosure key={index} {...data} />
     ))}

diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -169,7 +169,7 @@ const footerData: FooterData[] = [
 const Footer = (props): JSX.Element => {
   return (
     <footer className="bg-blue">
-      <div className="mx-auto max-w-screen-xl space-y-8 px-4 py-8 md:py-16 sm:px-6 lg:space-y-16 lg:px-8">
+      <div className="mx-auto max-w-screen-xl space-y-8 px-6 py-8 md:py-16 sm:px-6 lg:space-y-16 lg:px-8">
         <div className="hidden md:block">
           <div className="grid grid-cols-1 gap-8 border-b border-gray-800 mb-3 pt-8 sm:grid-cols-2 lg:grid-cols-4 lg:pt-16">
             {footerData.map((section, index) => (
@@ -245,7 +245,7 @@ const Footer = (props): JSX.Element => {
             </ul>
           </div>
         </div>
-        <div className="w-full px-4 md:hidden block">
+        <div className="w-full  md:hidden block">
           <MobileFooter footerData={footerData} />
         </div>
       </div>

diff --git a/src/components/Temurin/PowerOfTemurin/index.tsx b/src/components/Temurin/PowerOfTemurin/index.tsx
@@ -2,12 +2,12 @@ import React from "react"
 import { Link } from "gatsby-plugin-react-i18next"
 import UiVirtualScroll from "../../UiVirtualScroll"
 
-const PowerOfTemurin = () => {
+const PowerOfTemurin = ({ className, title }) => {
   return (
-    <div className="bg-purple py-16">
+    <div className={`bg-purple py-16 ${className}`}>
       <div className="mx-auto max-w-3xl px-6 lg:px-8 flex flex-col items-center justify-center mb-16">
         <h2 className="text-center text-4xl lg:text-5xl leading-[44px] lg:leading-[56px] font-semibold text-white-900">
-          The Power of Temurin&trade;
+          {title}
         </h2>
         <h3 className="text-center text-base leading-6 font-normal text-grey mt-6">
           Eclipse Temurin offers high-performance, cross-platform, open-source

diff --git a/src/components/WGProjects/index.tsx b/src/components/WGProjects/index.tsx
@@ -59,7 +59,7 @@ const WGProjects = () => {
                   <h2 className="text-white text-xl md:text-3xl leading-8 md:leading-10 font-semibold mt-2">
                     {project.title}
                   </h2>
-                  <Link to={project.link}>
+                  <Link to={project.link} placeholder={undefined}>
                     <button className="bg-transparent border-2 mt-8 sm:mt-10 border-pink-500/0 text-whit text-base leading-6 font-bold w-[148px] h-[48px] rounded-2xl gradient-border">
                       Learn More
                     </button>

diff --git a/src/images/backgrounds/aqavit-hero-bg.svg b/src/images/backgrounds/aqavit-hero-bg.svg
diff --git a/src/img/eclipse-avarik-hero-bg.png b/src/img/eclipse-avarik-hero-bg.png
diff --git a/src/img/eclipse-avarik-mobile-bg.png b/src/img/eclipse-avarik-mobile-bg.png
diff --git a/src/pages/aqavit.tsx b/src/pages/aqavit.tsx
@@ -5,53 +5,24 @@ import { Link } from "gatsby-plugin-react-i18next"
 import Layout from "../components/Layout"
 import Seo from "../components/Seo"
 
-// @ts-ignore
-import HeroBgImg from "../images/backgrounds/aqavit-hero-bg.svg"
-
 import LogoCarousel from "../components/LogoCarousel"
+import HeroSection from "../components/Eclipse-Aqavit/HeroSection"
+import PowerOfTemurin from "../components/Temurin/PowerOfTemurin"
+import Documentation from "../components/Early-Access-Build/Documentation"
+import OtherProject from "../components/Eclipse-Aqavit/OtherProject"
 
 const AQAvit = () => {
   return (
     <Layout>
-      <div className="bg-purple sm:bg-contain bg-aqavit-hero bg-center bg-no-repeat relative">
-        <div className="relative isolate">
-          <div className="absolute sm:hidden top-[80px] z-[-1] left-[50%] translate-x-[-50%]">
-            <HeroBgImg alt="background-image" />
-          </div>
-          <div
-            className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
-            aria-hidden="true"
-          ></div>
-          <div className="max-w-[1264px] mx-auto flex justify-center items-center">
-            <div className="mx-auto max-w-[832px] w-full h-[680px] sm:h-[720px] px-8 lg:px-0 flex items-center">
-              <div className="text-center w-full">
-                <h1 className="font-semibold leading-[72px] lg:leading-[120px] text-white-900 text-[64px] lg:text-[104px]">
-                  Eclipse AQAvit
-                </h1>
-                <p className="lg:my-10 mt-6  mb-10 text-2xl leading-8 text-white-600  font-semibold">
-                  Some tagline about AQAvit
-                </p>
-                <div className="mt-10 flex items-center sm:flex-row flex-col-reverse justify-center gap-6">
-                  <Link
-                    to="/temurin/releases"
-                    className="text-base underline transition duration-300 ease-in-out font-bold leading-6 text-white-900"
-                  >
-                    Learn More
-                  </Link>
-                  <Link
-                    to="#"
-                    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 w-[244px] h-[56px] text-white font-bold leading-6 text-base"
-                  >
-                    Download AQAvit
-                  </Link>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+      <HeroSection />
+      <PowerOfTemurin
+        className={"!py-0 md:!py-24"}
+        title="The power of AQAvit"
+      />
+      <div className="pb-10">
+        <Documentation />
       </div>
-      <LogoCarousel />
-      <div className="w-full h-[1px] my-8 lg:my-16 bg-[#3E3355]"></div>
+      <OtherProject />
     </Layout>
   )
 }

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -37,9 +37,9 @@ const Index = ({ data }) => {
           </div>
         </div>
       </div>
-      <LogoCarousel />
+      <LogoCarousel className={undefined} />
       <div className="w-full h-[1px] my-8 lg:my-16 bg-[#3E3355]"></div>
-      <PowerOfTemurin />
+      <PowerOfTemurin className={undefined} title="The power of Temurin™" />
       <DownloadCounter />
       <TemurinFeatures />
       <WGProjects />

diff --git a/src/pages/supporters.tsx b/src/pages/supporters.tsx
@@ -23,7 +23,7 @@ const Supporters = () => {
       <OurSupportTabContent />
       <OurSponsors />
 
-      <PowerOfTemurin />
+      <PowerOfTemurin className={undefined} title="The power of Temurin™" />
       <ContactUs
         title="Speak to our team today"
         className={""}

diff --git a/src/pages/temurin/archive.tsx b/src/pages/temurin/archive.tsx
@@ -20,8 +20,10 @@ const TemurinReleases = () => (
             <div className="callout callout-default text-start">
               Please be aware that this archive contains old releases of Eclipse
               Temurin kept for reference. The{" "}
-              <Link to="/temurin/releases">latest releases</Link> should be used
-              in development and production.
+              <Link to="/temurin/releases" placeholder={undefined}>
+                latest releases
+              </Link>{" "}
+              should be used in development and production.
               <br />
               <br />
               <p className="text-warning">
@@ -30,10 +32,18 @@ const TemurinReleases = () => (
               </p>
             </div>
             <div className="btn-group">
-              <Link to="/temurin/releases" className="btn btn-primary m-3">
+              <Link
+                to="/temurin/releases"
+                className="btn btn-primary m-3"
+                placeholder={undefined}
+              >
                 <Trans>Latest Releases</Trans> <FaArrowCircleRight />
               </Link>
-              <Link to="/temurin/nightly" className="btn btn-secondary m-3">
+              <Link
+                to="/temurin/nightly"
+                className="btn btn-secondary m-3"
+                placeholder={undefined}
+              >
                 <Trans>Nightly Builds</Trans> <FaArrowCircleRight />
               </Link>
             </div>

diff --git a/src/pages/temurin/index.tsx b/src/pages/temurin/index.tsx
@@ -22,7 +22,7 @@ const Index = ({ data }) => {
     <Layout>
       <HeroSection />
       <LogoCarousel className={"pt-8 pb-0 lg:py-16"} />
-      <PowerOfTemurin />
+      <PowerOfTemurin className={undefined} title="The power of Temurin™" />
       <InstallationGuideCard />
       <WantToDiscuss />
       <ReleaseHistory />

diff --git a/src/pages/what-we-do.tsx b/src/pages/what-we-do.tsx
@@ -21,7 +21,7 @@ const WhatWeDo = () => {
         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."
         className={"max-w-[860px] mx-auto"}
       />
-      <PowerOfTemurin />
+      <PowerOfTemurin className={undefined} title="The power of Temurin™" />
       <LatestReleases />
       <WGProjects />
       <ContactUs

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -125,7 +125,7 @@ body {
 
 .bg-aqavit-hero {
   @media (min-width: 640px) {
-    background-image: url("/images/aqavit-hero-img.png");
+    background-image: url("../img/eclipse-avarik-hero-bg.png");
   }
 }