Structure de base en place - Ce soir et vendredi soir, je vais nettoyer mes css.

src/cssstyle/index.css

@@ -1,5 +1,3 @@
-
-
 /* CSS pour ajuster la taille de l'image */
 .img-small {
   width: 70px;
@@ -38,7 +36,7 @@
   /* Centrer les éléments verticalement */
   flex: 1;
   /* Utiliser tout l'espace disponible */
-  margin-right:8%
+  margin-right: 8%
 }
 
 /* CSS pour le texte du menu-right */
@@ -66,8 +64,10 @@
 }
 
 .profilePicture {
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   /* Ajouter une ombre à la photo */
+  border: 2px solid #a30e79;
+  /* Ajouter une bordure de 2px solide de couleur rouge (#f00) */
 }
 
 .bg-customdarker {
@@ -85,29 +85,28 @@
 }
 
 .center-column {
-  flex: 3; /* La colonne centrale occupe 3 fois plus d'espace que les autres */
+  flex: 3;
+  /* La colonne centrale occupe 3 fois plus d'espace que les autres */
 }
 
 
-.colum-aligncenter
+.colum-aligncenter {
-{
   text-align: center;
 }
 
 .menu-center a:nth-child(1):hover svg {
-  color: rgba(163, 14, 121, 1); /* Changer la couleur en rouge au survol */
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en rouge au survol */
 }
 
 /* Pour le deuxième bouton */
 .menu-center a:nth-child(2):hover svg {
-  color:  rgba(163, 14, 121, 1); /* Changer la couleur en bleu au survol */
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en bleu au survol */
 }
 
 /* Pour le troisième bouton */
 .menu-center a:nth-child(3):hover svg {
-  color:  rgba(163, 14, 121, 1); /* Changer la couleur en vert au survol */
+  color: rgba(163, 14, 121, 1);
+  /* Changer la couleur en vert au survol */
 }
-
-
-
-

src/layouts/CardDonate.vue

@@ -0,0 +1,41 @@
+<template>
+
+
+    <div class="md:flex hidden items-center justify-between flex-col">
+
+    </div>
+
+
+
+
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+        <v-container class=" footer-donate-container">
+
+            <h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
+
+
+            <v-text-field label="Montant"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-text-field label="Message"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
+                size="x-large" block>Faire un don</v-btn>
+
+        </v-container>
+    </div>
+</template>
+
+
+
+
+
+<style>
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+</style>

src/layouts/CreatorHeader.vue

@@ -0,0 +1,164 @@
+<template>
+    <div class="md:flex hidden  items-center justify-between">
+        <v-container>
+
+
+            <div class="banner-container">
+                <img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
+                    style="margin-bottom: -80px;">
+            </div>
+
+
+            <div class="banner-container ">
+                <img src="../../../images/guillaume.png" class="profile-picture">
+                <img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
+
+            </div>
+
+            <div style="margin-top: 40px; text-align: center;">
+                <v-container class="label-creator">
+                    <v-row justify="center">
+
+                        <v-card style="width: 470px; margin-top: 10px;">
+                            <v-card-title class="card-background label-creator-texte-color">Guillaume
+                                Mousseau</v-card-title>
+                        </v-card>
+
+
+
+                        <v-card style="width: 470px; margin-top: 10px;">
+                            <v-card-title class="card-background label-creator-texte-color">Créateur de
+                                contenus</v-card-title>
+                        </v-card>
+
+                    </v-row>
+                </v-container>
+            </div>
+
+
+        </v-container>
+    </div>
+
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+        <div style="margin-top: -100px;">
+
+            <img src="../../../images/guillaimeaime.png" class="banner-creator" style="margin-top: 10;">
+
+
+
+            <div class="banner-container ">
+                <img src="../../../images/guillaume.png" class="profile-picture-mobile">
+                <img src="../../../images/checkprofile.png" class="check-profile-mobile" style="margin-top: 5px;">
+
+            </div>
+
+            <div style="margin-top: 150px; text-align: right;">
+                <v-container class="label-creator" style="width: 105%;">
+                    <v-row justify="center">
+
+                        <v-card style="width: 350px; margin-top: 5%; margin-left: 10%;">
+                            <v-card-title class="card-background2 label-creator-texte-color">Guillaume
+                                Mousseau</v-card-title>
+                        </v-card>
+
+
+
+                        <v-card style="width: 350px; margin-top: 1%; margin-left: 10%;">
+                            <v-card-title class="card-background label-creator-texte-color">Créateur de
+                                contenus</v-card-title>
+                        </v-card>
+
+                    </v-row>
+                </v-container>
+
+            </div>
+
+
+        </div>
+
+    </div>
+</template>
+
+
+<style>
+.banner-creator {
+    align-items: center;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+.smooth-picture {
+    border-radius: 13px;
+}
+
+.profile-picture {
+    border-radius: 50%;
+    width: 200px;
+    height: 200px;
+    position: relative;
+    top: -20px;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+    border: 2px solid rgba(163, 14, 121, 0.5);
+}
+
+.profile-picture-mobile {
+    border-radius: 50%;
+    width: 170px;
+    height: 170px;
+    position: relative;
+    top: -45px;
+    margin-top: 420px;
+    margin-left: -230px;
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+    border: 2px solid rgba(163, 14, 121, 0.5);
+    position: absolute;
+}
+
+
+.check-profile {
+    width: 40px;
+    height: 40px;
+
+    margin-top: -90px;
+    margin-left: 160px;
+    position: absolute;
+}
+
+.check-profile-mobile {
+    width: 40px;
+    height: 40px;
+
+    margin-top: -90px;
+    margin-left: -80px;
+    position: absolute;
+}
+
+
+.label-creator-texte-color {
+    color: white;
+}
+
+.label-creator {
+    margin-right: 43px;
+    margin-top: -160px;
+    position: relative;
+    z-index: -1;
+    /* Valeur inférieure pour placer derrière */
+}
+
+
+.card-background2 {
+    background-color: rgba(163, 14, 121, 1);
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+.card-background {
+    background-color: rgba(107, 0, 101, 1);
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
+}
+
+.banner-container {
+    display: flex;
+    justify-content: center;
+}
+</style>

src/layouts/DefaultLayout.vue

@@ -9,7 +9,7 @@
           </router-link>
         </div>
         <div class="menu-center flex items-center justify-center space-x-12">
-          <router-link :to="{ name: 'home' }" class="text-green-700">
+
           <router-link :to="{ name: 'home' }" class="text-green-700">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
@@ -17,8 +17,8 @@
                 d="m2.25 12 8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
             </svg>
           </router-link>
-          </router-link>
+
-          <router-link :to="{ name: 'contact' }" class="text-green-700">
+
           <router-link :to="{ name: 'contact' }" class="text-green-700">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
@@ -26,8 +26,8 @@
                 d="M18 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 1 1-6.75 0 3.375 3.375 0 0 1 6.75 0ZM3 19.235v-.11a6.375 6.375 0 0 1 12.75 0v.109A12.318 12.318 0 0 1 9.374 21c-2.331 0-4.512-.645-6.374-1.766Z" />
             </svg>
           </router-link>
-          </router-link>
+
-          <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
+
           <router-link :to="{ name: 'creatorfolio' }" class="text-green-700">
             <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
               stroke="currentColor" class="w-8 h-8 text-custom hover-color-change">
@@ -35,12 +35,16 @@
                 d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
             </svg>
           </router-link>
-          </router-link>
+
+
+
+
+
+
         </div>
         <div class="menu-right">
           <router-link :to="{ name: 'yourprofile' }">
-            <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+            <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
-              alt="Logo">
           </router-link>
         </div>
       </div>
@@ -50,6 +54,8 @@
       <div class="md:hidden flex flex-col items-center justify-center">
         <v-container style="margin-top: -20px;">
           <v-row>
+
+
             <v-col cols="auto">
               <!-- Logo -->
               <router-link :to="{ name: 'home' }">
@@ -60,7 +66,7 @@
             <v-col cols="auto">
               <!-- Photo de profil -->
               <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
-                <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+                <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
                   alt="Logo">
               </router-link>
             </v-col>
@@ -69,6 +75,7 @@
 
         <v-container class="text-center" style="margin-top: -30px;">
           <v-row class="justify-center">
+
             <!-- Premier lien avec icône -->
             <v-col cols="auto" class="mx-4">
               <router-link :to="{ name: 'home' }" class="text-green-700">
@@ -98,8 +105,13 @@
                     d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
                 </svg>
               </router-link>
-
             </v-col>
+
+
+
+
+
+
             <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
 
           </v-row>

src/layouts/FooterLayout.vue

@@ -26,6 +26,10 @@
       {{ new Date().getFullYear() }} — <strong>Hutopy</strong>
     </v-container>
 
+
+    <v-container class="custom-footer">
+    </v-container>
+
   </div>
 </template>
 
@@ -39,7 +43,7 @@ export default {
       'Conditions générales',
       'Politique des contenus',
       'Programme Ambassadeurs',
-      'conditions_utilisation',
+      'conditions utilisation',
       'anti-exploitation',
     ],
   }),

src/layouts/FormInscriptionBeta.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="md:flex hidden items-center justify-between flex-col">
+  <div class="md:flex hidden justify-between flex-col">
     <div>
-      <H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
+      <h1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </h1>
     </div>
 
     <div>
@@ -15,26 +15,25 @@
         style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
 
     </div>
+
   </div>
 
-  <div class="md:hidden flex flex-col items-center justify-center">
+  <div class="md:hidden flex flex-col justify-center">
-
+    <div>
-<div>
+      <h1 class="h1-inscription-beta-Inscrivez-vous">Inscrivez-vous</h1>
-  <H1 class="h1-inscription-beta-Inscrivez-vous"> Inscrivez-vous </H1>
+    </div>
-</div>
+    <div style="margin-left: -45%; margin-right: -45%;">
-
+      <v-text-field label="First name" class="w-full"
-<div>
-  <v-text-field label="First name"
         style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-  <v-text-field label="Last name"
+      <v-text-field label="Last name" class="w-full"
         style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-  <v-text-field label="E-mail"
+      <v-text-field label="E-mail" class="w-full"
         style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-  <v-textarea label="Pourquoi voulez-vous participer?"
+      <v-textarea label="Pourquoi voulez-vous participer?" class="w-full"
         style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-textarea>
+    </div>
+  </div>
 
-</div>
-</div>
 
 </template>
 

src/layouts/SimpleVideoCard.vue

@@ -0,0 +1,36 @@
+<template>
+    <v-card class="vcard-descriptions-mobile" style="margin-top: 30px;">
+
+        <h1 class="h1profilemobile">Podcast #01</h1>
+
+
+        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
+        <iframe width="420" height="315" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
+        </iframe>
+
+        <p class="text-justify pa-4" style="font-size: 1.2em">
+            Voici mon nouveau podcast!
+
+        </p>
+    </v-card>
+</template>
+
+<style>
+.vcard-descriptions-mobile {
+    box-shadow: 0 6px 9px rgba(0, 0, 0, 0.6);
+
+}
+
+.h1profilemobile {
+    font-size: 2rem;
+    text-align: center;
+
+    color: rgba(163, 14, 121, 0.85);
+
+
+}
+
+.card-date {
+    text-align: right;
+}
+</style>

src/router/index.js

@@ -5,6 +5,7 @@ import LoginView from '../views/LoginView.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
 import YourProfile from '../views/main/YourProfile.vue'
+import ProjectRoadmap from '@/views/main/ProjectRoadmap.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -38,6 +39,11 @@ const router = createRouter({
       name: 'login',
       component: LoginView
     },
