feat(download): add Sustainer CTA to hero section with translation support (#186)

feat(download): add Sustainer CTA to hero section with translation support (#186)

Author: IamLRBA

locales/de.json

@@ -4,7 +4,9 @@
     "download-temurin-for": "Temurin {defaultVersion} für {userOSName} {arch} herunterladen",
     "download-temurin-short": "Temurin {defaultVersion} herunterladen",
     "other-downloads": "Andere Downloads",
-    "download-temurin-button": "Temurin® herunterladen"
+    "download-temurin-button": "Temurin® herunterladen",
+    "sustainer-cta-description": "Millionen vertrauen auf Eclipse Temurin. Ihre Unterstützung hält es am Laufen",
+    "sustainer-cta-button": "In Eclipse Temurin reinvestieren"
   },
   "NotFoundPage": {
     "title": "Entschuldigung, wir konnten diese Seite nicht finden",

locales/en.json

@@ -4,7 +4,9 @@
     "download-temurin-for": "Download Temurin {defaultVersion} for {userOSName} {arch}",
     "download-temurin-short": "Download Temurin {defaultVersion}",
     "other-downloads": "Other Downloads",
-    "download-temurin-button": "Download Temurin®"
+    "download-temurin-button": "Download Temurin®",
+    "sustainer-cta-description": "Millions Rely on Eclipse Temurin. Your Support Keeps It Going",
+    "sustainer-cta-button": "Reinvest in Eclipse Temurin"
   },
   "NotFoundPage": {
     "title": "Sorry, we couldn't find this page",

locales/es.json

@@ -4,7 +4,9 @@
     "download-temurin-for": "Descargar Temurin {defaultVersion} para {userOSName} {arch}",
     "download-temurin-short": "Descargar Temurin {defaultVersion}",
     "other-downloads": "Otras descargas",
-    "download-temurin-button": "Descargar Temurin®"
+    "download-temurin-button": "Descargar Temurin®",
+    "sustainer-cta-description": "Millones confían en Eclipse Temurin. Su apoyo lo mantiene funcionando",
+    "sustainer-cta-button": "Reinvertir en Eclipse Temurin"
   },
   "NotFoundPage": {
     "title": "Lo sentimos, no pudimos encontrar esta página",

locales/fr.json

@@ -4,7 +4,9 @@
     "download-temurin-for": "Télécharger Temurin {defaultVersion} pour {userOSName} {arch}",
     "download-temurin-short": "Télécharger Temurin {defaultVersion}",
     "other-downloads": "Autres téléchargements",
-    "download-temurin-button": "Télécharger Temurin®"
+    "download-temurin-button": "Télécharger Temurin®",
+    "sustainer-cta-description": "Des millions font confiance à Eclipse Temurin. Votre soutien le maintient en vie",
+    "sustainer-cta-button": "Réinvestir dans Eclipse Temurin"
   },
   "NotFoundPage": {
     "title": "Désolé, nous n'avons pas pu trouver cette page",

locales/pt-BR.json

@@ -4,7 +4,9 @@
     "download-temurin-for": "Baixe o Temurin {defaultVersion} para {userOSName} {arch}",
     "download-temurin-short": "Baixar Temurin {defaultVersion}",
     "other-downloads": "Outros Downloads",
-    "download-temurin-button": "Baixar Temurin®"
+    "download-temurin-button": "Baixar Temurin®",
+    "sustainer-cta-description": "Milhões confiam no Eclipse Temurin. Seu apoio o mantém funcionando",
+    "sustainer-cta-button": "Reinvestir no Eclipse Temurin"
   },
   "NotFoundPage": {
     "title": "Desculpe, não conseguimos encontrar esta página",

locales/zh-CN.json

@@ -4,7 +4,9 @@
     "download-temurin-for": "下载适用于 {userOSName} {arch} 的 Temurin {defaultVersion}",
     "download-temurin-short": "下载 Temurin {defaultVersion}",
     "other-downloads": "其他下载",
-    "download-temurin-button": "下载 Temurin®"
+    "download-temurin-button": "下载 Temurin®",
+    "sustainer-cta-description": "数百万用户信赖 Eclipse Temurin。您的支持让它持续发展",
+    "sustainer-cta-button": "投资 Eclipse Temurin"
   },
   "NotFoundPage": {
     "title": "很抱歉，无法找到此页面",

src/app/[locale]/download/client.tsx

@@ -4,9 +4,13 @@ import { useSearchParams, redirect } from "next/navigation"
 import { capitalize } from "@/utils/capitalize"
 import PageHeader from "@/components/Common/PageHeader"
 import ImageText from "@/components/ImageText"
+import Cta from "@/components/Cta"
 import Support from "@/components/WorkingGroup/Support"
+import Link from "next/link"
+import { useTranslations } from "next-intl"
 
 export default function DownloadPageClient() {
+    const t = useTranslations("HomePage")
     const searchParams = useSearchParams()
     const link = searchParams.get("link") || "";
     const vendor = searchParams.get("vendor") || "Adoptium";
@@ -63,11 +67,19 @@ export default function DownloadPageClient() {
                                         to start the download.
                                     </>
                                 )}
+            
+            <Cta
+                title="Millions Rely on Eclipse Temurin. Your Support Keeps It Going"
+                description={t("sustainer-cta-description")}
+                linkText={t("sustainer-cta-button")}
+                link="https://adoptium.net/sustainers/"
+            />
                             </>
                         )}
                     </>
                 }
             />
+
             <ImageText
                 title="What to do now?"
                 description="You have successfully downloaded Temurin. For more details on usage and configuration, please take a look at our Installation Guide."

src/components/Cta/index.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "next/link";
+
+interface CtaProps {
+  title: string;
+  description: string;
+  linkText: string;
+  link: string;
+}
+
+const Cta: React.FC<CtaProps> = ({ title, description, linkText, link }) => {
+  return (
+    <section className="py-16 max-w-[1048px] w-full mx-auto flex justify-center xl:px-0 px-6">
+      <div className="lg:max-w-[560px] w-full mx-auto text-center">
+        <p className="md:mt-6 my-10 text-grey text-base leading-6 font-normal mb-0">
+          {description}
+        </p>
+        <Link href={link} className="inline-block">
+          <button
+            className="bg-transparent mt-10 border-2 border-pink-500/0 text-white text-base leading-6 font-normal w-[250px] h-[48px] rounded-2xl gradient-border transition-all duration-300 hover:border-pink-500/100 hover:text-pink"
+            type="button"
+          >
+            {linkText}
+          </button>
+        </Link>
+      </div>
+    </section>
+  );
+};
+
+export default Cta;