Updated UI

.vscode/settings.json

@@ -1,6 +1,6 @@
 {
     "editor.codeActionsOnSave": {
-        "source.fixAll.eslint": true
+        "source.fixAll.eslint": "explicit"
     },
     "eslint.validate": [
         "javascript"

images/likeicon.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100" viewBox="0 0 100 100">
+  <image x="4" y="6" width="92" height="84" xlink:href="data:img/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABUCAYAAAAPvFA1AAAF/UlEQVR4nO2dW0gjVxjHk3hh1ULt1rQv3qrVgFC0Col5MYIiGi8PhaQJBvEeLG0KsVraLn0oxZdSWCi0bEzqlVLSJxFEsA9KBaMLKVJ9iGBTjRi7rhUvUdFcygk7YZNMaozfzJxOzg+yyC755js/3PCfb05mBIFAAOvX4ODgtMvlCtBxdnYWWFxcvB4eHv4F93VQL+wbjCU7kpmZmQuNRlNIhN//FTeLi4s3Wq32TZzXIxLwCIVCkarT6f5Sq9XpuK6KV8IRSqXyQWVl5VMMWqGHTx8pFB6PJ9DT09NNPlJYIjMzU6DVan/AsTdeCkfU1dWlGwyGbzFoJQzeCke0tbV9iEEbYfBaeH19fXpvb28vBq2E4LVwREVFxSMM2gjBe+FKpTJfrVanYNBKEN4LLyoqEmZnZ+sxaCUI74UjcnNzdRi0ESQphJeWlpZh0EaQpBBeXFz8CgZtBEkK4WKxGJt1Yi28vb29CKKOWCwWQtSBAGvhEolkGqKO1+uFKAMC1sIbGxulEHX29vYCEHUgwFa4Xq83SKVSkBOW/f39G4g6EGArXCaTfQFVy+l0/gNV675gKVytVj9sbW19A6qe0+nE5goQlsJLSkp+EovFYPXcbvcTsGL3RIgu++AG2mtSW1ubBtHW3t4eOrUnsTAW3d3d79fU1IDIRiwvL5+CN3kPsBNeVVX1jUgE19b6+vpvYMUAwEo42k/S1taWB1UPnfC4XK7PoOpBgJXwgoKCsbw8MN+C1dVV7/T09B9gBQHASnhtbe17kPVWV1f/hKwHATbCOzo6FA0NDQ8gazocDhNkPQiwEV5eXv4kLQ0snATj4PHx8WOwglAYjcaxnZ2dRHaU3Qm07XhwcHCSbvuXSqVK2dra8jPeBAucn58HNjc3/RaL5Vl/f78hcq2C3d1d1pp5cawo4QaD4TF3ipjD6/UGxsbGnqtUqoch4WjjI8tECbdarWd8FE6Bzpwp6SL0X53LjzSdTvdOS0sLNtccmUChUKQ1NTU5UGkknNNZcVlZ2VhGRgaXLbBCR0dHTn9//0cit9vt4bKR5ubmd7k8PlukpKQIpFLpI9Hh4eEhl42Ul5cnxc4BhFwuF4uOjo6cGPSSFOTn5wtFJycn9mQXwRZomCY6PT39NTmWyz1Op9Mvurq6Wrq8vEx2F6xgt9sPRVar1YfOAJNgvZyCTnpsNtvnwYTAdRZPBsxm899ms/nHoHCuszjfWVpaullYWJCgZaaiP15k8deSXQwTTE1NHc/Ozr5ltVpPBNQ8nGRx5ri5ufFSsgWUcJLFmaOrq0uMZijUAYLCSRZnDqFQiE7pv6QOEBROsjizyGSy16kDhLa6ORwOv0QiYWNLWOQxeH8O4PF4BFlZWcF1hyZ1JIszx/X1dah2SDjJ4syBZihU8ZBwrufifAbNUKjlhYSTLM4M1AyFKh4STrI4M1AzFKp4SDjJ4vC8PEOhSKV+oLJ4MlxBZ4PIGQpF6DeczMVhiZyhUIRdMSdZHI7IGQpFmHCSxeGInKFQhAknWRyWl2coFGHCSRaHpaCgIGo2FSacZHFY6L4DGyacZHFY6FJfmHAyF4fFZrMdRRYME06yOBx+vx8J/yqyYNTOVZLFYZicnDwymUzfRRaLEk6y+P1Bj0aYm5srpSuUGvkXZI9K4qCPEfSbjWRbrVbam+JE/YaTLJ4Y29vbgYGBgY87OztzYskW0AknWTwxCgsLhX6//+q2N0cJJ1k8MdB3eORy+de3vTlKOMniiVNdXZ1z25tpb8HE8B4V3u5Lubi4QA/8+E9vtN8gI1k8MeK5AyitcJLFEyOeb3XTCidz8cRYWVl5dtsbaYWTLH53fD6fYG1tLWp2EgmtcDaz+MrKio+tYzHJxMTEc5PJ9P1th6AVzmYWHx8f//TkJOri9v8KNDuZn59/O66eY92h5+DgAPy+IbFuUKPX6z+J90GlOIFuQGOxWA5VKtWr8T78LuY/DA0N/Yzuuw0p22g0TsQ6nkajyRsZGfndbrf7OLhpTtygxwJvbGz4R0dHD/r6+j6409MGAwHBv2b/H8RKg2wvAAAAAElFTkSuQmCC"/>
+</svg>

src/layouts/CreatorHeader.vue

@@ -1,164 +0,0 @@
-<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

@@ -1,15 +1,65 @@
 <template>
-  <nav class="py-8 px-8">
+  <div class="md:flex hidden items-center justify-between flex-col">
-    <div class="max-w-7xl mx-auto">
+    <!-- Version pour ordinateur -->
-      <!-- Version pour ordinateur -->
+    <v-container style="z-index: 2000;">
-      <div class="md:flex hidden  items-center justify-between">
+      <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
-        <div class="menu-left flex items-center">
+
+        <v-card-text justify="end" style="max-width: 22%; margin-top: .2%; margin-bottom: -1.2%;">
+          <v-text-field :loading="loading" append-inner-icon="mdi-magnify" density="compact"
+            label="Recherche et comptes (Non fonctionnel pour le moment)" variant="solo" hide-details single-line
+            @click:append-inner="onClick"></v-text-field>
+        </v-card-text>
+
+        <v-col cols="2" class="d-flex align-center">
+          <router-link :to="{ name: 'yourprofile' }">
+            <v-row class="d-flex align-center">
+              <img src="/images/anonyme.png" class="img-small mr-2 logob rounded-full img-small profilePicture"
+                alt="Logo">
+              <h1 class="mb-0 text-h5">ANONYME</h1>
+            </v-row>
+          </router-link>
+        </v-col>
+      </v-row>
+
+    </v-container>
+
+  </div>
+
+
+
+
+
+
+
+
+
+  <!-- Version pour mobile -->
+  <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' }">
             <img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
           </router-link>
-        </div>
+        </v-col>
-        <div class="menu-center flex items-center justify-center space-x-12">
+        <v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
+        <v-col cols="auto">
+          <!-- Photo de profil -->
+          <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
+            <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
+          </router-link>
+        </v-col>
+      </v-row>
+    </v-container>
 
+    <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">
             <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 +67,9 @@
                 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>
-
+        </v-col>
-
+        <!-- Deuxième lien avec icône -->
+        <v-col cols="auto" class="mx-4">
           <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 +77,9 @@
                 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>
-
+        </v-col>
-
+        <!-- Troisième lien avec icône -->
+        <v-col cols="auto" class="mx-4">
           <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,97 +87,26 @@
                 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>
+        <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 20px;"></div>
-        <div class="menu-right">
+
-          <router-link :to="{ name: 'yourprofile' }">
+      </v-row>
-            <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture" alt="Logo">
-          </router-link>
-        </div>
-      </div>
 
 
-      <!-- Version pour mobile -->
+    </v-container>
-      <div class="md:hidden flex flex-col items-center justify-center">
+  </div>
-        <v-container style="margin-top: -20px;">
-          <v-row>
-
-
-            <v-col cols="auto">
-              <!-- Logo -->
-              <router-link :to="{ name: 'home' }">
-                <img src="/images/Chevron2.png" class="img-Logo mr-2 logo rounded-full" alt="Logo">
-              </router-link>
-            </v-col>
-            <v-spacer></v-spacer> <!-- Espace flexible pour pousser la photo de profil à droite -->
-            <v-col cols="auto">
-              <!-- Photo de profil -->
-              <router-link :to="{ name: 'yourprofile' }" class="text-green-700">
-                <img src="/images/pascal.jpg" class="img-small mr-2 logob rounded-full img-small profilePicture"
-                  alt="Logo">
-              </router-link>
-            </v-col>
-          </v-row>
-        </v-container>
-
-        <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">
-                <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">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    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>
-            </v-col>
-            <!-- Deuxième lien avec icône -->
-            <v-col cols="auto" class="mx-4">
-              <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">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    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>
-            </v-col>
-            <!-- Troisième lien avec icône -->
-            <v-col cols="auto" class="mx-4">
-              <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">
-                  <path stroke-linecap="round" stroke-linejoin="round"
-                    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>
-
-
-        </v-container>
-      </div>
-    </div>
-
-
-
-
-
-  </nav>
 
   <main class="px-8 py-3 ">
     <router-view />

src/layouts/FooterLayout.vue

@@ -23,7 +23,7 @@
     </v-container>
 
     <v-container class="text-white text-center">
-      {{ new Date().getFullYear() }} — <strong>Hutopy</strong>
+      {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
     </v-container>
 
 

src/layouts/FormInscriptionBeta.vue

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

src/layouts/Profile.vue

@@ -1,41 +0,0 @@
-<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/views/main/ContactView.vue

@@ -1,18 +1,50 @@
 <template>
-  <DefaultLayout></DefaultLayout>
+
 
   <!--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">
+              Accueil
+            </v-btn>
+          </router-link>
+        </v-col>
+      </v-row>
+
+
+
+
+
+
+
+    </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: 70vw; margin: auto;">
+      <div class="center-column" style="width: 100vw; margin: auto;">
-        <h1 class="h1-inscription-beta">Participez au développement de </h1>
+        <h1 style="font-size: 3rem; margin-top: 7%; margin-bottom: 7%;" class="h1-inscription-beta">Participez au
-        <h1 class="h1-inscription-betacolor">Hutopy</h1>
+          développement de </h1>
-        <div class="grid grid-cols-2 gap-4">
+
+        <div class="grid grid-cols-2 gap-4" style="margin-bottom: 10%;">
           <div class="rectangular-image h-full flex justify-center items-center">
 
-            <img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture" style="float: right;">
+            <img src="../../../images/homepage/love.png" alt="Bannière" class="contactpicture" style="float: right;">
 
           </div>
 
@@ -20,14 +52,26 @@
 
 
 
-            <p class="para-inscription" style="font-size: 1.4rem;">
+            <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>
-            <FormInscriptionBeta></FormInscriptionBeta>
+
+            <v-text-field label="Nom ($)"
+              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-text-field label="Courriel ($)"
+              style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></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>
+
+            <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>
           </div>
@@ -44,6 +88,7 @@
   <v-container style="margin-top: -100px;">
 
     <div class="md:hidden flex flex-col items-center justify-center">
+      <DefaultLayout></DefaultLayout>
       <h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
 
 

src/views/main/CreatorFolio.vue

@@ -1,88 +1,99 @@
 <template>
   <DefaultLayout></DefaultLayout>
-  <v-container class="image-container" style="margin-top: -6%;">
-    <img src="../../../images/guillaimeaime2x.png" alt="" class="image-banner">
-  </v-container>
-
-  <v-container>
-    <img src="../../../images/guillaume.png" class="image-profile">
-  </v-container>
-
-
-
-
 
   <!-- PC-->
   <div class="md:flex hidden items-center justify-between flex-col">
 
+    <!-- Banner + Profile-->
+    <div style="margin-top: -1.6%;">
+      <v-row>
+        <v-col cols="12">
+          <img src="../../../images/guillaimeaime3x.png" class="banner-image" alt="Bannière"
+            style="width: 100vw; border-top: 5px solid rgba(107, 0, 101, 1);">
 
 
-    <v-container fluid class="menu-creator-position donate-menu">
-      <v-row class="d-flex justify-center"> <!-- Centrer les rangées -->
-        <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>
-                <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>
+    </div>
 
-        <!-- Center -->
+    <v-card class="label-paiement-color"
-        <v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
+      style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
-          <!-- Premier composant -->
+    </v-card>
+
+
+
+    <v-container class="pa-0">
+      <v-row no-gutters class="justify-center">
+        <!-- Left menu -->
+        <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>
+
+            <RouterLink :to="{ name: 'home' }">
+              <v-btn size="x-large" style="min-width: 370px; max-width: 370px;" elevation="0">
+                <v-icon left class="icon-size" style="margin-left: -95%;">mdi-home</v-icon>
+                Accueil
+              </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>
+            </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>
+            </RouterLink>
+
+
+          </v-container>
+        </v-col>
+
+        <!-- center menu -->
+
+        <v-col cols="7" class="mx-0">
 
 
 
 
           <v-card class="flow-menu m-0"
-            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
+            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"
+                <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
-                  style="color: rgb(255, 255, 255); margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
                   MA MISSION</h1>
               </v-col>
 
               <v-col>
-                <h1 style=" color: rgb(255, 255, 255);margin-top: 5%; margin-left: 10%;" class="card-date text-left">
+                <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
                   10-03-2024</h1>
               </v-col>
 
-              <v-col style="margin-right: 1%;" class="text-right">
+              <v-col style="margin-right: 4%;" class="text-right">
                 <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
-                    style="color: rgb(163, 14, 121);">mdi-pencil</v-icon></v-btn>
+                    style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
               </v-col>
             </div>
 
+
             <div
               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%;" src="../../../images/guillaumepublication.jpg"></v-img>
+                <iframe width=100% height="650px" src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD">
+                </iframe>
+
+
                 <p class="text-justify pa-10" style="margin-bottom: -3%; 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
@@ -91,105 +102,233 @@
                   comprises. Et toi, quel est ton objectif pour cette année?</p>
 
                 <div
-                  style="margin-bottom: 5%; background-color: rgba(163, 14, 121, 1); height: 3px; width: 100%; margin-top: 20px;">
+                  style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
                 </div>
 
-                <div style="background-color: rgba(163, 14, 121, 1); height: 3px; width: 100%; margin-top: 20px;"></div>
+                <v-row>
+                  <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-icon left class="icon-size">mdi-thumb-up</v-icon>
+                        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-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-icon left class="icon-size">mdi-share-variant</v-icon>
+                        Partagez
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+
+
+                </v-row>
+
+
+
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Champ Commentaire -->
+
+                <v-text-field style="margin-left: 2%;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+
 
               </v-container>
             </div>
-
           </v-card>
 
 
+
           <v-card class="flow-menu m-0"
-            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
+            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"
+                <h1 class="text-center" style=" margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
-                  style="color: rgb(255, 255, 255); margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
+                  MA MISSION</h1>
-                  PODCAST #01</h1>
               </v-col>
 
               <v-col>
-                <h1 style=" color: rgb(255, 255, 255);margin-top: 5%; margin-left: 10%;" class="card-date text-left">
+                <h1 style="margin-top: 5%; margin-left: -20%;" class="card-date text-left">
-                  16-03-2024</h1>
+                  10-03-2024</h1>
               </v-col>
 
-              <v-col style="margin-right: 1%;" class="text-right">
+              <v-col style="margin-right: 4%;" class="text-right">
                 <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
-                    style="color: rgb(163, 14, 121);">mdi-pencil</v-icon></v-btn>
+                    style="color: rgb(0, 0, 0);">mdi-pencil</v-icon></v-btn>
               </v-col>
             </div>
 
+
             <div
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
               <v-container>
-                <v-container style="height: 700px; margin-top: -3%;">
-                  <iframe width="100%" height="100%"
-                    src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
-                </v-container>
 
-                <p class="text-justify pa-10" style="margin-top: -5%; font-size: 1.2em">Ma mission est claire : mettre
+                <v-img
-                  en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
+                  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>
+
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; 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>
 
+                <div
+                  style="margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <v-row>
+                  <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-icon left class="icon-size">mdi-thumb-up</v-icon>
+                        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-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-icon left class="icon-size">mdi-share-variant</v-icon>
+                        Partagez
+                      </v-btn>
+                    </v-col>
+                  </v-row>
+
+
+                </v-row>
+
+
+
+                <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
+                </div>
+
+                <!-- Champ Commentaire -->
+
+                <v-text-field style="margin-left: 2%;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+
 
               </v-container>
             </div>
-
           </v-card>
 
 
         </v-col>
 
+        <!-- Right menu -->
+        <v-col cols="2" class="mx-0">
+
+          <!-- Profile 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;">
+
+            <v-container class="text-center" style="background-color: #6b0065; margin-bottom: -10px;">
+              <h1 style="font-size:3rem; color: white;">
+                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-form @submit.prevent>
+                    <v-text-field label="Montant ($)"
+                      style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                  </v-form>
+                </v-sheet>
+              </v-col>
+              <v-col cols="6">
+                <v-btn
+                  style=" margin-left: -15px; background-color: rgb(163, 14, 121); 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-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 cols="3" class="d-flex justify-start">
-          <!-- Menu à droite -->
-          <v-col cols="3" class="d-flex" style="justify-content: start;">
-            <!-- 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>
-                  <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>
 
-          <!-- Ajoutez ici votre menu de droite -->
         </v-col>
       </v-row>
-
-
     </v-container>
 
 
 
+
+
+
+
+
+
   </div>
 
 
@@ -256,6 +395,7 @@ import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
 
 
+
 import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
 
 </script>
@@ -278,16 +418,42 @@ export default {
 }
 
 .image-banner {
-  width: 100%;
+
-  clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);
+  width: 90%;
+  /* 100% de la largeur de la fenêtre visible */
+  margin: 0;
+  /* Enlève les marges par défaut */
+  z-index: -1000;
+  /* Met l'image en arrière-plan */
+
+
 }
 
-/*Profile*/
+/*Profile */
 
 .image-profile {
   border-radius: 50%;
+
+  margin-left: 15%;
+  margin-top: -7%;
+  border: 10px solid white;
+  z-index: 9999;
+
 }
 
+.description-text {
+  font-size: 1.3rem;
+  text-align: left;
+  align-items: center;
+  color: white
+}
+
+
+/*LeftMenu */
+.icon-size {
+  font-size: 30px;
+  /* ou toute autre taille de votre choix */
+}
 
 
 
@@ -314,7 +480,7 @@ export default {
 }
 
 .card-header {
-  background-color: rgba(163, 14, 121, 1);
+  background-color: rgba(255, 255, 255, 0.6);
   /* Couleur de l'en-tête */
   padding: 10px;
   /* Marge intérieure */

src/views/main/HomeView.vue

@@ -1,11 +1,38 @@
 <template>
   <v-app>
-    <DefaultLayout></DefaultLayout>
+
+
+
 
     <!--PC -->
-    <div class="md:flex hidden items-center justify-between flex-col">
+    <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">
+                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">
+                Inscription
+              </v-btn>
+            </RouterLink>
+          </v-col>
+        </v-row>
+      </v-container>
 
-      <img src="../../../images/BannerGaspe.png" class="banner-image" alt="Bannière">
+
+
+      <img src="../../../images/homepage/banniere.png" class="banner-image" alt="Bannière" style="min-height: 500px;">
 
 
 
@@ -21,52 +48,6 @@
 
 
 
-            <!-- Description D'hutopy -->
-
-            <v-container class="layer1-background" style="margin-top: 35px;">
-              <v-row>
-                <v-col cols="6">
-                  <v-card-text>
-                    <div>
-                      <h2 style="margin-top: 30px; margin-bottom: 70px; font-size: 50px; text-align: center;">C'EST QUOI
-                        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
-                        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>
-                    </div>
-
-                    <router-link :to="{ name: 'contact' }">
-                      <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>
-
-
-            <!-- Fin Description D'hutopy -->
-
             <!-- Créer Profiter Inspirer  -->
 
             <div class="d-flex justify-center align-center">
@@ -76,7 +57,8 @@
 
                     <v-hover v-slot="{ isHovering, props }">
                       <v-card class=" mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/creer.png" style="min-width: 344px;"></v-img>
+                        <v-img src="../../../images/homepage/creer.png"
+                          style="border-radius: 20px; min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
@@ -98,7 +80,8 @@
 
                     <v-hover v-slot="{ isHovering, props }">
                       <v-card class="mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/profitez.png" style="min-width: 344px;"></v-img>
+                        <v-img src="../../../images/homepage/profiter.png"
+                          style="border-radius: 20px; min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
@@ -123,7 +106,8 @@
 
                     <v-hover v-slot="{ isHovering, props }">
                       <v-card class="mx-auto" max-width="400" v-bind="props">
-                        <v-img src="../../../images/inspirer.png" style="min-width: 344px;"></v-img>
+                        <v-img src="../../../images/homepage/inspirer.png"
+                          style="border-radius: 20px; min-width: 344px;"></v-img>
                         <v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
                           contained>
                           <v-container>
@@ -149,29 +133,92 @@
             </div>
 
 
+            <!-- Description D'hutopy -->
+            <v-container style="margin-top: 4%;">
+              <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-row>
+                    <v-col>
+
+                    </v-col>
+
+                    <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>
+                      </RouterLink>
+                    </v-col>
+                  </v-row>
+
+
+
+                </v-col>
+
+                <v-col>
+                  <v-img src="../../../images/homepage/cestquoihutopy.png"
+                    style="border-radius: 90px; min-width: 344px;"></v-img>
+                </v-col>
+              </v-row>
+            </v-container>
+
+
+
+
+
+
+
+            <!-- Fin Description D'hutopy -->
+
+
+
             <!-- ILS SONT SUR HUTOPY -->
             <v-container>
               <v-card-text>
-                <h2 style="text-align: center;">ILS SONT SUR HUTOPY</h2>
+                <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>
+
 
                 <v-container style="margin-top: 25px;">
 
-                  <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 40px;">
+                  <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.png" alt="Profile Image" class="profile-image">
+                      <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.png" alt="Profile Image" class="profile-image">
+                      <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.png" alt="Profile Image" class="profile-image">
+                      <img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image"
+                        style="border: 3px solid rgb(163, 14, 121);">
                     </router-link>
                   </v-row>
 
-                  <div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: 40px;">
+                  <div style="background-color: rgba(0, 0, 0, 1); height: 2px; width: 100%; margin-top: 70px;">
                   </div>
 
                 </v-container>
@@ -198,6 +245,7 @@
     <div class="md:hidden flex flex-col items-center justify-center">
       <div>
 
+        <DefaultLayout></DefaultLayout>
 
         <img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
 
@@ -390,11 +438,11 @@ export default {
 }
 
 .profile-image {
-  width: 150px;
+  width: auto;
   /* Largeur des images */
-  height: 150px;
+  height: 180px;
   /* Hauteur des images */
-  border-radius: 50%;
+  border-radius: 20%;
   /* Coins arrondis */
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
 }