From e0815084c2e72bb7494d982812c2ec7c3e991cee Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sun, 27 Jul 2025 17:59:49 -0600
Subject: [PATCH] Added accessibility and interaction

---
 app/components/Footer.js | 132 ++++++++++++++++++++++++++-------------
 1 file changed, 87 insertions(+), 45 deletions(-)

diff --git a/app/components/Footer.js b/app/components/Footer.js
index 56e5ea8..d9bfcbf 100644
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -9,18 +9,18 @@ export default function Footer() {
           px-[var(--spacing-measures-spacing-016)]
           py-[var(--spacing-measures-spacing-040)]
           gap-[var(--spacing-measures-spacing-040)]
-          md:px-[var(--spacing-measures-spacing-032)]
-          md:py-[var(--spacing-measures-spacing-024)]
-          md:gap-[var(--spacing-measures-spacing-024)]
+          sm:px-[var(--spacing-measures-spacing-032)]
+          sm:py-[var(--spacing-measures-spacing-024)]
+          sm:gap-[var(--spacing-measures-spacing-024)]
           lg:px-[var(--spacing-measures-spacing-120,120px)]
           lg:py-[var(--spacing-measures-spacing-096,96px)]
           lg:gap-[var(--spacing-measures-spacing-060,60px)]"
       >
         {/* Logo*/}
-        <div className="block md:hidden">
+        <div className="block sm:hidden">
           <Logo />
         </div>
-        <div className="hidden md:block lg:hidden">
+        <div className="hidden sm:block lg:hidden">
           <Logo size="footer" />
         </div>
         <div className="hidden lg:block">
@@ -28,66 +28,108 @@ export default function Footer() {
         </div>
 
         {/* Content section */}
-        <div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] md:flex-row md:justify-between md:gap-0">
-          {/* Social media links */}
-          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)] order-2 md:order-1">
-            <div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
-              <img
-                src="/assets/Bluesky_Logo.svg"
-                alt="Bluesky"
-                width={24}
-                height={22}
-                className="flex-shrink-0"
-              />
+        <div className="flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0">
+          {/* Branding Section */}
+          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1">
+            {/* Contact info */}
+            <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
               <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
-                medlabboulder
+                Media Economies Design Lab
               </div>
+              <a
+                href="mailto:medlab@colorado.edu"
+                className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+              >
+                medlab@colorado.edu
+              </a>
             </div>
-            <div className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)]">
-              <img
-                src="/assets/GitLab_Icon.png"
-                alt="GitLab"
-                width={22}
-                height={22}
-                className="flex-shrink-0 grayscale"
-              />
-              <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
-                medlabboulder
-              </div>
+
+            {/* Social media links */}
+            <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
+              <a
+                href="#"
+                className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
+                aria-label="Follow us on Bluesky"
+              >
+                <img
+                  src="/assets/Bluesky_Logo.svg"
+                  alt="Bluesky"
+                  width={24}
+                  height={22}
+                  className="flex-shrink-0 group-hover:scale-110 transition-transform"
+                />
+                <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+                  medlabboulder
+                </div>
+              </a>
+              <a
+                href="#"
+                className="flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group"
+                aria-label="Follow us on GitLab"
+              >
+                <img
+                  src="/assets/GitLab_Icon.png"
+                  alt="GitLab"
+                  width={22}
+                  height={22}
+                  className="flex-shrink-0 grayscale group-hover:scale-110 transition-transform"
+                />
+                <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+                  medlabboulder
+                </div>
+              </a>
             </div>
           </div>
 
-          {/* Navigation */}
-          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 md:order-2 md:items-end">
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+          {/* Navigation Section */}
+          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end">
+            <a
+              href="#"
+              className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
               Use cases
-            </div>
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+            </a>
+            <a
+              href="#"
+              className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
               Learn
-            </div>
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+            </a>
+            <a
+              href="#"
+              className="text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
               About
-            </div>
+            </a>
           </div>
         </div>
 
         <Separator />
 
         {/* Bottom section */}
-        <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] md:flex-row md:justify-between md:items-center w-full">
-          <div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium md:text-xs md:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
+        <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full">
+          <div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal">
             © All right reserved
           </div>
-          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] md:flex-row md:gap-[var(--spacing-measures-spacing-040,40px)]">
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5 font-medium underline md:text-xs md:leading-4 md:no-underline lg:text-sm lg:leading-5 lg:font-normal">
+          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]">
+            <a
+              href="#"
+              className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
               Privacy Policy
-            </div>
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5 font-medium underline md:text-xs md:leading-4 md:no-underline lg:text-sm lg:leading-5 lg:font-normal">
+            </a>
+            <a
+              href="#"
+              className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
               Terms of Service
-            </div>
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-sm leading-5 font-medium underline md:text-xs md:leading-4 md:no-underline lg:text-sm lg:leading-5 lg:font-normal">
+            </a>
+            <a
+              href="#"
+              className="text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer"
+            >
               Cookies Settings
-            </div>
+            </a>
           </div>
         </div>
       </div>