-footer, and logo

package.json

@@ -19,6 +19,7 @@
     "lucide-react": "^0.542.0",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
+    "react-icons": "^5.5.0",
     "react-router": "^7.8.2",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.12"

pnpm-lock.yaml

@@ -35,6 +35,9 @@ importers:
       react-dom:
         specifier: ^19.1.1
         version: 19.1.1(react@19.1.1)
+      react-icons:
+        specifier: ^5.5.0
+        version: 5.5.0(react@19.1.1)
       react-router:
         specifier: ^7.8.2
         version: 7.8.2(react-dom@19.1.1(react@19.1.1))(react@19.1.1)
@@ -1517,6 +1520,11 @@ packages:
     peerDependencies:
       react: ^19.1.1
 
+  react-icons@5.5.0:
+    resolution: {integrity: sha512-MEFcXdkP3dLo8uumGI5xN3lDFNsRtrjbOEKDLD7yv76v4wpnEq2Lt2qeHaQOr34I/wPN3s3+N08WkQ+CW37Xiw==}
+    peerDependencies:
+      react: '*'
+
   react-refresh@0.17.0:
     resolution: {integrity: sha512-z6F7K9bV85EfseRCp2bzrpyQ0Gkw1uLoCel9XBVWPg/TjRj94SkJzUTGfOa4bs7iJvBWtQG0Wq7wnI0syw3EBQ==}
     engines: {node: '>=0.10.0'}
@@ -3053,6 +3061,10 @@ snapshots:
       react: 19.1.1
       scheduler: 0.26.0
 
+  react-icons@5.5.0(react@19.1.1):
+    dependencies:
+      react: 19.1.1
+
   react-refresh@0.17.0: {}
 
   react-remove-scroll-bar@2.3.8(@types/react@19.1.12)(react@19.1.1):

src/components/Footer.tsx

@@ -1,7 +1,39 @@
+import { SiDiscord, SiTelegram } from "react-icons/si";
+
+// TODO: plz update the links
+
 const Footer = () => (
-  <footer className="w-full h-12 shrink-0 flex items-center justify-center bg-background/10 sticky bottom-0 z-20 backdrop-blur-xs border-t-background">
-    <div className="w-full max-w-4xl justify-between p-4 items-center">
-      footer
+  <footer className="w-full h-16 lg:h-12 shrink-0 flex items-center justify-center bg-background/10 sticky bottom-0 z-20 backdrop-blur-xs border-t-background">
+    <div className="w-full max-w-4xl justify-between p-4 items-center flex flex-col lg:flex-row gap-2 my-2 text-sm">
+      <div className="flex gap-6">
+        <a
+          href="https://discord.gg/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:scale-105"
+        >
+          <SiDiscord className="h-6 w-6" />
+        </a>
+        <a
+          href="https://t.me/"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="hover:scale-105"
+        >
+          <SiTelegram className="h-6 w-6" />
+        </a>
+      </div>
+      <div className="flex justify-center items-center text-xs gap-1">
+        Developed with ❤️ by{" "}
+        <a
+          href="https://github.com/fallout2-ce"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="underline hover:scale-101"
+        >
+          https://github.com/fallout2-ce
+        </a>
+      </div>
     </div>
   </footer>
 );

src/components/Header.tsx

@@ -1,9 +1,15 @@
+import { Link } from "react-router";
 import LangToggle from "./LangToggle";
 
 const Header = () => (
   <header className="w-full h-16 shrink-0 flex items-center justify-center bg-background/20 sticky top-0 z-20 backdrop-blur-xs border-b-background">
     <div className="w-full max-w-4xl flex justify-between p-4 items-center">
-      <span>header</span>
+      <Link to="/">
+        <img
+          src="/logo.png"
+          className="h-10 w-10 hover:scale-105 transition-all duration-200"
+        />
+      </Link>
       <LangToggle />
     </div>
   </header>