From 29d8b17fbdca48a20ba74f8249eee5dcb325a39e Mon Sep 17 00:00:00 2001
From: Erik Sevelin <91209290+SortHvit@users.noreply.github.com>
Date: Thu, 26 Sep 2024 20:02:47 +0200
Subject: [PATCH 1/5] Add rough footer layout

---
 src/app/page.tsx                 |  2 ++
 src/components/shared/Footer.tsx | 15 +++++++++++++++
 2 files changed, 17 insertions(+)
 create mode 100644 src/components/shared/Footer.tsx

diff --git a/src/app/page.tsx b/src/app/page.tsx
index ce63d71..d837b59 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,6 +1,7 @@
 import { CompanyRegistrationButton } from "@/app/_components/CompanyRegistrationButton"
 import { FairDates } from "@/app/_components/FairDates"
 import { RecruitmentBanner } from "@/app/_components/Recruitment"
+import { Footer } from "@/components/shared/Footer"
 import { NavigationMenu } from "@/components/shared/NavigationMenu"
 import { Page } from "@/components/shared/Page"
 import { Button } from "@/components/ui/button"
@@ -57,6 +58,7 @@ export default async function HomePage() {
           </div>
         </div>
       </Page.Background>
+      <Footer />
     </>
   )
 }
diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
new file mode 100644
index 0000000..1ebe44e
--- /dev/null
+++ b/src/components/shared/Footer.tsx
@@ -0,0 +1,15 @@
+import { InstagramIcon, LinkedinIcon, Music2Icon } from "lucide-react"
+
+export function Footer() {
+  return (
+    <div className="w-full bg-slate-500">
+      <p>Follow us on:</p>
+      <p>LinkedIn</p>
+      <LinkedinIcon />
+      <p>Instagram</p>
+      <InstagramIcon />
+      <p>TikTok</p>
+      <Music2Icon />
+    </div>
+  )
+}

From c224f071eed17087dff07f29b7588b2827dfed52 Mon Sep 17 00:00:00 2001
From: Erik Sevelin <91209290+SortHvit@users.noreply.github.com>
Date: Thu, 10 Oct 2024 19:34:54 +0200
Subject: [PATCH 2/5] footer changes, put footer in general layout

---
 src/app/layout.tsx               |  2 ++
 src/app/page.tsx                 |  2 --
 src/components/shared/Footer.tsx | 55 +++++++++++++++++++++++++++-----
 3 files changed, 49 insertions(+), 10 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index b9fd620..0ec0390 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,4 +1,5 @@
 import Providers from "@/app/providers"
+import { Footer } from "@/components/shared/Footer"
 import { Analytics } from "@vercel/analytics/react"
 import { SpeedInsights } from "@vercel/speed-insights/next"
 import { DateTime } from "luxon"
@@ -71,6 +72,7 @@ export default function RootLayout({
         <SpeedInsights />
         <Providers>{children}</Providers>
         <DevToolbar />
+        <Footer />
       </body>
     </html>
   )
diff --git a/src/app/page.tsx b/src/app/page.tsx
index d837b59..ce63d71 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,6 @@
 import { CompanyRegistrationButton } from "@/app/_components/CompanyRegistrationButton"
 import { FairDates } from "@/app/_components/FairDates"
 import { RecruitmentBanner } from "@/app/_components/Recruitment"
-import { Footer } from "@/components/shared/Footer"
 import { NavigationMenu } from "@/components/shared/NavigationMenu"
 import { Page } from "@/components/shared/Page"
 import { Button } from "@/components/ui/button"
@@ -58,7 +57,6 @@ export default async function HomePage() {
           </div>
         </div>
       </Page.Background>
-      <Footer />
     </>
   )
 }
diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
index 1ebe44e..1c675c1 100644
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -2,14 +2,53 @@ import { InstagramIcon, LinkedinIcon, Music2Icon } from "lucide-react"
 
 export function Footer() {
   return (
-    <div className="w-full bg-slate-500">
-      <p>Follow us on:</p>
-      <p>LinkedIn</p>
-      <LinkedinIcon />
-      <p>Instagram</p>
-      <InstagramIcon />
-      <p>TikTok</p>
-      <Music2Icon />
+    <div className="flex w-full justify-center">
+      <div className="absolute mt-2 h-1 w-2/3 rounded bg-slate-500 bg-opacity-20">
+        {" "}
+      </div>
+      <div className="m-5 mb-3 mt-7 w-1/4">
+        <p>Follow us on:</p>
+        <a
+          href="https://www.linkedin.com/company/armada"
+          className="flex items-end space-x-1">
+          <LinkedinIcon size="20" />
+          <p className="mb-0">LinkedIn</p>
+        </a>
+        <a
+          href="https://www.instagram.com/thsarmada/"
+          className="flex items-end space-x-1">
+          <InstagramIcon size="20" />
+          <p>Instagram</p>
+        </a>
+        <a
+          href="https://www.tiktok.com/@ths.armada"
+          className="flex items-end space-x-1">
+          <Music2Icon size="20" />
+          <p>TikTok</p>
+        </a>
+      </div>
+
+      <div className="m-5 mb-3 mt-7 w-1/2 text-center">
+        {/*
+        <p>Follow us on:</p>
+        <a className="flex justify-center space-x-1">
+          <LinkedinIcon size="20" />
+          <p className="mb-0">LinkedIn</p>
+        </a>
+        <a className="flex justify-center space-x-1">
+          <InstagramIcon size="20" />
+          <p>Instagram</p>
+        </a>
+        <a className="flex justify-center space-x-1">
+          <Music2Icon size="20" />
+          <p>TikTok</p>
+        </a>*/}
+      </div>
+      <div className="m-5 mb-3 mt-7 w-1/4 text-end">
+        <p>ARMADA</p>
+        <p>Drottning Kristinas väg 15</p>
+        <p>114 28, Stockholm</p>
+      </div>
     </div>
   )
 }

From 41d69f9d2783a9e42b7e3397b7228f8406e8dd43 Mon Sep 17 00:00:00 2001
From: Erik Sevelin <91209290+SortHvit@users.noreply.github.com>
Date: Thu, 7 Nov 2024 21:02:45 +0100
Subject: [PATCH 3/5] make footer responsive

