From 5672e2786f15aed41ddf3bdb716eb325c006cbe9 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 16 Jan 2025 12:46:32 -0500
Subject: [PATCH] Quick modification for home

---
 frontend/src/views/creators/CreatorHome.vue | 588 +++++++++++---------
 1 file changed, 318 insertions(+), 270 deletions(-)

diff --git a/frontend/src/views/creators/CreatorHome.vue b/frontend/src/views/creators/CreatorHome.vue
index 663aa99..c2beacd 100644
--- a/frontend/src/views/creators/CreatorHome.vue
+++ b/frontend/src/views/creators/CreatorHome.vue
@@ -18,74 +18,36 @@
       Annuler
     </button>
   </div>
-  
-  <div class="flex flex-col space-y-8 px-6 rounded-2xl py-8 shadow-2xl"
+
+  <!-- MainPage -->
+  <div v-if="!isEditMode" class="rounded-2xl flex flex-col space-y-6"
        :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
 
-  
+    <!-- Main image -->
+    <div class="py-4">
+      <div v-if="mainTitle">
+        <h1 class="text-4xl font-bold text-center py-4 mb-4">{{ mainTitle }}</h1>
+      </div>
 
-   
-    <!-- Titre principal -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2"> Titre</div>
-      <textarea v-model="editableMainTitle" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <h1 v-else-if="mainTitle" class="text-4xl font-bold text-center ">{{ mainTitle }}</h1>
+      <img
+          v-if="mainImageUrl"
+          :src="mainImageUrl"
+          alt="Image principale"
+          class="rounded-2xl  max-w-full h-auto cursor-pointer"
+          @click="openFullscreen(mainImageUrl)"/>
 
-    <!-- Image principale -->
-    <div class="relative flex justify-center">
-      <label v-if="isEditMode">
-        <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
-        <img :src="mainImageUrl || fallbackImage"
-             alt="Image principale"
-             class="rounded-md max-w-full h-auto cursor-pointer"/>
-      </label>     
-      <img v-else-if="mainImageUrl" :src="mainImageUrl"
-           alt="Image principale"
-           class="rounded-md max-w-full h-auto cursor-pointer"
-           @click="openFullscreen(mainImageUrl)"/>
-   
-      <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
-              class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
-        X
-      </button>
+      <p v-if="mainImageText" class="text-lg text-justify pa-6">
+        {{ mainImageText }}
+      </p>
     </div>
 
-    <!-- Texte sous l'image principale -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2"> Description</div>
-      <textarea v-model="editableMainImageText" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <p v-else-if="mainImageText" class="text-lg text-justify">
-      {{ mainImageText }}
-    </p>
+    <!-- Main video -->
+    <div :style="{ backgroundColor: brandingStore.colors.surface, color: brandingStore.colors.onSurface }">
+      <h2 v-if="videoSubtitleMain" class="text-3xl font-semibold text-center py-6">
+        {{ videoSubtitleMain }}
+      </h2>
 
-    <!-- Titre video principale -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2"> Titre Vidéo Princpiale</div>
-      <textarea v-model="editableVideoSubtitleMain" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <h2 v-else-if="videoSubtitleMain" class="text-2xl font-semibold text-center" >
-      {{ videoSubtitleMain }}
-    </h2>
-
-    <!-- Vidéo YouTube principale -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2">URL vidéo</div>
-      <input
-          v-if="isEditMode"
-          type="text"
-          v-model="editableVideoUrlMain"
-          class="w-full p-2 border rounded-md"
-          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
-      />
-    </div>
-    <div class="flex justify-center">
-      <div v-if="isEditMode"></div>
-      <div v-else-if="videoUrlMain" class="video-container">
+      <div v-if="videoUrlMain" class="video-container">
         <iframe
             :src="videoUrlMain"
             title="YouTube video player"
@@ -94,241 +56,333 @@
             class="video-frame">
         </iframe>
       </div>
