Website footer

client/src/components/SiteFooter.tsx

@@ -0,0 +1,38 @@
+import { Button, Link } from "@nextui-org/react";
+
+export default function SiteFooter() {
+  return (
+    <div className="bg-black text-white p-8">
+      <div className="flex flex-col text-center *:mx-auto gap-16">
+        <div className="flex flex-col gap-4 *:mx-auto">
+          <p className="text-2xl font-bold">Have a question?</p>
+          <Button color="primary" variant="solid" className="px-24" size="lg">
+            Get in touch with us
+          </Button>
+        </div>
+        <div className="w-full flex flex-col gap-8">
+          <div className="flex flex-row justify-between w-full">
+            <p className="font-bold">Powered by DIT2303</p>
+            <div className="flex flex-row gap-2 *:underline *:text-white">
+              <Link>Terms of use</Link>
+              <Link>Privacy statement</Link>
+              <Link>Report vulnerability</Link>
+            </div>
+          </div>
+          <div className="flex flex-col gap-8 *:mx-auto">
+            <p className="text-xl">Connecting the neighbourhood together</p>
+            <div className="flex flex-col gap-6 *:mx-auto">
+              <img
+                src="../assets/gov-footer.png"
+                alt="Gov Tech footer logo"
+                className=" w-80"
+              />
+              <p className="font-bold">©2024 STUDENTS OF NANYANG POLYTECHNIC</p>
+              <p>Last updated on 23 July 1921</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/layouts/default.tsx

@@ -2,14 +2,18 @@ import { Toaster } from "react-hot-toast";
 import SingaporeAgencyStrip from "../components/SingaporeAgencyStrip";
 import NavigationBar from "../components/NavigationBar";
 import { Outlet } from "react-router-dom";
+import SiteFooter from "../components/SiteFooter";
 
 export default function DefaultLayout() {
   return (
-    <div className="relative flex flex-col h-screen">
-      <SingaporeAgencyStrip />
-      <main className="pt-16 flex-grow">
-        <Outlet />
-      </main>
+    <div className="relative flex flex-col justify-between h-screen">
+      <div className="flex flex-col h-screen">
+        <SingaporeAgencyStrip />
+        <main className="pt-16 flex-grow">
+          <Outlet />
+        </main>
+      </div>
+      <SiteFooter />
       <Toaster />
       <NavigationBar />