Skip to content

Unify footer links and layout #176

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
NiHaiden wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Unify footer links and layout #176

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
168 changes: 120 additions & 48 deletions components/footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,90 +1,162 @@
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>;
Copy link

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

RefObject<T> already models current as T | null, so using RefObject<HTMLDivElement | null> adds redundant nullability (effectively HTMLDivElement | null | null). Prefer RefObject<HTMLDivElement> to keep the prop type precise and avoid propagating unnecessary null unions.

Suggested change
introRef?: RefObject<HTMLDivElement | null>;
introRef?: RefObject<HTMLDivElement>;

Copilot uses AI. Check for mistakes.
};

const externalLinkProps = {
target: "_blank",
rel: "noreferrer",
Copy link

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

target="_blank" should include rel="noopener noreferrer" (not just noreferrer) to prevent reverse-tabnabbing and ensure consistent protection across browsers. Update externalLinkProps.rel accordingly.

Suggested change
rel: "noreferrer",
rel: "noopener noreferrer",

Copilot uses AI. Check for mistakes.
} as const;

export default function Footer({ introRef }: FooterProps) {
const t = useTranslations("Footer");
const tDocs = useTranslations("Docs-Community");

const handleScrollUp = () => {
if (introRef?.current) {
introRef.current.scrollIntoView({
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>
);
}
Loading