Merged PR 10: ContactView UI Updated

src/App.vue

@@ -1,8 +1,10 @@
 <template>
-  <RouterView>
+  <v-app>
+    <RouterView>
 
 
-  </RouterView>
+    </RouterView>
+  </v-app>
 </template>
 
 <script>

src/layouts/FooterLayout.vue

@@ -1,37 +1,56 @@
+<!--lg="8" md="10" sm="10" xs="10" -->
+
 <template>
-  <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;">
+  <v-container>
-    <v-container style="background-color: #f4f4f4">
+
-      <v-row justify="center" style="margin-top: 30px;">
+
-        <v-row cols="auto" class="d-flex justify-center align-center">
+    <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
-          <img src="../../../images/hutopy.png" style="height: 70px; margin-right: 2%;">
+      class="footer-align">
-          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img
+      <v-container style="background-color: #f4f4f4">
-              src="../../../images/facebookiconblackpink.png" alt="Description image 2"
+        <v-row justify="center" style="margin-top: 30px;">
-              style="width: 50px; height: 50px; margin-right: 40px; "></a>
+          <v-col cols="5" lg="5" md="5" sm="12" xs="7">
-          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instagramblackpink.png"
+            <v-row>
-              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px; "></a>
+              <v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
-          <router-link :to="{ name: 'home' }">
+            </v-row>
-            <img src="../../../images/xblackpink.png" alt="Description image 1"
+          </v-col>
-              style="width: 50px; height: 50px; margin-right: 40px; "></router-link>
         </v-row>
-      </v-row>
+      </v-container>
 
-    </v-container>
+      <v-container>
+        <v-row justify="center">
+          <v-col cols="auto">
+            <a href="https://www.facebook.com/profile.php?id=61556819217561">
+              <img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
+            </a>
+          </v-col>
+          <v-col cols="auto">
+            <a href="https://www.instagram.com/hutopy.inc/">
+              <img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
+            </a>
+          </v-col>
+          <v-col cols="auto">
+            <router-link :to="{ name: 'home' }">
+              <img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
+            </router-link>
+          </v-col>
+        </v-row>
+      </v-container>
 
-    <v-container class="text-center" style="flex-grow: 1;">
+      <v-container class="text-center" style="flex-grow: 1;">
-      <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
+        <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
-        {{ link }}
+          {{ link }}
-      </v-btn>
+        </v-btn>
-    </v-container>
+      </v-container>
 
