From 4cf503473663282bc5a81b9a30edd224cc8e2fcf Mon Sep 17 00:00:00 2001
From: adilallo <39313955+adilallo@users.noreply.github.com>
Date: Sun, 27 Jul 2025 17:23:47 -0600
Subject: [PATCH] Mobile breakpoint added

---
 app/components/Footer.js | 97 +++++++++++++++++++---------------------
 app/components/Logo.js   |  4 +-
 2 files changed, 47 insertions(+), 54 deletions(-)

diff --git a/app/components/Footer.js b/app/components/Footer.js
index edc1cbf..56e5ea8 100644
--- a/app/components/Footer.js
+++ b/app/components/Footer.js
@@ -6,73 +6,66 @@ export default function Footer() {
     <footer className="bg-[var(--color-surface-default-primary)] w-full">
       <div
         className="flex flex-col items-start mx-auto max-w-[1920px]
-          px-[var(--spacing-measures-spacing-032)]
-          py-[var(--spacing-measures-spacing-024)]
-          gap-[var(--spacing-measures-spacing-024)]
+          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)]
           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 lg:hidden">
+        <div className="block md:hidden">
+          <Logo />
+        </div>
+        <div className="hidden md:block lg:hidden">
           <Logo size="footer" />
         </div>
         <div className="hidden lg:block">
           <Logo size="footerLg" />
         </div>
 
-        {/* Content section - horizontal layout */}
-        <div className="flex justify-between items-start w-full">
-          {/* Left side - Contact info and social media */}
-          <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)]">
-            {/* Contact info */}
-            <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
-              <div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
-                Media Economies Design Lab
-              </div>
-              <div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
-                medlab@colorado.edu
+        {/* 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="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>
             </div>
-
-            {/* Social media links */}
-            <div className="flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]">
-              <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="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>
-              </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>
+            <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>
             </div>
           </div>
 
-          {/* Right side navigation */}
-          <div className="flex flex-col justify-start items-end gap-[var(--spacing-measures-spacing-032,32px)]">
-            <div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+          {/* 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">
               Use cases
             </div>
-            <div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+            <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">
               Learn
             </div>
-            <div className="text-[var(--color-content-default-primary)] text-right font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal">
+            <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">
               About
             </div>
           </div>
@@ -81,18 +74,18 @@ export default function Footer() {
         <Separator />
 
         {/* Bottom section */}
-        <div className="flex justify-between items-start self-stretch">
-          <div className="text-[var(--color-content-default-secondary)] font-['Inter'] text-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal">
+        <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">
             © All right reserved
           </div>
-          <div className="flex items-start gap-[var(--spacing-measures-spacing-040,40px)]">
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal">
+          <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">
               Privacy Policy
             </div>
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal">
+            <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">
               Terms of Service
             </div>
-            <div className="text-[var(--color-content-default-primary)] font-['Inter'] text-xs leading-4 font-medium lg:text-sm lg:leading-5 lg:font-normal">
+            <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">
               Cookies Settings
             </div>
           </div>
diff --git a/app/components/Logo.js b/app/components/Logo.js
index a5923ef..e26070f 100644
--- a/app/components/Logo.js
+++ b/app/components/Logo.js
@@ -2,8 +2,8 @@ export default function Logo({ size = "default" }) {
   // Size configurations
   const sizes = {
     default: {
-      containerHeight: "h-10",
-      gap: "gap-2",
+      containerHeight: "h-[41px]",
+      gap: "gap-[8.28px]",
       textSize: "text-[21.97px]",
       lineHeight: "leading-[27.05px]",
       iconSize: "w-[27.05px] h-[27.05px]",