+    {
+      path: '/roadmap',
+      name: 'roadmap',
+      component: ProjectRoadmap
+    },
 
 
   ]

src/views/main/ContactView.vue

@@ -7,16 +7,20 @@
 
       <div class="column"></div>
       <div class="center-column" style="width: 70vw; margin: auto;">
+        <h1 class="h1-inscription-beta">Participez au développement de </h1>
+        <h1 class="h1-inscription-betacolor">Hutopy</h1>
         <div class="grid grid-cols-2 gap-4">
           <div class="rectangular-image h-full flex justify-center items-center">
-            <img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture">
+
+            <img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture" style="float: right;">
+
           </div>
 
           <div>
-            <h1 class="h1-inscription-betacolor">Hutopy</h1>
-            <h1 class="h1-inscription-beta">Participez au développement de </h1>
 
-            <p class="para-inscription">
+
+
+            <p class="para-inscription" style="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
@@ -41,7 +45,7 @@
 
     <div class="md:hidden flex flex-col items-center justify-center">
       <h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
-      <h1 class="h1-inscription-beta">Participez au développement de </h1>
+
 
 
       <div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
@@ -80,7 +84,9 @@ import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
 
 <style scoped>
 .contactpicture {
-  margin-top: 15px;
+  height: 800px;
+  width: auto;
+
   /* ajustez cette valeur selon votre besoin */
   margin-bottom: 45px;
   border-radius: 12px;

src/views/main/CreatorFolio copy.vue

@@ -1,263 +0,0 @@
-<template>
-
-
-  <DefaultLayout></DefaultLayout>
-
-  <v-container> 
-
-  <div class="banner-container">
-    <img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture" style="margin-bottom: -80px;">
-  </div>
-
-  
-  <div class="banner-container ">
-    <img src="../../../images/guillaume.png" class="profile-picture">
-    <img src="../../../images/checkprofile.png" class="check-profile" style="margin-top: 5px;">
-
-  </div>
-  
-<div style="margin-top: 40px;">
-  <v-container class="label-creator" >
-  <v-row justify="center">
-    <v-col cols="12" sm="2" md="3" class="d-flex justify-center">
-      <v-card style="width: 425px;">
-        <v-card-title class="card-background text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
-      </v-card>
-    </v-col>
-    <v-col cols="12" sm="4" md="3" class="d-flex justify-center">
-      <v-card style="width: 425px;">
-        <v-card-title class="card-background text-center label-creator-texte-color">Créateur de contenus</v-card-title>
-      </v-card>
-    </v-col>
-  </v-row>
-</v-container>
-</div>
-
-
-
-
-</v-container>
-
-
-  <v-container fluid class="menu-creator-position">
-    <v-row>
-     <v-col cols="3" class="d-flex justify-end">
-  <!-- Menu à gauche -->
-  <v-card class="label-paiement-color" style="min-width: 300px;  max-width: 75%; max-width: 300px;">
-    <v-card-text>
-      Menu gauche
-      <v-row>
-        <v-col class="" cols="6">
-          <v-switch :model-value="true" color="primary" label="on"></v-switch>
-        </v-col>
-      </v-row>
-    </v-card-text>
-  </v-card>
-</v-col>
-
-<v-col cols="6" class="d-flex justify-center">
-  <!-- Contenu centré -->
-  <v-card class="flow-menu" style="max-width: 80; max-width: 1200px;">
-    <v-card-text class="color">
-      Contenu centré
-      <v-container>
-        <p>AESDAWDAESDAWDAESDAWDAESDAWD
-          AESDAWDAESDAWDAESDAWDAESDAWD
-          ...
-          
-          ...
-          sssAESDAWDAESDAWDAESDAWDAESDAWD
-          sss   AESDAWDAESDAWDAESDAWDAESDAWD
-          ...
-          
-          ...
-          sssAESDAWDAESDAWDAESDAWDAESDAWD
-          sss
-        </p>
-      </v-container>
-    </v-card-text>
-  </v-card>
-</v-col>
-
-
-      <v-col cols="3">
-        <!-- Menu à droite -->
-        <v-card class="label-paiement-color" style="max-width: 75%; max-width: 350px;">
-          <v-card-text>
-            <v-container>
-              <v-row>
-                <v-col>
-                  <H1 class="tips-h1">ENCOURAGEZ-MOI</H1>
-                </v-col>
-              </v-row>
-              <v-row>
-                <v-col>
-                  <v-sheet class="mx-auto" width="250">
-                    <v-form @submit.prevent>
-                      <v-text-field label="Montant ($)" style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-                      <v-text-field label="Message" style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
-                      <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>Envoyez</v-btn>
-                    </v-form>
-                  </v-sheet>
-                </v-col>
-              </v-row>
-            </v-container>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-  </v-container>
-
-  
-  <FooterLayout></FooterLayout>
-</template>
-
-<script setup>
-import DefaultLayout from '@/layouts/DefaultLayout.vue';
-import FooterLayout from '@/layouts/FooterLayout.vue';
-
-
-</script>
-  
-<style scoped>
-.sticky-column {
-  position: sticky;
-  top: 0;
-}
-
-.profile-picture-position{
-  margin-top: 25;
-}
-
-.label-paiement-color{
-  color: rgba(163, 14, 121, 0.85); /* Couleur du texte (utilisez la couleur souhaitée) */
-  background-color: rgba(255, 255, 255, 0.2); /* Couleur de fond */
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4); /* Ombre */
-  
-}
-
-.tips-h1{
-  text-align: center;
-  font-weight: bold;
-  color: rgba(163, 14, 121, 0.85); /* Couleur du texte (utilisez la couleur souhaitée) */
-  font-size: 25px;
-}
-
-.test-color{
-  background-color: rgba(163, 14, 121, 0.1);
-}
-
-.check-profile {
-  width: 40px;
-  height: 40px;
-  margin-top: -90px;
-  margin-left: 140px;
-  position: absolute;
-}
-
-.label-tips
-{
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.label-creator-texte-color {
-  color: white;
-}
-
-.menu-creator-position {
-  margin-top: -25px;
-  position: relative;
-}
-
-.label-creator {
-  margin-right: 43px;
-  margin-top: -160px;
-  position: relative;
-  z-index: -1;
-  /* Valeur inférieure pour placer derrière */
-}
-
-.card-background {
-  background-color: rgba(107, 0, 101, 1);
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.flow-menu {
-  background-color: rgba(255, 255, 255, 0.3);
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
-}
-
-.banner-container {
-  display: flex;
-  justify-content: center;
-}
-
-.banner-creator {
-  align-items: center;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.profile-picture {
-  border-radius: 50%;
-  width: 200px;
-  height: 200px;
-  position: relative;
-  top: -100px;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(163, 14, 121, 0.5);
-}
-
-.smooth-picture {
-  border-radius: 13px;
-}
-
-.column-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 20px;
-}
-
-.column-creatorFolio {
-  flex-grow: 1.2;
-  /* La colonne centrale peut agrandir de 20% */
-  flex-shrink: 0;
-  /* Empêche la colonne centrale de rétrécir */
-  flex-basis: auto;
-  /* La colonne centrale prend sa taille de base */
-
-  text-align: center;
-  width: 100%;
-}
-
-.column-creatorFolio-side {
-  flex-grow: 0;
-  /* Les colonnes latérales ne peuvent pas agrandir */
-  flex-shrink: 0;
-  /* Empêche les colonnes latérales de rétrécir */
-  flex-basis: 200px;
-  /* Largeur fixe pour les colonnes latérales */
-  text-align: center;
-}
-
-.rgb-background {
-  background-color: rgba(163, 14, 121, 0.1);
-  width: 300px;
-  padding: 20px;
-}
-
-.top-aligned-column {
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-}
-
-.center-column {
-  text-align: center;
-}
-
-.column {
-  flex: 1;
-}
-</style>
-

src/views/main/CreatorFolio.vue

@@ -1,130 +1,181 @@
 <template>
 
+
   <DefaultLayout></DefaultLayout>
 
+  <CreatorHeader></CreatorHeader>
 
-<h1>Dashboard</h1>
+  <!-- PC-->
+  <div class="md:flex hidden items-center justify-between flex-col">
+
+    <v-container fluid class="menu-creator-position donate-menu">
+      <v-row>
+        <v-col cols="3" class="d-flex" style="justify-content: end;">
+          <!-- Menu à gauche -->
+          <v-card class="label-paiement-color"
+            style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
+            <v-card-text>
               <v-container>
-    <div class="d-flex flex-colum flex-md-row justify-space-between">
+                <v-row>
-      <div 
+                  <v-col>
-        class="w-100 pa-4 rounded-lg elevation-2"
+                    <h1 class="tips-h1">ENCOURAGEZ-MOI</h1>
-      >
+                  </v-col>
-        TEST
+                </v-row>
-      </div>
+                <v-row>
+                  <v-col>
+                    <v-sheet class="mx-auto" width="250">
+                      <v-form @submit.prevent>
+                        <v-text-field label="Montant ($)"
+                          style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                        <v-text-field label="Message"
+                          style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                        <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                          class="mt-4" block>Envoyez</v-btn>
+                      </v-form>
+                    </v-sheet>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card-text>
+          </v-card>
+
+        </v-col>
 
 
+        <!-- Center -->
+        <v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
+          <!-- Premier composant -->
+          <v-card class="flow-menu"
+            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
+            <v-card-text class="color">
+              <v-container>
+                <h1 style="margin-top: 25px;" class="h1profilemobile">MA MISSION</h1>
+                <h1 class="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024
+                </h1>
+                <v-img src="../../../images/guillaumepublication.jpg"></v-img>
+                <p class="text-justify pa-4" style="font-size: 1.2em">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?</p>
+              </v-container>
+            </v-card-text>
+          </v-card>
 
-      <div 
+          <!-- Deuxième composant -->
-        class="w-100 pa-4 rounded-lg elevation-2"
+          <v-card class="flow-menu" style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto;">
-      >
+            <h1 style="margin-top: 25px;" class="h1profilemobile">PODCAST #01</h1>
-        TEST
+            <h1 class="card-date" style="align-items: center; margin-bottom: 4%; text-align: right; margin-right: 5%;">
-      </div>
+              10-03-2024 </h1>
-
+            <v-container style="height: 700px;">
-
+              <iframe width="100%" height="100%"
-
+                src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
-    </div>
-
             </v-container>
 
-
+            <p class="text-justify pa-4" style="font-size: 1.2em">Voici mon nouveau podcast!</p>
-
-  <v-layout column justify-center align-center>
-    <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
-      <v-card class="card-background" style="margin-top: -30px;">
-        <!-- Remonter les cartes de 30px et limiter la largeur -->
-        <v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
           </v-card>
-    </v-flex>
+        </v-col>
-    <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
-      <v-card class="card-background" style="margin-top: -30px;">
-        <!-- Remonter les cartes de 30px et limiter la largeur -->
-        <v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
-      </v-card>
-    </v-flex>
-  </v-layout>
 
 
-
+        <v-col cols="3" class="d-flex justify-end">
-
+          <!-- Menu à droite -->
-
+          <!-- Ajoutez ici votre menu de droite -->
-
-
-
-  <v-container>
-    <v-row justify="center"> <!-- Centrage horizontal -->
-      <v-col cols="12" sm="6"> <!-- Taille de la colonne pour occuper la moitié de la largeur en plein écran -->
-        <div class="banner-container" style="width: 100%; max-width: 50vw; margin: auto;">
-          <!-- Utilisation de margin: auto; pour centrer -->
-          <img src="../../../images/guillaimeaime.png" class="banner-creator smooth-picture"
-            style="width: 100%; margin-bottom: -80px;">
-        </div>
         </v-col>
       </v-row>
 
-    <div class="banner-container">
+
-      <img src="../../../images/guillaume.png" class="profile-picture">
+    </v-container>
-      <img src="../../../images/checkprofile.png" class="check-profile">
+
+
   </div>
 
-    <v-container class="label-creator">
+
-      <v-row justify="center">
+
-        <v-col cols="12" sm="2" md="3" class="d-flex justify-center"></v-col>
+  <!-- DonateMobile-->
-        <v-col cols="12" sm="4" md="3" class="d-flex justify-center"></v-col>
+  <div class="md:hidden flex flex-col items-center justify-center">
-      </v-row>
+
+    <v-container style="width: 105%;">
+      <v-card class="vcard-descriptions-mobile">
+        <h1 class="h1profilemobile">Ma mission</h1>
+        <h2 clase="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024 </h2>
+
+        <v-img src="../../../images/guillaumepublication.jpg"></v-img>
+
+
+
+
+
+        <p class="text-justify pa-4" style="font-size: 1.2em">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?</p>
+
+      </v-card>
+
+      <SimpleVideoCard> </SimpleVideoCard>
+
+
+
     </v-container>
 
-    <v-layout column justify-center align-center>
+    <v-container class="footer-donate footer-donate-container" style=" position: sticky; top: 0; margin-bottom: -4%;">
-      <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
+
-        <v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 460px;">
+      <h1 class="tips-h1" style="margin-bottom: 1%;">ENCOURAGEZ-MOI</h1>
-          <!-- Remonter les cartes de 30px et limiter la largeur -->
+
-          <v-card-title class="text-center label-creator-texte-color">Guillaume Mousseau</v-card-title>
+
-        </v-card>
+
-      </v-flex>
+      <v-btn style=" background-color: rgb(163, 14, 121); color: white;" rounded="xl" size="small" block>Faire un
-      <v-flex xs12 sm6 style="width: 80%;"> <!-- Réduire la largeur des cartes à 80% -->
+        don</v-btn>
-        <v-card class="card-background" style="margin-top: -30px; max-width: 400px; margin-left: 20px">
+
-          <!-- Remonter les cartes de 30px et limiter la largeur -->
-          <v-card-title class="text-center label-creator-texte-color">Créateur de contenus</v-card-title>
-        </v-card>
-      </v-flex>
-    </v-layout>
     </v-container>
 
+
+
+
+
+  </div>
+
+
+
+
+
+
+
   <FooterLayout></FooterLayout>
+
 </template>
 
-
-
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import CreatorHeader from '@/layouts/CreatorHeader.vue';
 
-  import { computed } from 'vue'
+import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
-  import { useDisplay } from 'vuetify'
 
-  const { name } = useDisplay()
-
-  const height = computed(() => {
-    // name is reactive and
-    // must use .value
-    switch (name.value) {
-      case 'xs': return 220
-      case 'sm': return 400
-      case 'md': return 500
-      case 'lg': return 600
-      case 'xl': return 800
-      case 'xxl': return 1200
-    }
-
-    return undefined
-  })
 </script>
 
-
+<script>
+export default {
+  data() {
+    return {
+      overlayMenu: false,
+    };
+  },
+};
+</script>
 
 <style scoped>
 .sticky-column {
   position: sticky;
   top: 0;
+
+
 }
 
 .profile-picture-position {
@@ -141,6 +192,8 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
 
 }
 
+
+
 .tips-h1 {
   text-align: center;
   font-weight: bold;
@@ -153,42 +206,20 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   background-color: rgba(163, 14, 121, 0.1);
 }
 
-.check-profile {
-  width: 40px;
-  height: 40px;
-  margin-top: -20px;
-  margin-left: 140px;
-  position: absolute;
-  z-index: 1;
-  /* Placez les levels derrière la photo de profil */
-}
 
 .label-tips {
   box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
 }
 
-.label-creator-texte-color {
+
-  color: white;
-}
 
 .menu-creator-position {
   margin-top: -25px;
   position: relative;
 }
 
-.label-creator {
-  margin-right: 43px;
-  margin-top: -160px;
-  position: relative;
-  z-index: -1;
-  /* Placez les levels derrière la photo de profil */
-  /* Valeur inférieure pour placer derrière */
-}
 
-.card-background {
+
-  background-color: rgba(107, 0, 101, 1);
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
 
 .flow-menu {
   background-color: rgba(255, 255, 255, 0.3);
@@ -196,27 +227,7 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
   border-radius: 10px;
 }
 
-.banner-container {
-  display: flex;
-  justify-content: center;
-}
 
-.banner-creator {
-  align-items: center;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-}
-
-.profile-picture {
-  border-radius: 50%;
-  width: 200px;
-  height: 200px;
-  position: relative;
-  top: -25px;
-  box-shadow: 0 6px 9px rgba(0, 0, 0, 0.4);
-  border: 2px solid rgba(163, 14, 121, 0.5);
-  z-index: 1;
-  /* Assurez-vous que la photo de profil est au-dessus des autres éléments */
-}
 
 
 

src/views/main/HomeView.vue

@@ -13,11 +13,11 @@
       <!-- Colonnes -->
       <v-container>
         <v-row>
-          <v-col cols="2" class="ml-4 ml-sm-0">
+          <v-col cols="1" class="ml-4 ml-sm-0">
             <!-- vide de gauche -->
           </v-col>
 
-          <v-col cols="8">
+          <v-col cols="9" style="margin-left: 3%;">
 
 
 
@@ -28,8 +28,11 @@
                 <v-col cols="6">
                   <v-card-text>
                     <div>
-                      <h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
+                      <h2 style="margin-top: 30px; margin-bottom: 70px; font-size: 50px; text-align: center;">C'EST QUOI
-                      <p class="textjustify">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
+                        HUTOPY</h2>
+                      <p class="textjustify" style="margin-bottom: 75px; font-size: 1.5em;">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
@@ -44,17 +47,19 @@
                         contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
                     </div>
 
-                  </v-card-text>
-                </v-col>
-                <v-col cols="6" class="mt-auto">
-                  <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"
-                    style="margin-bottom: 25px;"></v-img>
                     <router-link :to="{ name: 'contact' }">
-                    <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
+                      <v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
                         block>
                         CONNECTEZ-VOUS
                       </v-btn>
                     </router-link>
+
+                  </v-card-text>
+                </v-col>
+                <v-col cols="6" class="mt-auto">
+                  <v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"
+                    style="margin-bottom: 5px;"></v-img>
+
                 </v-col>
               </v-row>
             </v-container>
@@ -64,85 +69,85 @@
 
             <!-- Créer Profiter Inspirer  -->
 
-            <div style="margin-top: 30px;">
+            <div class="d-flex justify-center align-center">
-              <v-container class="d-flex">
-                <v-container style="margin-top: 35px;" class="flex-grow-1">
               <div>
+                <div style="margin-top: 30px;">
+                  <v-container class="d-flex ">
+
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="344" v-bind="props">
+                      <v-card class=" mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/creer.png"></v-img>
+                        <v-img src="../../../images/creer.png" style="min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="400" v-bind="props" color="#a30e79">
                               <h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
-                                CRÉER
+                                CRÉER</h3>
-                              </h3>
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Libérez votre créativité sur
-                              <p class="text-justify pa-10" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
+                                Hutopy,
-                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
+                                où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli
-                                possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
+                                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>
-                </v-container>
 
+                    <v-space style="margin-left: 30px;"></v-space>
 
-                <v-container style="margin-top: 35px;" class="flex-grow-1 ">
-                  <div>
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="344" v-bind="props">
+                      <v-card class="mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/profitez.png"></v-img>
+                        <v-img src="../../../images/profitez.png" style="min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="400" 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-10" style="">Plongez dans l'univers Hutopy et découvrez un
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Plongez dans l'univers Hutopy
-                                espace
+                                et découvrez un
-                                où profiter rime avec
+                                espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
-                                s'enrichir. Savourez des contenus uniques, des interactions authentiques et une
+                                interactions authentiques
-                                expérience
+                                et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre
-                                personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
+                                quotidien.</p>
                             </v-card>
                           </v-container>
                         </v-overlay>
                       </v-card>
                     </v-hover>
-                  </div>
+
-                </v-container>
+                    <v-space style="margin-left: 30px;"> </v-space>
 
 
 
-                <v-container style="margin-top: 35px;" class="flex-grow-1">
-                  <div>
                     <v-hover v-slot="{ isHovering, props }">
-                      <v-card class="mx-auto" max-width="344" v-bind="props">
+                      <v-card class="mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/inspirer.png"></v-img>
+                        <v-img src="../../../images/inspirer.png" style="min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
-                            <v-card class="mx-auto" max-width="344" v-bind="props" color="#a30e79">
+                            <v-card class="mx-auto" max-width="400" 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-10" style="">Devenez une source d'inspiration sur Hutopy, en
+                              <p class="text-justify pa-4" style="font-size: 1.2em; ">Devenez une source
-                                partageant votre vision,
+                                d'inspiration sur Hutopy, en
-                                votre talent et vos histoires. Influencez positivement la communauté, éveillez la
+                                partageant votre vision, votre talent et vos histoires. Influencez positivement la
-                                curiosité et
+                                communauté, éveillez
-                                inspirez les autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
+                                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>
-                  </div>
+
-                </v-container>
                   </v-container>
                 </div>
+              </div>
+            </div>
+
 
             <!-- ILS SONT SUR HUTOPY -->
             <v-container>
@@ -262,7 +267,8 @@
             <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
             </div>
 
-            <div class="d-flex justify-content-center" style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
+            <div class="d-flex justify-content-center"
+              style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
                   style="border-radius: 50%; margin-right: 20px; width: 120px; height: 120px;" />

src/views/main/ProjectRoadmap.vue

@@ -0,0 +1,43 @@
+<template>
+    <DefaultLayout></DefaultLayout>
+    <v-container>
+        <v-img class="roadmap-image" src="../../../images/roadmapbanner.png"></v-img>
+
+    </v-container>
+
+    <FooterLayout></FooterLayout>
+</template>
+
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+
+
+</script>
+
+
+<style>
+.footer-donate {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 3;
+}
+
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+
+.roadmap-image {
+    border-radius: 35px;
+    width: 50%;
+    /* reduces width by 50% */
+    height: auto;
+    /* maintains aspect ratio */
+
+}
+</style>