From 166c6c18961929aaef7cac5f4b2b6c13837adf1e Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 19 Mar 2024 15:38:08 -0400
Subject: [PATCH] Modification des pages afin qu'elle soient plus reactive.

---
 src/layouts/DefaultLayout.vue   | 183 +++++++-------
 src/views/LoginView.vue         | 271 +++++++++++++++++----
 src/views/main/ContactView.vue  | 132 +++++-----
 src/views/main/CreatorFolio.vue | 298 +++++++++++-----------
 src/views/main/HomeView.vue     | 420 +++++++++++++++++---------------
 5 files changed, 749 insertions(+), 555 deletions(-)
diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 4ba01c8..59379ed 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -1,103 +1,108 @@
 <template>
-  <div class="md:flex hidden items-center justify-between flex-col">
-    <!-- Version pour ordinateur -->
-    <v-container style="z-index: 2000;">
-      <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
 
-        <v-card-text justify="end" style="max-width: 22%; margin-top: .2%; margin-bottom: -1.2%;">
-          <v-text-field append-inner-icon="mdi-magnify" density="compact"
-            label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details single-line
-            ></v-text-field>
-        </v-card-text>
+  <body style="background-color: #f4f4f4;">
 
-        <v-col cols="2" class="d-flex align-center">
-          <router-link :to="{ name: 'yourprofile' }">
-            <v-row class="d-flex align-center">
-              <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+
+    <div class="md:flex hidden items-center justify-between flex-col">
+      <!-- Version pour ordinateur -->
+      <v-container style="z-index: 2000; margin-bottom: 1.4%">
+        <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
+
+          <v-card-text justify="end" style="max-width: 22%; min-width: 500px; margin-top: .2%; margin-bottom: -1.2%;">
+            <v-text-field append-inner-icon="mdi-magnify" density="compact"
+              label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details
+              single-line></v-text-field>
+          </v-card-text>
+
+          <v-col cols="auto" class="d-flex align-center">
+            <router-link :to="{ name: 'yourprofile' }">
+              <v-row class="d-flex align-center">
+                <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+                  alt="Logo">
+                <h1 class="mb-0 text-h5">ANONYME</h1>
+              </v-row>
+            </router-link>
+          </v-col>
+        </v-row>
+
+      </v-container>
+
+    </div>
+
+
+    <!-- Version pour mobile -->
+    <div class="md:hidden flex flex-col items-center justify-center">
+      <v-container style="margin-top: -20px;">
+        <v-row>
+
+
+          <v-col cols="auto">
+            <!-- Logo -->
+            <router-link :to="{ name: 'home' }">
+              <img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
+            </router-link>
+          </v-col>
+          <v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
+          <v-col cols="auto">
+            <!-- Photo de profil -->
+            <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
+              <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
                 alt="Logo">
-              <h1 class="mb-0 text-h5">ANONYME</h1>
-            </v-row>
-          </router-link>
-        </v-col>
-      </v-row>
+            </router-link>
+          </v-col>
+        </v-row>
+      </v-container>
 
-    </v-container>
+      <v-container class="text-center" style="margin-top: -30px;">
+        <v-row class="justify-center">
 
-  </div>
-
-
-  <!-- Version pour mobile -->
-  <div class="md:hidden flex flex-col items-center justify-center">
-    <v-container style="margin-top: -20px;">
-      <v-row>
-
-
-        <v-col cols="auto">
-          <!-- Logo -->
-          <router-link :to="{ name: 'home' }">
-            <img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
-          </router-link>
-        </v-col>
-        <v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
-        <v-col cols="auto">
-          <!-- Photo de profil -->
-          <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
-            <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
-          </router-link>
-        </v-col>
-      </v-row>
-    </v-container>
-
-    <v-container class="text-center" style="margin-top: -30px;">
-      <v-row class="justify-center">
-
-        <!-- Premier lien avec icône -->
-        <v-col cols="auto" class="mx-4">
-          <router-link :to="{ name: 'home' }" class="text-green-700">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
-            </svg>
-          </router-link>
-        </v-col>
-        <!-- Deuxième lien avec icône -->
-        <v-col cols="auto" class="mx-4">
-          <router-link :to="{ name: 'contact' }" class="text-green-700">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
-            </svg>
-          </router-link>
-        </v-col>
-        <!-- Troisième lien avec icône -->
-        <v-col cols="auto" class="mx-4">
-          <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
-            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
-              stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
-              <path stroke-linecap="round" stroke-linejoin="round"
-                d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
-            </svg>
-          </router-link>
-        </v-col>
+          <!-- Premier lien avec icône -->
+          <v-col cols="auto" class="mx-4">
+            <router-link :to="{ name: 'home' }" class="text-green-700">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
+              </svg>
+            </router-link>
+          </v-col>
+          <!-- Deuxième lien avec icône -->
+          <v-col cols="auto" class="mx-4">
+            <router-link :to="{ name: 'contact' }" class="text-green-700">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
+              </svg>
+            </router-link>
+          </v-col>
+          <!-- Troisième lien avec icône -->
+          <v-col cols="auto" class="mx-4">
+            <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
+              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
+                stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
+                <path stroke-linecap="round" stroke-linejoin="round"
+                  d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+              </svg>
+            </router-link>
+          </v-col>
 
 
 
