feat: Add new newsletter design

content/newsletter-archive/index.de.md

@@ -5,7 +5,7 @@ layout: "article"
 url: "/de/newsletter-archive"
 ---
 
-Die folgenden Einträge sind alle [deutschen Newsletter]({{< relref "newsletter" >}}) die Open Elements bisher verschickt hat:
+Die folgenden Einträge sind alle [deutschen Newsletter]({{< relref "de/newsletter" >}}) die Open Elements bisher verschickt hat:
 
 - [DiWoDo 2025 - Digitale Souveränität im Zeitalter von ChatGPT](https://sh1.sendinblue.com/vts9wmlj9pfe.html)
 - [DiWoDo 2025 - Der Cyber Resilience Act (CRA) aus Entwickler Perspektive](https://sh1.sendinblue.com/vxzz8mlj9pfe.html)

locales/de.json

@@ -43,6 +43,7 @@
     "quoteTextFallback": "Die Vorlesung hat mir sehr gut gefallen. Hendrik hat es geschafft, ein komplexes Thema verständlich und praxisnah zu vermitteln. Besonders die praktischen Übungen haben mir geholfen, das Gelernte anzuwenden."
   },
   "newsletter": "Unser Newsletter",
+  "newsletterArchive": "Newsletter Archiv",
   "404": {
     "notFound": "Seite nicht gefunden"
   },

locales/en.json

@@ -43,6 +43,7 @@
     "quoteTextFallback": "The lecture gave me a clear and practical introduction to a complex topic. The hands-on parts especially helped me apply what I learned."
   },
   "newsletter": "Newsletter",
+  "newsletterArchive": "Newsletter Archive",
   "404": {
     "notFound": "Page Not Found"
   },

src/app/[locale]/newsletter/page.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable @next/next/no-img-element */
 import type { Metadata } from 'next';
 import { notFound } from 'next/navigation';
