Reworking the layouts to allow for the new design

src/views/main/Footer.vue

@@ -1,9 +1,85 @@
-<template>
-  
-  <footer>
-    <div class="p-4 text-center font-sans">
+<script setup>
+import XIcon from '@/assets/icons/x.svg'
+import FacebookIcon from '@/assets/icons/facebook.svg'
+import InstagramIcon from '@/assets/icons/instagram.svg'
+</script>
+
+<template>
+
+  <footer class="py-8 flex flex-col gap-8">
+    
+    <div class="flex justify-center">
+      <router-link to="/">
+        <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy"
+             width="300px"
+             height="64px">
+      </router-link>
+    </div>
+
+    <div class="flex flex-row justify-center gap-10">
+      <a href="https://www.facebook.com/profile.php?id=61556819217561">
+        <facebook-icon class="icon"></facebook-icon>
+      </a>
+
+      <a href="https://www.instagram.com/hutopy.inc/">
+        <instagram-icon class="icon"></instagram-icon>
+      </a>
+
+      <a href="https://x.com/Hutopyinc/">
+        <x-icon class="icon"></x-icon>
+      </a>
+    </div>
+
+    <div class="flex flex-row flex-wrap justify-center gap-4">
+      <router-link to="/helpandcontact">
+        Aide & Contact
+      </router-link>
+      <router-link to="/faq">
+        FAQ
+      </router-link>
+      <router-link to="/guideforcreators">
+        Guide pour les créateurs
+      </router-link>
+      <router-link to="/termsandconditions">
+        Termes et Conditions
+      </router-link>
+      <router-link to="/contentpolicy">
+        Politique de Contenu
+      </router-link>
+      <router-link to="/about">
+        À Propos
+      </router-link>
+      <router-link to="/pricing">
+        Frais
+      </router-link>
+    </div>
+
+    <div class="flex justify-center base-text">
       Hutopy &copy;{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
     </div>
+
   </footer>
-  
+
 </template>
+
+<style scoped>
+
+.icon {
+  width: 36px;
+  height: 36px;
+  fill: #6a0065;
+}
+
+.base-text {
+  @apply text-gray-600 tracking-widest font-sans text-sm uppercase
+}
+
+a {
+  @apply base-text
+}
+
+a:hover {
+  @apply text-gray-400
+}
+
+</style>