Is hutopy finally trilangual

frontend/src/views/creators/CreatorLogoEditor.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="card">
     <div class="card-title">
-      {{ t('title') }}
+      {{ t('logoTitle') }}
     </div>
 
     <div class="card-content">
       <p class="card-text">
-        {{ t('description') }}
+        {{ t('logoDescription') }}
       </p>
       
       <div class="file-input-container">
@@ -75,7 +75,7 @@ import {ref} from 'vue'
 import {useClient} from '@/plugins/api.js'
 import { Cropper, CircleStencil } from 'vue-advanced-cropper'
 import 'vue-advanced-cropper/dist/style.css'
-import { useTranslations } from '@/translations/translations'
+import { useI18n } from 'vue-i18n';
 
 const props = defineProps({
   creator: {
@@ -96,8 +96,7 @@ const cropper = ref(null)
 const TARGET_WIDTH = 200
 const TARGET_HEIGHT = 200
 
-// Get translations for this component
-const t = useTranslations()
+const { t } = useI18n();
 
 const triggerFileInput = () => {
   fileInput.value.click()
@@ -292,3 +291,26 @@ const cancel = () => {
 }
 </style>
 
+<i18n>
+{
+  "en": {
+    "logoTitle": "Edit Logo",
+    "logoDescription": "Choose a logo image for your creator page. The image will be cropped to a circle.",
+    "chooseImage": "Choose Image",
+    "clickToEdit": "Click to edit"
+  },
+  "fr": {
+    "logoTitle": "Modifier le logo",
+    "logoDescription": "Choisissez une image de logo pour votre page de créateur. L'image sera recadrée en cercle.",
+    "chooseImage": "Choisir une image",
+    "clickToEdit": "Cliquez pour modifier"
+  },
+  "es": {
+    "logoTitle": "Editar logo",
+    "logoDescription": "Elige una imagen de logo para tu página de creador. La imagen se recortará en círculo.",
+    "chooseImage": "Elegir imagen",
+    "clickToEdit": "Haz clic para editar"
+  }
+}
+</i18n>
+