+      <p v-if="mainVideoText" class="text-lg text-justify pa-6 mb-4">
+        {{ mainVideoText }}
+      </p>
+    </div>
+
+    <!-- Images  -->
+    <div :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
+      <div>
+        <h2 v-if="imagesSubtitle" class="text-xl font-semibold text-center mb-6">
+          {{ imagesSubtitle }}
+        </h2>
+      </div>
+
+      <!--        images-->
+      <div class="pa-2">
+        <FullscreenImage ref="fullscreenImage" :image-url="currentImage"/>
+        <div>
+          <!-- Affichage des images -->
+          <div class="flex flex-wrap gap-4">
+            <!-- Première image -->
+            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image1Url"
+                 @click="openFullscreen(image1Url)">
+              <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </div>
+
+            <!-- Deuxième image -->
+            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image2Url"
+                 @click="openFullscreen(image2Url)">
+              <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </div>
+
+            <!-- Troisième image -->
+            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image3Url"
+                 @click="openFullscreen(image3Url)">
+              <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </div>
+
+            <!-- Quatrième image -->
+            <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image4Url"
+                 @click="openFullscreen(image4Url)">
+              <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer"/>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <p v-if="imagesText" class="text-lg text-justify pa-6">
+          {{ imagesText }}
+        </p>
+      </div>
+
+    </div>
+
+    <!--SecondVideo-->
+    <div :style="{ backgroundColor: brandingStore.colors.surface, color: brandingStore.colors.onSurface }">
+      <h2 v-if="videoSubtitle" class="text-xl font-semibold text-center py-6">
+        {{ videoSubtitle }}
+      </h2>
+
+      <div class="flex justify-center items-center h-full">
+        <iframe
+            v-if="videoUrl"
+            :src="videoUrl"
+            title="YouTube video player"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowfullscreen
+            class="rounded-md"
+            style="width: 600px; height: 337px;"
+        ></iframe>
+      </div>
+
+      <p v-if="videoText" class="text-lg text-justify pa-6">
+        {{ videoText }}
+      </p>
     </div>
 
 
-    <!-- Texte sous video principale -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2"> Description</div>
-      <textarea v-model="editableMainVideoText" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
+    <!-- Contact Info-->
+    <div 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">
+          <!-- 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>
+            <span>{{ editablePhoneNumber }}</span>
+          </div>
+          <!-- Affichage de l'email -->
+          <div v-if="editableEmail" class="flex items-center space-x-2">
+            <i class="mdi mdi-email-outline text-2xl"></i>
+            <a
+                :href="`mailto:${editableEmail}`"
+                class="no-underline text-current"
+            >
+              {{ editableEmail }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <!--pc-->
+      <div v-if="!smAndDown">
+        <div class="flex space-x-64 space-y-4 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>
+            <span>{{ editablePhoneNumber }}</span>
+          </div>
+          <!-- Affichage de l'email -->
+          <div v-if="editableEmail" class="flex items-center space-x-2">
+            <i class="mdi mdi-email-outline text-2xl"></i>
+            <a
+                :href="`mailto:${editableEmail}`"
+                class="no-underline text-current"
+            >
+              {{ editableEmail }}
+            </a>
+          </div>
+        </div>
+      </div>
+
+
     </div>
-    <p v-else-if="mainVideoText" class="text-lg text-justify">
-      {{ mainVideoText }}
-    </p>
+  </div>
 
 
-    <!-- Sous-titre avant les deux images -->
-    <div v-if="isEditMode">
-      <div v-if="isEditMode" class="text-2xl py-2"> Sous-titre</div>
-      <textarea v-model="editableImagesSubtitle" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <h2 v-else-if="imagesSubtitle" class="text-2xl font-semibold text-center">
-      {{ imagesSubtitle }}
-    </h2>
+  <!--  Editmode-->
+  <div v-if="isEditMode" class="space-y-10">
 
-    <!-- 4 images côte à côte -->
-    <FullscreenImage ref="fullscreenImage" :image-url="currentImage" />
-    <div>
-      <!-- Mode édition -->
+    <!--Main image-->
+    <div class="rounded-2xl"
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onPrimary }">
       <div v-if="isEditMode">