-        <div v-if="user">
+          <div v-if="user">
             Hello, {{ user.email }}
-        </div>
-        <v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
+          </div>
+          <v-btn color="red" variant="text" @click="logout()">Logout</v-btn>
 
 
 
-        <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
+          <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
 
-      </v-row>
+        </v-row>
 
 
-    </v-container>
-  </div>
+      </v-container>
+    </div>
 
 
 
@@ -105,11 +110,13 @@
 
 
 
-  <main class="px-8 py-3 ">
-    <router-view />
-  </main>
+    <main class="px-8 py-3 ">
+      <router-view />
+    </main>
+
+  </body>
 </template>
-  
+
 <script setup>
 import { useAuthStore } from '@/plugins/store/authStore';
 import { useRouter } from 'vue-router';
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 48ff17a..7b69bb5 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,58 +1,102 @@
 <template>
-    <v-container style="margin-top: 5%;">
-        <v-row>
-            <v-col cols="9">
-                <img style="border-radius: 20px; max-width: 90%;" src="../../../images/loginpage/loginhutopy.png">
-            </v-col>
-            <v-col style="margin-left: -5%; margin-top: 6%;">
-                <h1 class="text-center display-6" style="font-size: 5rem;">Connexion</h1>
+    <v-app style="background-color: #f4f4f4;">
+        <div class="sm:flex hidden items-center justify-between flex-col"
+            style="background-color: #f4f4f4; margin-top: 3%;">
 
-                <h2 class="text-center display-3" style="font-size: 1.5rem; margin-bottom: 20px;">Comment souhaitez-vous
-                    vous connecter à
-                    votre compte?</h2>
-                <v-card-text>
-                    <v-form>
-                        <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"
-                            class="text-start"></v-text-field>
-                        <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
-                            label="Mot de passe" class="text-start"></v-text-field>
-                    </v-form>
-                    <v-snackbar v-model="errorSnackBar">
-                        Email ou mot de passe invalide.
-                        <template v-slot:actions>
-                            <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
-                        </template>
-                    </v-snackbar>
-                </v-card-text>
-                <v-card-actions>
-                    <div class="flex-grow-1"></div>
-                    <router-link :to="{ name: 'home' }">
-                        <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
-                    </router-link>
-                    <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
-                </v-card-actions>
-                <div class="text-center">
+            <body style="background-color: #f4f4f4;">
+                <v-container style="background-color: #f4f4f4;">
+                    <v-row align="center" justify="center">
+                        <!-- Colonne de l'image -->
+                        <v-col cols="8" lg="8" style="align-items: center;">
+                            <img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
+                                src="../../../images/loginpage/loginhutopy.png">
+                        </v-col>
 
-                    <h2 class="text-center display-3" style="font-size: 1.5rem; margin-top: 6%; margin-bottom: 20px;">
-                        Pas encore
-                        inscrit?</h2>
-                    <router-link :to="{ name: 'contact' }">
-                        <v-btn color="#6b0065"
-                            style="height: 60px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
+                        <!-- Colonne du contenu -->
+                        <v-col cols="3" lg="4" md="5" sm="6" xs="6">
+                            <h1 class="text-center display-6 h1-connexion">Connexion</h1>
+                            <h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
+                                vous connecter à votre compte?</h2>
+                            <v-card-text>
+                                <v-form class="label-mail-password">
+                                    <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
+                                        label="E-mail" class="text-start"></v-text-field>
+                                    <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
+                                        label="Mot de passe" class="text-start"></v-text-field>
+                                </v-form>
+                                <v-snackbar v-model="errorSnackBar">
+                                    Email ou mot de passe invalide.
+                                    <template v-slot:actions>
+                                        <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
+                                    </template>
+                                </v-snackbar>
+                            </v-card-text>
+                            <v-card-actions>
+                                <div class="flex-grow-1"></div>
+                                <router-link :to="{ name: 'home' }">
+                                    <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
+                                </router-link>
+                                <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
+                            </v-card-actions>
+                            <div class="text-center">
+                                <h2 class="text-center display-3 h2-connexion">
+                                    Pas encore
+                                    inscrit?</h2>
+                                <router-link :to="{ name: 'contact' }">
+                                    <v-btn color="#6b0065"
+                                        style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
+                                </router-link>
+                            </div>
+                        </v-col>
+                    </v-row>
+                </v-container>
 
