Cleaning Homeview

src/views/main/HomeView.vue

@@ -1,7 +1,7 @@
 <template>
   <div style="background-color: #F4F4F4;">
     <DefaultLayout></DefaultLayout>
-    <!--PC -->
+    <!--PC ---------------------------------------------------------------------------------------------->
     <div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
 
       <!--Logo & bouttons -->
@@ -87,6 +87,7 @@
                   </v-card>
                 </v-hover>
               </v-col>
+
               <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
                   <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
@@ -111,7 +112,6 @@
               </v-col>
             </v-row>
           </v-col>
-
         </v-row>
       </v-container>
 
@@ -121,9 +121,12 @@
           <v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
             <v-row justify="center">
               <v-col cols="6" md="7" lg="6">
+
+                <!-- Subtitle : Votre Hutopy -->
                 <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
                   src="../../../images/homepage/votrehutopy.png"></v-img>
 
+                <!-- Your Hutopy text-->
                 <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
@@ -133,6 +136,7 @@
                   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
@@ -152,7 +156,7 @@
                 </v-col>
               </v-col>
 
-
+              <!-- 4 pictures  -->
               <v-col cols="6" md="5" lg="6">
                 <v-row justify="center" class="votre-hutopy-img">
                   <v-col cols="6" sm="12" md="12" lg="6">
@@ -177,18 +181,18 @@
       </v-container>
 
 
-
+      <!-- They are on the Hutopy section -->
       <v-row style="margin-top: 40px; margin-bottom: 60px;">
         <v-spacer></v-spacer>
 
+        <!-- Subtitle :Ils sont sur Hutopy -->
         <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
           <h1 style=" margin-bottom: 70px; text-align: center;  font-size: 4rem; font-weight: bold; color: #24393c">
             Ils sont sur Hutopy.</h1>
-
           <v-spacer></v-spacer>
           <v-col>
 
-
+            <!-- Account links  -->
             <v-row justify="center" class="profile-images">
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
@@ -205,33 +209,21 @@
                   <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
-
             </v-row>
           </v-col>
           <v-spacer></v-spacer>
-
         </v-col>
         <v-spacer></v-spacer>
       </v-row>
-
-
-
-
-
-
-
-
     </div>
 
-    <!-- Mobile -->
+    <!-- Mobile ---------------------------------------------------------------------------------------->
     <div class="md:hidden flex flex-col items-center justify-center">
       <div>
-
+        <!--Banner -->
         <v-img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"></v-img>
 
-
+        <!-- Créer -->
-
-
         <v-row style="margin-top: 30px;" align="center">
           <v-col cols="6">
             <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
@@ -246,7 +238,7 @@
           </v-col>
         </v-row>
 
-
+        <!--  Partager   -->
         <v-row align="center">
           <v-col>
             <p style=" margin: 20px; text-align: justify;" class="center-vertical">Devenez une source d'inspiration sur
@@ -262,6 +254,7 @@
           </v-col>
         </v-row>
 
+        <!--   Inspirer  -->
         <v-row align="center">
           <v-col cols="6">
             <v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
@@ -277,10 +270,11 @@
           </v-col>
         </v-row>
 
-
+        <!--  Votre Hutopy : Title  -->
         <v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
           src="../../../images/homepage/votrehutopy.png"></v-img>
 
+        <!--  Votre Hutopy : Text  -->
         <v-row align="center">
           <v-col cols="11" style="margin: 4%;">
             <p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
@@ -300,6 +294,8 @@
             </p>
           </v-col>
         </v-row>
+
+        <!--  4 pictures  -->
         <v-row style="margin-left: 15px; margin-right: 15px;">
           <v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
             <v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/microphone.png"></v-img>
@@ -317,7 +313,7 @@
           </v-col>
         </v-row>
 
-
+        <!--  Inscription Btn  -->
         <v-container align="center">
           <RouterLink :to="{ name: 'contact' }">
             <v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
@@ -328,11 +324,11 @@
         </v-container>
 
 
+        <!-- They are on the Hutopy section -->
         <h1
           style="margin-top: 50px;  margin-bottom: 50px; text-align: center;  font-size: 3rem; font-weight: bold; color: #24393c">
           Ils sont sur Hutopy.</h1>
 
-        <v-spacer></v-spacer>
         <v-col>
           <v-row justify="center" class="profile-images">
             <v-col cols="8">
@@ -352,21 +348,15 @@
             </v-col>
           </v-row>
         </v-col>
-        <v-spacer></v-spacer>
-
-
-        <v-spacer></v-spacer>
-
-
       </div>
     </div>
 
+
+    <!-- Back-end tools -->
     <v-btn variant="outlined" @click="callBackend()">
       Get items
     </v-btn>
 
-
-
     <v-snackbar v-model="errorNoAccessSnackBar">
       Vous n'etes pas connecter !
       <template v-slot:actions>
@@ -396,10 +386,8 @@ import { useClient } from "@/plugins/api.js";
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
 
-
 const router = useRouter()
 const client = useClient();
-
 let itemList = ref([]);
 let errorNoAccessSnackBar = ref(false);
 
@@ -417,13 +405,8 @@ const goToLoginPage = () => {
   router.push('/login');
 }
 
-
 </script>
 
-<style src="../../cssstyle/index.css"></style>
-
-<style src="../../cssstyle/homeView.css"></style>
-
 <style scoped>
 .center-vertical {
   display: flex;
@@ -445,7 +428,6 @@ const goToLoginPage = () => {
 
 .container-spacer {
   margin-bottom: 50px;
-  /* Augmente l'espace entre les v-containers */
 }
 
 .profile-images {
@@ -473,7 +455,6 @@ const goToLoginPage = () => {
   width: 100%;
   height: 100%;
   background-color: rgba(163, 14, 121, 0.80);
-  /* Voile noir avec une opacité de 0.5 */
   display: flex;
   text-align: left;
   font-size: 1.5rem;
@@ -484,6 +465,7 @@ const goToLoginPage = () => {
 
 .banner-image {
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
+  margin-top: 60px;
 }
 
 .image-container:hover .overlay {
@@ -499,17 +481,14 @@ const goToLoginPage = () => {
 .custom-container {
   position: relative;
   max-width: 100vw;
-  /* Limiter la largeur de la v-container à la largeur de l'écran */
 }
 
 .v-card {
   max-width: calc(100% - 20px);
-  /* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
 }
 
 .v-card-imagecontainerpos {
   margin-top: 55px;
-  /* Déplace l'image vers le bas de 10 pixels */
   border-radius: 8px;
 }
 
@@ -651,11 +630,8 @@ body {
 
   .créer-profiter-inspirer-row {
     margin-top: -60px;
-
   }
 
-
-
   .banner-homepage {
     transform: scale(1.0)
   }
@@ -668,7 +644,6 @@ body {
   .votre-hutopy-img {
     margin-top: 65px;
   }
-
 }
 
 @media (min-width: 2561px) {
@@ -696,6 +671,5 @@ body {
   .votre-hutopy-img {
     margin-top: -10px;
   }
-
 }
 </style>