-    <v-container class="text-black text-center">
+      <v-container class="text-black text-center ">
-      {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
+        {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
-    </v-container>
+      </v-container>
 
 
-    <v-container class="custom-footer">
-    </v-container>
 
-  </div>
+
+    </div>
+  </v-container>
 </template>
 
 
@@ -52,6 +71,18 @@ export default {
 </script>
 
 <style>
+.icons {
+  width: 50px;
+  height: auto;
+}
+
+.hutopy-footer-picture {
+  height: 70px;
+  margin-bottom: 3%;
+  min-height: 70px;
+  min-width: auto;
+}
+
 .custom-footer {
 
   padding: 10px;
@@ -102,4 +133,26 @@ footer a:not(:last-child) {
 .background {
   background-color: rgba(107, 0, 101, 1);
 }
+
+
+@media (min-width: 150px) and (max-width: 598px) {
+
+  .hutopy-footer-picture {
+
+
+    min-width: 200px;
+  }
+}
+
+@media (min-width: 599px) and (max-width: 999px) {}
+
+@media (min-width: 1000px) and (max-width: 1279px) {}
+
+@media (min-width: 1280px) and (max-width: 1600px) {}
+
+@media (min-width: 1600px) and (max-width: 1919px) {}
+
+@media (min-width: 1920px) and (max-width: 2559px) {}
+
+@media (min-width: 2559px) {}
 </style>

src/views/LoginView.vue

@@ -4,16 +4,15 @@
             style="background-color: #f4f4f4; margin-top: 3%;">
 
             <body style="background-color: #f4f4f4;">
-                <v-container style="background-color: #f4f4f4;">
+                <v-container style=" background-color: #f4f4f4;">
                     <v-row align="center" justify="center">
-                        <!-- Colonne de l'image -->
+                        <!-- Header -->
-                        <v-col cols="8" lg="8" style="align-items: center;">
+                        <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
-                            <img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
+                            <img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
-                                src="../../../images/loginpage/loginhutopy.png">
                         </v-col>
 
-                        <!-- Colonne du contenu -->
+                        <!-- Connexion-objects -->
-                        <v-col cols="3" lg="4" md="5" sm="6" xs="6">
+                        <v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
                             <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>
@@ -34,16 +33,16 @@
                             <v-card-actions>
                                 <div class="flex-grow-1"></div>
                                 <router-link :to="{ name: 'home' }">
-                                    <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
+                                    <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
                                 </router-link>
-                                <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
+                                <v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
                             </v-card-actions>
                             <div class="text-center">
-                                <h2 class="text-center display-3 h2-connexion">
+                                <h2 class="text-center display-3 h2pasinscrit">
                                     Pas encore
                                     inscrit?</h2>
                                 <router-link :to="{ name: 'contact' }">
-                                    <v-btn color="#6b0065"
+                                    <v-btn color="#6b0065" class="inscriptionbtn"
                                         style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
                                 </router-link>
                             </div>
@@ -58,11 +57,11 @@
 
         <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; "
+            <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
                 src="../../../images/loginpage/loginhutopy.png">
 
-            <h1 class="text-center">Connexion</h1>
+            <h1 class="h1-connexion">Connexion</h1>
-            <h2 class="text-center">Comment souhaitez-vous
+            <h2 class="h2-connexion">Comment souhaitez-vous
                 vous connecter à votre compte?</h2>
 
             <v-form style="max-width: 400px; width: 350px;">
@@ -79,11 +78,11 @@
                 <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">
+                <h2 class="h2pasinscrit">
                     Pas encore
                     inscrit?</h2>
                 <router-link :to="{ name: 'contact' }">
-                    <v-btn color="#6b0065"
+                    <v-btn color="#6b0065" class="inscriptionbtn"
                         style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
                 </router-link>
             </div>
@@ -111,6 +110,7 @@ let errorSnackBar = ref(false);
 
 const goHome = () => {
     router.push('/');
+
 }
 
 
@@ -126,7 +126,7 @@ async function login() {
 
 </script>
 
-<style>
+<style scoped>
 .h1-connexion {
     font-size: 0.55em;
 }
@@ -139,99 +139,273 @@ async function login() {
     margin-bottom: -10%;
 }
 
-.logincol {
-    cols: 3;
-}
 
 
-@media (max-width: 475px) {
+@media (min-width: 300px) {
     .h1-connexion {
-        font-size: 1em;
+        font-size: 2em;
-    }
+        margin-bottom: 5%;
-}
-
-@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;
+        font-size: 1.1em;
         margin-bottom: 5%;
+
+        text-align: center;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 6%;
+        font-size: 1.1em;
+    }
+
+    .inscriptionbtn {
+        transform: scale(.7);
+    }
+}
+
+@media (min-width: 450px) and (max-width: 670px) {
+    .h1-connexion {
+        font-size: 2em;
+        margin-bottom: 5%;
+    }
+
+    .h2-connexion {
+        font-size: 1.1em;
+        margin-bottom: 5%;
+
+        text-align: center;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 6%;
+        font-size: 1.1em;
+    }
+
+    .inscriptionbtn {
+        transform: scale(.7);
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+
+
+    }
+}
+
+@media (min-width: 641px) and (max-width: 770px) {
+    .h1-connexion {
+        font-size: 2.5em;
+    }
+
+    .h2-connexion {
+        font-size: 1.1em;
+        margin-bottom: 5%;
+    }
+
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.1em;
     }
 
     .headermarginleft {
         margin-left: 4%;
     }
+
+
+    .label-mail-password {
+        margin-bottom: -3%;
+        width: 425px;
+        margin-left: 6%;
+
+    }
+
+
+    .btnhome {
+
+        font-size: 1em;
+
+        justify-content: center;
+        transform: matrix(1, 0, 0, 1, -160, 0);
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+
+
+    }
+
+    .inscriptionbtn {
+        transform: scale(.8);
+    }
+
+
+
+
+
+
 }
 
-@media (min-width: 769px) and (max-width: 1024px) {
+@media (min-width: 769px) and (max-width: 1280px) {
-    .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: 1.2em;
+        margin-bottom: 5%;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.7em;
+    }
+
+    .label-mail-password {
+        margin-bottom: -3%;
+        width: 550px;
+        margin-left: 9%;
+
+    }
+
+
+    .headermarginleft {
+        margin-left: 4%;
+    }
+
+    .inscriptionbtn {
+        transform: scale(.8);
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+
+
+    }
+
+    .btnhome {
+        font-size: 1em;
+
+        justify-content: center;
+
+    }
+
+
+
+
+}
+
+@media (min-width: 1279px) and (max-width: 1920px) {
+    .h1-connexion {
+        font-size: 2em;
+        margin-top: 4%;
+        font-weight: 600;
     }
 
     .h2-connexion {
         font-size: 1em;
         margin-bottom: 5%;
+        font-weight: 500;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.3em;
+    }
+
+
+    .h2-pasinscrit {
+        margin-bottom: -10%;
+
     }
 
     .label-mail-password {
         margin-bottom: -10%;
+        margin-top: -4%;
+
     }
 
-    .headermarginleft {
+
-        margin-left: -10%;
+    .inscriptionbtn {
-        min-width: 700px;
+        transform: scale(.6);
+        margin-top: -5%;
     }
 
-}
-
-@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%;
     }
 
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+        margin-left: -5%;
+
+    }
+
+
+
+
+
+
 }
 
 @media (min-width: 1921px) {
+    .h1-connexion {
+        font-size: 4.2em;
+    }
+
+    .h2-connexion {
+        font-size: 1.3em;
+        margin-bottom: 5%;
+        margin-left: 6%;
+    }
+
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.7em;
+    }
+
+
+    .label-mail-password {
+        margin-left: 5%;
+        margin-bottom: 0%;
+        width: auto;
+    }
+
+    .insriptionbutton {
+        font-size: 1.2em;
+
+    }
+
+    .headermarginleft {
+        margin-left: 0%;
+
+    }
+
+    .connexion-container {
+        margin-left: -7%;
+
+    }
+
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+        margin-left: -10%;
+    }
+}
+
+@media (min-width: 2500px) and (max-width: 4000px) {
     .h1-connexion {
         font-size: 6.2em;
     }
@@ -241,8 +415,15 @@ async function login() {
         margin-bottom: 5%;
     }
 
+    .h2pasinscrit {
+        margin-bottom: 5%;
+        font-size: 1.7em;
+    }
+
     .label-mail-password {
         margin-bottom: 0%;
+        margin-left: 10%;
+        width: auto;
     }
 
     .insriptionbutton {
@@ -250,12 +431,25 @@ async function login() {
     }
 
     .headermarginleft {
-        margin-left: 0%;
+        margin-left: 1%;
 
     }
 
+    .inscriptionbtn {
+        transform: scale(1);
+    }
 
 
+    .connexion-container {
+        margin-left: -3%;
+    }
+
+    .login-picture {
+        width: auto;
+        border-radius: 30px;
+        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+        margin-left: -5%;
+    }
 
 
 }

src/views/main/ContactView.vue

@@ -1,203 +1,614 @@
 <template>
   <!--PC -->
+  <div class="hutopy-backgroud-color">
+    <div class="hidden-xs flex-col items-center page-margin">
+      <v-container>
+        <v-row class="text-center align-center row-between-logo-text home-row">
+          <v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
 
+          <v-col cols="auto">
+            <img class="hutopy-header-image" src="../../../images/hutopy.png">
+          </v-col>
 
-  <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
+          <v-col class="ml-0 text-left ">
-    <v-container class="d-flex justify-center align-center" sty>
+            <RouterLink :to="{ name: 'home' }">
-      <div style="margin-left: 20%; margin-bottom: 3%;">
+              <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0"> Accueil</v-btn>
+            </RouterLink>
+          </v-col>
+        </v-row>
+      </v-container>
+
+      <v-container class="row-between-logo-text">
         <v-row>
+          <v-spacer></v-spacer>
 
-          <img style=" max-width: 60%;" src="../../../images/hutopy.png">
+          <v-col xl="8" lg="11" md="12" sm="12" xs="12">
+            <v-row>
+              <v-col>
+                <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
+              </v-col>
+              <v-col class="row-joinus">
 
+                <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
+
+                <v-text-field label="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
+                <v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></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="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                    class="mt-4 send-btn" block>Envoyez </v-btn>
+                </RouterLink>
+
+              </v-col>
+            </v-row>
+
+            <v-row>
+              <v-container>
+                <p class="h3-text paragraph">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.
+
+                </p>
+                <p class="h3-text paragraph {">
+                  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.
+                </p>
+                <p class="h3-text h3-last-text paragraph {">
+                  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>
+            </v-row>
+          </v-col>
+
+          <v-spacer></v-spacer>
+        </v-row>
+      </v-container>
+    </div>
+
+    <div class="hidden-sm-and-up flex-col items-center justify-center">
+
+      <img class="hutopy-header-image" src="../../../images/hutopy.png">
+      <img class="contact-image" src="../../../images/contactpage/contactpicture.png">
+
+      <v-row>
+        <v-col cols="7">
+          <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
+        </v-col>
+
+        <v-col>
           <RouterLink :to="{ name: 'home' }">
-            <v-btn size="large"
+            <v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
-              style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
-              color="rgb(107, 0, 101)" outlined elevation="0">
               Accueil
             </v-btn>
           </RouterLink>
+        </v-col>
+      </v-row>
 
-        </v-row>
+      <v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
-      </div>
+      <v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
-    </v-container>
+      <v-textarea class="labelsize" style="color: rgb(107, 0, 101)"
-
+        label="Pourquoi voulez-vous participer au développement" placeholder="Écrivez votre message ici" rows="3"
-  </div>
+        auto-grow></v-textarea>
-
+      <v-textarea class="labelsize" 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"
-  <v-container>
+        auto-grow></v-textarea>
-    <v-row justify="center" align="center">
+      <RouterLink :to="{ name: 'home' }">
-      <v-col cols="auto">
+        <v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
-        <img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
+          class="mt-4 send-btn" block>
-          style="max-width: 400px; margin-top: 14%; height: auto; float:  right;">
+          Envoyez
-      </v-col>
+        </v-btn>
-      <v-col style="max-width: 700px;">
+      </RouterLink>
-        <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;">
-
-    <div class="md:hidden flex flex-col items-center justify-center">
-      <DefaultLayout></DefaultLayout>
-      <h1 class="h1-inscription-betacolor" style=" margin-bottom: 35px;">Hutopy</h1>
-
-
-
-      <div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
-        <img src="../../../images/contactpicturemobile.png" alt="Bannière">
-      </div>
-      <p class="text-justify pa-4" style="font-size: 1em;">
-        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 class="h3-text paragraph">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.
       </p>
 
-      <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
+      <p class="h3-text paragraph">
-      </div>
+        Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
-
+        d'élargir
-      <FormInscriptionBeta></FormInscriptionBeta>
+        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é
-      <v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
+        et
-        block>Envoyez</v-btn>
+        l'innovation.
-
+      </p>
-
 
+      <p class="h3-text h3-last-text paragraph">
+        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>
     </div>
-  </v-container>
 
-  <FooterLayout></FooterLayout>
+    <FooterLayout></FooterLayout>
+
+  </div>
 </template>
 
 
 <script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
 </script>
 
+
 <style scoped>
-.contactpicture {
+.hutopy-backgroud-color {
-  height: 800px;
+  background-color: #f4f4f4;
-  width: auto;
-
-  /* ajustez cette valeur selon votre besoin */
-  margin-bottom: 45px;
-  border-radius: 12px;
-  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
-  /* ombre avec 2px de décalage vertical, 4px de flou et couleur noire transparente */
-  z-index: 2;
-  /* Met l'image derrière */
 }
 
-.mallowbanner {
+@media (min-width: 150px) and (max-width: 598px) {
+  .contact-image {
 
-  top: 0;
+    width: auto;
-  left: 0;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
-  z-index: -2;
+    clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
-  /* Met l'image derrière */
+    margin-top: -40%;
-  margin-top: 5.5vw;
+    margin-bottom: -30%;
-  /* ajustez cette valeur selon votre besoin */
+  }
-  margin-bottom: 4.5vw;
+
-  margin-left: -1.0vw;
+  .hutopy-header-image {
-}
+
+    height: 70px;
+    margin-left: 5%;
+    margin-top: 5%;
+  }
+
+
+  .h2-Participez-au-développement {
+    font-size: 1.8rem;
+    margin-top: 3%;
+    margin-bottom: 6%;
+    margin-left: 5%;
+  }
+
+  .home-btn {
+    margin-left: 20%;
+    margin-top: 16%;
+    border-radius: 150px;
+  }
+
+  .paragraph {
+    font-size: 1.2rem;
+    text-align: justify;
+
+    margin-bottom: 10%;
+    margin-top: 3%;
+    margin-left: 3%;
+    margin-right: 3%;
+  }
+
+  .labelsize {
+    max-width: 95%;
+    margin-left: 3%;
+  }
 
-.center-column {
-  width: 70vw;
-  /* ajustez cette valeur selon votre besoin */
-  margin: auto;
-  /* centre le contenu horizontalement */
-}
 
-.h1-inscription-beta {
-  font-size: 25px;
-  /* Taille de la police de 20 pixels */
-  font-weight: bold;
-  /* Texte en gras */
-  text-align: center;
-  /* Centrer le texte */
-  margin-top: 20px;
-  margin-bottom: 5px;
-  color: #24393c;
 
 }
 
-.h1-inscription-betacolor {
-  font-size: 65px;
-  /* Taille de la police de 20 pixels */
-  font-weight: bold;
-  /* Texte en gras */
-  text-align: center;
-  /* Centrer le texte */
 
-  margin-bottom: 25px;
+@media (min-width: 599px) and (max-width: 749px) {
-  color: rgba(163, 14, 121, 0.85);
+
-  /* Couleur du texte (utilisez la couleur souhaitée) */
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    max-width: 100%;
+    margin-top: 4%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 70%;
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 2rem;
+    margin-top: -3%;
+    margin-bottom: 6%;
+  }
+
+
+  .paragraph {
+    font-size: 1.3rem;
+    text-align: justify;
+
+    margin-bottom: 4%;
+    margin-top: 3%;
+  }
+
+
+
 }
 
-.para-inscription {
+
-  margin-bottom: 20px;
+@media (min-width: 750px) and (max-width: 999px) {
-  text-align: justify;
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    max-width: 100%;
+    margin-top: 4%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 74%;
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 2rem;
+    margin-top: -3%;
+    margin-bottom: 6%;
+  }
+
+
+  .paragraph {
+    font-size: 1.3rem;
+    text-align: justify;
+
+    margin-bottom: 4%;
+    margin-top: 3%;
+  }
+
+
+
+}
+
+@media (min-width: 1000px) and (max-width: 1279px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 120px;
+    margin-left: -0%;
+  }
+
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 22%;
+    margin-top: 37%;
+
+
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 3%;
+    margin-bottom: 6%;
+  }
+
+
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+
+  }
+
+
+  .row-joinus {
+    margin-right: -4%;
+    margin-left: -1%;
+  }
+
+  .paragraph {
+    font-size: 1.5rem;
+    text-align: justify;
+    margin-right: -4%;
+    margin-bottom: 4%;
+    margin-top: 3%;
+  }
+
+
+
+}
+
+
+@media (min-width: 1280px) and (max-width: 1600px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 165px;
+    margin-left: -4%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 50%;
+    margin-top: 45%;
+
+
+  }
+
+
+
+
+  .row-between-logo-text {
+    margin-top: 2%;
+
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    margin-top: 0%;
+    margin-left: -13%
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .row-joinus {
+    margin-right: -8%;
+    margin-left: -10%;
+  }
+
+  .paragraph {
+    margin-right: -6%;
+    margin-left: -7%;
+  }
+
+
+
+}
+
+
+@media (min-width: 1600px) and (max-width: 1919px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 165px;
+    margin-left: -5%;
+  }
+
+  .home-btn {
+    margin-top: 5%;
+
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-left: 75%;
+    margin-top: 40%;
+
+
+  }
+
+
+
+
+  .row-between-logo-text {
+    margin-top: 2%;
+
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    margin-top: 0%;
+    margin-left: -13%
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .row-joinus {
+    margin-right: -15%;
+    margin-left: -13%;
+  }
+
+  .paragraph {
+    margin-right: -16%;
+    margin-left: -9%;
+  }
+
+
+
+}
+
+@media (min-width: 1920px) and (max-width: 2559px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 160px;
+    margin-left: -8%;
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+  }
+
+
+  .home-btn {
+    margin-top: 5%;
+    margin-left: 47%;
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-bottom: -15%;
+
+  }
+
+  .send-btn {
+    margin-bottom: 4%;
+    margin-top: -1%;
+  }
+
+  .row-between-logo-text {
+    margin-top: 3%;
+
+
+  }
+
+  .home-row {
+    margin-left: 20%;
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .row-joinus {
+    margin-right: -18%;
+    margin-left: -10%;
+  }
+
+  .paragraph {
+    margin-right: -20%;
+  }
+
+  .page-margin {
+    margin-left: -9%;
+  }
+
+}
+
+@media (min-width: 2559px) {
+
+  .hutopy-header-image {
+    margin: 0 auto;
+    height: 180px;
+    margin-left: 7%;
+  }
+
+  .contact-image {
+    border-radius: 25px;
+    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
+    margin-left: 20%;
+  }
+
+
+  .home-btn {
+    margin-top: 5%;
+    margin-left: 33%;
+    border-radius: 30px;
+    width: 180px;
+    min-width: 175px;
+    margin-bottom: -15%;
+
+  }
+
+  .send-btn {
+    margin-bottom: 4%;
+    margin-top: -1%;
+  }
+
+  .row-between-logo-text {
+    margin-top: 3%;
+
+
+  }
+
+  .home-row {
+    margin-left: 20%;
+
+  }
+
+  .h2-Participez-au-développement {
+    font-size: 3rem;
+    margin-top: 15%;
+    margin-bottom: 6%;
+  }
+
+  .h3-text {
+    font-size: 1.3rem;
+    margin-top: 2%;
+    text-align: justify;
+  }
+
+  .h3-last-text {
+    margin-bottom: 5%;
+  }
+
+  .paragraph {
+    margin-left: 10%;
+  }
+
+  .page-margin {
+    margin-left: -5.5%;
+  }
 }
 </style>

