I have connected a large part of the elements on the creator page. The accent color on the profile is not working. The posts and the description still need to be connected.

src/views/LoginView.vue

@@ -69,7 +69,7 @@
   </div>
  
 
-  <selected-footer class="py-15"></selected-footer>
+  <selected-footer></selected-footer>
   
 </template>
 

src/views/creators/CreatorPage.vue

@@ -6,7 +6,7 @@
 
       <!-- Social Network-->
       <div class="bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4 min-h-24"
-           :style="'background-color: #' + creatorColorTop">
+           :style="creatorColorTop">
 
         <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
           <div class="text-lg">1000+ Abonnés</div>
@@ -62,15 +62,17 @@
     <div class="relative">
       <!--Banner-->
       <div>
-        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)] w-[2048px] h-[569px]"
+        <img class=" w-full drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]"
-             :src="creatorBanner" alt="Profile Banner">
+             :src="creatorBanner"
+             alt="Profile Banner"
+        >
       </div>
       <!--User info -->
       <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
         <div class="text-white">
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Guillaume</div>
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">{{ creatorName }}</div>
-          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Mousseau</div>
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">{{ creatorLastName}}</div>
-          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">Agence Créative</div>
+          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">{{Occupation}}</div>
         </div>
       </div>
     </div>
@@ -79,13 +81,14 @@
   <!-- Actions Button & image profile -->
   <div class="relative bottom-4 w-full">
     <div class="py-4 relative shadow-lg"
-         :style="'background-color: #' + creatorColorBottom">
+         :style="creatorColorBottom">
       <div class="flex flex-col sm:flex-row items-center sm:justify-between">
         <img
-            class="left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
+            class="left-5 rounded-full border-solid border-4 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-20"
             :src="creatorPortrait"
             alt="Profile Picture"
-            style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
+            :style="{ creatorColorAccent, maxWidth: '250px', width: '100%' }"
+        >
         <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
           <button
               class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125"
@@ -157,7 +160,7 @@
   <v-dialog v-model="isDialogActive" max-width="500">
     <template v-slot:default="{ isActive }">
       <v-card class="text-center rounded-xl">
-        <div class="text-white p-4 rounded-t" :style="'background-color: #' + creatorColorMenu">
+        <div class="text-white p-4 rounded-t" :style="creatorColorMenu">
           <h2>Publication</h2>
         </div>
         <v-card-text class="bg">
@@ -207,6 +210,20 @@ const creatorAlias = computed(() => {
   return route.params.creator;
 })
 
+//Informations
+const creatorName = computed(() => {
+ 
+  return creator.value?.firstName; 
+});
+
+const creatorLastName = computed(() => {
+  return creator.value?.lastName
+})
+
+const Occupation = computed(() => {
+  return creator.value?.occupation
+})
+
 // CREATOR METADATA
 const creator = ref()
 const creatorId = computed(() => {
@@ -236,25 +253,26 @@ const creatorLinkedIn = computed(() => {
 const creatorReddit = computed(() => {
   return creator?.value?.socialNetworks?.redditUrl
 })
-const creatorPortrait = computed(() => {
+const creatorPortrait = computed(() =>
-  return creator?.value?.storedDataUrls?.profilePictureUrl
+    creator.value?.storedDataUrls?.profilePictureUrl || '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png');
-})
+const creatorBanner = computed(() =>
-const creatorBanner = computed(() => {
+    creator.value?.storedDataUrls?.bannerPictureUrl || '/images/hutopymedia/banners/tutorialbanner.png');
-  return creator?.value?.storedDataUrls?.bannerPictureUrl
-})
 
+
+//Color
 const creatorColorTop = computed(() => {
-  return creator?.value?.profileColors?.bannerTop
+  return {backgroundColor: creator?.value?.profileColors?.bannerTop || '#6B0065'};
-})
+});
 const creatorColorBottom = computed(() => {
-  return creator?.value?.profileColors?.bannerBottom
+  return {backgroundColor: creator?.value?.profileColors?.bannerBottom || '#A30E79'};
-})
+});
 const creatorColorAccent = computed(() => {
-  return creator?.value?.profileColors?.accent
+  return {borderColor: creator?.value?.profileColors?.accent || '#A30E79'};
-})
+});
 const creatorColorMenu = computed(() => {
-  return creator?.value?.profileColors?.menu
+  return {backgroundColor: creator?.value?.profileColors?.menu || '#2E0222'};
-})
+});
+
 
 const client = useClient()
 
@@ -305,6 +323,7 @@ const togglePostType = (article) => {
   isArticle.value = article;
 };
 
+
 </script>
 
 <style scoped>