Is hutopy finally trilangual

frontend/src/views/main/Footer.vue

@@ -2,9 +2,9 @@
 import Instagram from "@/views/svg/Instagram.vue";
 import Facebook from "@/views/svg/Facebook.vue";
 import X from "@/views/svg/X.vue";
-import { useTranslations } from "@/translations/translations";
+import { useI18n } from 'vue-i18n';
 
-const t = useTranslations();
+const { t } = useI18n();
 </script>
 
 <template>
@@ -26,36 +26,36 @@ const t = useTranslations();
     <div class="footer-links">
       <router-link to="/documents/helpandcontact"
                    class="link">
-        {{ t('helpandcontact') }}
+        {{ t('footer.helpandcontact') }}
       </router-link>
       <router-link to="/documents/faq"
                    class="link">
-        {{ t('faq') }}
+        {{ t('footer.faq') }}
       </router-link>
       <router-link to="/documents/guideforcreators"
                    class="link">
-        {{ t('creatorguide') }}
+        {{ t('footer.creatorguide') }}
       </router-link>
       <router-link to="/documents/termsandconditions"
                    class="link">
-        {{ t('termsandconditions') }}
+        {{ t('footer.termsandconditions') }}
       </router-link>
       <router-link to="/documents/contentpolicy"
                    class="link">
-        {{ t('contentpolicy') }}
+        {{ t('footer.contentpolicy') }}
       </router-link>
       <router-link to="/documents/about"
                    class="link">
-        {{ t('about') }}
+        {{ t('footer.about') }}
       </router-link>
       <router-link to="/documents/pricing"
                    class="link">
-        {{ t('pricing') }}
+        {{ t('footer.pricing') }}
       </router-link>
     </div>
 
     <div class="footer-copyright">
-      Hutopy &copy;{{ new Date().getFullYear() }} - {{ t('allRightsReserved') }}
+      Hutopy &copy;{{ new Date().getFullYear() }} - {{ t('footer.allRightsReserved') }}
     </div>
 
   </footer>
@@ -90,4 +90,45 @@ const t = useTranslations();
   @apply hover:text-gray-400;
 }
 
-</style>
+</style>
+
+<i18n>
+{
+  "en": {
+    "footer": {
+      "helpandcontact": "Help & Contact",
+      "faq": "FAQ",
+      "creatorguide": "Creator Guide",
+      "termsandconditions": "Terms & Conditions",
+      "contentpolicy": "Content Policy",
+      "about": "About",
+      "pricing": "Pricing",
+      "allRightsReserved": "All Rights Reserved"
+    }
+  },
+  "fr": {
+    "footer": {
+      "helpandcontact": "Aide & Contact",
+      "faq": "FAQ",
+      "creatorguide": "Guide du Créateur",
+      "termsandconditions": "Conditions Générales",
+      "contentpolicy": "Politique de Contenu",
+      "about": "À Propos",
+      "pricing": "Tarifs",
+      "allRightsReserved": "Tous Droits Réservés"
+    }
+  },
+  "es": {
+    "footer": {
+      "helpandcontact": "Ayuda y Contacto",
+      "faq": "Preguntas Frecuentes",
+      "creatorguide": "Guía del Creador",
+      "termsandconditions": "Términos y Condiciones",
+      "contentpolicy": "Política de Contenido",
+      "about": "Acerca de",
+      "pricing": "Precios",
+      "allRightsReserved": "Todos los Derechos Reservados"
+    }
+  }
+}
+</i18n>