---
 src/components/shared/Footer.tsx | 113 ++++++++++++++++++-------------
 1 file changed, 67 insertions(+), 46 deletions(-)

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
index 1c675c1..838905c 100644
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -1,54 +1,75 @@
+"use client"
+
+import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
 import { InstagramIcon, LinkedinIcon, Music2Icon } from "lucide-react"
 
 export function Footer() {
+  const { width } = useScreenSize()
+  let screenSmall = false
+
   return (
-    <div className="flex w-full justify-center">
-      <div className="absolute mt-2 h-1 w-2/3 rounded bg-slate-500 bg-opacity-20">
-        {" "}
-      </div>
-      <div className="m-5 mb-3 mt-7 w-1/4">
-        <p>Follow us on:</p>
-        <a
-          href="https://www.linkedin.com/company/armada"
-          className="flex items-end space-x-1">
-          <LinkedinIcon size="20" />
-          <p className="mb-0">LinkedIn</p>
-        </a>
-        <a
-          href="https://www.instagram.com/thsarmada/"
-          className="flex items-end space-x-1">
-          <InstagramIcon size="20" />
-          <p>Instagram</p>
-        </a>
-        <a
-          href="https://www.tiktok.com/@ths.armada"
-          className="flex items-end space-x-1">
-          <Music2Icon size="20" />
-          <p>TikTok</p>
-        </a>
-      </div>
+    /* IF WIDTH < 768, SET TO VERTICAL, OTHERWISE KEEP HORIZONTAL */
+    (width ?? 0) < 768 ? (screenSmall = true) : (screenSmall = false),
+    (
+      <div
+        className={
+          screenSmall
+            ? "w-100 flex flex-col items-center justify-center"
+            : "w-100 flex flex-row justify-center"
+        }>
+        <hr
+          className={
+            screenSmall
+              ? "static mt-2 h-1 w-2/3 rounded border-0 bg-slate-500 bg-opacity-30"
+              : "absolute mt-2 h-1 w-2/3 rounded border-0 bg-slate-500 bg-opacity-30"
+          }
+        />
+        <div
+          className={
+            screenSmall
+              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
+              : "m-5 mb-3 mt-7 w-1/4"
+          }>
+          <p>Follow us on:</p>
+          <a
+            href="https://www.linkedin.com/company/armada"
+            className="flex space-x-1">
+            <LinkedinIcon size="20" />
+            <p className="mb-0">LinkedIn</p>
+          </a>
+          <a
+            href="https://www.instagram.com/thsarmada/"
+            className="flex space-x-1">
+            <InstagramIcon size="20" />
+            <p>Instagram</p>
+          </a>
+          <a
+            href="https://www.tiktok.com/@ths.armada"
+            className="flex space-x-1">
+            <Music2Icon size="20" />
+            <p>TikTok</p>
+          </a>
+        </div>
 
-      <div className="m-5 mb-3 mt-7 w-1/2 text-center">
-        {/*
-        <p>Follow us on:</p>
-        <a className="flex justify-center space-x-1">
-          <LinkedinIcon size="20" />
-          <p className="mb-0">LinkedIn</p>
-        </a>
-        <a className="flex justify-center space-x-1">
-          <InstagramIcon size="20" />
-          <p>Instagram</p>
-        </a>
-        <a className="flex justify-center space-x-1">
-          <Music2Icon size="20" />
-          <p>TikTok</p>
-        </a>*/}
-      </div>
-      <div className="m-5 mb-3 mt-7 w-1/4 text-end">
-        <p>ARMADA</p>
-        <p>Drottning Kristinas väg 15</p>
-        <p>114 28, Stockholm</p>
+        <div
+          className={
+            screenSmall
+              ? "m-5 mb-3 mt-7 w-1/2 place-items-center text-center"
+              : "m-5 mb-3 mt-7 w-1/2 text-end"
+          }>
+          {/*PUT SPONSORS HERE*/}
+        </div>
+        <div
+          className={
+            screenSmall
+              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
+              : "m-5 mb-3 mt-7 w-1/4 text-end"
+          }>
+          <p>ARMADA</p>
+          <p>Drottning Kristinas väg 15</p>
+          <p>114 28, Stockholm</p>
+        </div>
       </div>
-    </div>
+    )
   )
 }

From 494ef0fd9a77b0b05b2b9bbb1abfb0623cccb347 Mon Sep 17 00:00:00 2001
From: Erik Sevelin <91209290+SortHvit@users.noreply.github.com>
Date: Sat, 9 Nov 2024 13:05:58 +0100
Subject: [PATCH 4/5] add columns for companies and students

---
 src/components/shared/Footer.tsx | 47 +++++++++++++++++++++++++++-----
 1 file changed, 40 insertions(+), 7 deletions(-)

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
index 838905c..e10673c 100644
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -30,7 +30,9 @@ export function Footer() {
               ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
               : "m-5 mb-3 mt-7 w-1/4"
           }>
-          <p>Follow us on:</p>
+          <p>
+            <b>Follow us on:</b>
+          </p>
           <a
             href="https://www.linkedin.com/company/armada"
             className="flex space-x-1">