-                    </router-link>
-                </div>
-            </v-col>
-        </v-row>
-    </v-container>
+            </body>
+            <FooterLayout></FooterLayout>
+        </div>
 
 
-    <FooterLayout></FooterLayout>
+        <div class="sm:hidden flex flex-col items-center justify-start"
+            style="background-color: #f4f4f4; height: 100vh;">
+            <img style="box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; "
+                src="../../../images/loginpage/loginhutopy.png">
+
+            <h1 class="text-center">Connexion</h1>
+            <h2 class="text-center">Comment souhaitez-vous
+                vous connecter à votre compte?</h2>
+
+            <v-form style="max-width: 400px; width: 350px;">
+                <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"></v-text-field>
+                <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
+                    label="Mot de passe"></v-text-field>
+            </v-form>
+
+            <v-card-actions>
+                <div class="flex-grow-1"></div>
+                <router-link :to="{ name: 'home' }">
+                    <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
+                </router-link>
+                <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
+            </v-card-actions>
+            <div class="text-center">
+                <h2 class="text-center display-3 h2-connexion">
+                    Pas encore
+                    inscrit?</h2>
+                <router-link :to="{ name: 'contact' }">
+                    <v-btn color="#6b0065"
+                        style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
+                </router-link>
+            </div>
+
+        </div>
+
+
+    </v-app>
 
 </template>
 
+
 <script setup>
-import FooterLayout from '@/layouts/FooterLayout.vue';
 import { useClient } from '@/plugins/clientPlugin';
 import { useAuthStore } from '@/plugins/store/authStore';
 import { ref } from 'vue';
@@ -80,4 +124,139 @@ async function login() {
     }
 }
 
-</script>
\ No newline at end of file
+</script>
+
+<style>
+.h1-connexion {
+    font-size: 0.55em;
+}
+
+.h2-connexion {
+    font-size: 0.55em;
+}
+
+.label-mail-password {
+    margin-bottom: -10%;
+}
+
+.logincol {
+    cols: 3;
+}
+
+
+@media (max-width: 475px) {
+    .h1-connexion {
+        font-size: 1em;
+    }
+}
+
+@media (min-width: 476px) and (max-width: 640px) {
+    .h1-connexion {
+        font-size: 1em;
+
+    }
+}
+
+@media (min-width: 641px) and (max-width: 768px) {
+    .h1-connexion {
+        font-size: 1em;
+    }
+
+    .h2-connexion {
+        font-size: 1em;
+        margin-bottom: 5%;
+    }
+
+    .headermarginleft {
+        margin-left: 4%;
+    }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+    .h1-connexion {
+        font-size: 1em;
+    }
+
+    .h2-connexion {
+        font-size: 1em;
+        margin-bottom: 5%;
+    }
+
+    .headermarginleft {
+        margin-left: 4%;
+    }
+}
+
+@media (min-width: 1025px) and (max-width: 1272px) {
+    .h1-connexion {
+        font-size: 3em;
+        margin-top: 15%;
+        margin-bottom: 1%;
+    }
+
+    .h2-connexion {
+        font-size: 1em;
+        margin-bottom: 5%;
+    }
+
+    .label-mail-password {
+        margin-bottom: -10%;
+    }
+
+    .headermarginleft {
+        margin-left: -10%;
+        min-width: 700px;
+    }
+
+}
+
+@media (min-width: 1537px) and (max-width: 1920px) {
+    .h1-connexion {
+        font-size: 3.0em;
+        margin-top: 18%;
+    }
+
+    .h2-connexion {
+        font-size: 1em;
+        margin-bottom: 5%;
+    }
+
+    .label-mail-password {
+        margin-bottom: 0%;
+    }
+
+    .headermarginleft {
+        margin-left: 0%;
+    }
+
+}
+
+@media (min-width: 1921px) {
+    .h1-connexion {
+        font-size: 6.2em;
+    }
+
+    .h2-connexion {
+        font-size: 1.7em;
+        margin-bottom: 5%;
+    }
+
+    .label-mail-password {
+        margin-bottom: 0%;
+    }
+
+    .insriptionbutton {
+        font-size: 1.2em
+    }
+
+    .headermarginleft {
+        margin-left: 0%;
+
+    }
+
+
+
+
+
+}
+</style>
\ No newline at end of file
diff --git a/src/views/main/ContactView.vue b/src/views/main/ContactView.vue
index f766c74..53cc6b8 100644
--- a/src/views/main/ContactView.vue
+++ b/src/views/main/ContactView.vue
@@ -1,16 +1,9 @@
 <template>
-
-
   <!--PC -->
 
 
-
-
-
-
-
   <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
-    <v-container class="d-flex justify-center align-center">
+    <v-container class="d-flex justify-center align-center" sty>
       <div style="margin-left: 20%; margin-bottom: 3%;">
         <v-row>
 
@@ -28,75 +21,66 @@
       </div>
     </v-container>
 
-
-
-    <main class="top-aligned-column grid grid-cols-3 gap-4">
-
-      <div class="column"></div>
-      <div class="center-column" style="width: 100vw; margin: auto;">
-
-        <div class="grid grid-cols-2 gap-4" style="margin-bottom: 5%;">
-          <div class="rectangular-image h-full flex justify-center items-center">
-
-            <img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
-              style="width: 700px; margin-top: 14%; height: auto; float:  right;">
-
-          </div>
-
-          <div>
-
-            <h1 style="font-size: 3rem; margin-top: -.5%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
-              développement de </h1>
-
-
-            <p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">Rejoignez l'aventure Hutopy : une
-              invitation à façonner l'avenir de la création.
-              Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
-              plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
-              collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
-              inspirer.
-              Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
-              écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
-              votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
-              idées.
-              Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
-              votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
-              profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
-              l'innovation.
-              Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
-              visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
-              numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
-              Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
-              Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
-              dans le ciel de notre utopie partagée.
-
-            </p>
-
-            <v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
-
-            <v-text-field label="Courriel ($)"
-              style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
-
-            <v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
-              placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
-
-            <v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
-              placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
-
-
-            <RouterLink :to="{ name: 'home' }">
-              <v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
-                class="mt-4" block>Envoyez</v-btn>
-            </RouterLink>
-          </div>
-        </div>
-      </div>
-
-      <div class="column"></div>
-    </main>
   </div>
 
 
