Better CreatorHome

frontend/src/views/creators/CreatorHome.vue

@@ -1,7 +1,7 @@
 <template>
 
   <div v-if="creatorProfileStore.creator?.id === brandingStore.value.id"
-       class="flex justify-end space-x-2 mb-5 pa-1">
+       class="flex justify-end space-x-2 mb-5 p-4">
 
     <!-- Bouton principal : Éditer ou Enregistrer -->
     <button
@@ -24,14 +24,14 @@
   <!-- MainPage -->
   <div class="flex flex-col mx-auto px-6">
 
-    <h1 class="flex justify-start text-2xl font-bold text-center  mb-4">Qui sommes-nous</h1>
+    <h1 class="flex justify-start text-2xl font-bold text-center mb-4">Qui sommes-nous</h1>
 
     <div>
       <!-- Main image  Bloc D'information-->
       <div class="py-4">
 
         <div v-if="!isEditMode">
-          <p v-if="mainImageText ">
+          <p v-if="mainImageText" class="text-lg text-justify">
             {{ mainImageText }}
           </p>
         </div>
@@ -67,7 +67,7 @@
             </h2>
 
             <div v-if="!isEditMode">
-              <p v-if="mainVideoText">
+              <p v-if="mainVideoText" class="text-lg text-justify">
                 {{ mainVideoText }}
               </p>
             </div>
@@ -105,7 +105,7 @@
           </v-textarea>
 
           <div v-if="!isEditMode">
-            <p v-if="imagesText ">
+            <p v-if="imagesText" class="text-lg text-justify">
               {{ imagesText }}
             </p>
           </div>
@@ -262,46 +262,23 @@
       </div>
 
       <!-- Contact Info-->
-      <div v-if="!isEditMode">
-        <div v-if="phoneNumber || email" class="mb-6">
-          <!--      mobile-->
-          <div v-if="smAndDown">
-            <div class="flex flex-col space-y-10 mt-12 justify-center items-center">
-              <!-- Affichage du téléphone -->
-              <div v-if="phoneNumber" class="flex items-center space-x-2">
-                <i class="mdi mdi-phone-outline text-2xl"></i>
-                <span>{{ phoneNumber }}</span>
-              </div>
-              <!-- Affichage de l'email -->
-              <div v-if="email" class="flex items-center space-x-2">
-                <i class="mdi mdi-email-outline text-2xl"></i>
-                <a
-                    :href="`mailto:${email}`"
-                    class="no-underline text-current"
-                >
-                  {{ email }}
-                </a>
-              </div>
-            </div>
-          </div>
-          <!--pc-->
-          <div v-if="!smAndDown">
-            <div class="flex space-x-4 space-y-4 mt-5 justify-center items-center w-full">
-              <!-- Affichage du téléphone -->
-              <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-start">
-                <i class="mdi mdi-phone-outline text-2xl"></i>
-                <span>{{ phoneNumber }}</span>
-              </div>
+      <div v-if="!isEditMode && phoneNumber || email">
 
-              <!-- Affichage de l'email -->
-              <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
-                <i class="mdi mdi-email-outline text-2xl"></i>
-                <a :href="`mailto:${email}`" class="no-underline text-current">
-                  {{ email }}
-                </a>
-              </div>
-            </div>
+        <div class="my-10 flex flex-row">
+
+          <div v-if="phoneNumber" class="flex items-center space-x-2 w-1/2 justify-center">
+            <i class="mdi mdi-phone-outline text-2xl"></i>
+            <span>{{ phoneNumber }}</span>
           </div>
+
+          <!-- Affichage de l'email -->
+          <div v-if="email" class="flex items-center space-x-2 w-1/2 justify-center">
+            <i class="mdi mdi-email-outline text-2xl"></i>
+            <a :href="`mailto:${email}`" class="no-underline text-current">
+              {{ email }}
+            </a>
+          </div>
+
         </div>
       </div>
     </div>