news page

src/app/blog/page.tsx

@@ -1,3 +0,0 @@
-export default function Blog() {
-  return <div>TODO</div>;
-}

src/app/news/page.tsx

@@ -0,0 +1,22 @@
+import Footer from "@/components/Footer";
+import Header from "@/components/Header";
+
+export default function News() {
+  return (
+    <div className="flex-1 flex flex-col">
+      <div className="flex flex-col bg-[url('/background.png')] bg-center bg-no-repeat h-52">
+        <Header />
+
+        <h1 className="text-5xl font-black m-auto w-max">CLIENT NEWS</h1>
+      </div>
+
+      <div className="py-8 px-5 w-full">
+        TODO: implement search and filtering
+      </div>
+
+      <div className="py-8 px-5 w-full">TODO: implement thumbnail</div>
+
+      <Footer />
+    </div>
+  );
+}

src/app/page.tsx

@@ -4,29 +4,22 @@ import {
   Book,
   BookOpen,
   BookOpenText,
+  Download,
   Github,
   House,
   Instagram,
   List,
+  Newspaper,
   Text,
   Users,
 } from "lucide-react";
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
     <div className="flex flex-col min-h-screen bg-[url('/background.png')] bg-cover bg-center bg-no-repeat">
-      {/* Header */}
+      <Header />
-      <header className="text-white bg-white/5 backdrop-blur-xl py-4 text-center w-max mx-auto px-6 rounded-2xl mt-2">
-        <div className="flex flex-row w-max mx-auto gap-4">
-          <Link href="/">
-            <House className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
-          </Link>
-
-          <Link href="/blog">
-            <BookOpenText className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
-          </Link>
-        </div>
-      </header>
 
       <div className="flex-1 flex flex-col text-2xl mt-40 items-center">
         <Image src="/logo.png" alt="Logo" width={240} height={240} />
@@ -44,26 +37,7 @@ export default function Home() {
         </Link>
       </div>
 
-      {/* Footer */}
+      <Footer />
-      <footer className="text-white backdrop-blur-md py-4 text-center flex flex-row">
-        <div className="flex flex-row w-max mx-auto gap-1">
-          <p className="font-[mono]">&copy;</p> 2025 Saturn Client. All rights
-          reserved.
-        </div>
-
-        <div className="flex flex-row gap-4 mr-4">
-          <Link href="https://github.com/saturnclientmc" target="_blank">
-            <Github className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
-          </Link>
-
-          <Link
-            href="https://www.instagram.com/saturnclient/"
-            target="_blank"
-          >
-            <Instagram className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
-          </Link>
-        </div>
-      </footer>
     </div>
   );
 }

src/components/Button.tsx

@@ -1,3 +0,0 @@
-export default function Button({ children }: { children: any }) {
-  return <button className="bg-red border text-white p-3 px-4 rounded-xl backdrop-blur-2xl">{children}</button>;
-}

src/components/Footer.tsx

@@ -0,0 +1,23 @@
+import { Github, Instagram } from "lucide-react";
+import Link from "next/link";
+
+export default function Footer() {
+  return (
+    <footer className="text-white backdrop-blur-md py-4 flex flex-row">
+      <div className="flex flex-row gap-4 ml-4 absolute">
+        <Link href="https://github.com/saturnclientmc" target="_blank">
+          <Github className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
+        </Link>
+
+        <Link href="https://www.instagram.com/saturnclient/" target="_blank">
+          <Instagram className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
+        </Link>
+      </div>
+
+      <div className="flex flex-row w-max mx-auto gap-1">
+        <p className="font-[mono]">&copy;</p> 2025 Saturn Client. All rights
+        reserved.
+      </div>
+    </footer>
+  );
+}

src/components/Header.tsx

@@ -0,0 +1,22 @@
+import { Download, House, Newspaper } from "lucide-react";
+import Link from "next/link";
+
+export default function Header() {
+  return (
+    <header className="text-white bg-white/5 backdrop-blur-xl py-4 text-center w-max mx-auto px-6 rounded-2xl mt-2">
+      <div className="flex flex-row w-max mx-auto gap-4">
+        <Link href="/">
+          <House className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
+        </Link>
+
+        <Link href="/news">
+          <Newspaper className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
+        </Link>
+
+        <Link href="/download">
+          <Download className="transition-colors duration-300 hover:text-[#e2bf7d] animate-fadeIn" />
+        </Link>
+      </div>
+    </header>
+  );
+}