-        <div class="text-2xl py-2">Images</div>
-        <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
-          <!-- Première image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image1Url', $event)" class="hidden" />
-              <img :src="image1Url || fallbackImage"
-                   alt="Image 1"
-                   class="rounded-md max-w-full h-auto cursor-pointer" />
-            </label>
-            <button @click="deleteImage('image1Url')"
-                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-              X
-            </button>
-          </div>
-
-          <!-- Deuxième image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image2Url', $event)" class="hidden" />
-              <img :src="image2Url || fallbackImage"
-                   alt="Image 2"
-                   class="rounded-md max-w-full h-auto cursor-pointer" />
-            </label>
-            <button @click="deleteImage('image2Url')"
-                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-              X
-            </button>
-          </div>
-
-          <!-- Troisième image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image3Url', $event)" class="hidden" />
-              <img :src="image3Url || fallbackImage"
-                   alt="Image 3"
-                   class="rounded-md max-w-full h-auto cursor-pointer" />
-            </label>
-            <button @click="deleteImage('image3Url')"
-                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-              X
-            </button>
-          </div>
-
-          <!-- Quatrième image -->
-          <div class="relative">
-            <label>
-              <input type="file" @change="updateImage('image4Url', $event)" class="hidden" />
-              <img :src="image4Url || fallbackImage"
-                   alt="Image 4"
-                   class="rounded-md max-w-full h-auto cursor-pointer" />
-            </label>
-            <button @click="deleteImage('image4Url')"
-                    class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
-              X
-            </button>
-          </div>
-        </div>
+        <div class="text-2xl pa-4">Image principale</div>
+        <v-text-field label="Titre" variant="outlined" v-model="editableMainTitle" class="w-full p-2"></v-text-field>
       </div>
 
-      <!-- Mode normal -->
-      <div v-else>
-        <div class="flex flex-wrap gap-4">
-          <!-- Première image -->
-          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image1Url" @click="openFullscreen(image1Url)">
-            <img :src="image1Url" alt="Image 1" class="rounded-md max-w-full h-auto cursor-pointer" />
-          </div>
-
-          <!-- Deuxième image -->
-          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image2Url" @click="openFullscreen(image2Url)">
-            <img :src="image2Url" alt="Image 2" class="rounded-md max-w-full h-auto cursor-pointer" />
-          </div>
-
-          <!-- Troisième image -->
-          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image3Url" @click="openFullscreen(image3Url)">
-            <img :src="image3Url" alt="Image 3" class="rounded-md max-w-full h-auto cursor-pointer" />
-          </div>
-
-          <!-- Quatrième image -->
-          <div class="relative w-full sm:flex-1 sm:min-w-[calc(25%-1rem)]" v-if="image4Url" @click="openFullscreen(image4Url)">
-            <img :src="image4Url" alt="Image 4" class="rounded-md max-w-full h-auto cursor-pointer" />
-          </div>
-        </div>
-
+      <div class="relative flex justify-center">
+        <label v-if="isEditMode">
+          <input type="file" @change="updateImage('mainImageUrl', $event)" class="hidden"/>
+          <img :src="mainImageUrl || fallbackImage"
+               alt="Image principale"
+               class=" max-w-full h-auto cursor-pointer"/>
+        </label>
 
+        <button v-if="isEditMode" @click="deleteImage('mainImageUrl')"
+                class="absolute top-10 right-2 px-2 py-1 bg-red-500 text-white  hover:bg-red-600">
+          X
+        </button>
       </div>
+
+      <v-textarea label="Description" variant="outlined" v-model="editableMainImageText"
+                  class="w-full p-2 py-6 "></v-textarea>
+
     </div>
 
+    <!--Main VideoUrl-->
+    <div class="rounded-2xl"
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface}">
+      <!--Titre Video-->
+      <div class="text-2xl pa-4">Vidéo Princpiale</div>
+      <v-text-field
+          label="Titre"
+          variant="outlined"
+          v-model="editableVideoSubtitleMain"
+          class="w-full p-2 border rounded-md"></v-text-field>
 
-
-    <!-- Texte sous les deux images -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2"> Images</div>
-      <textarea v-model="editableImagesText" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <p v-else-if="imagesText" class="text-lg text-justify">
-      {{ imagesText }}
-    </p>
-
-    <!-- Sous-titre avant la vidéo -->
-
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2"> Titre Video</div>
-      <textarea v-model="editableVideoSubtitle" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <h2 v-else-if="videoSubtitle" class="text-2xl font-semibold text-center">
-      {{ videoSubtitle }}
-    </h2>
-
-    <!-- Vidéo YouTube -->
-    <div v-if="isEditMode">
-      <div class="text-2xl py-2">URL vidéo</div>
-      <input
+      <!--urlvideo-->
+      <v-text-field
+          label="URL Video"
+          variant="outlined"
           v-if="isEditMode"
           type="text"
-          v-model="editableVideoUrl"
-          class="w-full p-2 border rounded-md"
-          :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
+          v-model="editableVideoUrlMain"
+          class="w-full p-2 rounded-md"
+
       />