+  <v-container>
+    <v-row justify="center" align="center">
+      <v-col cols="auto">
+        <img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
+          style="max-width: 400px; margin-top: 14%; height: auto; float:  right;">
+      </v-col>
+      <v-col style="max-width: 700px;">
+        <h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
+          développement</h1>
+
+
+        <v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
+
+        <v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
+
+        <v-textarea style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement"
+          placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+
+        <v-textarea style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux ?"
+          placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+
+
+        <RouterLink :to="{ name: 'home' }">
+          <v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+            class="mt-4" block>Envoyez</v-btn>
+        </RouterLink>
+      </v-col>
+    </v-row>
+  </v-container>
+
+
+  <v-container style="max-width: 1200px;">
+    <p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
+      Hutopy : une
+      invitation à façonner l'avenir de la création.
+      Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
+      plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
+      collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
+      inspirer.
+      Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
+      écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
+      votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
+      idées.
+      Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
+      votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
+      profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
+      l'innovation.
+      Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
+      visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
+      numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
+      Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
+      Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
+      dans le ciel de notre utopie partagée.
+    </p>
+
+  </v-container>
+
   <!-- Mobile -->
 
   <v-container style="margin-top: -100px;">
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 4588a2a..6936fe2 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -2,7 +2,7 @@
   <DefaultLayout></DefaultLayout>
 
   <!-- PC-->
-  <div class="md:flex hidden items-center justify-between flex-col">
+  <div class="md:flex hidden items-center justify-between flex-col" style="background-color: #f4f4f4;">
 
     <!-- Banner + Profile-->
     <div style="margin-top: -1.6%;">
@@ -10,192 +10,186 @@
         <v-col cols="12">
           <img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
             style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
-
-
         </v-col>
       </v-row>
     </div>
 
-    <v-card class="label-paiement-color"
-      style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
-    </v-card>
-
-
-
-    <v-container class="pa-0">
+    <v-container class="pa-0" style="margin-left: 1%; margin: 0;">
       <v-row no-gutters class="justify-center">
         <!-- Left menu -->
-        <v-col cols="2" class="mx-0">
+        <v-col cols="2" class="mx-0" style="min-width: 300px;">
           <v-container style="position: sticky; top: 0;">
+
             <v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
               style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
 
-            <RouterLink :to="{ name: 'home' }">
-              <v-btn size="x-large"
-                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
-                elevation="0">
-                <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
-                <div style="margin-left: 10%;"> Accueil</div>
-
-              </v-btn>
-            </RouterLink>
-
-            <RouterLink :to="{ name: 'contact' }">
-              <v-btn size="x-large"
-                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
-                elevation="0">
-                <v-icon left class="icon-size" style="margin-left: -3%;">mdi-account-plus</v-icon>
-                <div style="margin-left: 6%;">Ajouter des amis</div>
-              </v-btn>
-            </RouterLink>
-
-            <RouterLink :to="{ name: 'creatorfolio' }">
-              <v-btn size="x-large"
-                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
-                elevation="0">
-                <v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
-                <div style="margin-left: 10%;">Contenu</div>
-              </v-btn>
-            </RouterLink>
 
 
-            <v-dialog transition="dialog-top-transition" width="auto">
-              <template v-slot:activator="{ props: activatorProps }">
 
-                <v-btn v-bind="activatorProps" text="Transition from Top" block size="x-large"
-                  style="margin-left: -8%; background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.3);"
+            <v-col>
+
+            </v-col>
+
+            <v-row style="align-items: start;">
+              <RouterLink :to="{ name: 'home' }">
+                <v-btn size="x-large"
+                  style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 5%; transform: scale(1.3);"
                   elevation="0">
-                  <v-icon color="black">mdi-wallet</v-icon>
-                  <div style="margin-left: 10%;" @click="isActive.value = false">PORTEFEUILLE</div>
+                  <v-icon left class="icon-size">mdi-home</v-icon>
+                  <div style="margin-left: 10%;"> Accueil</div>
+
                 </v-btn>
+              </RouterLink>
+            </v-row>
 
 
 
 
-              </template>
-              <template v-slot:default="{ isActive }">
-                <v-card style="border-radius: 30px;">
-                  <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
-                    <v-icon left size="48">mdi-wallet</v-icon>
-                    <v-toolbar title="PORTEFEUILLE"
-                      style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
-                  </div>
+            <v-row style="align-items: start;">
+              <RouterLink :to="{ name: 'contact' }">
+                <v-btn size="x-large"
+                  style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
+                  elevation="0">
+                  <v-icon left class="icon-size">mdi-account-plus</v-icon>
+                  <div>Ajouter des amis</div>
+                </v-btn>
+              </RouterLink>
+            </v-row>
 
