From 27b11f2b2327342855e46df9628b49c00677eb25 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Mon, 8 Apr 2024 23:57:36 -0400
Subject: [PATCH] Banner modification

---
 src/views/main/HomeView.vue | 258 ++++++++++++++++--------------------
 1 file changed, 117 insertions(+), 141 deletions(-)

diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index ac26e1c..d6bb4e6 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -6,149 +6,124 @@
 
       <!--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: 100px;"
-                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>
-
-
-        </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-->
-      <v-container>
-        <v-row>
-          <!-- vide de gauche -->
-          <v-col cols="1" class="ml-4 ml-sm-0">
+        <v-row justify="center" align="center">
+          <v-col></v-col>
+          <v-col cols="5">
+            <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
           </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>
+              <RouterLink :to="{ name: 'login' }">
+                <v-btn size="large" style="background-color: #F4F4F4;" light elevation="0">
+                  Connexion
+                </v-btn>
+              </RouterLink>
+              <RouterLink :to="{ name: 'contact' }">
+                <v-btn size="large" style="border-radius: 40px;" color="rgb(107, 0, 101)" outlined elevation="0">
+                  Inscription
+                </v-btn>
+              </RouterLink>
+            </v-row>
           </v-col>
         </v-row>
       </v-container>
 
+      <!--Header -->
+      <v-container>
+        <v-row>
+          <v-spacer></v-spacer>
+          <v-col cols="10" xs="12" sm="12" md="12" lg="12" xl="10" xxl="8">
+            <v-img class="profile-banner" src="../../../images/homepage/bannierehomepage.png"
+              style="border-radius: 20px;"></v-img>
+          </v-col>
+          <v-spacer></v-spacer>
+        </v-row>
+      </v-container>
+
+
+
+      <!-- Colonnes Créer Partager Inspirer-->
+     
+         
+
+
+          <!-- Créer Profiter Inspirer  -->
+          <v-row>
+            <v-spacer></v-spacer>
+            <v-col cols=8>
+              <v-row justify="center" align="center">
+                <v-col cols="12" sm="6" md="4">
+                  <v-hover v-slot="{ isHovering, props }">
+                    <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" 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>
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-hover v-slot="{ isHovering, props }">
+                    <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" 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;">
+                              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>
+                </v-col>
+                <v-col cols="12" sm="6" md="4">
+                  <v-hover v-slot="{ isHovering, props }">
+                    <v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto"         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;">
+                              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-col>
+              </v-row>
+            </v-col>
+            <v-spacer></v-spacer>
+          </v-row>     
+    
+
       <!-- Description D'hutopy -->
 
       <v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
@@ -277,7 +252,8 @@
       <div>
 
 
-        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
+        <img src="../../../images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
+          style="margin-top: -100px;">
 
         <div>
           <v-card-text>
@@ -397,13 +373,13 @@
     <FooterLayout></FooterLayout>
   </div>
 
-  s
+
 </template>
 
 <script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import {useClient} from "@/plugins/api.js";
+import { useClient } from "@/plugins/api.js";
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';