src/views/main/HomeView.vue

@@ -1,399 +1,408 @@
 <template>
-  <div style="background-color: #F4F4F4;">
+  <v-app style="background-color: #F4F4F4;">
-
-    <!--PC -->
-    <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: 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;"
-                light elevation="0">
-                Connexion
-              </v-btn>
-            </RouterLink>
-            <RouterLink :to="{ name: 'contact' }">
-              <v-btn size="large"
-                style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
-                color="rgb(107, 0, 101)" outlined elevation="0">
-                Inscription
-              </v-btn>
-            </RouterLink>
-
-          </v-row>
-
-          <v-row>
-
-          </v-row>
-        </div>
-      </v-container>
-
-      <div>
-        <v-container style="margin: 0; padding: 0;">
-          <v-row style="justify-content: center;">
-            <img src="../../../images/homepage/bannierehomepage.png"
-              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 Créer Partager Inspirer-->
+    <div style="background-color: #F4F4F4;">
-      <v-container>
-        <v-row>
-          <!-- vide de gauche -->
-          <v-col cols="1" class="ml-4 ml-sm-0">
-          </v-col>
-          <!-- Colonne Centre -->
-          <v-col cols="9" style="margin-left: 4%;">
 
-            <!-- Créer Profiter Inspirer  -->
+      <!--PC -->
+      <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
 