-                  <v-card-text class="text-h1 pa-12">
+            <v-row style="align-items: start;">
+              <RouterLink :to="{ name: 'creatorfolio' }">
+                <v-btn size="x-large"
+                  style="background-color: #f4f4f4; min-width: auto; max-width: 370px; margin-bottom: 6%; transform: scale(1.3);"
+                  elevation="0">
+                  <v-icon left class="icon-size">mdi-newspaper</v-icon>
+                  <div style="margin-left: 10%; ">Contenu</div>
+                </v-btn>
+              </RouterLink>
+            </v-row>
+
+            <v-row style="align-items: start;">
+              <v-dialog transition="dialog-top-transition" width="auto">
+                <template v-slot:activator="{ props: activatorProps }">
+
+                  <v-btn v-bind="activatorProps" text class="text-left" block size="x-large"
+                    style="margin-left: -20%; background-color: #f4f4f4; transform: scale(1.3);" elevation="0">
+                    <v-icon color="black">mdi-wallet</v-icon>
+                    <div @click="isActive.value = false">PORTEFEUILLE</div>
+                  </v-btn>
+
+
+
+                </template>
+                <template v-slot:default="{ isActive }">
+                  <v-card style="border-radius: 30px;">
+                    <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
+                      <v-icon left size="48">mdi-wallet</v-icon>
+                      <v-toolbar title="PORTEFEUILLE"
+                        style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+                    </div>
+
+                    <v-card-text class="text-h1 pa-12">
+
+
+
+                      <v-row>
+                        <v-col>
+                          <v-row>
+                            <v-col cols="7">
+                              <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
+                              <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
+                              <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
+
+
+
+                            </v-col>
+                            <v-col>
+                              <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
+                              <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
+                              <h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
+
+                              <p></p>
+                            </v-col>
+                          </v-row>
+
+
+
+                        </v-col>
+
+                        <v-col>
+                          <v-row>
+                            <v-col cols="8">
+
+                              <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
+                              <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
+
+
+                            </v-col>
+                            <v-col>
+                              <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
+                              <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
+
+
+                              <p></p>
+                            </v-col>
+                          </v-row>
+                        </v-col>
+
+                      </v-row>
+
+
+                    </v-card-text>
+                    <v-card-actions class="justify-center">
+                      <v-btn text="Fermer" @click="isActive.value = false"></v-btn>
+                    </v-card-actions>
+                  </v-card>
+
+                  <v-card style="border-radius: 25pxo; margin-top: 3%; height: 30px;">
+                    <v-row>
+                      <v-col style="margin-right: -2%;" cols="1"
+                        class="text-truncate text-center font-weight-bold">T#</v-col>
+                      <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
+                        class="text-truncate text-center font-weight-bold">$</v-col>
+                      <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
+                      <v-col cols="3" class="text-truncate text-center font-weight-bold"
+                        style="margin-right: 2%; background-color: #fbccee">Name</v-col>
+                      <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
+                    </v-row>
+                  </v-card>
+
+                  <v-card style=" border-radius: 25pxo; margin-top: .5%; max-height: 450px;">
 
 
 
                     <v-row>
-                      <v-col>
-                        <v-row>
-                          <v-col cols="7">
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Balance actuelle</h1>
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Montant reçu</h1>
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">Dernier don</h1>
+                      <v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
+                      <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
+                        class="text-truncate">10$</v-col>
+                      <v-col cols="2" class="text-truncate">20-10-2025</v-col>
+                      <v-col cols="3" class="text-truncate"
+                        style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
 
 
 
-                          </v-col>
-                          <v-col>
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">0$</h1>
-                            <h1 style="margin-bottom: 4%; font-size: 1.3rem;">2024-10-04</h1>
-
-                            <p></p>
-                          </v-col>
-                        </v-row>
-
-
-
-                      </v-col>
-
-                      <v-col>
-                        <v-row>
-                          <v-col cols="8">
-
-                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Dons</h1>
-                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">Montant retiré</h1>
-
-
-                          </v-col>
-                          <v-col>
-                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0</h1>
-                            <h1 style="margin-bottom: 4%; font-size: 1.2rem;">0$</h1>
-
-
-                            <p></p>
-                          </v-col>
-                        </v-row>
-                      </v-col>
-
+                      <v-col cols="5" class="text-truncate">Good Job</v-col>
                     </v-row>
 
 
