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 1/5] 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';
 

From 8e8b137dc1f99e3de1fd389a616cacf6aff71a5d Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 9 Apr 2024 23:33:46 -0400
Subject: [PATCH 2/5] =?UTF-8?q?Am=C3=A9lioration=20de=20la=20structure=20d?=
 =?UTF-8?q?e=20la=20homepage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 images/anonymelarge.png     | Bin 0 -> 6315 bytes
 src/views/main/HomeView.vue | 423 ++++++++++++++++++++++--------------
 2 files changed, 263 insertions(+), 160 deletions(-)
 create mode 100644 images/anonymelarge.png

diff --git a/images/anonymelarge.png b/images/anonymelarge.png
new file mode 100644
index 0000000000000000000000000000000000000000..b3f3071ceb80026984d79566e388d505b443027c
GIT binary patch
literal 6315
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

literal 0
HcmV?d00001

diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index 688b249..6e2894d 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -32,150 +32,157 @@
       <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"
+          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
+            <v-img class="profile-banner banner-homepage" 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">
-        <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>
+      <!-- Créer Profiter Inspirer  -->
+      <v-container>
+        <v-row class="d-flex justify-center creer-profiter-inspirer-row">
+          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
+            <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
+              <v-col cols="4" sm="4" md="4">
+                <v-hover v-slot="{ isHovering, props }">
+                  <v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto card-size" 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>
+              <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">
+                    <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="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">
+                    <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>
 
-          <!-- Colonne de droite -->
-          <v-col cols="3">
-            <v-img src="../../../images/homepage/grinding.png"
-              style="margin-bottom: 4%; border-radius: 30px; width: 80px;"></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: 250px; max-height: 350;"></v-img>
+        </v-row>
+      </v-container>
+
+      <!-- Votre Hutopy  -->
+      <v-container>
+        <v-row justify="center">
+
+          <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
+            <v-row justify="center">
+              <v-col cols="6" md="7" lg="6">
+                <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
+                  src="../../../images/homepage/votrehutopy.png"></v-img>
+
+                <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="12" class="text-center">
+                  <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
+                    <v-btn size="x-large" style="width: 300px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
+                      elevation="0">
+                      Inscription
+                    </v-btn>
+                  </RouterLink>
+                </v-col>
+
+              </v-col>
+
+
+              <v-col cols="6" md="5" lg="6">
+                <v-row justify="center">
+                  <v-col cols="6" sm="12" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
+                      class="hidden-md-and-down" hidden-and-down></v-img>
+
+                  </v-col>
+                  <v-col cols="6" sm="12" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
+
+                  </v-col>
+                  <v-col cols="6" sm="3" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
+                  </v-col>
+                  <v-col cols="6" sm="3" md="12" lg="6">
+                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlvr.png"
+                      class="hidden-md-and-down" hidden-and-down></v-img>
+                  </v-col>
+                </v-row>
+              </v-col>
+            </v-row>
           </v-col>
         </v-row>
       </v-container>
 
+
+
+
+
       <!-- ILS SONT SUR HUTOPY -->
       <v-container style="max-width: 1500px;">
         <v-card-text>
@@ -190,14 +197,11 @@
 
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image  ">
+                  <img src="../../../images/anonymelarge.png" 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>
 
 
@@ -209,10 +213,7 @@
 
                 </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>
 
 
@@ -221,14 +222,11 @@
 
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+                  <img src="../../../images/anonymelarge.png" 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>
 
 
@@ -368,7 +366,8 @@
     </v-snackbar>
 
     <v-list style="background-color: #F4F4F4;" lines="one">
-      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName" :subtitle="item.lastName"></v-list-item>
+      <v-list-item v-for=" item  in  itemList " :key="item" :title="item.firstName"
+        :subtitle="item.lastName"></v-list-item>
     </v-list>
     <FooterLayout></FooterLayout>
   </div>
@@ -594,45 +593,149 @@ body {
   font-size: .2em;
 }
 