-            <div class="d-flex justify-center align-center">
+        <!--Logo & bouttons -->
-              <div>
+        <v-container class="d-flex justify-center align-center">
-                <div style="margin-top: 40px;">
+          <div style="margin-left: 20%;">
-                  <v-container class="d-flex justify-center align-center" style="width: 128vh;">
+            <v-row>
-                    <v-hover v-slot="{ isHovering, 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="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">
-                              <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>
-                            </v-card>
-                          </v-container>
-                        </v-overlay>
-                      </v-card>
-
-
-                    </v-hover>
-
-                    <div style="margin-left: 5vw;"></div>
-
-                    <v-hover v-slot="{ isHovering, 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="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">
-                              <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>
-                            </v-card>
-                          </v-container>
-                        </v-overlay>
-                      </v-card>
-                    </v-hover>
-
-                    <div style="margin-left: 5vw;"></div>
-
-                    <v-hover v-slot="{ isHovering, 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; 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">
-                              <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>
-                            </v-card>
-                          </v-container>
-                        </v-overlay>
-                      </v-card>
-                    </v-hover>
-                  </v-container>
-                </div>
-              </div>
-            </div>
-
-
-
-
-
-
-
-          </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>
 
+              <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;"
+                  light elevation="0">
+                  Connexion
+                </v-btn>
+              </RouterLink>
+              <RouterLink :to="{ name: 'contact' }">
+                <v-btn size="large"
+                  style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
+                  color="rgb(107, 0, 101)" outlined elevation="0">
+                  Inscription
+                </v-btn>
+              </RouterLink>
 
             </v-row>
 
 
