From 53983c750ca4891ed2306e2dc318e5288903d8ca Mon Sep 17 00:00:00 2001
From: Oscar <ocook59@gmail.com>
Date: Sat, 2 May 2026 18:32:07 +0000
Subject: [PATCH] feat(footer): restructure footer component and add social
 media links

---
 src/components/site/Footer.astro | 96 ++++++++++++++++++++++----------
 src/layouts/Layout.astro         |  3 +
 2 files changed, 71 insertions(+), 28 deletions(-)

diff --git a/src/components/site/Footer.astro b/src/components/site/Footer.astro
index a7bd712..e520164 100644
--- a/src/components/site/Footer.astro
+++ b/src/components/site/Footer.astro
@@ -1,33 +1,73 @@
-<!-- Footer Container -->
-<div class="footer-container">
-  <div class="footer-main-body">
-    <!-- Logo + Title -->
-    <div class="footer-brand">
-      <span class="logo">Agrobot Logo</span>
-      <h1>UBC Agrobot</h1>
-    </div>
+<footer class="w-full bg-[#f4f4f4] px-8 py-6 font-sans text-[#1a1a1a]">
+  <div
+    class="mx-auto flex max-w-7xl flex-col items-start justify-between gap-6 md:flex-row md:items-end"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center gap-3">
+        <img src="/agrobot_logo.png" alt="UBC Agrobot Logo" class="h-8 w-8" />
+        <h2 class="text-xl font-medium text-gray-900">UBC Agrobot</h2>
+      </div>
 
-    <!-- Social Links Nagivation -->
-    <div class="footer-socials">
-      <!-- Linkedin Profile -->
-      <a href="https://www.linkedin.com/company/ubc-agrobot/" target="_blank">
-        Agrobot LinkedIn
-      </a>
-      <!-- Instagram Profile -->
-      <a href="https://instagram.com/ubcagrobot" target="_blank">
-        Agrobot Instagram
-      </a>
-    </div>
+      <div class="flex items-center gap-3">
+        <!-- LinkedIn -->
+        <a
+          href="https://www.linkedin.com/company/ubc-agrobot/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="transition-opacity hover:opacity-80"
+        >
+          <svg
+            class="h-12 w-12"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M19 3H5C3.895 3 3 3.895 3 5V19C3 20.105 3.895 21 5 21H19C20.105 21 21 20.105 21 19V5C21 3.895 20.105 3 19 3Z"
+              fill="#006699"></path>
+            <path
+              d="M8.5 19V10H6V19H8.5ZM7.25 8.875C8.07843 8.875 8.75 8.20343 8.75 7.375C8.75 6.54657 8.07843 5.875 7.25 5.875C6.42157 5.875 5.75 6.54657 5.75 7.375C5.75 8.20343 6.42157 8.875 7.25 8.875Z"
+              fill="white"></path>
+            <path
+              d="M12.5 19V13.75C12.5 12.25 13 11.5 14.25 11.5C15.5 11.5 15.75 12.5 15.75 13.75V19H18.25V13.25C18.25 10.75 17 9.75 15.25 9.75C13.85 9.75 13 10.5 12.5 11.25V10H10V19H12.5Z"
+              fill="white"></path>
+          </svg>
+        </a>
+        <!-- Instagram -->
+        <a
+          href="https://instagram.com/ubcagrobot"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="transition-opacity hover:opacity-80"
+        >
+          <svg
+            class="h-10 w-10"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <rect x="2" y="2" width="20" height="20" rx="5" ry="5"></rect>
+            <path d="M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z"></path>
+            <line x1="17.5" y1="6.5" x2="17.51" y2="6.5"></line>
+          </svg>
+        </a>
+      </div>
 
-    <!-- Contact Email -->
-    <div class="footer-contact">
-      <!-- Email link -->
-      <a href="mailto:ubcagrobot@gmail.com">ubcagrobot@gmail.com</a>
+      <div class="footer-contact">
+        <a
+          href="mailto:ubcagrobot@gmail.com"
+          class="text-md underline transition-colors hover:text-black"
+        >
+          ubcagrobot@gmail.com
+        </a>
+      </div>
     </div>
-  </div>
 
-  <!-- Copyright -->
-  <div>
-    <p>&copy; 2025 UBC Agrobot</p>
+    <div class="text-md mt-4 md:mt-0 md:text-right">
+      <p>&copy; 2025 UBC Agrobot</p>
+    </div>
   </div>
-</div>
+</footer>
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 92ee301..4380adf 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -1,6 +1,7 @@
 ---
 import "../styles/global.css";
 import Header from "../components/site/Header.astro";
+import Footer from "../components/site/Footer.astro";
 ---
 
 <!doctype html>
@@ -19,6 +20,8 @@ import Header from "../components/site/Header.astro";
     <main>
       <slot />
     </main>
+
+    <Footer />
   </body>
 </html>