-    </div>
-    <div class="flex justify-center">
-      <div v-if="isEditMode"></div>
-      <iframe
-          v-else-if="videoUrl"
-          :src="videoUrl"
-          title="YouTube video player"
-          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-          allowfullscreen
-          class="rounded-md"
-          style="width: 600px; height: 337px;"
-      ></iframe>
+
+
+      <!-- Texte sous video principale -->
+      <v-text-field
+          label="Description"
+          v-model="editableMainVideoText" class="w-full p-2  rounded-md h-24"
+          variant="outlined"
+      ></v-text-field>
     </div>
 
-    <!-- Texte sous la vidéo -->
-    <div v-if="isEditMode" class="text-2xl"> Description</div>
-    <div v-if="isEditMode">
-      <textarea v-model="editableVideoText" class="w-full p-2 border rounded-md h-24"
-                :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"></textarea>
-    </div>
-    <p v-else-if="videoText" class="text-lg text-justify">
-      {{ videoText }}
-    </p>
+    <!--  4 images-->
+    <div class="rounded-2xl"
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface}">
 
-    <!-- Informations de contact -->
-    <div class="flex flex-col space-y-6 mt-8">
-      <div v-if="isEditMode" class="flex flex-col space-y-2">
-        <!-- Édition du téléphone -->
-        <div>
-          <label class="text-lg">Numéro de téléphone</label>
-          <input
-              v-model="editablePhoneNumber"
-              type="text"
-              class="w-full p-2 border rounded-md"
-              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
-          />
+      <div v-if="isEditMode">
+        <div class="text-2xl pa-4">Galerie d'images</div>
+        <v-text-field label="Titre" variant="outlined" v-model="editableImagesSubtitle" class="w-full p-2 rounded-md"></v-text-field>
+      </div>
+
+      <!--images-->
+      <div class=" text-2xl pa-2
+        ">Images
+      </div>
+      <div class="pa-2 grid grid-cols-1 gap-4 md:grid-cols-4">
+        <!-- Première image -->
+        <div class="relative">
+          <label>
+            <input type="file" @change="updateImage('image1Url', $event)" class="hidden"/>
+            <img :src="image1Url || fallbackImage"
+                 alt="Image 1"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <button @click="deleteImage('image1Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+            X
+          </button>
         </div>
-        <!-- Édition de l'email -->
-        <div>
-          <label class="text-lg">Adresse email</label>
-          <input
-              v-model="editableEmail"
-              type="text"
-              class="w-full p-2 border rounded-md"
-              :style="{ backgroundColor: brandingStore.colors.secondary, color: brandingStore.colors.onSecondary }"
-          />
-        </div>
-      </div>
-      <div
-          v-else
-          class="flex flex-col sm:flex-row sm:space-x-64 space-y-4 sm:space-y-0 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>
-          <span>{{ editablePhoneNumber }}</span>
-        </div>
-        <!-- Affichage de l'email -->
-        <div v-if="editableEmail" class="flex items-center space-x-2">
-          <i class="mdi mdi-email-outline text-2xl"></i>
-          <a
-              :href="`mailto:${editableEmail}`"
-              class="no-underline text-current"
-          >
-            {{ editableEmail }}
-          </a>
+
+        <!-- Deuxième image -->
+        <div class="relative">
+          <label>
+            <input type="file" @change="updateImage('image2Url', $event)" class="hidden"/>
+            <img :src="image2Url || fallbackImage"
+                 alt="Image 2"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <button @click="deleteImage('image2Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+            X
+          </button>
+        </div>
+
+        <!-- Troisième image -->
+        <div class="relative">
+          <label>
+            <input type="file" @change="updateImage('image3Url', $event)" class="hidden"/>
+            <img :src="image3Url || fallbackImage"
+                 alt="Image 3"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <button @click="deleteImage('image3Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+            X
+          </button>
+        </div>
+
+        <!-- Quatrième image -->
+        <div class="relative">
+          <label>
+            <input type="file" @change="updateImage('image4Url', $event)" class="hidden"/>
+            <img :src="image4Url || fallbackImage"
+                 alt="Image 4"
+                 class="rounded-md max-w-full h-auto cursor-pointer"/>
+          </label>
+          <button @click="deleteImage('image4Url')"
+                  class="absolute top-2 right-2 px-2 py-1 bg-red-500 text-white hover:bg-red-600">
+            X
+          </button>
         </div>
       </div>
+
+      <!-- Description-->
+      <div class="text-2xl pa-2"> Description</div>
+      <v-textarea variant="outlined" v-model="editableImagesText" class="w-full p-2 border rounded-md"></v-textarea>
+
     </div>
 
