From 8ce9fe275be109f7db65ad56455f095170966431 Mon Sep 17 00:00:00 2001
From: Niklas Haiden <niklas.haiden@gmail.com>
Date: Wed, 22 Apr 2026 20:26:33 +0200
Subject: [PATCH] Unify footer links and layout

---
 components/footer/Footer.tsx | 168 +++++++++++++++++++++++++----------
 1 file changed, 120 insertions(+), 48 deletions(-)

diff --git a/components/footer/Footer.tsx b/components/footer/Footer.tsx
index 980bb1a..1df5c94 100644
--- a/components/footer/Footer.tsx
+++ b/components/footer/Footer.tsx
@@ -1,10 +1,29 @@
-import { RefObject } from "react";
-import { CircleArrowUp, GitMerge, GlobeIcon } from "lucide-react";
+import { type RefObject } from "react";
+import {
+  ArrowUpRightIcon,
+  BookOpen,
+  CircleArrowUp,
+  GitMerge,
+  GlobeIcon,
+  Heart,
+  MessageCircleMore,
+} from "lucide-react";
+import Image from "next/image";
 import { useTranslations } from "next-intl";
 import GithubIcon from "../GithubIcon";
 
-export default function Footer({ introRef }: { introRef?: RefObject<any> }) {
+type FooterProps = {
+  introRef?: RefObject<HTMLDivElement | null>;
+};
+
+const externalLinkProps = {
+  target: "_blank",
+  rel: "noreferrer",
+} as const;
+
+export default function Footer({ introRef }: FooterProps) {
   const t = useTranslations("Footer");
+  const tDocs = useTranslations("Docs-Community");
 
   const handleScrollUp = () => {
     if (introRef?.current) {
@@ -12,79 +31,132 @@ export default function Footer({ introRef }: { introRef?: RefObject<any> }) {
         behavior: "smooth",
         block: "start",
       });
-    } else {
-      window.scrollTo({ top: 0, behavior: "smooth" });
+      return;
     }
+
+    window.scrollTo({ top: 0, behavior: "smooth" });
   };
 
   return (
-    <>
-      <footer
-        className={
-          "flex min-h-[30vh] w-full flex-col items-center justify-center gap-4 bg-gray-800 p-12 text-center text-white lg:p-0"
-        }
-      >
+    <footer className="border-t border-zinc-800 bg-black/60 px-6 py-12 text-center text-white backdrop-blur-xs lg:px-8">
+      <div className="mx-auto flex max-w-(--breakpoint-2xl) flex-col items-center gap-8">
         <button
-          className={"mt-5 flex flex-row items-center justify-center gap-5"}
+          type="button"
+          className="flex items-center justify-center gap-3 rounded-full border border-zinc-700 bg-zinc-900/60 px-5 py-3 font-medium transition-colors hover:border-aurora-blue hover:bg-zinc-800"
           onClick={handleScrollUp}
         >
-          <CircleArrowUp className={"h-10 w-10"} />
+          <CircleArrowUp className="h-6 w-6" />
           {t("go-up")}
         </button>
-        <div
-          className={
-            "flex flex-col items-center justify-center gap-2 p-4 text-xl"
-          }
-        >
-          {t("proudly-built")}{" "}
+
+        <div className="flex max-w-3xl flex-col items-center gap-3">
+          <div className="text-xl">
+            {t("proudly-built")}{" "}
+            <a
+              className="inline-flex items-center gap-2 font-bold underline underline-offset-4"
+              href="https://universal-blue.org"
+              {...externalLinkProps}
+            >
+              <Image
+                src="/ublue-color.svg"
+                width={28}
+                height={28}
+                alt="Universal Blue"
+              />
+              Universal Blue
+            </a>
+          </div>
+          <p className="text-zinc-300">{t("proudly-built-phrase")}</p>
+        </div>
+
+        <div className="grid w-full max-w-5xl gap-4 md:grid-cols-2 xl:grid-cols-3">
           <a
-            className={"flex flex-row items-center gap-2 font-bold underline"}
-            href={"https://universal-blue.org"}
+            href="https://docs.getaurora.dev"
+            {...externalLinkProps}
+            className="flex items-center justify-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-900/50 px-5 py-4 font-medium text-zinc-100 transition-all hover:border-aurora-blue hover:bg-zinc-800/80 hover:text-aurora-blue"
           >
-            <img src={"/ublue-color.svg"} width={35} height={35} />
-            Universal Blue
+            <BookOpen className="h-5 w-5" />
+            {tDocs("read-docs")}
+            <ArrowUpRightIcon className="h-4 w-4" />
           </a>
-          {t("proudly-built-phrase")}
-        </div>
-        <div>{t("built-with-love")}</div>
-        <div>Logos have been crafted by Delphic Melody (@delphicmelody on Discord) and @zandrro. ❤️</div>
-        <div>Wallpapers & other art are made by <a className={"underline"} href={"https://ko-fi.com/chandeleer"} target={"_blank"}>Chandeleer</a> ❤️</div>
-        <div
-          className={
-            "mb-5 flex w-full flex-col items-center justify-center gap-5 underline underline-offset-4 lg:w-fit lg:flex-row"
-          }
-        >
+
           <a
-            className={"flex flex-row justify-center items-center gap-1"}
-            href={"https://github.com/ublue-os/aurora"}
+            href="https://github.com/ublue-os/aurora/discussions"
+            {...externalLinkProps}
+            className="flex items-center justify-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-900/50 px-5 py-4 font-medium text-zinc-100 transition-all hover:border-aurora-orangina hover:bg-zinc-800/80 hover:text-aurora-orangina"
           >
-            <GithubIcon color="#ffffff" /> Aurora GitHub Repository
+            <MessageCircleMore className="h-5 w-5" />
+            {tDocs("visit-forums")}
+            <ArrowUpRightIcon className="h-4 w-4" />
           </a>
 
           <a
-            className={"flex flex-row justify-center items-center gap-1"}
-            href={"https://universal-blue.org"}
+            href="https://discord.getaurora.dev"
+            {...externalLinkProps}
+            className="flex items-center justify-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-900/50 px-5 py-4 font-medium text-zinc-100 transition-all hover:border-aurora-lightorange hover:bg-zinc-800/80 hover:text-aurora-lightorange md:col-span-2 xl:col-span-1"
           >
-            <GlobeIcon />
-            Universal Blue Website
+            <ArrowUpRightIcon className="h-5 w-5" />
+            {tDocs("join-discord")}
           </a>
 
           <a
-            className={"flex flex-row justify-center items-center gap-1"}
-            href={"https://github.com/get-aurora-dev/aurora-web"}
+            href="https://github.com/ublue-os/aurora"
+            {...externalLinkProps}
+            className="flex items-center justify-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-900/50 px-5 py-4 font-medium text-zinc-100 transition-all hover:border-white hover:bg-zinc-800/80"
           >
-            <GitMerge />
+            <GithubIcon color="#ffffff" />
+            Aurora GitHub Repository
+          </a>
+
+          <a
+            href="https://github.com/get-aurora-dev/aurora-web"
+            {...externalLinkProps}
+            className="flex items-center justify-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-900/50 px-5 py-4 font-medium text-zinc-100 transition-all hover:border-white hover:bg-zinc-800/80"
+          >
+            <GitMerge className="h-5 w-5" />
             Website Source Code
           </a>
+
+          <a
+            href="https://ko-fi.com/chandeleer"
+            {...externalLinkProps}
+            className="flex items-center justify-center gap-3 rounded-2xl border border-zinc-800 bg-zinc-900/50 px-5 py-4 font-medium text-zinc-100 transition-all hover:border-pink-400 hover:bg-zinc-800/80 hover:text-pink-300"
+          >
+            <Heart className="h-5 w-5" />
+            Support the Artist
+          </a>
+        </div>
+
+        <div className="flex flex-wrap items-center justify-center gap-x-6 gap-y-2 text-sm text-zinc-300">
+          <span>{t("built-with-love")}</span>
+          <a
+            href="https://universal-blue.org"
+            {...externalLinkProps}
+            className="inline-flex items-center gap-2 underline underline-offset-4"
+          >
+            <GlobeIcon className="h-4 w-4" />
+            Universal Blue Website
+          </a>
+          <span>{t("copyright")}</span>
         </div>
-        <div className={"mb-3 text-sm italic"}>{t("not-affiliated")}</div>
+
+        <div className="max-w-4xl text-sm italic text-zinc-400">
+          {t("not-affiliated")}
+        </div>
+
         <div>
-          <div className={"text-xl font-bold italic"}>
+          <div className="text-xl font-bold italic">
             Deploying Linux to your machine, please wait...
           </div>
-          <img className={"scale-50"} src={"/glorp.png"} />
+          <Image
+            className="mx-auto scale-50"
+            src="/glorp.png"
+            width={534}
+            height={534}
+            alt="Glorp mascot"
+          />
         </div>
-      </footer>
-    </>
+      </div>
+    </footer>
   );
 }