-import Image from 'next/image';
 import NewsletterForm from '@/components/newsletter/NewsletterForm';
 
 interface NewsletterPageProps {
@@ -55,42 +55,84 @@ export default async function NewsletterPage({ params }: NewsletterPageProps) {
   }
 
   return (
-    <div>
-      {/* Hero background */}
-      <div className="absolute left-0 w-full top-0 h-48 -z-10 overflow-hidden">
-        <Image
-          src="/illustrations/hero-bg-2.svg"
-          alt="Hero background"
-          fill
-          className="object-cover"
-          priority
+    <div className="relative bg-white">
+      <div className="container max-w-sm lg:max-w-7xl md:max-w-2xl sm:max-w-xl sm:w-full relative">
+        <img
+          src="/illustrations/round-13.svg"
+          alt=""
+          className="absolute right-28 top-24 w-20 shrink-0"
         />
-      </div>
-
-      <div className="container max-w-sm lg:max-w-7xl md:max-w-2xl sm:max-w-xl sm:w-full">
-        {/* Page title */}
         <div className="flex items-center justify-center pt-16 pb-4 sm:pt-36 sm:pb-12">
           <div className="relative flex flex-col items-center justify-center w-full">
-            <h1 className="text-center h1">Unser Newsletter</h1>
-            <Image
-              src="/illustrations/underline.svg"
-              alt="Unterstrich"
-              width={288}
-              height={24}
-              className="absolute w-36 -bottom-3 sm:w-56 shrink-0"
+            <h1 className="text-center h1">
+              Join our <span className="text-green">Newsletter</span>
+            </h1>
+            <p className="max-w-3xl mx-auto text-center text-base">
+              You want to better understand digital sovereignty and learn why
+              topics like open-source software play such an important role?
+              <br />
+              Then subscribe to our newsletter! As a thank-you,{' '}
+              <b>
+                you’ll receive our whitepaper on modern open-source development
+                for free,
+              </b>{' '}
+              delivered straight to your inbox.
+            </p>
+            <img
+              src="/illustrations/line-p.svg"
+              alt=""
+              className="absolute w-48 -bottom-7 sm:w-72 shrink-0"
             />
           </div>
         </div>
       </div>
-
-      {/* Form section */}
-      <div className="lg:pb-48 sm:pb-32 pb-28">
-        <div className="container mt-12 xl:max-w-1xl">
-          <div className="flex flex-col items-center justify-center gap-8">
-            <p className="text-center text-blue max-w-xl text-lg">
-              Bleib auf dem Laufenden über Open Source, Java und die neuesten
-              Nachrichten von Open Elements.
-            </p>
+      <div className="container max-w-sm lg:max-w-7xl md:max-w-2xl sm:max-w-xl sm:w-full relative flex items-center justify-center">
+        <a
+          href="#newsletter-form-section"
+          className="shrink-0 sm:mt-14 mt-28 lg:scale-100 scale-110 relative z-10 hover:opacity-95 transition-opacity">
+          <img src="/illustrations/book.png" alt="" />
+        </a>
+        <img
+          src="/illustrations/plane.svg"
+          alt=""
+          className="absolute top-0 lg:scale-105 scale-125 xl:-right-24 sm:block hidden"
+        />
+        <img
+          src="/illustrations/plane-sm.svg"
+          alt=""
+          className="absolute -right-3 top-16 sm:hidden"
+        />
+        <img
+          src="/illustrations/sky-round.svg"
+          alt=""
+          className="absolute xl:left-44 lg:left-12 md:-left-28 sm:-left-28 -left-44 lg:scale-100 sm:scale-90 sm:top-12 scale-50"
+        />
+        <img
+          src="/illustrations/round-11.svg"
+          alt=""
+          className="absolute opacity-50 size-36 xl:right-72 lg:right-28 md:right-12 sm:right-8 -right-4 sm:top-14 top-20"
+        />
+        <img
+          src="/illustrations/green-arrow.svg"
+          alt=""
+          className="absolute size-44 xl:right-52 lg:right-7 md:-right-10 sm:-right-12 sm:top-12 top-0 -right-7 sm:scale-100 scale-75"
+        />
+      </div>
+      <div className="bg-gray -mt-12 sm:mt-0">
+        <div className="container max-w-sm lg:max-w-7xl md:max-w-2xl sm:max-w-xl sm:w-full relative flex items-center justify-center">
+          <img
+            src="/illustrations/round-1.svg"
+            alt=""
+            className="absolute lg:size-96 sm:size-72 size-60 sm:-left-56 sm:right-auto -right-32 sm:top-16 sm:bottom-auto bottom-24"
+          />
+          <img
+            src="/illustrations/round11.svg"
+            alt=""
+            className="absolute lg:size-56 sm:size-40 size-24 lg:right-10 sm:-right-5 right-2 sm:top-16 top-8"
+          />
+          <div
+            id="newsletter-form-section"
+            className="pb-28 pt-36 max-w-2xl mx-auto relative">
             <NewsletterForm />
           </div>
         </div>

src/components/Footer.tsx

@@ -99,6 +99,28 @@ export default function Footer({ locale }: FooterProps) {
                       </Link>
                     );
                   })}
+                  {locale === 'de' && (
+                    <>
+                      <Link
+                        href="/newsletter"
+                        className="flex items-start gap-3 group">
+                        <span
+                          className="iconify footer-link-icon"
+                          data-icon="ph:arrow-right-bold"></span>
+                        <span className="footer-link">{t('newsletter')}</span>
+                      </Link>
+                      <Link
+                        href="/newsletter-archive"
+                        className="flex items-start gap-3 group">
+                        <span
+                          className="iconify footer-link-icon"
+                          data-icon="ph:arrow-right-bold"></span>
+                        <span className="footer-link">
+                          {t('newsletterArchive')}
+                        </span>
+                      </Link>
+                    </>
+                  )}
                 </div>
               </div>