-                  </v-card-text>
-                  <v-card-actions class="justify-center">
-                    <v-btn text="Fermer" @click="isActive.value = false"></v-btn>
-                  </v-card-actions>
-                </v-card>
-
-                <v-card style="border-radius: 25pxo; margin-top: 3%; height: 30px;">
-                  <v-row>
-                    <v-col style="margin-right: -2%;" cols="1"
-                      class="text-truncate text-center font-weight-bold">T#</v-col>
-                    <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                      class="text-truncate text-center font-weight-bold">$</v-col>
-                    <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
-                    <v-col cols="3" class="text-truncate text-center font-weight-bold"
-                      style="margin-right: 2%; background-color: #fbccee">Name</v-col>
-                    <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
-                  </v-row>
-                </v-card>
-
-                <v-card style=" border-radius: 25pxo; margin-top: .5%; max-height: 450px;">
-
-
-
-                  <v-row>
-                    <v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
-                    <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                      class="text-truncate">10$</v-col>
-                    <v-col cols="2" class="text-truncate">20-10-2025</v-col>
-                    <v-col cols="3" class="text-truncate"
-                      style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
-
-
-
-                    <v-col cols="5" class="text-truncate">Good Job</v-col>
-                  </v-row>
-
-
-
-                </v-card>
-
-              </template>
-            </v-dialog>
-
 
+                  </v-card>
 
+                </template>
+              </v-dialog>
+            </v-row>
           </v-container>
-
-
-
-
-
-
-
         </v-col>
 
-
-
-
-
         <!-- center menu -->
 
         <v-col cols="7" class="mx-0">
 
 
-          <v-container>
+          <v-container style="min-width: 800px ;">
 
             <v-col>
               <v-img src="../../../images/guillaume.png" class="image-profile elevation-4"
@@ -286,9 +280,9 @@
 
 
           <v-card class="flow-menu m-0"
-            style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
+            style="background-color: #f4f4f4; max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
 
-            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
+            <div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
               <v-col>
                 <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
                   PODCAST #01</h1>
@@ -376,9 +370,9 @@
           </v-card>
 
           <v-card class="flow-menu m-0"
-            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
+            style="max-width: 1200px; min-width: 675px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%; ">
 
-            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
+            <div class="card-header" style="background-color: #f4f4f4"> <!-- Div pour l'en-tête de la carte -->
               <v-col>
                 <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
                   MA MISSION</h1>
@@ -471,7 +465,7 @@
 
           <!-- tips menu -->
           <v-card
-            style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px;  position: sticky; top: 0;">
+            style="margin-left: 15%; background-color: #f4f4f4; min-width: 300px; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px;  position: sticky; top: 0;">
 
             <v-container class="text-center d-flex align-center justify-center"
               style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index cde8dff..61b13c6 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -1,12 +1,15 @@
 <template>
-  <main style="background-color:#F4F4F4 ;">
+  <div style="background-color: #F4F4F4;">
+
     <!--PC -->
-    <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
+    <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
+
+      <!--Logo & bouttons -->
       <v-container class="d-flex justify-center align-center">
         <div style="margin-left: 20%;">
           <v-row>
 
-            <img style=" max-width: 60%;" src="../../../images/hutopy.png">
+            <img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
             <RouterLink :to="{ name: 'login' }">
               <v-btn size="large"
                 style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
@@ -23,268 +26,249 @@
             </RouterLink>
 
           </v-row>
+
+          <v-row>
+
+          </v-row>
         </div>
       </v-container>
 
-
-
-
-
-
-
       <div>
-        <v-container style="margin: 0;">
-          <v-row>
+        <v-container style="margin: 0; padding: 0;">
+          <v-row style="justify-content: center;">
             <img src="../../../images/homepage/bannierehomepage.png"
-              style="max-width: 1600px; width: auto; max-height: 30%; object-fit: cover; border-radius: 20px; ">
+              style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
           </v-row>
         </v-container>
       </div>
 
 
-
-
-
-
-
-
-      <!-- Colonnes -->
+      <!-- Colonnes Créer Partager Inspirer-->
       <v-container>
         <v-row>
+          <!-- vide de gauche -->
           <v-col cols="1" class="ml-4 ml-sm-0">
-            <!-- vide de gauche -->
           </v-col>
-
+          <!-- Colonne Centre -->
           <v-col cols="9" style="margin-left: 4%;">
 
-
-
             <!-- Créer Profiter Inspirer  -->
 
             <div class="d-flex justify-center align-center">
               <div>
                 <div style="margin-top: 40px;">
-                  <v-container class="d-flex ">
-
+                  <v-container class="d-flex justify-center align-center" style="width: 128vh;">
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card style="border-radius: 20px;" class=" mx-auto" max-width="600" v-bind="props">
+                      <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
+                        v-bind="props">
                         <v-img src="../../../images/homepage/creer.png"
-                          style="border-radius: 20px; min-width: 500px;"></v-img>
+                          style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="600" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
                               <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                 CRÉER</h3>
-                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
-                                Hutopy,
-                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli
-                                de possibilités
-                                infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
+                              <p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
+                                Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
+                                rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
+                              </p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
+
+
                     </v-hover>
 
-                    <div style="margin-left: 50px;"></div>
+                    <div style="margin-left: 5vw;"></div>
 
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card style="border-radius: 20px;" class="mx-auto" max-width="600" v-bind="props">
+                      <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
+                        v-bind="props">
                         <v-img src="../../../images/homepage/partager.png"
-                          style="border-radius: 20px; min-width: 500px;"></v-img>
+                          style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
-                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
+                            <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
+                              <h3 class="white--text"
+                                style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
                                 PROFITER</h3>
