Footer in eigenem Component

apps/hub/app/(app)/_components/Footer.tsx

@@ -0,0 +1,75 @@
+import Image from "next/image";
+import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-icons";
+import YoutubeSvg from "./youtube_wider.svg";
+import FacebookSvg from "./facebook.svg";
+
+export const Footer = () => {
+	return (
+		<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
+			{/* Left: Impressum & Datenschutz */}
+			<div className="flex gap-4 text-sm">
+				<a href="https://virtualairrescue.com/impressum/" className="hover:text-primary">
+					Impressum
+				</a>
+				<a href="https://virtualairrescue.com/datenschutz/" className="hover:text-primary">
+					Datenschutzerklärung
+				</a>
+			</div>
+
+			{/* Center: Copyright */}
+			<p className="text-sm">Copyright © {new Date().getFullYear()} - Virtual Air Rescue</p>
+
+			{/* Right: Social Icons */}
+			<div className="flex gap-4">
+				<div className="tooltip tooltip-top" data-tip="Discord">
+					<a
+						href="https://discord.gg/yn7uXmmNnG"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary"
+					>
+						<DiscordLogoIcon className="w-5 h-5" />
+					</a>
+				</div>
+
+				<div className="tooltip tooltip-top" data-tip="YouTube">
+					<a
+						href="https://www.youtube.com/@VirtualAirRescue"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary text-white"
+					>
+						<Image src={YoutubeSvg} className="invert w-5 h5" alt="Youtube Icon" />
+					</a>
+				</div>
+
+				<div className="tooltip tooltip-top" data-tip="Facebook">
+					<a
+						href="https://www.facebook.com/people/Virtual-Air-Rescue/100090867294041/#"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary text-white"
+					>
+						<Image src={FacebookSvg} className="invert w-5 h5" alt="Youtube Icon" />
+					</a>
+				</div>
+
+				<div className="tooltip tooltip-top" data-tip="Instagram">
+					<a
+						href="https://www.instagram.com/virtualairrescue/"
+						target="_blank"
+						rel="noopener noreferrer"
+						className="hover:text-primary"
+					>
+						<InstagramLogoIcon className="w-5 h-5" />
+					</a>
+				</div>
+				<div className="tooltip tooltip-top" data-tip="Knowledgebase">
+					<a href="https://docs.virtualairrescue.com/" className="hover:text-primary">
+						<ReaderIcon className="w-5 h-5" />
+					</a>
+				</div>
+			</div>
+		</footer>
+	);
+};

apps/hub/app/(app)/layout.tsx

@@ -1,14 +1,12 @@
 import type { Metadata } from "next";
-import { DiscordLogoIcon, InstagramLogoIcon, ReaderIcon } from "@radix-ui/react-icons";
 import { HorizontalNav, VerticalNav } from "../_components/Nav";
 import { redirect } from "next/navigation";
 import { getServerSession } from "../api/auth/[...nextauth]/auth";
 import { EmailVerification } from "_components/EmailVerification";
 import { FirstPath } from "./_components/FirstPath";
 import { Penalty } from "_components/Penalty";
-import YoutubeSvg from "./resources/_components/youtube_wider.svg";
+
-import FacebookSvg from "./resources/_components/facebook.svg";
+import { Footer } from "(app)/_components/Footer";
-import Image from "next/image";
 
 export const metadata: Metadata = {
 	title: "VAR: Hub",
@@ -56,73 +54,7 @@ export default async function RootLayout({
 						</div>
 					</div>
 
-					{/* Footer */}
+					<Footer />
-					<footer className="footer flex justify-between items-center p-4 bg-base-200 mt-4 rounded-lg shadow-md">
-						{/* Left: Impressum & Datenschutz */}
-						<div className="flex gap-4 text-sm">
-							<a href="https://virtualairrescue.com/impressum/" className="hover:text-primary">
-								Impressum
-							</a>
-							<a href="https://virtualairrescue.com/datenschutz/" className="hover:text-primary">
-								Datenschutzerklärung
-							</a>
-						</div>
-
-						{/* Center: Copyright */}
-						<p className="text-sm">Copyright © {new Date().getFullYear()} - Virtual Air Rescue</p>
-
-						{/* Right: Social Icons */}
-						<div className="flex gap-4">
-							<div className="tooltip tooltip-top" data-tip="Discord">
-								<a
-									href="https://discord.gg/yn7uXmmNnG"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="hover:text-primary"
-								>
-									<DiscordLogoIcon className="w-5 h-5" />
-								</a>
-							</div>
-
-							<div className="tooltip tooltip-top" data-tip="YouTube">
-								<a
-									href="https://www.youtube.com/@VirtualAirRescue"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="hover:text-primary text-white"
-								>
-									<Image src={YoutubeSvg} className="invert w-5 h5" alt="Youtube Icon" />
-								</a>
-							</div>
-
-							<div className="tooltip tooltip-top" data-tip="Facebook">
-								<a
-									href="https://www.facebook.com/people/Virtual-Air-Rescue/100090867294041/#"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="hover:text-primary text-white"
-								>
-									<Image src={FacebookSvg} className="invert w-5 h5" alt="Youtube Icon" />
-								</a>
-							</div>
-
-							<div className="tooltip tooltip-top" data-tip="Instagram">
-								<a
-									href="https://www.instagram.com/virtualairrescue/"
-									target="_blank"
-									rel="noopener noreferrer"
-									className="hover:text-primary"
-								>
-									<InstagramLogoIcon className="w-5 h-5" />
-								</a>
-							</div>
-							<div className="tooltip tooltip-top" data-tip="Knowledgebase">
-								<a href="https://docs.virtualairrescue.com/" className="hover:text-primary">
-									<ReaderIcon className="w-5 h-5" />
-								</a>
-							</div>
-						</div>
-					</footer>
 				</div>
 			</div>
 		</div>

apps/hub/app/(app)/resources/page.tsx

@@ -1,10 +1,20 @@
 import ResourceCard from "(app)/resources/_components/Card";
 import { Download } from "lucide-react";
 import Desktop from "./_components/desktop-client.png";
+import Discord from "./_components/Discord-logo.png";
+import { DiscordLogoIcon } from "@radix-ui/react-icons";
 
 export default function () {
 	return (
-		<div>
+		<div className="space-y-8">
+			<ResourceCard
+				image={Discord}
+				title="Discord Server"
+				BtnIcon={<DiscordLogoIcon />}
+				btnHref="https://discord.com/invite/x6FAMY7DW6"
+				btnLabel="Beitreten"
+				description="Tritt unserem Discord-Server bei, um mit der Community in Kontakt zu bleiben, Unterstützung zu erhalten und über die neuesten Updates informiert zu werden. Wenn du beigetreten bist kannst du in deinen Einstellugnen dein VAR-Konto mit deinem Discord-Konto verknüpfen umd eine Rolle zu erhalten."
+			/>
 			<ResourceCard
 				image={Desktop}
 				title="Desktop client"

apps/hub/app/_components/Nav.tsx

@@ -48,7 +48,7 @@ export const VerticalNav = async () => {
 			<li>
 				<Link href="/resources">
 					<DownloadIcon />
-					Downloads
+					Downloads / Links
 				</Link>
 			</li>
 			{viewAdminMenu && (