From 6ac01c5e7956a28fcf171fd19f26f625f85d3ba9 Mon Sep 17 00:00:00 2001
From: Lukas Thrane <76877975+Windove@users.noreply.github.com>
Date: Mon, 29 Jan 2024 13:59:31 +0100
Subject: [PATCH] feat(frontend): :sparkles: Add footer styling and content
 (#57)

---
 frontend/src/components/Footer.tsx | 67 +++++++++++++++++++++++++++++-
 frontend/src/components/Navbar.tsx |  2 +-
 2 files changed, 66 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
index fa572fd..18d7efc 100644
--- a/frontend/src/components/Footer.tsx
+++ b/frontend/src/components/Footer.tsx
@@ -1,7 +1,70 @@
+import Image from "next/image";
+
 export default function Footer() {
     return (
-        <footer className="bg-gray-200 p-4 dark:bg-gray-600">
-            <h1>Footer</h1>
+        <footer className="p-4 bg-slate-700 dark:bg-slate-500 text-white flex flex-col items-center">
+            <div className="flex flex-row items-center justify-between w-full">
+                <div className="flex-1 flex justify-start">
+                    <Image
+                        src={
+                            "https://www.ntnu.edu/o/ntnu-theme/images/logo_ntnu_tag_english.svg"
+                        }
+                        alt={"NTNU"}
+                        width={200}
+                        height={50}
+                    />
+                </div>
+
+                <div className="flex-1 flex justify-center">
+                    <div className="flex flex-col text-center">
+                        <div className="flex flex-row gap-4">
+                            <a href="#" className="hover:underline">
+                                Twitter
+                            </a>
+                            <a href="#" className="hover:underline">
+                                Facebook
+                            </a>
+                            <a href="#" className="hover:underline">
+                                Instagram
+                            </a>
+                            <a href="#" className="hover:underline">
+                                Youtube
+                            </a>
+                        </div>
+                        <p>&copy; 2021 NTNU Small Satellite Lab</p>
+                    </div>
+                </div>
+
+                <div className="flex-1 flex justify-end">
+                    <div className="flex flex-col text-right">
+                        <span className="text-white">
+                            NTNU Small Satellite Lab
+                        </span>
+                        <span className="text-white">Trondheim, Norway</span>
+                    </div>
+                </div>
+            </div>
+
+            <hr className="my-4 w-full" />
+
+            <div className="text-center">
+                <p>Norwegian University of Science and Technology</p>
+            </div>
+
+            <div className="mt-4 flex flex-col text-center">
+                <a href="#" className="hover:underline">
+                    Use of cookies
+                </a>
+                <a href="#" className="hover:underline">
+                    Accessibility statement (in Norwegian)
+                </a>
+                <a href="#" className="hover:underline">
+                    Privacy policy
+                </a>
+                <a href="#" className="hover:underline">
+                    Editorial responsibility
+                </a>
+            </div>
         </footer>
     );
 }
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index 2b0855e..78d6463 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -32,7 +32,7 @@ export default function Navbar() {
     const { setTheme } = useTheme();
 
     return (
-        <nav className="flex items-center justify-between p-4 bg-slate-700 text-white w-full">
+        <nav className="flex items-center justify-between p-4 bg-slate-700 dark:bg-slate-500 text-white w-full">
             <div>
                 <Link href="/">
                     <Button variant={getButtonVariant("/")}>Logo</Button>