@@ -54,20 +56,51 @@ export function Footer() {
         <div
           className={
             screenSmall
-              ? "m-5 mb-3 mt-7 w-1/2 place-items-center text-center"
-              : "m-5 mb-3 mt-7 w-1/2 text-end"
+              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
+              : "m-5 mb-3 mt-7 w-1/4 text-center"
+          }>
+          <p>
+            <b>STUDENTS</b>
+          </p>
+          <a href="/student/exhibitors">Exhibitors</a>
+          <br />
+          <a href="/student/recruitment">Recruitment</a>
+          <br />
+          <a href="/student/events">Events</a>
+        </div>
+        <div
+          className={
+            screenSmall
+              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
+              : "m-5 mb-3 mt-7 w-1/4 text-center"
           }>
-          {/*PUT SPONSORS HERE*/}
+          <p>
+            <b>EXHIBITORS</b>
+          </p>
+          <a href="https://register.armada.nu/register">Registration</a>
+          <br />
+          <a href="/exhibitor/packages">Packages</a>
+          <br />
+          <a href="/exhibitor">Why Armada</a>
+          <br />
+          <a href="/exhibitor/timeline">Timeline</a>
         </div>
+
         <div
           className={
             screenSmall
               ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
               : "m-5 mb-3 mt-7 w-1/4 text-end"
           }>
-          <p>ARMADA</p>
-          <p>Drottning Kristinas väg 15</p>
-          <p>114 28, Stockholm</p>
+          <p>
+            <b>ARMADA</b>
+          </p>
+          <p>
+            <i>Drottning Kristinas väg 15</i>
+          </p>
+          <p>
+            <i>114 28, Stockholm</i>
+          </p>
         </div>
       </div>
     )

From 601e057abc08284ffb88454a5e32c66e5fcdaaea Mon Sep 17 00:00:00 2001
From: Erik Sevelin <91209290+SortHvit@users.noreply.github.com>
Date: Sat, 9 Nov 2024 14:24:09 +0100
Subject: [PATCH 5/5] change to media queries

---
 src/components/shared/Footer.tsx | 154 +++++++++++--------------------
 1 file changed, 56 insertions(+), 98 deletions(-)

