fix: mobile layout on footer and message component

src/components/Home/Message/Message.astro

@@ -1,7 +1,10 @@
 ---
 ---
 
-<section id="message" class="bg-primary py-16 px-40 space-y-4">
+<section
+  id="message"
+  class="bg-primary py-16 px-10 md:px-20 xl:px-40 space-y-4"
+>
   <h2 class="text-3xl font-bold text-black font-display">
     A message from Derrick
   </h2>

src/components/Layout/Footer/Footer.astro

@@ -2,7 +2,9 @@
 import logo from "/src/assets/lume-logo.png";
 ---
 
-<footer class="flex flex-row py-24 font-body mb-3 mx-40">
+<footer
+  class="flex flex-col lg:flex-row py-24 font-body mb-3 mx-10 md:mx-20 xl:mx-40 max-w-screen"
+>
   <div class="flex-1">
     <a href="/">
       <img src={logo.src} class="w-36 mb-2" alt="Lume" />
@@ -28,11 +30,11 @@ import logo from "/src/assets/lume-logo.png";
       </svg>
       contact@lumeweb.com
     </a>
-    <div class="text-lg text-primary font-bold font-display mt-10">
+    <div class="text-lg text-primary font-bold font-display my-10">
       Freedom. Privacy. <br />Ownership.
     </div>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">General</h5>
     <ul class="text-body font-body text-xl">
       <li>
@@ -43,7 +45,7 @@ import logo from "/src/assets/lume-logo.png";
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">Community</h5>
     <ul class="text-body font-body text-xl">
       <li>
@@ -61,7 +63,7 @@ import logo from "/src/assets/lume-logo.png";
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">Ecosystem</h5>
     <ul class="text-body font-body text-xl">
       <li>
@@ -69,7 +71,7 @@ import logo from "/src/assets/lume-logo.png";
       </li>
     </ul>
   </div>
-  <div class="flex-1">
+  <div class="flex-1 my-5 lg:my-0">
     <h5 class="text-3xl mb-3">Support Us</h5>
     <ul class="text-body font-body text-xl">
       <li>

src/components/Layout/Navbar/Navbar.astro

@@ -42,7 +42,34 @@ function getActiveClass(linkView) {
     class="hidden lg:hidden bg-black/40 w-screen h-screen fixed z-10 top-0 botton-0 right-0 left-0"
   >
   </div>
-  <button id="hamburger" class="z-30 text-4xl lg:hidden">☰</button>
+  <button id="hamburger" class="z-30 text-4xl lg:hidden">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 52 43"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M1 1.06787H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        d="M1 21.5728H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+      <path
+        d="M1 42.0776H51.295"
+        stroke="white"
+        stroke-width="1.28"
+        stroke-linecap="round"
+        stroke-linejoin="round"></path>
+    </svg>
+  </button>
   <script>
     const navbarOverlayEl = document.getElementById("navbar-overlay");
     const hamburgerEl = document.getElementById("hamburger");