-          </v-container>
+          </div>
-        </v-card-text>
+        </v-container>
-      </v-container>
-
-
-      <!-- Fin Description D'hutopy -->
-
-    </div>
-
-    <!-- Mobile -->
-    <div class="md:hidden flex flex-col items-center justify-center">
-      <div>
-
-        <DefaultLayout></DefaultLayout>
-
-        <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
 
         <div>
-          <v-card-text>
+          <v-container style="margin: 0; padding: 0;">
-            <div>
+            <v-row style="justify-content: center;">
-              <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
+              <img src="../../../images/homepage/bannierehomepage.png"
-              <p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
+                style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
-                la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
+            </v-row>
-                exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
+          </v-container>
-                par son engagement envers une expérience numérique enrichissante, offrant une interface
-                intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
-                Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
-                humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
-                variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
-                prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
-                l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
-                vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
-                notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
-                contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
-            </div>
-
-            <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
-            <router-link :to="{ name: 'contact' }">
-              <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
-                CONNECTEZ-VOUS
-              </v-btn>
-            </router-link>
-
-          </v-card-text>
         </div>
 
-        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
-          <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
-          <p class="text-justify pa-4" style="font-size: 1em;">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-container>
-
-        <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
-          <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
-          <p class="text-justify pa-4" style="font-size: 1em;">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-container>
-
-
-        <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
-          <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
-          <p class="text-justify pa-4" style="font-size: 1em;">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-container>
 
