Is hutopy finally trilangual

frontend/src/views/creators/CreatorLogo.vue

@@ -8,14 +8,14 @@
     <img
         class="shadow-2xl object-cover rounded-full border-solid border-hSecondary border-102 w-[200px] h-[200px] logo-image"
         :src="brandingStore.value.images?.logo ?? '/images/placeholders/profile.png'"
-        :alt="t('alt')"
+        :alt="t('logoAlt')"
     />
 
     <!-- Tint Effect -->
     <div
         v-if="showTint"
         class="absolute rounded-full inset-0 bg-black/25 cursor-pointer"
-        :title="t('edit')"
+        :title="t('editLogo')"
     >
       <!-- Top-right Icon -->
       <div
@@ -43,11 +43,11 @@ import {useAuthStore} from "@/stores/authStore.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
 import CreatorLogoEditor from "@/views/creators/CreatorLogoEditor.vue";
 import {computed, ref} from "vue";
-import { useTranslations } from '@/translations/translations'
+import { useI18n } from 'vue-i18n'
 
 const authStore = useAuthStore();
 const brandingStore = useBrandingStore();
-const t = useTranslations();
+const { t } = useI18n();
 
 // State
 const showTint = ref(false);
@@ -69,4 +69,21 @@ const isCurrentCreator = computed(() => {
   @apply border-b-4 border-t-4 border-solid border-hTertiary;
 }
 
-</style>
+</style>
+
+<i18n>
+{
+  "en": {
+    "logoAlt": "Creator logo",
+    "editLogo": "Edit logo"
+  },
+  "fr": {
+    "logoAlt": "Logo du créateur",
+    "editLogo": "Modifier le logo"
+  },
+  "es": {
+    "logoAlt": "Logo del creador",
+    "editLogo": "Editar logo"
+  }
+}
+</i18n>