-@media (max-width: 475px) {
+@media (max-width: 600px) {
   .votre_hutopy_fontsize {
     font-size: 0.55em;
   }
 }
 
-@media (min-width: 476px) and (max-width: 640px) {
+
+@media (min-width: 601px) and (max-width: 889px) {
   .votre_hutopy_fontsize {
     font-size: 0.9em;
   }
+
+
+  .créer-profiter-inspirer-row {
+    margin-left: -120px;
+    margin-top: -120px
+  }
+
+  .card-size {
+    transform: scale(.7);
+
+  }
+
+  .banner-homepage {
+    transform: scale(1.19)
+  }
+
+
+
 }
 
-@media (min-width: 641px) and (max-width: 768px) {
+
+@media (min-width: 890px) and (max-width: 960px) {
   .votre_hutopy_fontsize {
     font-size: 0.9em;
   }
-}
 
-@media (min-width: 769px) and (max-width: 1024px) {
-  .votre_hutopy_fontsize {
-    font-size: 0.9em;
+  .card-size {
+    transform: scale(.75);
+
   }
-}
 
-@media (min-width: 1025px) and (max-width: 1536px) {
-  .votre_hutopy_fontsize {
-    font-size: 0.9em;
+  .créer-profiter-inspirer-row {
+    margin-left: -80px;
+    margin-top: -130px
   }
+
+  .banner-homepage {
+    transform: scale(1.07)
+  }
+
+
+
 }
 
-@media (min-width: 1537px) and (max-width: 1920px) {
+@media (min-width: 961px) and (max-width: 1280px) {
   .votre_hutopy_fontsize {
     font-size: 1.1em;
   }
+
+  .banner-homepage {
+    transform: scale(1.06)
+  }
+
+  .card-size {
+    transform: scale(.90);
+
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -55px;
+    margin-top: -90px
+  }
+
+  .in-between-image {
+    margin-left: -100px;
+
+  }
+
+
 }
 
-@media (min-width: 1921px) {
+@media (min-width: 1281px) and (max-width: 1920px) {
   .votre_hutopy_fontsize {
-    font-size: 1.5em;
+    font-size: 1.1em;
   }
+
+  .card-size {
+    transform: scale(1);
+  }
+
+
+
+  .banner-homepage {
+    transform: scale(1.03)
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-left: -25px;
+    margin-top: -70px
+  }
+
+}
+
+@media (min-width: 1921px) and (max-width: 2560px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.3em;
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-top: -60px;
+
+  }
+
+
+
+  .banner-homepage {
+    transform: scale(1.0)
+  }
+
+}
+
+@media (min-width: 2561px) {
+  .votre_hutopy_fontsize {
+    font-size: 1.4em;
+
+
+  }
+
+  .créer-profiter-inspirer-row {
+    margin-top: -50px;
+
+  }
+
+
+  .card-size {
+    transform: scale(.98);
+  }
+
+
+  .banner-homepage {
+    transform: scale(.98)
+  }
+
 }
 </style>

From 81cce3e4968c301e6486c0f31969ae3719748cc3 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 14 Apr 2024 00:46:40 -0400
Subject: [PATCH 3/5] CreatorFolio - Modal paiement, Homeview positionnement
 contenu

---
 src/views/main/CreatorFolio.vue | 125 ++++++++++++++--
 src/views/main/HomeView.vue     | 256 +++++++++++---------------------
 src/views/main/YourProfile.vue  |  18 +--
 3 files changed, 202 insertions(+), 197 deletions(-)

diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index 0925180..ddc7b25 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -124,8 +124,8 @@
                     <v-list-item>
                       <v-dialog transition="dialog-top-transition" width="auto">
                         <template v-slot:activator="{ props: activatorProps }">
-                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background" elevation="0"
-                                 outlined="false">
+                          <v-btn v-bind="activatorProps" text class="d-flex align-start align-center main-background"
+                            elevation="0" outlined="false">
                             <v-icon left class="mr-4">mdi-wallet</v-icon>
                             <p @click="isActive.value = false">Bourse</p>
                           </v-btn>
@@ -137,7 +137,7 @@
                             <div class="text-center" style=" margin-top: 2%; margin-bottom: 2%;">
                               <v-icon left size="48">mdi-wallet</v-icon>
                               <v-toolbar title="PORTEFEUILLE"
-                                         style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
+                                style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
                             </div>
                             <v-card-text class="text-h1 pa-12">
                               <v-row>
@@ -182,12 +182,12 @@
                           <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
                             <v-row>
                               <v-col style="margin-right: -2%;" cols="1"
-                                     class="text-truncate text-center font-weight-bold">#T</v-col>
+                                class="text-truncate text-center font-weight-bold">#T</v-col>
                               <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                                     class="text-truncate text-center font-weight-bold">$</v-col>
+                                class="text-truncate text-center font-weight-bold">$</v-col>
                               <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
                               <v-col cols="3" class="text-truncate text-center font-weight-bold"
-                                     style="margin-right: 2%; background-color: #fbccee">Name</v-col>
+                                style="margin-right: 2%; background-color: #fbccee">Name</v-col>
                               <v-col cols="5" class="text-truncate text-center font-weight-bold">message</v-col>
                             </v-row>
                           </v-card>
@@ -196,10 +196,10 @@
                             <v-row>
                               <v-col style="margin-right: -2%;" cols="1" class="text-truncate">1</v-col>
                               <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
-                                     class="text-truncate">10$</v-col>
+                                class="text-truncate">10$</v-col>
                               <v-col cols="2" class="text-truncate">20-10-2025</v-col>
                               <v-col cols="3" class="text-truncate"
-                                     style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
+                                style="margin-right: 2%;  background-color: #fbccee">Pascal</v-col>
                               <v-col cols="5" class="text-truncate">Good Job</v-col>
                             </v-row>
 
@@ -453,14 +453,111 @@
 
 
     <FooterLayout></FooterLayout>
+    <v-dialog v-model="accepted" max-width="500">
+      <template v-slot:activator="{ on }">
+        <div class="text-center pa-4">
+          <v-btn @click="accepted = true" v-on="on">
+            Approuve
+          </v-btn>
+        </div>
+      </template>
+
+      <!-- Your custom dialog content -->
+      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="12" class="text-center">
+              <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center">
+            <v-col cols="12">
+              <v-card-text style="font-weight: 600;">
+                Paiement complété
+              </v-card-text>
+              <v-card-text style="margin-top: -24px;">
+                Transaction : #
+              </v-card-text>
+
+              <v-card-text style="font-size: 1.2rem; text-align: center;">
+                Merci de supporter
+              </v-card-text>
+              <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+                Guillaume Mousseau
+              </v-card-text>
+
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-card-actions class="justify-end">
+                <v-btn text @click="accepted = false">Ok</v-btn>
+              </v-card-actions>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+
+
+
+    </v-dialog>
+
+    <v-dialog v-model="decline" max-width="500">
+      <template v-slot:activator="{ on }">
+        <div class="text-center pa-4">
+          <v-btn @click="decline = true" v-on="on">
+            Decline
+          </v-btn>
+        </div>
+      </template>
+
+      <!-- Your custom dialog content -->
+      <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+        <v-container>
+          <v-row justify="center">
+            <v-col cols="12" class="text-center">
+              <v-icon color="black" size="250">mdi-cancel</v-icon>
+            </v-col>
+          </v-row>
+
+          <v-row justify="center">
+            <v-col cols="12">
+              <v-card-text style="font-size: 2rem; font-weight: 600; text-align: center;">
+                Paiement refusé
+              </v-card-text>
+
+
+              <v-card-text style="font-size: 1rem; text-align: center;">
+                Une erreur s'est produit
+              </v-card-text>
+            </v-col>
+          </v-row>
+
+          <v-row>
+            <v-col cols="12">
+              <v-card-actions class="justify-end">
+                <v-btn text @click="decline = false">Ok</v-btn>
+              </v-card-actions>
+            </v-col>
+          </v-row>
+        </v-container>
+      </v-card>
+
+
+
+    </v-dialog>
   </div>
 </template>
 
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
 import StripePayment from '../StripePayment.vue';
-
+const accepted = ref(false);
+const decline = ref(false);
 
 let imageSrc = '../../../images/guillaimeaime3x.png';
 let profilePicture = '../../../images/guillaume.png';
@@ -469,9 +566,9 @@ let name = 'Guillaume Mousseau'
 let title = 'Créateur de contenus'
 let drawerbottom = false
 let navigationItems = [
-    { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-    { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
-    { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
+  { icon: 'mdi-home', text: 'Accueil', link: 'home' },
+  { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
+  { icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
 ];
 let tools = [
   { icon: 'mdi-wallet', text: 'Bourse', link: '/portefeuille' },
@@ -479,8 +576,8 @@ let tools = [
 
 
 let items = [
-  {icon: "icon", text: "text"},
-  {icon: "icon2", text: "text2"},
+  { icon: "icon", text: "text" },
+  { icon: "icon2", text: "text2" },
 ]
 
 </script>
diff --git a/src/views/main/HomeView.vue b/src/views/main/HomeView.vue
index 6e2894d..06e910f 100644
--- a/src/views/main/HomeView.vue
+++ b/src/views/main/HomeView.vue
@@ -5,10 +5,10 @@
     <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">
+      <v-container class="d-flex justify-center align-center container-spacer header-container">
         <v-row justify="center" align="center">
           <v-col></v-col>
-          <v-col cols="5">
+          <v-col cols="5" xl="4" xxl="4">
             <v-img class="profile-banner" src="../../../images/hutopy.png"></v-img>
           </v-col>
           <v-col>
@@ -29,10 +29,10 @@
       </v-container>
 
       <!--Header -->
-      <v-container>
+      <v-container class="container-spacer">
         <v-row>
           <v-spacer></v-spacer>
-          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
+          <v-col cols="7" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
             <v-img class="profile-banner banner-homepage" src="../../../images/homepage/bannierehomepage.png"
               style="border-radius: 20px;"></v-img>
           </v-col>
@@ -41,9 +41,9 @@
       </v-container>
 
       <!-- Créer Profiter Inspirer  -->
-      <v-container>
+      <v-container class="container-spacer">
         <v-row class="d-flex justify-center creer-profiter-inspirer-row">
-          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="7">
+          <v-col cols="10" xs="12" sm="10" md="12" lg="10" xl="7" xxl="6">
             <v-row justify="center" align="center" class="créer-profiter-inspirer-row">
               <v-col cols="4" sm="4" md="4">
                 <v-hover v-slot="{ isHovering, props }">
@@ -115,10 +115,9 @@
       </v-container>
 
       <!-- Votre Hutopy  -->
-      <v-container>
+      <v-container class="container-spacer">
         <v-row justify="center">
-
-          <v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="7" xxl="7">
+          <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">
                 <v-img cols="12" style="margin-top: -5%; min-width: 350px;"
@@ -150,27 +149,24 @@
                     </v-btn>
                   </RouterLink>
                 </v-col>
-
               </v-col>
 
 
               <v-col cols="6" md="5" lg="6">
-                <v-row justify="center">
+                <v-row justify="center" class="votre-hutopy-img">
                   <v-col cols="6" sm="12" md="12" lg="6">
                     <v-img style="border-radius: 30px;" src="../../../images/homepage/grinding.png"
                       class="hidden-md-and-down" hidden-and-down></v-img>
-
                   </v-col>
                   <v-col cols="6" sm="12" md="12" lg="6">
                     <v-img style="border-radius: 30px;" src="../../../images/homepage/microphone.png"></v-img>
-
                   </v-col>
-                  <v-col cols="6" sm="3" md="12" lg="6">
+                  <v-col cols="6" sm="12" md="6" lg="6">
                     <v-img style="border-radius: 30px;" src="../../../images/homepage/girlarmy.png"></v-img>
                   </v-col>
-                  <v-col cols="6" sm="3" md="12" lg="6">
-                    <v-img style="border-radius: 30px;" src="../../../images/homepage/girlvr.png"
-                      class="hidden-md-and-down" hidden-and-down></v-img>
+                  <v-col cols="6" sm="6" md="6" lg="6">
+                    <v-img style="border-radius: 30px;" class="d-none d-md-block"
+                      src="../../../images/homepage/girlvr.png"></v-img>
                   </v-col>
                 </v-row>
               </v-col>
@@ -181,67 +177,48 @@
 
 
 
+      <v-row style="margin-top: 40px; margin-bottom: 60px;">
+        <v-spacer></v-spacer>
 
-
-      <!-- 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">
+        <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-container style="margin-top: 25px; margin-bottom: -6%; max-width:  1200px;">
+          <v-spacer></v-spacer>
+          <v-col>
 
 
             <v-row justify="center" class="profile-images">
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
                   <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image  ">
-
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-
-                </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' }">
-
-                </RouterLink>
-
-
               </v-col>
-
-
               <v-col>
                 <router-link :to="{ name: 'creatorfolio' }">
                   <img src="../../../images/anonymelarge.png" alt="Profile Image" class="profile-image">
-
                 </router-link>
-                <RouterLink :to="{ name: 'creatorfolio' }">
-
-                </RouterLink>
-
-
               </v-col>
 
-
             </v-row>
+          </v-col>
+          <v-spacer></v-spacer>
+
+        </v-col>
+        <v-spacer></v-spacer>
+      </v-row>
+
+
+
 
 
-          </v-container>
-        </v-card-text>
-      </v-container>
 
 
-      <!-- Fin Description D'hutopy -->
 
     </div>
 
@@ -411,116 +388,37 @@ const goToLoginPage = () => {
 <style src="../../cssstyle/homeView.css"></style>
 
 <style scoped>
-.phototexte {
-  margin-left: 10px;
-  margin-right: 10px;
-
-}
-
-.layer1-background {
-  background-color: rgba(163, 14, 121, 0.03);
-  border-radius: 20px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
-
-}
-
 .layer1-backgroundmobile {
   background-color: rgba(163, 14, 121, 0.1);
   border-radius: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
 }
 
 .layer2-backgroundmobile {
-
   border-radius: 20px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
-
 }
 
-
-
-.layer2-background {
-  background-color: rgba(107, 0, 101, 0.02);
-  border-radius: 20px;
-}
-
-.v-container {
+.container-spacer {
   margin-bottom: 50px;
   /* Augmente l'espace entre les v-containers */
 }
 
-.h2ilssontsurutopy {
-  font-weight: bold;
-  font-size: 2rem;
-  margin-bottom: 100px;
-  /* Ajoute de l'espace en bas du titre */
-  margin-top: 25px;
-}
-
-.h2ilssontsurutopytitle {
-  color: rgba(107, 0, 101, 0.85);
-}
-
 .profile-images {
-  gap: 90px;
-  /* Espace entre les images */
-  margin-top: 50px;
-  /* Ajoute de l'espace en haut des images */
-
-
-
+  gap: 15px;
+  transform: scale(.92);
 }
 
 .profile-image {
   width: auto;
-  /* Largeur des images */
-
-  /* Hauteur des images */
   border-radius: 35px;
-  /* Coins arrondis */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
 }
 
-.image-wrapper {
-  display: flex;
-  justify-content: center;
-  margin-top: 30px;
-  margin-bottom: 30px;
-}
-
-.image-container {
-  position: relative;
-  width: 23vw;
-  /* Utilisation de 20% de la largeur de la vue */
-  margin: 5px 8px;
-}
-
 .image {
   width: 100%;
   height: auto;
   border-radius: 8px;
-
-}
-
-.v-card-text h2 {
-  margin-bottom: 20px;
-  /* Ajoute de l'espace en bas du titre h2 */
-  font-size: 2rem;
-  /* Taille du texte */
-  font-weight: bold;
-  /* Texte en gras */
-  color: rgba(163, 14, 121, 0.85);
-  /* Couleur du texte (utilisez la couleur souhaitée) */
-}
-
-.v-card-text p {
-  font-size: 1rem;
-  /* Taille du texte */
-}
-
-.textjustify {
-  text-align: justify;
 }
 
 .overlay {
@@ -535,17 +433,13 @@ const goToLoginPage = () => {
   display: flex;
   text-align: left;
   font-size: 1.5rem;
-
-
   align-items: center;
   opacity: 0;
   transition: opacity 0.3s ease-in-out;
 }
 
 .banner-image {
-
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-  /* Ombre douce */
 }
 
 .image-container:hover .overlay {
@@ -562,8 +456,6 @@ const goToLoginPage = () => {
   position: relative;
   max-width: 100vw;
   /* Limiter la largeur de la v-container à la largeur de l'écran */
-
-
 }
 
 .v-card {
@@ -577,21 +469,11 @@ const goToLoginPage = () => {
   border-radius: 8px;
 }
 
-.overlay p.image-text {
-  display: none;
-}
-
-.overlay:hover p.image-text {
-  display: block;
-}
-
 body {
   background-color: #F4F4F4;
 }
 
-.votre_hutopy_fontsize {
-  font-size: .2em;
-}
+
 
 @media (max-width: 600px) {
   .votre_hutopy_fontsize {
@@ -602,10 +484,9 @@ body {
 
 @media (min-width: 601px) and (max-width: 889px) {
   .votre_hutopy_fontsize {
-    font-size: 0.9em;
+    font-size: 1.06em;
   }
 
-
   .créer-profiter-inspirer-row {
     margin-left: -120px;
     margin-top: -120px
@@ -613,26 +494,34 @@ body {
 
   .card-size {
     transform: scale(.7);
-
   }
 
   .banner-homepage {
     transform: scale(1.19)
   }
 
+  .votre-hutopy-img {
+    margin-top: -30px;
+  }
 
-
+  .header-container {
+    margin-top: 30px;
+  }
 }
 
 
 @media (min-width: 890px) and (max-width: 960px) {
+
+  .header-container {
+    margin-top: 30px;
+  }
+
   .votre_hutopy_fontsize {
-    font-size: 0.9em;
+    font-size: 1.2em;
   }
 
   .card-size {
     transform: scale(.75);
-
   }
 
   .créer-profiter-inspirer-row {
@@ -644,10 +533,12 @@ body {
     transform: scale(1.07)
   }
 
-
-
+  .votre-hutopy-img {
+    margin-top: -40px;
+  }
 }
 
+
 @media (min-width: 961px) and (max-width: 1280px) {
   .votre_hutopy_fontsize {
     font-size: 1.1em;
@@ -659,7 +550,6 @@ body {
 
   .card-size {
     transform: scale(.90);
-
   }
 
   .créer-profiter-inspirer-row {
@@ -669,23 +559,28 @@ body {
 
   .in-between-image {
     margin-left: -100px;
-
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.72);
+  }
 
+  .votre-hutopy-img {
+    margin-top: -30px;
+  }
 }
 
+
 @media (min-width: 1281px) and (max-width: 1920px) {
   .votre_hutopy_fontsize {
-    font-size: 1.1em;
+    font-size: 1.2em;
   }
 
   .card-size {
     transform: scale(1);
   }
 
-
-
   .banner-homepage {
     transform: scale(1.03)
   }
@@ -695,11 +590,19 @@ body {
     margin-top: -70px
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.64);
+  }
+
+  .votre-hutopy-img {
+    margin-top: 65px;
+  }
 }
 
 @media (min-width: 1921px) and (max-width: 2560px) {
   .votre_hutopy_fontsize {
-    font-size: 1.3em;
+    font-size: 1.2em;
   }
 
   .créer-profiter-inspirer-row {
@@ -713,29 +616,42 @@ body {
     transform: scale(1.0)
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.90);
+  }
+
+  .votre-hutopy-img {
+    margin-top: 65px;
+  }
+
 }
 
 @media (min-width: 2561px) {
   .votre_hutopy_fontsize {
-    font-size: 1.4em;
-
-
+    font-size: 1.2em;
   }
 
   .créer-profiter-inspirer-row {
     margin-top: -50px;
-
   }
 
-
   .card-size {
     transform: scale(.98);
   }
 
-
   .banner-homepage {
     transform: scale(.98)
   }
 
+  .profile-images {
+    gap: 15px;
+    transform: scale(.978);
+  }
+
+  .votre-hutopy-img {
+    margin-top: -10px;
+  }
+
 }
 </style>
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index c57356e..b41365c 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,24 +1,16 @@
 <template>
   <DefaultLayout></DefaultLayout>
   <main class="top-aligned-column">
-
-
-    <div class="column">
-
-    </div>
-
     <div class="center-column column">
       <p>YourProfile</p>
     </div>
-
-    <div class="column">
-
-    </div>
   </main>
+
+ 
 </template>
-  
+
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+
+
 </script>
-  
- 
\ No newline at end of file

From 08fefa4d441c92b31b8db81e5232a833f2395a7a Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 14 Apr 2024 14:57:13 -0400
Subject: [PATCH 4/5] =?UTF-8?q?Cr=C3=A9ation=20de=20la=20fiche=20profile?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/main/YourProfile.vue | 110 ++++++++++++++++++++++++++++++---
 1 file changed, 103 insertions(+), 7 deletions(-)

diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index b41365c..88f1d9c 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,16 +1,112 @@
 <template>
-  <DefaultLayout></DefaultLayout>
-  <main class="top-aligned-column">
-    <div class="center-column column">
-      <p>YourProfile</p>
-    </div>
-  </main>
 
- 
+  <body style="background-color:#f4f4f4">
+    <DefaultLayout></DefaultLayout>
+
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;"></v-row>
+
+    <v-row justify="center">
+      <v-col cols="12">
+        <v-img class="profile-banner " max-height="375" :src="bannerImageUrl" cover
+          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
+      </v-col>
+    </v-row>
+    <v-row style="background-color: #6b0065; height: 100px; margin-top: -0px;" align="center">
+      <v-col cols="12" class="text-right">
+        <v-btn style="margin-right: 3%" @click="editBannerImage"> <v-icon>mdi-pencil</v-icon></v-btn>
+      </v-col>
+    </v-row>
+
+    <v-row justify="center">
+
+    </v-row>
+
+
+    <v-container style="max-width: 800px;" class="d-flex justify-center align-center">
+      <v-container>
+        <v-row>
+          <v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
+            <v-row style="margin-bottom: 20px;">
+              <v-spacer></v-spacer>
+              <v-col style="margin-top: -70px;">
+                <v-row>
+                  <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
+                </v-row>
+                <v-col>
+                  <v-btn style="margin-top: -30px; margin-left: " @click="editProfilePicture">
+                    <v-icon>mdi-pencil</v-icon>
+                  </v-btn>
+                </v-col>
+
+              </v-col>
+              <v-spacer></v-spacer>
+            </v-row>
+            <p class="text-center" style="margin-bottom: 10px; font-size: 2rem; font-weight: 600;">{{ userName }}</p>
+            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">Informations personnelles</p>
+
+            <v-form @submit.prevent="updateProfile">
+              <v-text-field v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
+              <v-text-field v-model="description" label="Description" :readonly="!isEditing"></v-text-field>
+
+            </v-form>
+            <v-col class="text-right"> <!-- Aligner le contenu à droite -->
+              <v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
+              <v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
+            </v-col>
+
+          </v-col>
+
+        </v-row>
+      </v-container>
+    </v-container>
+    <FooterLayout></FooterLayout>
+  </body>
 </template>
 
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
 
 
+
+const profilePictureUrl = ref('../../../images/guillaume.png');
+const bannerImageUrl = ref('../../../images/guillaimeaime3x.png');
+
+let userName = 'Guillaume Mousseau';
+const firstName = ref('Votre prénom');
+const lastName = ref('Votre nom');
+const description = ref('Votre description');
+const password = ref('Votre mot de passe');
+const isEditing = ref(false);
+
+const editProfilePicture = () => {
+  // Mettez ici la logique pour changer la photo de profil
+};
+
+const editBannerImage = () => {
+  // Mettez ici la logique pour changer la bannière de profil
+};
+
+const updateProfile = () => {
+  // Mettez ici la logique pour mettre à jour le profil
+};
 </script>
+
+<style>
+.your-profile-picture {
+  width: 300px;
+  border-radius: 40px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+
+}
+
+.row-shadow {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
+}
+
+.col-shadow {
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+}
+</style>

From 9d3228c087b46d316f3f8ee13df89d86a44347a3 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 14 Apr 2024 16:00:08 -0400
Subject: [PATCH 5/5] =?UTF-8?q?DefaultLayout-=20Menu=20d=C3=A9roulant,=20e?=
 =?UTF-8?q?ffac=C3=A9=20d=C3=A9connexion,=20=20modification=20pr=C3=A9sent?=
 =?UTF-8?q?ation?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/DefaultLayout.vue   | 47 ++++++++++++++++++++++++++-------
 src/views/main/CreatorFolio.vue |  8 +-----
 src/views/main/YourProfile.vue  |  6 ++++-
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index 83b1759..7dddb6b 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -3,20 +3,35 @@
   <body style="background-color: #f4f4f4;">
 
     <!-- Version pour ordinateur -->
-    <v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
+    <v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
       <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
 
-
-
-          <v-col cols="auto" class="d-flex align-end justify-end">
-            <router-link :to="{ name: 'yourprofile' }">
-              <v-row class="d-flex align-center">
+          <v-menu :location="location">
+            <template v-slot:activator="{ props }">
+              <div class="d-flex align-center" v-bind="attrs" v-on="on">
                 <img src="/images/anonyme.png" class="header-profile-icon mr-2" alt="Logo">
-                <h1 class="mb-0 text-h5">ANONYME</h1>
-              </v-row>
-            </router-link>
-          </v-col>
+                <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
+                  ANONYME
+                </v-btn>
+              </div>
+            </template>
+
+            <v-list style="padding: 0;"> <!-- Supprimer le padding pour que les boutons occupent toute la largeur -->
+              <v-list-item>
+                <router-link :to="{ name: 'yourprofile' }">
+                  <v-btn class="full-width-btn" flat>Mon profile</v-btn>
+                </router-link>
+              </v-list-item>
+              <v-list-item>
+
+                <v-btn class="full-width-btn" flat>Déconnexion</v-btn>
+
+              </v-list-item>
+            </v-list>
+          </v-menu>
+
+
         </v-row>
       </v-container>
     </v-card>
@@ -108,6 +123,18 @@ export default {
 </script>
 
 <style scoped>
+.full-width-btn {
+  width: 100%;
+
+  text-align: left;
+
+  padding-left: 24px;
+
+  padding-right: 24px;
+
+  z-index: 1001;
+}
+
 .mini-profile-picture {
   border-radius: 100px;
 }
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index ddc7b25..1d28a9e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -210,13 +210,7 @@
                   </v-list>
                 </v-col>
 
-                <!-- Log-out -->
-                <v-col cols="12" class="px-0 logout-button">
-                  <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
-                    <v-icon left class="mr-4">mdi-logout</v-icon>
-                    Déconnexion
-                  </v-btn>
-                </v-col>
+
               </v-container>
 
             </v-col>
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index 88f1d9c..f2706f1 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -22,7 +22,7 @@
     </v-row>
 
 
-    <v-container style="max-width: 800px;" class="d-flex justify-center align-center">
+    <v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
       <v-container>
         <v-row>
           <v-col style="background-color: white; border-radius: 30px;" class=" col-shadow">
@@ -51,6 +51,10 @@
 
             </v-form>
             <v-col class="text-right"> <!-- Aligner le contenu à droite -->
+
+              <router-link :to="{ name: 'creatorfolio' }" class="">
+                <v-btn style="margin-right: 20px;">Retour</v-btn>
+              </router-link>
               <v-btn v-if="!isEditing" @click="isEditing = true">Éditer</v-btn>
               <v-btn v-else @click="isEditing = false; updateProfile">Enregistrer</v-btn>
             </v-col>