we played with the colors and add wallet.vue

src/views/main/Profile.vue

@@ -0,0 +1,92 @@
+<template>
+  <div class="bg-purple-800 h-24 -mt-12 -mb-6"></div>
+  <div class="flex justify-center">
+    <div class="w-full">
+      <img :src="bannerImageUrl" class="max-h-96 object-cover shadow-md profile-banner">
+    </div>
+  </div>
+  <div class="bg-purple-800 h-24 flex items-center">
+    <div class="w-full text-right pr-12">
+      <button class="bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out mr-3">
+        <i class="mdi mdi-pencil"></i>
+      </button>
+    </div>
+  </div>
+  <div class="max-w-4xl -mt-24 mx-auto flex justify-center items-center">
+    <div class="w-full">
+      <div class="bg-white rounded-3xl shadow-md p-6">
+        <div class="flex justify-center mb-5">
+          <div class="relative">
+            <img :src="profilePictureUrl" class="w-32 h-32 rounded-full shadow-lg border-4 border-white transition-transform duration-500 ease-in-out hover:scale-110">
+            <button class="absolute bottom-0 right-0 bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out -mt-4">
+              <i class="mdi mdi-pencil"></i>
+            </button>
+          </div>
+        </div>
+
+        <p class="text-center mb-3 text-3xl font-semibold">{{ userName }}</p>
+        <p class="text-center mb-12 text-lg">{{ firstName }} {{ lastName }}</p>
+
+        <form>
+          <div class="mb-4">
+            <input type="text" v-model="firstName" placeholder="Prénom" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+          <div class="mb-4">
+            <input type="text" v-model="lastName" placeholder="Nom" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+          <div class="mb-4">
+            <input type="text" v-model="titre" placeholder="Titre" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+          <div class="mb-4">
+            <input type="text" v-model="description" placeholder="Description" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+        </form>
+
+        <div class="text-right">
+<!--          <router-link :to="{ name: 'creatorfolio' }">-->
+            <button class="bg-gray-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-gray-700 transition-colors duration-300 ease-in-out mr-5">Retour</button>
+<!--          </router-link>-->
+          <button @click="toggleEdit" class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script async setup>
+import MyUserModel from "@/models/myUserModel.js";
+import { useClient } from "@/plugins/api.js";
+import { onBeforeMount, ref } from 'vue';
+
+const client = useClient();
+
+const profilePictureUrl = ref('/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png');
+const bannerImageUrl = ref('/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png');
+
+const firstName = ref('');
+const lastName = ref('');
+const userName = ref('');
+const titre = ref('');
+const description = ref('');
+
+const isEditing = ref(false);
+
+const fetchUserData = async () => {
+  try {
+    const myUser = await client.get("/api/GetMyUser");
+    const currentUserModel = MyUserModel.createFromApiResult(myUser.data);
+    firstName.value = currentUserModel.firstName;
+    lastName.value = currentUserModel.lastName;
+    userName.value = currentUserModel.userName;
+    // Assignez d'autres champs si nécessaire
+  } catch (error) {
+    console.error('Error fetching user data:', error);
+  }
+};
+
+const toggleEdit = () => {
+  isEditing.value = !isEditing.value;
+};
+
+onBeforeMount(fetchUserData);
+</script>