feat: Add 'Powered by Whisky' + potential contrirbutor logo backend t…

…o footer

src/components/navigation/Footer.astro

@@ -3,29 +3,78 @@ const currentYear = new Date().getFullYear();
 ---
 
 <footer class="footer">
-  <div class="copyright">
+  <div class="footer-logos">
+  <a href="https://getwhisky.app" target="_blank">
+    <img
+      src="src/images/svg/Powered By WhiskyWine.svg"
+      alt="Powered By WhiskyWine"
+      loading="eager"
+      class="platform-card"
+    />
+  </a>
+</div>
+
+  <p class="copyright">
     &copy; {currentYear} Mythic. All rights reserved.
-  </div>
+  </p>
 </footer>
 
 <style>
   .footer {
-    margin-top: 50px;
     width: 100vw;
     font-family: var(--pro-text);
     background-color: var(--primary-color);
-    padding: 20px 0px;
-    display: flex;
-    align-items: center;
     font-size: 14px;
     color: var(--secondary-text);
     border-top: 1px solid var(--stroke);
+    margin-top: 50px;
+    display: flex;
     justify-content: center;
+    align-items: center;
+    padding: 30px 20px;
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  .footer-logos {
+    position: absolute;
+    left: 20px;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
+    gap: 10px;
+    max-width: 150px;
+    max-height: 150px;
+  }
+
+  .platform-card {
+    max-width: 100%;
+    height: auto;
   }
 
   .copyright {
     font-size: 12px;
     color: var(--secondary-text);
-    margin-left: 10px;
+    margin: 0;
+    text-align: center;
+  }
+
+  /* Responsive adjustments for smaller screens */
+  @media (max-width: 480px) {
+    .footer {
+      flex-direction: column;
+      padding: 20px;
+      display: inline;
+    }
+
+    .footer-logos {
+      position: absolute;
+      margin-bottom: 15px;
+      max-width: 100%;
+      grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    }
+
+    .platform-card {
+      max-width: 60px;
+    }
   }
-</style>
+</style>