-                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Plongez dans l'univers Hutopy
-                                et découvrez un
-                                espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
-                                interactions authentiques
-                                et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre
-                                quotidien.</p>
+                              <p class="text-justify pa-4" style="font-size: 1.2em;">
+                                Plongez dans l'univers Hutopy et
+                                découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
+                                interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens
+                                et enrichir votre quotidien.</p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
                     </v-hover>
 
-                    <div style="margin-left: 50px;"> </div>
-
-
+                    <div style="margin-left: 5vw;"></div>
 
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card style="border-radius: 20px;" class="mx-auto" max-width="500" v-bind="props">
+                      <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
+                        v-bind="props">
                         <v-img src="../../../images/homepage/inspirer.png"
-                          style="border-radius: 20px; min-width: 500px;"></v-img>
+                          style="border-radius: 20px; width: 80vw;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="500px" v-bind="props" color="#a30e79">
-                              <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
+                            <v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
+                              <h3 class="white--text"
+                                style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
                                 INSPIRER</h3>
-                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
-                                d'inspiration sur Hutopy, en
-                                partageant votre vision, votre talent et vos histoires. Influencez positivement la
-                                communauté, éveillez
-                                la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle
-                                vertueux de créativité et
-                                d'inspiration.</p>
+                              <p class="text-justify pa-4" style="font-size: 1.2em;">
+                                Devenez une source d'inspiration
+                                sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
+                                positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
+                                leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
                     </v-hover>
-
                   </v-container>
                 </div>
               </div>
             </div>
 
 
-            <!-- Description D'hutopy -->
-            <v-container style=" margin-left:0% ; margin-top: 4%; max-width: 1700px;">
-              <v-row>
-                <v-col cols="6">
-                  <v-col style="margin-left: 5%;" cols="11" class="d-flex justify-center align-center">
-                    <v-img style="max-width: 750px;" src="../../../images/homepage/votrehutopy.png"></v-img>
-                  </v-col>
-                  <v-col cols="12" md="10" offset-md="1">
-
-
-                    <p class="text-center text-justify"
-                      style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; max-width: 900px;">
-                      Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
-                      cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
-                      écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
-                      mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
-                      communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
-                      la créativité.
-                    </p>
-
-                    <p class="text-center text-justify"
-                      style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; max-width: 902px;">
-                      Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
-                      conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
-                      réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
-                      autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
-                      prendre vie.
-                    </p>
-
-                    <v-col cols="12" class="d-flex justify-center align-center">
-                      <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
-                        <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)"
-                          outlined elevation="0">
-                          Inscription
-                        </v-btn>
-                      </RouterLink>
-                    </v-col>
 
 
 
 
-                  </v-col>
 
-
-
-                </v-col>
-
-                <!-- Colonne de droite -->
-                <v-col cols="3">
-                  <v-img src="../../../images/homepage/grinding.png"
-                    style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
-                  <v-img src="../../../images/homepage/girlarmy.png"
-                    style="border-radius: 30px; min-width: 344px;"></v-img>
-                </v-col>
-
-                <v-col cols="3" style>
-                  <v-img src="../../../images/homepage/microphone.png"
-                    style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
-                  <v-img src="../../../images/homepage/girlvr.png"
-                    style="border-radius: 30px; min-width: 344px; max-height: 350;"></v-img>
-                </v-col>
-
-
-              </v-row>
-            </v-container>
-
-
-            <!-- Fin Description D'hutopy -->
-
-
-
-            <!-- ILS SONT SUR HUTOPY -->
-            <v-container>
-              <v-card-text>
-                <h1 style="text-align: center;  margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
-                  Ils sont sur Hutopy.</h1>
-
-
-                <v-container style="margin-top: 25px; margin-bottom: -6%;">
-
-
-                  <v-row justify="center" class="profile-images">
-
-                    <v-col>
-                      <router-link :to="{ name: 'creatorfolio' }">
-                        <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-
-                      </router-link>
-                      <RouterLink :to="{ name: 'creatorfolio' }">
-                        <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
-                          color="rgb(107, 0, 101)" outlined elevation="0">
-                          Inscription
-                        </v-btn>
-                      </RouterLink>
-
-                    </v-col>
-
-                    <v-col>
-                      <router-link :to="{ name: 'creatorfolio' }">
-                        <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-
-                      </router-link>
-                      <RouterLink :to="{ name: 'creatorfolio' }">
-                        <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
-                          color="rgb(107, 0, 101)" outlined elevation="0">
-                          Inscription
-                        </v-btn>
-                      </RouterLink>
-
-                    </v-col>
-
-
-                    <v-col>
-                      <router-link :to="{ name: 'creatorfolio' }">
-                        <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
-
-                      </router-link>
-                      <RouterLink :to="{ name: 'creatorfolio' }">
-                        <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
-                          color="rgb(107, 0, 101)" outlined elevation="0">
-                          Inscription
-                        </v-btn>
-                      </RouterLink>
-
-                    </v-col>
-
-
-                  </v-row>
-
-
-                </v-container>
-              </v-card-text>
-            </v-container>
           </v-col>
-
-
           <!-- vide de droite -->
           <v-col cols="2" class="mr-4 mr-sm-0">
           </v-col>
         </v-row>
       </v-container>
