Merged PR 5: Ui Updated - Modification de LoginView.vue et ContactView.vue

Ui Updated - Modification de LoginView.vue et ContactView.vue

src/layouts/FooterLayout.vue

@@ -1,28 +1,29 @@
 <template>
-  <div style="background-color: rgb(107, 0, 101, 1); min-height: 10vh; display: flex; flex-direction: column;">
-    <v-container style="background-color: rgb(107, 0, 101, 1);">
+  <div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;">
+    <v-container style="background-color: #f4f4f4">
       <v-row justify="center" style="margin-top: 30px;">
-        <v-row cols="auto" class="d-flex justify-center">
-
-          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img src="../../../images/facebookicon.png"
-              alt="Description image 2" style="width: 50px; height: 50px; margin-right: 40px;"></a>
-          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instafacebook.png"
-              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px;"></a>
+        <v-row cols="auto" class="d-flex justify-center align-center">
+          <img src="../../../images/hutopy.png" style="height: 70px; margin-right: 2%;">
+          <a href="https://www.facebook.com/profile.php?id=61556819217561"><img
+              src="../../../images/facebookiconblackpink.png" alt="Description image 2"
+              style="width: 50px; height: 50px; margin-right: 40px; "></a>
+          <a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instagramblackpink.png"
+              alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px; "></a>
           <router-link :to="{ name: 'home' }">
-            <img src="../../../images/ChevronBlanc.png" alt="Description image 1"
-              style="width: 50px; height: 50px; margin-right: 40px;">
-          </router-link>
+            <img src="../../../images/xblackpink.png" alt="Description image 1"
+              style="width: 50px; height: 50px; margin-right: 40px; "></router-link>
         </v-row>
       </v-row>
+
     </v-container>
 
     <v-container class="text-center" style="flex-grow: 1;">
-      <v-btn v-for="link in links" :key="link" class="mx-2" color="white" rounded="xl" variant="text">
+      <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
         {{ link }}
       </v-btn>
     </v-container>
 
