feat: redesign footer

src/components/footer.tsx

@@ -1,22 +1,59 @@
 import Link from "next/link";
+import { Icon } from "@iconify/react";
 
 export default function Footer() {
 	return (
-		<footer className="mt-auto text-xs flex flex-col justify-center gap-y-0.5 gap-2 text-black/50 p-8 *:text-center">
+		<footer className="mt-auto">
-			<div className="flex justify-center gap-2">
+			<div className="max-w-4xl mx-auto px-4 py-4">
-				<span>tomodachishare is not affiliated with nintendo</span>
+				{/* Main disclaimer */}
-			</div>
+				<div className="text-center mb-2">
+					<p className="text-sm text-zinc-600 font-medium">TomodachiShare is not affiliated with Nintendo</p>
+				</div>
 
-			<div className="flex justify-center gap-2">
+				{/* Links section */}
-				<Link href="/terms-of-service">terms of service</Link>
+				<div className="flex flex-wrap justify-center items-center gap-x-4 text-sm max-sm:gap-x-12">
-				<span>&bull;</span>
+					<Link href="/terms-of-service" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
-				<Link href="/privacy">privacy</Link>
+						Terms of Service
-				<span>&bull;</span>
+					</Link>
-				<a href="https://github.com/trafficlunar/tomodachi-share">source code</a>
+
-				<span>&bull;</span>
+					<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
-				<a href="https://trafficlunar.net">
+						•
-					made by <span className="text-orange-400">trafficlunar</span>
+					</span>
-				</a>
+
+					<Link href="/privacy" className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline">
+						Privacy Policy
+					</Link>
+
+					<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
+						•
+					</span>
+
+					<a
+						href="https://github.com/trafficlunar/tomodachi-share"
+						target="_blank"
+						className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline inline-flex items-center gap-1"
+					>
+						<Icon icon="mdi:github" className="text-lg" />
+						Source Code
+					</a>
+
+					<span className="text-zinc-400 hidden sm:inline" aria-hidden="true">
+						•
+					</span>
+
+					<a
+						href="https://trafficlunar.net"
+						target="_blank"
+						className="text-zinc-500 hover:text-zinc-700 transition-colors duration-200 hover:underline group"
+					>
+						Made by <span className="text-orange-400 group-hover:text-orange-500 font-medium transition-colors duration-200">trafficlunar</span>
+					</a>
+				</div>
+
+				{/* Copyright */}
+				<div className="text-center mt-4 mb-4">
+					<p className="text-xs text-zinc-400">© {new Date().getFullYear()} TomodachiShare. All rights reserved.</p>
+				</div>
 			</div>
 		</footer>
 	);