Adds About for Creators

src/views/main/Profile.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="flex flex-col md:flex-row">
+
     <!-- Left Menu -->
     <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>
-          
+
           <div class="relative flex items-center md:mt-0 w-full">
             <!-- Navigation buttons for small screens -->
             <button @click="scrollLeftFunc"
                     class="rounded p-1 absolute left-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl ">
               <v-icon>mdi-chevron-left</v-icon>
             </button>
-            
+
             <div
                 ref="scrollContainer"
                 class="flex md:flex-col space-x-2 space-y-0 md:space-x-0 md:space-y-2 p-4 items-center md:items-start overflow-x-scroll md:overflow-x-visible mx-2 md:mx-0 custom-scroll min-w-[400px] px-1"
@@ -20,29 +21,34 @@
                 @mouseleave="mouseLeave"
                 @mouseup="mouseUp"
                 @mousemove="mouseMove">
+
               <v-btn variant="text" @click="currentComponent = 'PageInformations'">
                 <v-icon class="mr-2">mdi-file-edit-outline</v-icon>
                 Informations de votre page
               </v-btn>
+
               <v-btn variant="text" @click="currentComponent = 'PersonnalInfo'">
                 <v-icon class="mr-2">mdi-information</v-icon>
                 Informations personnelles
               </v-btn>
+
               <v-btn variant="text" @click="currentComponent = 'ManageAccount'">
                 <v-icon class="mr-2">mdi-account</v-icon>
                 Gestion de Comptes
               </v-btn>
+
               <v-btn variant="text" @click="currentComponent = 'AccountSecurity'">
                 <v-icon class="mr-2">mdi-security</v-icon>
                 Sécurité
               </v-btn>
+
             </div>
             <button @click="scrollRightFunc"
                     class="rounded p-1 absolute right-2 z-10 md:hidden text-fuchsia-800 bg-[#f4f4f4] text-2xl">
               <v-icon>mdi-chevron-right</v-icon>
             </button>
           </div>
-        
+
         </div>
       </div>
     </div>
@@ -50,33 +56,30 @@
     <!-- Mid Content -->
     <div class="flex flex-col flex-1 align-center py-12 p-3 mt-28 md:mt-0">
       <template v-if="currentComponent === 'ManageAccount'">
-        <ManageAccount/>
+        <manage-account></manage-account>
       </template>
       <template v-else-if="currentComponent === 'PageInformations'">
-        <PageInformations/>
+        <page-informations></page-informations>
       </template>
       <template v-else-if="currentComponent === 'PersonnalInfo'">
-        <PersonnalInfo/>
+        <personnal-info></personnal-info>
       </template>
       <template v-else-if="currentComponent === 'AccountSecurity'">
-        <AccountSecurity/>
+        <account-security></account-security>
       </template>
     </div>
   </div>
-  
+
 </template>
 
 <script setup>
 import {ref, onMounted} from "vue";
-import {useUserStore} from "@/stores/userStore.js";
 import ManageAccount from "@/views/Profile/ManageAccount.vue";
 import PageInformations from "@/views/Profile/PageInformations.vue";
 import PersonnalInfo from "@/views/Profile/PersonnalInfo.vue";
 import AccountSecurity from "@/views/Profile/AccountSecurity.vue";
 
-const userStore = useUserStore();
-
-const currentComponent = ref('PageInformations'); // Default component
+const currentComponent = ref('PersonnalInfo'); // Default component
 const isDown = ref(false);
 const startX = ref(0);
 const scrollLeft = ref(0);