+        <!-- Colonnes Créer Partager Inspirer-->
         <v-container>
+          <v-row>
+            <!-- vide de gauche -->
+            <v-col cols="1" class="ml-4 ml-sm-0">
+            </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 justify-center align-center" style="width: 128vh;">
+                      <v-hover v-slot="{ isHovering, 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="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">
+                                <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>
+                              </v-card>
+                            </v-container>
+                          </v-overlay>
+                        </v-card>
+
+
+                      </v-hover>
+
+                      <div style="margin-left: 5vw;"></div>
+
+                      <v-hover v-slot="{ isHovering, 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="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">
+                                <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>
+                              </v-card>
+                            </v-container>
+                          </v-overlay>
+                        </v-card>
+                      </v-hover>
+
+                      <div style="margin-left: 5vw;"></div>
+
+                      <v-hover v-slot="{ isHovering, 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; 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">
+                                <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>
+                              </v-card>
+                            </v-container>
+                          </v-overlay>
+                        </v-card>
+                      </v-hover>
+                    </v-container>
+                  </div>
+                </div>
+              </div>
+
+
+
+
+
+
+
+            </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>
-            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
+            <h1 style="text-align: center;  margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
-            </div>
+              Ils sont sur Hutopy.</h1>
-            <h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
-            </h1>
-            <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
-            </div>
-
-            <div class="d-flex justify-content-center"
-              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: 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: 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: auto;" />
-              </router-link>
-            </div>
 
 
+            <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 -->
+      <div class="md:hidden flex flex-col items-center justify-center">
+        <div>
+
+          <DefaultLayout></DefaultLayout>
+
+          <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
+
+          <div>
+            <v-card-text>
+              <div>
+                <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
+                <p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
+                  la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
+                  exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
+                  par son engagement envers une expérience numérique enrichissante, offrant une interface
+                  intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
+                  Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
+                  humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
+                  variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
+                  prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
+                  l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
+                  vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
+                  notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
+                  contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
+              </div>
+
+              <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
+              <router-link :to="{ name: 'contact' }">
+                <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
+                  CONNECTEZ-VOUS
+                </v-btn>
+              </router-link>
+
+            </v-card-text>
+          </div>
+
+          <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+            <v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
+            <p class="text-justify pa-4" style="font-size: 1em;">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-container>
+
+          <v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
+            <v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
+            <p class="text-justify pa-4" style="font-size: 1em;">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-container>
+
+
+          <v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
+            <v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
+            <p class="text-justify pa-4" style="font-size: 1em;">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-container>
+
+          <v-container>
+            <v-card-text>
+              <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
+              </div>
+              <h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
+              </h1>
+              <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
+              </div>
+
+              <div class="d-flex justify-content-center"
+                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: 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: 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: auto;" />
+                </router-link>
+              </div>
+
+
+            </v-card-text>
+          </v-container>
+
+        </div>
+      </div>
+
+      <v-btn variant="outlined" @click="callBackend()">
+        Get items
+      </v-btn>
+
+
+
+      <v-snackbar v-model="errorNoAccessSnackBar">
+        Vous n'etes pas connecter !
+        <template v-slot:actions>
+          <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
+            Fermer
+          </v-btn>
+          <v-btn color="green" variant="text" @click="goToLoginPage()">
+            Se connecter
+          </v-btn>
+        </template>
+      </v-snackbar>
+
+      <v-list style="background-color: #F4F4F4;" lines="one">
+        <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
+      </v-list>
+      <FooterLayout></FooterLayout>
     </div>
 
-    <v-btn variant="outlined" @click="callBackend()">
+  </v-app>
-      Get items
-    </v-btn>
-
-
-
-    <v-snackbar v-model="errorNoAccessSnackBar">
-      Vous n'etes pas connecter !
-      <template v-slot:actions>
-        <v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
-          Fermer
-        </v-btn>
-        <v-btn color="green" variant="text" @click="goToLoginPage()">
-          Se connecter
-        </v-btn>
-      </template>
-    </v-snackbar>
-
-    <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
-    </v-list>
-    <FooterLayout></FooterLayout>
-  </div>
 </template>
 
 <script async setup>
@@ -644,6 +653,8 @@ body {
   .votre_hutopy_fontsize {
     font-size: 0.9em;
   }
+
+
 }
 
 @media (min-width: 1537px) and (max-width: 1920px) {