-    <v-container class="text-white text-center">
+    <v-container class="text-black text-center">
       {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
     </v-container>
 
@@ -52,9 +53,9 @@ export default {
 
 <style>
 .custom-footer {
-  background-color: rgb(107, 0, 101, 1);
+
   padding: 10px;
-  /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer */
+  /* Ajoute un rembourrage intérieur de 10px autour du contenu du footer *  107, 0, 101, 1/
   margin: 0;
   /* Réinitialise les marges à zéro */
 }

src/views/LoginView.vue

@@ -1,48 +1,63 @@
 <template>
-    <v-row align="center" justify="center">
-        <v-col cols="4">
-            <v-container>
-                <v-card>
-                <v-toolbar color="primary" :dark="true">
-                    <v-toolbar-title>Login</v-toolbar-title>
-                </v-toolbar>
+    <v-container style="margin-top: 5%;">
+        <v-row>
+            <v-col cols="9">
+                <img style="border-radius: 20px; max-width: 90%;" src="../../../images/loginpage/loginhutopy.png">
+            </v-col>
+            <v-col style="margin-left: -5%; margin-top: 6%;">
+                <h1 class="text-center display-6" style="font-size: 5rem;">Connexion</h1>
+
+                <h2 class="text-center display-3" style="font-size: 1.5rem; margin-bottom: 20px;">Comment souhaitez-vous
+                    vous connecter à
+                    votre compte?</h2>
                 <v-card-text>
                     <v-form>
-                    <v-text-field prepend-icon="person" type="text" v-model="user.email" label="E-mail"></v-text-field>
-                    <v-text-field
-                        prepend-icon="lock"
-                        type="password"
-                        v-model="user.password"
-                        label="password"
-                    ></v-text-field>
+                        <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"
+                            class="text-start"></v-text-field>
+                        <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
+                            label="Mot de passe" class="text-start"></v-text-field>
                     </v-form>
-                        <v-snackbar v-model="errorSnackBar">
+                    <v-snackbar v-model="errorSnackBar">
                         Email ou mot de passe invalide.
                         <template v-slot:actions>
-                            <v-btn color="red" variant="text" @click="errorSnackBar = false">
-                            Fermer
-                            </v-btn>
+                            <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
                         </template>
                     </v-snackbar>
                 </v-card-text>
                 <v-card-actions>
                     <div class="flex-grow-1"></div>
-                    <v-btn color="primary" @click="login">Login</v-btn>
+                    <router-link :to="{ name: 'home' }">
+                        <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
+                    </router-link>
+                    <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
                 </v-card-actions>
-                </v-card>
-                <v-btn color="red" @click="goHome()">Continuer sans se connecter</v-btn>
+                <div class="text-center">
+
+                    <h2 class="text-center display-3" style="font-size: 1.5rem; margin-top: 6%; margin-bottom: 20px;">
+                        Pas encore
+                        inscrit?</h2>
+                    <router-link :to="{ name: 'contact' }">
+                        <v-btn color="#6b0065"
+                            style="height: 60px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
+
+                    </router-link>
+                </div>
+            </v-col>
+        </v-row>
+    </v-container>
+
+
+    <FooterLayout></FooterLayout>
 
-        </v-container>
-        </v-col>
-    </v-row>
-      
 </template>
 
 <script setup>
+import FooterLayout from '@/layouts/FooterLayout.vue';
 import { useClient } from '@/plugins/clientPlugin';
 import { useAuthStore } from '@/plugins/store/authStore';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
+
 const authStore = useAuthStore();
 const client = useClient();
 const router = useRouter()
@@ -54,7 +69,9 @@ const goHome = () => {
     router.push('/');
 }
 
-async function login(){
+
+
+async function login() {
     try {
         await authStore.login(client, user.value.email, user.value.password)
         router.push('/');

src/views/main/ContactView.vue

@@ -2,69 +2,80 @@
 
 
   <!--PC -->
-  <div class="md:flex hidden items-center justify-between flex-col">
-    <v-container style="margin-bottom: -.1%; margin-top: 2%;">
-      <v-row justify="center">
-        <v-col style="margin-left: 4%;" cols="6">
-          <img src="../../../images/hutopyblack.png" height="100px">
-        </v-col>
-      </v-row>
 
-      <v-row style="margin-bottom: -4%;" justify="end">
-        <v-col cols="auto">
-          <router-link :to="{ name: 'home' }">
-            <v-btn size="x-large" style="min-width: 200px; max-width: 200px;" elevation="0">
+
+
+
+
+
+
+  <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
+    <v-container class="d-flex justify-center align-center">
+      <div style="margin-left: 20%; margin-bottom: 3%;">
+        <v-row>
+
+          <img style=" max-width: 60%;" src="../../../images/hutopy.png">
+
+          <RouterLink :to="{ name: 'home' }">
+            <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">
               Accueil
             </v-btn>
-          </router-link>
-        </v-col>
-      </v-row>
-
-
-
-
-
-
+          </RouterLink>
 
+        </v-row>
+      </div>
     </v-container>
 
-    <img src="../../../images/homepage/bannierenousjoindre.png" class="banner-image" alt="Bannière"
-      style="min-height: 500px; margin-top: 3%;">
-
-
 
 
     <main class="top-aligned-column grid grid-cols-3 gap-4">
 
       <div class="column"></div>
       <div class="center-column" style="width: 100vw; margin: auto;">
-        <h1 style="font-size: 3rem; margin-top: 7%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
-          développement de </h1>
 
-        <div class="grid grid-cols-2 gap-4" style="margin-bottom: 10%;">
+        <div class="grid grid-cols-2 gap-4" style="margin-bottom: 5%;">
           <div class="rectangular-image h-full flex justify-center items-center">
 
-            <img src="../../../images/homepage/love.png" alt="Bannière" class="contactpicture" style="float: right;">
+            <img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
+              style="width: 700px; margin-top: 14%; height: auto; float:  right;">
 
           </div>
 
           <div>
 
+            <h1 style="font-size: 3rem; margin-top: -.5%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
+              développement de </h1>
 
 
-            <p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">
-              Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
-              nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
-              passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
-              rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
-              utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
+            <p class="para-inscription" style="margin-top: 4%; font-size: 1.4rem;">Rejoignez l'aventure Hutopy : une
+              invitation à façonner l'avenir de la création.
+              Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
+              plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
+              collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
+              inspirer.
+              Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
+              écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
+              votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
+              idées.
+              Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
+              votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
+              profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
+              l'innovation.
+              Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
+              visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
+              numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
+              Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
+              Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
+              dans le ciel de notre utopie partagée.
+
             </p>
 
-            <v-text-field label="Nom ($)"
-              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+            <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: rgb(255, 255, 255);"></v-text-field>
+              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>
@@ -72,8 +83,11 @@
             <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>
 
-            <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 :to="{ name: 'home' }">
+              <v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                class="mt-4" block>Envoyez</v-btn>
+            </RouterLink>
           </div>
         </div>
       </div>
@@ -89,7 +103,7 @@
 
     <div class="md:hidden flex flex-col items-center justify-center">
       <DefaultLayout></DefaultLayout>
-      <h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
+      <h1 class="h1-inscription-betacolor" style=" margin-bottom: 35px;">Hutopy</h1>
 
 
 
@@ -97,11 +111,23 @@
         <img src="../../../images/contactpicturemobile.png" alt="Bannière">
       </div>
       <p class="text-justify pa-4" style="font-size: 1em;">
-        Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
-        nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
-        passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
-        rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
-        utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
+        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>
 
       <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
@@ -169,6 +195,7 @@ import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
   /* Centrer le texte */
   margin-top: 20px;
   margin-bottom: 5px;
+  color: #24393c;
 
 }
 

src/views/main/CreatorFolio.vue

@@ -28,33 +28,40 @@
         <v-col cols="2" class="mx-0">
           <v-container style="position: sticky; top: 0;">
             <v-img src="../../../images/hutopy.png" alt="Description de l'image" width="300"
-              style="margin-bottom: 6%; margin-top: 10%; height: 150px;" class="mx-auto"></v-img>
+              style="margin-bottom: 6%; margin-top: 10%; height: 150px; " class="mx-auto"></v-img>
 
             <RouterLink :to="{ name: 'home' }">
-              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
+              <v-btn size="x-large"
+                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
+                elevation="0">
                 <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
-                Accueil
+                <div style="margin-left: 10%;"> Accueil</div>
+
               </v-btn>
             </RouterLink>
 
             <RouterLink :to="{ name: 'contact' }">
-              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
-                <v-icon left class="icon-size">mdi-account-plus</v-icon>
-                Ajouter des amis
+              <v-btn size="x-large"
+                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
+                elevation="0">
+                <v-icon left class="icon-size" style="margin-left: -1%;">mdi-account-plus</v-icon>
+                <div style="margin-left: 10%;">Ajouter des amis</div>
               </v-btn>
             </RouterLink>
 
             <RouterLink :to="{ name: 'creatorfolio' }">
-              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
-                <v-icon left class="icon-size" style="margin-left: -75%;">mdi-newspaper</v-icon>
-                Contenu
+              <v-btn size="x-large"
+                style="background-color: #f4f4f4; min-width: 370px; max-width: 370px; transform: scale(1.03);"
+                elevation="0">
+                <v-icon left class="icon-size" style="margin-left: -79%;">mdi-newspaper</v-icon>
+                <div style="margin-left: 10%;">Contenu</div>
               </v-btn>
             </RouterLink>
-
-
           </v-container>
         </v-col>
 
+
+
         <!-- center menu -->
 
         <v-col cols="7" class="mx-0">
@@ -63,25 +70,22 @@
 
 
           <v-card class="flow-menu m-0"
-            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
-
-
-
+            style="background-color: #f4f4f4; max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
 
             <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
               <v-col>
                 <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
-                  MA MISSION</h1>
+                  PODCAST #01</h1>
               </v-col>
 
-              <v-col>
+              <v-col cols="2">
                 <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
                   10-03-2024</h1>
               </v-col>
 
               <v-col style="margin-right: 4%;" class="text-right">
                 <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
-                    style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
+                    style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
               </v-col>
             </div>
 
@@ -102,28 +106,31 @@
                   comprises. Et toi, quel est ton objectif pour cette année?</p>
 
                 <div
-                  style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                 </div>
 
-                <v-row>
+                <v-row style="z-index: 200;">
                   <v-row class="fill-height">
                     <!-- Bouton Like -->
-                    <v-col cols="3" class="text-center" style="margin-left: 3%;">
-                      <v-btn size="x-large" style="width: 500;" elevation="0">
+                    <v-col cols="3" class="text-center">
+                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
+                        elevation="0">
                         <v-icon left class="icon-size">mdi-thumb-up</v-icon>
-                        Aime
+                        J'aime
                       </v-btn>
                     </v-col>
                     <!-- Bouton Dislike -->
                     <v-col cols="3" class="text-center">
-                      <v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
+                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
+                        elevation="0">
                         <v-icon left class="icon-size">mdi-thumb-down</v-icon>
                         Je n'aime pas
                       </v-btn>
                     </v-col>
                     <!-- Bouton Partager -->
                     <v-col cols="3" class="text-center">
-                      <v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0">
+                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
+                        elevation="0">
                         <v-icon left class="icon-size">mdi-share-variant</v-icon>
                         Partagez
                       </v-btn>
@@ -148,28 +155,23 @@
             </div>
           </v-card>
 
-
-
           <v-card class="flow-menu m-0"
             style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%; margin-top: 3%;">
 
-
-
-
             <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
               <v-col>
                 <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
                   MA MISSION</h1>
               </v-col>
 
-              <v-col>
+              <v-col cols="2">
                 <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
                   10-03-2024</h1>
               </v-col>
 
               <v-col style="margin-right: 4%;" class="text-right">
                 <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
-                    style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
+                    style="color: rgb(11, 170, 178);">mdi-pencil</v-icon></v-btn>
               </v-col>
             </div>
 
@@ -178,9 +180,8 @@
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
               <v-container>
 
-                <v-img
-                  style="margin-top: -2%; border-top: 6px solid rgb(107, 0, 101); border-bottom: 6px solid rgb(163, 14, 121);"
-                  src="../../../images/guillaumepublication.jpg"></v-img>
+                <v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
+
 
 
                 <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
@@ -191,28 +192,31 @@
                   comprises. Et toi, quel est ton objectif pour cette année?</p>
 
                 <div
-                  style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                 </div>
 
-                <v-row>
+                <v-row style="z-index: 200;">
                   <v-row class="fill-height">
                     <!-- Bouton Like -->
-                    <v-col cols="3" class="text-center" style="margin-left: 3%;">
-                      <v-btn size="x-large" style="width: 500;" elevation="0">
+                    <v-col cols="3" class="text-center">
+                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
+                        elevation="0">
                         <v-icon left class="icon-size">mdi-thumb-up</v-icon>
-                        Aime
+                        J'aime
                       </v-btn>
                     </v-col>
                     <!-- Bouton Dislike -->
                     <v-col cols="3" class="text-center">
-                      <v-btn size="x-large" style="width: 500; margin-left: 40%;" elevation="0">
+                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 40%;"
+                        elevation="0">
                         <v-icon left class="icon-size">mdi-thumb-down</v-icon>
                         Je n'aime pas
                       </v-btn>
                     </v-col>
                     <!-- Bouton Partager -->
                     <v-col cols="3" class="text-center">
-                      <v-btn size="x-large" style="width: 500; margin-left: 80%;" elevation="0">
+                      <v-btn size="x-large" style="background-color: #f4f4f4; width: 500; margin-left: 80%;"
+                        elevation="0">
                         <v-icon left class="icon-size">mdi-share-variant</v-icon>
                         Partagez
                       </v-btn>
@@ -238,85 +242,51 @@
           </v-card>
 
 
+
+
         </v-col>
 
         <!-- Right menu -->
         <v-col cols="2" class="mx-0">
 
-          <!-- Profile menu -->
+          <!-- tips menu -->
           <v-card
-            style="margin-top: -25%; border-top-left-radius: 25px; border-top-right-radius: 25px; height: auto; max-height: 400; min-width: 200; min-height: 325; position: sticky; top: 0;">
+            style=" background-color: #f4f4f4; margin-top: 25%; border-top-left-radius: 15px; border-top-right-radius: 15px; min-height: 280px;  position: sticky; top: 0;">
 
-            <v-container class="text-center" style="background-color: #6b0065; margin-bottom: -10px;">
-              <h1 style="font-size:3rem; color: white;">
+            <v-container class="text-center d-flex align-center justify-center"
+              style="background-color: #cc6f91; margin-bottom: -6%; margin-top: -1%; ">
+              <h1 style="font-size: 2rem; color: white; margin: 0;  text-orientation: upright;">
                 Je soutiens!
               </h1>
             </v-container>
 
-            <v-img src="../../../images/guillaume.jpg"></v-img>
-
-            <v-container style="background-color: #6b0065; margin-bottom: -1px">
-              <h1 style="font-size:1.5rem; color: white;">Guillaume Mousseau</h1>
-            </v-container>
-
-            <v-container style="background-color: #a30e79;">
-              <h1 style="font-size:1.5rem; color: white;">Créateur de contenus</h1>
-            </v-container>
-
-            <v-expansion-panels style="margin-top: -50px;">
-              <v-expansion-panel
-                text="Ma mission est claire : mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                title="À propos"></v-expansion-panel>
-            </v-expansion-panels>
-
-            <v-row style="margin-top: 20px;">
-              <v-col cols="6">
-                <v-sheet class="mx-auto" width="150">
+            <v-row style=" margin-top: 30px; ">
+              <v-col cols="6" style="background-color: #f4f4f4">
+                <v-sheet class="mx-auto" width="auto" style="background-color: #f4f4f4">
                   <v-form @submit.prevent>
                     <v-text-field label="Montant ($)"
-                      style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                      style="margin-top: -2%; margin-left: 5%; color: rgb(0, 109, 119); background-color: #f4f4f4"></v-text-field>
                   </v-form>
                 </v-sheet>
               </v-col>
-              <v-col cols="6">
+              <v-col cols="6" class="d-flex align-center">
                 <v-btn
-                  style=" margin-left: -15px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                  style="margin-bottom: 26%; height: 70%; margin-left: -10px; background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
                   class="mt-4" block>Envoyez</v-btn>
               </v-col>
             </v-row>
 
             <v-row>
-              <v-textarea style="color: rgb(107, 0, 101)" label="Votre message" placeholder="Écrivez votre message ici"
-                rows="3" auto-grow></v-textarea>
+              <v-textarea style=" margin-top: -20px; margin-left: 5%; margin-right: 5%; color: rgba(0, 109, 119)"
+                label="Votre message" placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
             </v-row>
 
-            <v-container>
-              <v-row justify="center" style="margin-top: 10px;">
-                <router-link to="lien_facebook" class="mr-13">
-                  <img src="../../../images/facebook.svg" alt="Facebook" width="40">
-                </router-link>
-                <router-link to="lien_tiktok" class="mr-13">
-                  <img src="../../../images/tiktok.svg" alt="TikTok" width="40">
-                </router-link>
-                <router-link to="lien_instagram" class="mr-13">
-                  <img src="../../../images/instagram.svg" alt="Instagram" width="40">
-                </router-link>
-                <router-link to="lien_x">
-                  <img src="../../../images/x.svg" alt="X" width="40">
-                </router-link>
-              </v-row>
-            </v-container>
-
-
-
-
-
-
           </v-card>
 
 
 
 
+
         </v-col>
       </v-row>
     </v-container>

src/views/main/HomeView.vue

@@ -1,34 +1,49 @@
 <template>
-  <main>
+  <main style="background-color:#F4F4F4 ;">
     <!--PC -->
-    <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 2%;">
-      <v-container style="margin-bottom: -.1%;">
-        <v-row justify="center">
-          <v-col style="margin-left: 4%;" cols="6">
-            <img src="../../../images/hutopyblack.png" height="100px">
-          </v-col>
-        </v-row>
-        <v-row justify="end">
-          <v-col cols="1">
-            <RouterLink :to="{ name: 'contact' }">
-              <v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
+    <div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
+      <v-container class="d-flex justify-center align-center">
+        <div style="margin-left: 20%;">
+          <v-row>
+
+            <img style=" max-width: 60%;" src="../../../images/hutopy.png">
+            <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>
-          </v-col>
-          <v-col cols="1">
             <RouterLink :to="{ name: 'contact' }">
-              <v-btn size="x-large" style="min-width: 200; max-width: 200;" elevation="0">
+              <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-col>
-        </v-row>
+
+          </v-row>
+        </div>
       </v-container>
 
 
 
-      <img src="../../../images/homepage/banniere.png" class="banner-image" alt="Bannière" style="min-height: 500px;">
+
+
+
+
+      <div>
+        <v-container style="margin: 0;">
+          <v-row>
+            <img src="../../../images/homepage/bannierehomepage.png"
+              style="max-width: 1600px; width: auto; max-height: 30%; object-fit: cover; border-radius: 20px; ">
+          </v-row>
+        </v-container>
+      </div>
+
+
+
+
 
 
 
@@ -40,7 +55,7 @@
             <!-- vide de gauche -->
           </v-col>
 
-          <v-col cols="9" style="margin-left: 3%;">
+          <v-col cols="9" style="margin-left: 4%;">
 
 
 
@@ -48,17 +63,17 @@
 
             <div class="d-flex justify-center align-center">
               <div>
-                <div style="margin-top: 30px;">
+                <div style="margin-top: 40px;">
                   <v-container class="d-flex ">
 
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class=" mx-auto" max-width="400" v-bind="props">
+                      <v-card style="border-radius: 20px;" class=" mx-auto" max-width="600" v-bind="props">
                         <v-img src="../../../images/homepage/creer.png"
-                          style="border-radius: 20px; min-width: 344px;"></v-img>
+                          style="border-radius: 20px; min-width: 500px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
+                            <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
@@ -72,12 +87,12 @@
                       </v-card>
                     </v-hover>
 
-                    <div style="margin-left: 30px;"></div>
+                    <div style="margin-left: 50px;"></div>
 
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/homepage/profiter.png"
-                          style="border-radius: 20px; min-width: 344px;"></v-img>
+                      <v-card style="border-radius: 20px;" class="mx-auto" max-width="600" v-bind="props">
+                        <v-img src="../../../images/homepage/partager.png"
+                          style="border-radius: 20px; min-width: 500px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
@@ -96,18 +111,18 @@
                       </v-card>
                     </v-hover>
 
-                    <div style="margin-left: 30px;"> </div>
+                    <div style="margin-left: 50px;"> </div>
 
 
 
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="400" v-bind="props">
+                      <v-card style="border-radius: 20px;" class="mx-auto" max-width="500" v-bind="props">
                         <v-img src="../../../images/homepage/inspirer.png"
-                          style="border-radius: 20px; min-width: 344px;"></v-img>
+                          style="border-radius: 20px; min-width: 500px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="500px" v-bind="props" color="#a30e79">
                               <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
                                 INSPIRER</h3>
                               <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
@@ -130,45 +145,68 @@
 
 
             <!-- Description D'hutopy -->
-            <v-container style="margin-top: 4%;">
+            <v-container style=" margin-left:0% ; margin-top: 4%; max-width: 1700px;">
               <v-row>
-                <v-col>
-                  <h1 style="margin-bottom: 5%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">C'est
-                    quoi Hutopy</h1>
-
-                  <p style="margin-bottom: 5%; font-size: 1.2rem; text-align: justify;">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>
+                <v-col cols="6">
+                  <v-col style="margin-left: 5%;" cols="11" class="d-flex justify-center align-center">
+                    <v-img style="max-width: 750px;" src="../../../images/homepage/votrehutopy.png"></v-img>
+                  </v-col>
+                  <v-col cols="12" md="10" offset-md="1">
 
 
-                  <v-row>
-                    <v-col>
+                    <p class="text-center text-justify"
+                      style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; max-width: 900px;">
+                      Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
+                      cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
+                      écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
+                      mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
+                      communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
+                      la créativité.
+                    </p>
 
-                    </v-col>
+                    <p class="text-center text-justify"
+                      style="margin-top: 3%; margin-bottom: 5%; font-size: 1.5rem; text-align: justify; max-width: 902px;">
+                      Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
+                      conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
+                      réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
+                      autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
+                      prendre vie.
+                    </p>
 
-                    <v-col>
-                      <RouterLink :to="{ name: 'contact' }">
-                        <v-btn color="rgb(0, 0, 0)" style="width: 300px;" class="ml-auto">CRÉER UN COMPTE</v-btn>
+                    <v-col cols="12" class="d-flex justify-center align-center">
+                      <RouterLink style="width: 450px;" :to="{ name: 'contact' }">
+                        <v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)"
+                          outlined elevation="0">
+                          Inscription
+                        </v-btn>
                       </RouterLink>
                     </v-col>
-                  </v-row>
+
+
+
+
+                  </v-col>
+
+
+
                 </v-col>
-                <v-col>
-                  <v-img src="../../../images/homepage/cestquoihutopy.png"
-                    style="border-radius: 90px; min-width: 344px;"></v-img>
+
+                <!-- Colonne de droite -->
+                <v-col cols="3">
+                  <v-img src="../../../images/homepage/grinding.png"
+                    style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
+                  <v-img src="../../../images/homepage/girlarmy.png"
+                    style="border-radius: 30px; min-width: 344px;"></v-img>
                 </v-col>
+
+                <v-col cols="3" style>
+                  <v-img src="../../../images/homepage/microphone.png"
+                    style="margin-bottom: 4%; border-radius: 30px; min-width: 400px; max-height: 500px; height: 500px;"></v-img>
+                  <v-img src="../../../images/homepage/girlvr.png"
+                    style="border-radius: 30px; min-width: 344px; max-height: 350;"></v-img>
+                </v-col>
+
+
               </v-row>
             </v-container>
 
@@ -180,33 +218,61 @@
             <!-- ILS SONT SUR HUTOPY -->
             <v-container>
               <v-card-text>
-                <h1
-                  style="text-align: center; margin-top: 4%; margin-bottom: 2%; font-size: 3rem; font-weight: bold; color: rgb(163, 14, 121);">
-                  Ils sont sur Hutopy</h1>
+                <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;">
+                <v-container style="margin-top: 25px; margin-bottom: -6%;">
+
 
-                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-bottom: 70px;">
-                  </div>
                   <v-row justify="center" class="profile-images">
-                    <router-link :to="{ name: 'creatorfolio' }">
-                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
-                        style="border: 3px solid rgb(163, 14, 121);">
-                    </router-link>
-                    <router-link :to="{ name: 'creatorfolio' }">
-                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
-                        style="border: 3px solid rgb(163, 14, 121);">
-                    </router-link>
 
-                    <router-link :to="{ name: 'creatorfolio' }">
-                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
-                        style="border: 3px solid rgb(163, 14, 121);">
-                    </router-link>
+                    <v-col>
+                      <router-link :to="{ name: 'creatorfolio' }">
+                        <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+
+                      </router-link>
+                      <RouterLink :to="{ name: 'creatorfolio' }">
+                        <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+                          color="rgb(107, 0, 101)" outlined elevation="0">
+                          Inscription
+                        </v-btn>
+                      </RouterLink>
+
+                    </v-col>
+
+                    <v-col>
+                      <router-link :to="{ name: 'creatorfolio' }">
+                        <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+
+                      </router-link>
+                      <RouterLink :to="{ name: 'creatorfolio' }">
+                        <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+                          color="rgb(107, 0, 101)" outlined elevation="0">
+                          Inscription
+                        </v-btn>
+                      </RouterLink>
+
+                    </v-col>
+
+
+                    <v-col>
+                      <router-link :to="{ name: 'creatorfolio' }">
+                        <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
+
+                      </router-link>
+                      <RouterLink :to="{ name: 'creatorfolio' }">
+                        <v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
+                          color="rgb(107, 0, 101)" outlined elevation="0">
+                          Inscription
+                        </v-btn>
+                      </RouterLink>
+
+                    </v-col>
+
+
                   </v-row>
 
-                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-top: 70px;">
-                  </div>
 
                 </v-container>
               </v-card-text>
@@ -290,7 +356,7 @@
           <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: #a30e79; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
+            <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>
@@ -300,6 +366,7 @@
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                   style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />
+
               </router-link>
 
               <router-link :to="{ name: 'creatorfolio' }">
@@ -327,24 +394,19 @@
 
 
     <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>
+      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 lines="one">
-      <v-list-item
-        v-for="item in itemList"
-        :key="item"
-        :title="item.id"
-        :subtitle="item.title"
-      ></v-list-item>
+    <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>
   </main>
@@ -352,10 +414,10 @@
 
 <script async setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
 import { useClient } from '@/plugins/clientPlugin';
 import { ref } from 'vue';
 import { useRouter } from 'vue-router';
-import FooterLayout from '@/layouts/FooterLayout.vue';
 
 
 const router = useRouter()
@@ -452,9 +514,9 @@ const goToLoginPage = () => {
 .profile-image {
   width: auto;
   /* Largeur des images */
-  height: 180px;
+  height: 300px;
   /* Hauteur des images */
-  border-radius: 20%;
+  border-radius: 35px;
   /* Coins arrondis */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
 }
@@ -561,4 +623,8 @@ const goToLoginPage = () => {
 .overlay:hover p.image-text {
   display: block;
 }
+
+body {
+  background-color: #F4F4F4;
+}
 </style>