+    <!-- Second Video -->
+    <div class="rounded-2xl"
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface }">
+      <div class="text-2xl pa-4">Vidéo Secondaire</div>
 
+      <v-text-field
+          label="Titre"
+          variant="outlined"
+          v-model="editableVideoSubtitle"
+          class="w-full p-2"
+      ></v-text-field>
+
+      <v-text-field
+          label="URL Vidéo"
+          variant="outlined"
+          v-if="isEditMode"
+          v-model="editableVideoUrl"
+          class="w-full p-2"
+      ></v-text-field>
+
+      <v-textarea
+          label="Description"
+          variant="outlined"
+          v-model="editableVideoText"
+          class="w-full p-2 py-6"
+      ></v-textarea>
+    </div>
+
+    <!-- Informations de Contact -->
+    <div class="rounded-2xl"
+         :style="{ backgroundColor: brandingStore.colors.primary, color: brandingStore.colors.onSurface }">
+      <div class="text-2xl pa-4">Informations de Contact</div>
+
+      <v-text-field
+          label="Numéro de Téléphone"
+          variant="outlined"
+          v-model="editablePhoneNumber"
+          class="w-full p-2"
+      ></v-text-field>
+
+      <v-text-field
+          label="Adresse Email"
+          variant="outlined"
+          v-model="editableEmail"
+          class="w-full p-2"
+      ></v-text-field>
+    </div>
   </div>
 
+
 </template>
 
 <script setup>
 import {ref, onMounted} from "vue";
-import { useClient } from "@/plugins/api.js";
+import {useClient} from "@/plugins/api.js";
 import {useBrandingStore} from "@/stores/brandingStore.js";
-import { useCreatorProfileStore } from "@/stores/creatorProfileStore.js";
-import { useDisplay } from "vuetify";
-import { watch} from "vue";
+import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
+import {useDisplay} from "vuetify";
+import {watch} from "vue";
 import FullscreenImage from "@/views/creators/FullscreenImage.vue";
 
-const { smAndDown } = useDisplay();
+const {smAndDown} = useDisplay();
 const isMobileView = ref(smAndDown.value);
 
 
@@ -341,7 +395,6 @@ const isLoggedIn = true;
 const isEditMode = ref(false);
 
 
-
 const currentImage = ref("");
 const fullscreenImage = ref(null);
 
@@ -379,7 +432,7 @@ const phoneNumber = ref("");
 const email = ref("");
 
 
-const editableImages = ref([null, null, null, null]); 
+const editableImages = ref([null, null, null, null]);
 
 
 // Editable fields
@@ -436,8 +489,6 @@ function toggleEditMode() {
 }
 
 
-
-
 // Supprimer une image
 function deleteImage(field) {
   switch (field) {
@@ -491,7 +542,6 @@ function updateImage(field, event) {
 }
 
 
-
 // Charger les données au montage
 onMounted(() => {
   mainTitle.value = brandingStore.presentationInfos.title;
@@ -510,7 +560,7 @@ onMounted(() => {
   videoUrlMain.value = brandingStore.presentationInfos.videoUrlMain;
   videoText.value = brandingStore.presentationInfos.videoText;
   editablePhoneNumber.value = brandingStore.presentationInfos.phoneNumber;
-  editableEmail.value= brandingStore.presentationInfos.email;
+  editableEmail.value = brandingStore.presentationInfos.email;
   phoneNumber.value = brandingStore.presentationInfos.phoneNumber;
   email.value = brandingStore.presentationInfos.email;
 });
@@ -559,7 +609,7 @@ async function saveChanges() {
     const response = await client.post(
         `/api/creators/${creatorProfileStore.creator.id}/presentation-infos`,
         formData,
-        { headers: { "Content-Type": "multipart/form-data" } }
+        {headers: {"Content-Type": "multipart/form-data"}}
     );
 
     // Mettre à jour les valeurs locales pour refléter les changements
@@ -582,7 +632,7 @@ async function saveChanges() {
     isEditMode.value = false;
 
     // Rafraîchir après une légère pause pour s'assurer des mises à jour visuelles
-   
+
   } catch (error) {
     console.error("Erreur lors de la sauvegarde :", error);
   } finally {
@@ -592,8 +642,6 @@ async function saveChanges() {
 }
 
 
-
-
 function cancelEdit() {
   // Restaurer les valeurs d'origine
   editableMainTitle.value = mainTitle.value;