I have translated PersonalInfo.

src/locales/en.json

@@ -27,6 +27,7 @@
     "unsubscribe": "Unsubscribe"
   },
   "profilemenu": {
+    "manageyouraccount": "Manage your Hutopy account",
     "creator": "Creator",
     "user": "User",
     "accountmanagement": "Account Management",
@@ -75,5 +76,19 @@
     "nextcentury": "Next century",
     "centuries": "centuries",
     "ago": "ago"
+  },
+  "personnalinformation": {
+    "basicinformation": "Basic information",
+    "title": "Personal information",
+    "profilepicture": "Profile picture",
+    "name": "Name",
+    "dob": "Date of birth",
+    "gender": "Gender",
+    "contactdetails": "Contact details",
+    "email": "Email",
+    "phone": "Phone",
+    "addresses": "Addresses",
+    "home": "Home",
+    "work": "Work"
   }
 }

src/locales/fr.json

@@ -27,6 +27,7 @@
     "unsubscribe": "Se désabonner"
   },
   "profilemenu": {
+    "manageyouraccount": "Gérer votre compte Hutopy",
     "creator": "Créateur",
     "user": "utilisateur",
     "accountmanagement": "Gestion de comptes",
@@ -75,6 +76,20 @@
     "nextcentury": "Le siècle prochain",
     "centuries": "siècles",
     "ago": ""
+  },
+  "personnalinformation": {
+    "basicinformation": "Information de base",
+    "title": "Informations personnelles",
+    "profilepicture": "Photo de profil",
+    "name": "Nom",
+    "dob": "Date de naissance",
+    "gender": "Genre",
+    "contactdetails": "Coordonnées",
+    "email": "Email",
+    "phone": "Téléphone",
+    "addresses": "Adresses",
+    "home": "Domicile",
+    "work": "Travail"
   }
 
 }

src/views/profile/ProfilePage.vue

@@ -5,7 +5,7 @@
     <div class="bg-[#f4f4f4] z-20 w-full md:max-w-xs fixed md:sticky md:top-0 md:flex md:flex-col top-0">
       <div class="sticky top-20 z-30 bg-[#f4f4f4]">
         <div class="flex flex-col items-center md:items-start md:pl-4 mt-16">
-          <h1 class="text-2xl py-4 font-bold text-center md:text-left">Gérer votre compte Hutopy</h1>
+          <h1 class="text-2xl py-4 font-bold text-center md:text-left">{{$t('profilemenu.manageyouraccount')}}</h1>
 
           <div class="relative flex items-center md:mt-0 w-full">
             <!-- Navigation buttons for small screens -->

src/views/profile/account/PersonnalInfo.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="flex flex-col items-center w-full">
     <h1 class="uppercase pb-5 text-2xl">
-      <v-icon class="mr-2">mdi-information</v-icon> Informations personnelles
+      <v-icon class="mr-2">mdi-information</v-icon> {{$t('personnalinformation.title')}}
     </h1>
 
     <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">Information de base</div>
+      <div class="py-5 uppercase ml-4">{{$t('personnalinformation.basicinformation')}}</div>
 
       <div class="flex flex-col w-full">
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Name')">
-          <span class="min-w-40 text-left">Photo de profil</span>
+          <span class="min-w-40 text-left">{{$t('personnalinformation.profilepicture')}}</span>
           <span class="flex-auto pr-6 text-left">Une photo de profil aide à personnaliser votre compte</span>
           <span class="flex-none">
             <img
@@ -25,7 +25,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Name')">
-          <span class="pa-2 min-w-40 text-left">Nom</span>
+          <span class="pa-2 min-w-40 text-left">{{$t('personnalinformation.name')}}</span>
           <span class="flex-auto text-left pr-6">Pascal Marchesseault</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -35,7 +35,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Birthday')">
-          <span class="flex-none pa-2 min-w-40 text-left">Date de naissance</span>
+          <span class="flex-none pa-2 min-w-40 text-left">{{$t('personnalinformation.dob')}}</span>
           <span class="flex-auto text-left pr-6">27 octobre 1988</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -45,7 +45,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out rounded-b-2xl w-full"
             @click="openModal('Gender')">
-          <span class="flex-none pa-2 min-w-40 text-left">Genre</span>
+          <span class="flex-none pa-2 min-w-40 text-left">{{$t('personnalinformation.gender')}}</span>
           <span class="flex-auto text-left pr-6">Homme</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -58,13 +58,13 @@
   <!-- Phone & email -->
   <div class="flex flex-col items-center mt-10 w-full">
     <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">Coordonnées</div>
+      <div class="py-5 uppercase ml-4">{{$t('personnalinformation.contactdetails')}}</div>
 
       <div class="flex flex-col w-full">
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('Email')">
-          <span class="min-w-40 text-left">Courriel</span>
+          <span class="min-w-40 text-left">{{$t('personnalinformation.email')}}</span>
           <span class="flex-auto pr-6 text-left">marchesseault_pascal@hotmail.com</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -74,7 +74,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
             @click="openModal('Phone')">
-          <span class="pa-2 min-w-40 text-left">Téléphone</span>
+          <span class="pa-2 min-w-40 text-left">{{$t('personnalinformation.phone')}}</span>
           <span class="flex-auto text-left pr-6">(581) 999-7540</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -87,13 +87,13 @@
   <!-- Address -->
   <div class="flex flex-col items-center mt-10 w-full">
     <div class="border rounded-2xl w-full max-w-[800px]">
-      <div class="py-5 uppercase ml-4">Adresses</div>
+      <div class="py-5 uppercase ml-4">{{$t('personnalinformation.addresses')}}</div>
 
       <div class="flex flex-col w-full">
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full"
             @click="openModal('AdressesHome')">
-          <span class="min-w-40 text-left">Domicile</span>
+          <span class="min-w-40 text-left">{{$t('personnalinformation.home')}}</span>
           <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>
@@ -103,7 +103,7 @@
         <button
             class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl"
             @click="openModal('AdressesWork')">
-          <span class="pa-2 min-w-40 text-left">Travail</span>
+          <span class="pa-2 min-w-40 text-left">{{$t('personnalinformation.work')}}</span>
           <span class="flex-auto pr-6 text-left">2127 Rue De Casson, Trois-Rivières, Qc</span>
           <span class="flex-none">
             <v-icon>mdi-chevron-right</v-icon>