+
+      <!-- Description D'hutopy -->
+
+      <v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
+        <v-row class="justify-center">
+          <v-col cols="6">
+            <v-col cols="11" class="d-flex justify-center align-center">
+              <v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
+            </v-col>
+            <v-col cols="auto" md="10">
+              <p class="text-center text-justify votre_hutopy_fontsize"
+                style="margin-top: 3%; margin-bottom: 5%; max-width: 900px; ">
+                Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
+                cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
+                écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
+                mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
+                communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
+                la créativité.
+              </p>
+              <p class="text-center text-justify votre_hutopy_fontsize"
+                style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
+                Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
+                conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
+                réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
+                autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
+                prendre vie.
+              </p>
+              <v-col cols="auto" class="d-flex justify-center align-center">
+                <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
+                  <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
+                    elevation="0">
+                    Inscription
+                  </v-btn>
+                </RouterLink>
+              </v-col>
+            </v-col>
+          </v-col>
+
+          <!-- Colonne de droite -->
+          <v-col cols="3">
+            <v-img src="../../../images/homepage/grinding.png"
+              style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
+            <v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
+          </v-col>
+          <v-col cols="3" style>
+            <v-img src="../../../images/homepage/microphone.png"
+              style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
+            <v-img src="../../../images/homepage/girlvr.png"
+              style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <!-- ILS SONT SUR HUTOPY -->
+      <v-container style="max-width: 1500px;">
+        <v-card-text>
+          <h1 style="text-align: center;  margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
+            Ils sont sur Hutopy.</h1>
+
+
+          <v-container style="margin-top: 25px; margin-bottom: -6%; max-width:  1200px;">
+
+
+            <v-row justify="center" class="profile-images">
+
+              <v-col>
+                <router-link :to="{ name: 'creatorfolio' }">
+                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image  ">
+
+                </router-link>
+                <RouterLink :to="{ name: 'creatorfolio' }">
+                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+                    color="rgb(107, 0, 101)" outlined elevation="10">
+                    Inscription
+                  </v-btn>
+                </RouterLink>
+
+
+              </v-col>
+
+              <v-col>
+                <router-link :to="{ name: 'creatorfolio' }">
+                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+
+                </router-link>
+                <RouterLink :to="{ name: 'creatorfolio' }">
+                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+                    color="rgb(107, 0, 101)" outlined elevation="10">
+                    Inscription
+                  </v-btn>
+                </RouterLink>
+
+
+              </v-col>
+
+
+              <v-col>
+                <router-link :to="{ name: 'creatorfolio' }">
+                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+
+                </router-link>
+                <RouterLink :to="{ name: 'creatorfolio' }">
+                  <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+                    color="rgb(107, 0, 101)" outlined elevation="10">
+                    Inscription
+                  </v-btn>
+                </RouterLink>
+
+
+              </v-col>
+
+
+            </v-row>
+
+
+          </v-container>
+        </v-card-text>
+      </v-container>
+
+
+      <!-- Fin Description D'hutopy -->
+
     </div>
 
     <!-- Mobile -->
@@ -365,18 +349,18 @@
               style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
+                  style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
 
               </router-link>
 
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: 120px;" />
+                  style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
               </router-link>
 
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
-                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: 120px;" />
+                  style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
               </router-link>
             </div>
 
@@ -409,7 +393,7 @@
       <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
     </v-list>
     <FooterLayout></FooterLayout>
-  </main>
+  </div>
 </template>
 
 <script async setup>
@@ -449,7 +433,7 @@ const goToLoginPage = () => {
 
 <style src="../../cssstyle/homeView.css"></style>
 
-<style>
+<style scoped>
 .phototexte {
   margin-left: 10px;
   margin-right: 10px;
@@ -514,7 +498,7 @@ const goToLoginPage = () => {
 .profile-image {
   width: auto;
   /* Largeur des images */
-  height: 300px;
+
   /* Hauteur des images */
   border-radius: 35px;
   /* Coins arrondis */
@@ -627,4 +611,50 @@ const goToLoginPage = () => {
 body {
   background-color: #F4F4F4;
 }
+
+.votre_hutopy_fontsize {
+  font-size: .2em;
+}
+
+@media (max-width: 475px) {
+  .votre_hutopy_fontsize {
+    font-size: 0.55em;
+  }
+}
+
+@media (min-width: 476px) and (max-width: 640px) {
+  .votre_hutopy_fontsize {
+    font-size: 0.9em;
+  }
+}
+
+@media (min-width: 641px) and (max-width: 768px) {
+  .votre_hutopy_fontsize {
+    font-size: 0.9em;
+  }
+}
+
+@media (min-width: 769px) and (max-width: 1024px) {
+  .votre_hutopy_fontsize {
+    font-size: 0.9em;
+  }
+}
+
+@media (min-width: 1025px) and (max-width: 1536px) {
+  .votre_hutopy_fontsize {
+    font-size: 0.9em;
+  }
+}
+
+@media (min-width: 1537px) and (max-width: 1920px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.1em;
+  }
+}
+
+@media (min-width: 1921px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.5em;
+  }
+}
 </style>
