CreatorHome - Add an Image Fallback and Improve UI

frontend/src/views/creators/CreatorHome.vue

@@ -20,8 +20,9 @@
   </div>
 
   <!-- MainPage -->
-  <div v-if="!isEditMode" class="rounded-2xl flex flex-col">
+  <div v-if="!isEditMode" class=" flex flex-col" >
 
+    <div v-if=" mainTitle || mainImageUrl || mainImageText || videoSubtitleMain || videoUrlMain || mainVideoText || imagesSubtitle || image1Url || image2Url || image3Url || image4Url || imagesText || videoSubtitle || videoUrl || videoText" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }" class="rounded-2xl py-4"  >
     <!-- Main image -->
     <div v-if="mainTitle || mainImageUrl || mainImageText " class="py-4" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
       <div v-if="mainTitle">
@@ -33,7 +34,7 @@
           v-if="mainImageUrl"
           :src="mainImageUrl"
           alt="Image principale"
-          class="rounded-2xl  max-w-full h-auto cursor-pointer flex center"
+          class=" max-w-full h-auto cursor-pointer flex center"
           @click="openFullscreen(mainImageUrl)"/>
       </div>
 
@@ -138,7 +139,7 @@
     <div v-if="editablePhoneNumber || editableEmail" class="mb-6" :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
       <!--      mobile-->
       <div v-if="smAndDown">
-        <div class="flex flex-col space-y-10 justify-center items-center">
+        <div class="flex flex-col space-y-10 mt-12 justify-center items-center">
           <!-- Affichage du téléphone -->
           <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
             <i class="mdi mdi-phone-outline text-2xl"></i>
@@ -159,7 +160,7 @@
 
       <!--pc-->
       <div v-if="!smAndDown">
-        <div class="flex space-x-64 space-y-4 justify-center items-center">
+        <div class="flex space-x-64 space-y-4 mt-9 justify-center items-center">
           <!-- Affichage du téléphone -->
           <div v-if="editablePhoneNumber" class="flex items-center space-x-2">
             <i class="mdi mdi-phone-outline text-2xl"></i>
@@ -180,8 +181,9 @@
 
 
     </div>
-  </div>
 
+    </div>
+  </div>
 
   <!--  Editmode-->
   <div v-if="isEditMode" class="space-y-10">
@@ -199,7 +201,7 @@
           <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
           <img :src="mainImageUrl || fallbackImage"
                alt="Image principale"
-               class=" max-w-full h-auto cursor-pointer"/>
+               class=" max-w-full h-auto cursor-pointer max-h-96"/>
         </label>
 
         <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
@@ -215,7 +217,7 @@
 
     <!--Main VideoUrl-->
     <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface}">
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
       <!--Titre Video-->
       <div class="text-2xl pa-4">Vidéo Princpiale</div>
       <v-text-field
@@ -246,7 +248,7 @@
 
     <!--  4 images-->
     <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface}">
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary}">
 
       <div v-if="isEditMode">
         <div class="text-2xl pa-4">Galerie d'images</div>
@@ -323,7 +325,7 @@
 
     <!-- Second Video -->
     <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface }">
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
       <div class="text-2xl pa-4">Vidéo Secondaire</div>
 
       <v-text-field
@@ -351,7 +353,7 @@
 
     <!-- Informations de Contact -->
     <div class="rounded-2xl"
-         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface }">
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
       <div class="text-2xl pa-4">Informations de Contact</div>
 
       <v-text-field
@@ -408,7 +410,7 @@ watch(smAndDown, (newVal) => {
 });
 
 // Image de fallback pour l'éditeur
-const fallbackImage = "https://via.placeholder.com/300?text=Image+non+disponible";
+const fallbackImage = "/medias/emptyimage.png";
 
 // Variables réactives pour les données
 const editablePhoneNumber = ref("");