diff --git a/src/components/shared/Footer.tsx b/src/components/shared/Footer.tsx
index e10673c..79d3f44 100644
--- a/src/components/shared/Footer.tsx
+++ b/src/components/shared/Footer.tsx
@@ -1,108 +1,66 @@
-"use client"
-
-import { useScreenSize } from "@/components/shared/hooks/useScreenSize"
 import { InstagramIcon, LinkedinIcon, Music2Icon } from "lucide-react"
 
 export function Footer() {
-  const { width } = useScreenSize()
-  let screenSmall = false
-
   return (
     /* IF WIDTH < 768, SET TO VERTICAL, OTHERWISE KEEP HORIZONTAL */
-    (width ?? 0) < 768 ? (screenSmall = true) : (screenSmall = false),
-    (
-      <div
-        className={
-          screenSmall
-            ? "w-100 flex flex-col items-center justify-center"
-            : "w-100 flex flex-row justify-center"
-        }>
-        <hr
-          className={
-            screenSmall
-              ? "static mt-2 h-1 w-2/3 rounded border-0 bg-slate-500 bg-opacity-30"
-              : "absolute mt-2 h-1 w-2/3 rounded border-0 bg-slate-500 bg-opacity-30"
-          }
-        />
-        <div
-          className={
-            screenSmall
-              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
-              : "m-5 mb-3 mt-7 w-1/4"
-          }>
-          <p>
-            <b>Follow us on:</b>
-          </p>
-          <a
-            href="https://www.linkedin.com/company/armada"
-            className="flex space-x-1">
-            <LinkedinIcon size="20" />
-            <p className="mb-0">LinkedIn</p>
-          </a>
-          <a
-            href="https://www.instagram.com/thsarmada/"
-            className="flex space-x-1">
-            <InstagramIcon size="20" />
-            <p>Instagram</p>
-          </a>
-          <a
-            href="https://www.tiktok.com/@ths.armada"
-            className="flex space-x-1">
-            <Music2Icon size="20" />
-            <p>TikTok</p>
-          </a>
-        </div>
+    <div className="w-100 flex flex-col items-center justify-center md:flex-row md:items-start">
+      <hr className="static mt-2 h-1 w-2/3 rounded border-0 bg-slate-500 bg-opacity-30 md:absolute" />
+      <div className="m-5 mb-3 mt-7 w-1/4 place-items-center text-center md:place-items-start md:text-start">
+        <p>
+          <b>Follow us on:</b>
+        </p>
+        <a
+          href="https://www.linkedin.com/company/armada"
+          className="flex space-x-1">
+          <LinkedinIcon size="20" />
+          <p className="mb-0">LinkedIn</p>
+        </a>
+        <a
+          href="https://www.instagram.com/thsarmada/"
+          className="flex space-x-1">
+          <InstagramIcon size="20" />
+          <p>Instagram</p>
+        </a>
+        <a href="https://www.tiktok.com/@ths.armada" className="flex space-x-1">
+          <Music2Icon size="20" />
+          <p>TikTok</p>
+        </a>
+      </div>
 
-        <div
-          className={
-            screenSmall
-              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
-              : "m-5 mb-3 mt-7 w-1/4 text-center"
-          }>
-          <p>
-            <b>STUDENTS</b>
-          </p>
-          <a href="/student/exhibitors">Exhibitors</a>
-          <br />
-          <a href="/student/recruitment">Recruitment</a>
-          <br />
-          <a href="/student/events">Events</a>
-        </div>
-        <div
-          className={
-            screenSmall
-              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
-              : "m-5 mb-3 mt-7 w-1/4 text-center"
-          }>
-          <p>
-            <b>EXHIBITORS</b>
-          </p>
-          <a href="https://register.armada.nu/register">Registration</a>
-          <br />
-          <a href="/exhibitor/packages">Packages</a>
-          <br />
-          <a href="/exhibitor">Why Armada</a>
-          <br />
-          <a href="/exhibitor/timeline">Timeline</a>
-        </div>
+      <div className="m-5 mb-3 mt-7 w-1/4 place-items-center text-center md:place-items-start md:text-left">
+        <p>
+          <b>STUDENTS</b>
+        </p>
+        <a href="/student/exhibitors">Exhibitors</a>
+        <br />
+        <a href="/student/recruitment">Recruitment</a>
+        <br />
+        <a href="/student/events">Events</a>
+      </div>
+      <div className="m-5 mb-3 mt-7 w-1/4 place-items-center text-center md:place-items-start md:text-left">
+        <p>
+          <b>EXHIBITORS</b>
+        </p>
+        <a href="https://register.armada.nu/register">Registration</a>
+        <br />
+        <a href="/exhibitor/packages">Packages</a>
+        <br />
+        <a href="/exhibitor">Why Armada</a>
+        <br />
+        <a href="/exhibitor/timeline">Timeline</a>
+      </div>
 
-        <div
-          className={
-            screenSmall
-              ? "m-5 mb-3 mt-7 w-1/4 place-items-center text-center"
-              : "m-5 mb-3 mt-7 w-1/4 text-end"
-          }>
-          <p>
-            <b>ARMADA</b>
-          </p>
-          <p>
-            <i>Drottning Kristinas väg 15</i>
-          </p>
-          <p>
-            <i>114 28, Stockholm</i>
-          </p>
-        </div>
+      <div className="m-5 mb-3 mt-7 w-1/4 place-items-center text-center md:place-items-start md:text-left">
+        <p>
+          <b>ARMADA</b>
+        </p>
+        <p>
+          <i>Drottning Kristinas väg 15</i>
+        </p>
+        <p>
+          <i>114 28, Stockholm</i>
+        </p>
       </div>
-    )
+    </div>
   )
 }