Merged PR 42: Add user static link

Ajouts des pages des créateurs static
Ajouter d'une page index

Related work items: #38, #39, #40

src/layouts/DefaultLayout.vue

@@ -8,17 +8,25 @@
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
           <v-menu>
             <template v-slot:activator="{ props }">
-              <div class="d-flex align-center">
+              <v-row>
 
-                <!-- Profile picture in the top right corner -->
+
-                <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+
-                  class="header-profile-icon mr-2" alt="Logo">
+
-                <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
+                <!-- Colonne de droite -->
-                  ANONYME
+                <v-col class="text-right d-flex align-center justify-end">
-                </v-btn>
+                  <div class="d-flex align-center ">
-              </div>
+                    <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
+                      class="header-profile-icon mr-2" alt="Logo">
+                    <v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props">
+                      ANONYME
+                    </v-btn>
+                  </div>
+                </v-col>
+              </v-row>
             </template>
 
+
             <!-- Dropdown Menu Profile/Connection -->
             <v-list style="padding: 0;">
               <v-list-item>
@@ -66,8 +74,8 @@
           <router-link :to="{ name: 'home' }" class="">
             <v-list-item prepend-icon="mdi-home" title="Accueil" value="home"></v-list-item>
           </router-link>
-          <RouterLink :to="{ name: 'contact' }">
+          <RouterLink :to="{ name: 'userbrowser' }">
-            <v-list-item prepend-icon="mdi-account-multiple" title="Amis" value="friends"></v-list-item>
+            <v-list-item prepend-icon="mdi-account-multiple" title="Membres" value="friends"></v-list-item>
           </RouterLink>
           <!-- <v-list-item prepend-icon="mdi-newspaper" title="Contenu" value="content"></v-list-item>-->
           <!-- <v-list-item prepend-icon="mdi-wallet" title="Portefeuille" value="wallet"></v-list-item>-->

src/layouts/FooterLayout.vue

@@ -35,9 +35,10 @@
 
             <!-- Need X Account -->
             <v-col cols="auto">
-              <router-link :to="{ name: 'home' }">
+              <a href="https://twitter.com/Hutopyinc">
                 <img src="/images/hutopymedia/icons/pink/xpink.png" alt="Description image 1" class="icons">
-              </router-link>
+              </a>
+
             </v-col>
           </v-row>
         </v-container>

src/layouts/PostContentMenu.vue

@@ -0,0 +1,160 @@
+<template>
+    <v-col cols="12">
+        <v-container>
+            <v-card style="border-radius: 30px" elevation="10">
+                <v-card-text>
+                    <v-row>
+                        <!-- Boutons de sélection -->
+                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
+                            <v-btn elevation="0" icon @click="selectType('title')">
+                                <v-icon>mdi-format-title</v-icon>
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
+                            <v-btn elevation="0" icon @click="selectType('text')">
+                                <v-icon>mdi-text</v-icon>
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
+                            <v-btn elevation="0" icon @click="selectType('image')">
+                                <v-icon>mdi-image</v-icon>
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
+                            <v-btn elevation="0" icon @click="selectType('video')">
+                                <v-icon>mdi-video</v-icon>
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
+                            <v-btn elevation="0" icon @click="selectType('audio')">
+                                <v-icon>mdi-volume-high</v-icon>
+                            </v-btn>
+                        </v-col>
+                        <v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
+                            <v-btn elevation="0" icon @click="selectType('comments')">
+                                <v-icon>mdi-comment</v-icon>
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <!-- Affichage du contenu en fonction du type sélectionné -->
+                <v-card-text>
+                    <v-row v-for="(content, index) in contents" :key="index" class="draggable-row"
+                        @dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">
+                        <v-col cols="10">
+                            <template v-if="content.type === 'title'">
+                                <v-text-field v-model="content.value" label="Titre"></v-text-field>
+                            </template>
+                            <template v-else-if="content.type === 'text'">
+                                <v-textarea v-model="content.value" label="Texte"></v-textarea>
+                            </template>
+                            <template v-else-if="content.type === 'image'">
+                                <v-row>
+
+                                    <v-col cols="12">
+                                        <v-file-input v-model="content.value" label="Image"></v-file-input>
+                                    </v-col>
+                                </v-row>
+                            </template>
+                            <template v-else-if="content.type === 'video'">
+                                <v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>
+                            </template>
+                            <template v-else-if="content.type === 'audio'">
+                                <v-row>
+                                    <v-col cols="2">
+                                        <v-icon>mdi-volume-high</v-icon>
+                                    </v-col>
+                                    <v-col cols="10">
+                                        <v-file-input v-model="content.value" label="Audio"></v-file-input>
+                                    </v-col>
+                                </v-row>
+                            </template>
+                            <template v-else-if="content.type === 'comments'">
+                                <v-text-field v-model="content.value" label="Commentaires"></v-text-field>
+                            </template>
+                        </v-col>
+                        <v-col cols="2" class="d-flex justify-center align-center">
+                            <v-btn icon @click="removeContent(index)" class="remove-button">
+                                <v-icon>mdi-close</v-icon>
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-card-text>
+
+                <!-- Boutons Post, Preview et Cancel -->
+                <v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
+                    <v-col class="d-flex justify-end" style="margin-right: 4%;">
+                        <v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
+                            elevation="4">Post</v-btn>
+                        <v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
+                            elevation="5">Preview</v-btn>
+                        <v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
+                    </v-col>
+                </v-row>
+            </v-card>
+        </v-container>
+    </v-col>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const contents = ref([]);
+let dragIndex = null;
+
+const selectType = (type) => {
+    console.log("Type sélectionné:", type);
+    contents.value.push({ type: type, value: '' });
+};
+
+const removeContent = (index) => {
+    contents.value.splice(index, 1);
+};
+
+const postContent = () => {
+    // Implémenter la logique pour poster le contenu
+};
+
+const previewContent = () => {
+    // Implémenter la logique pour prévisualiser le contenu
+};
+
+const cancelPost = () => {
+    if (contents.value.length > 0) {
+        // Réinitialiser le tableau contents pour supprimer tous les contenus
+        contents.value = [];
+    }
+};
+
+const dragStart = (index) => {
+    dragIndex = index;
+};
+
+const drop = (index) => {
+    if (dragIndex !== null && index !== null) {
+        const draggedItem = contents.value[dragIndex];
+        contents.value.splice(dragIndex, 1);
+        contents.value.splice(index, 0, draggedItem);
+        dragIndex = null;
+    }
+};
+</script>
+
+<style scoped>
+.remove-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: -20%;
+}
+
+.toolbar-btn {
+    margin-top: 10px;
+    margin-bottom: -15px;
+}
+
+.draggable-row {
+    cursor: grab;
+}
+</style>

src/router/index.js

@@ -6,13 +6,16 @@ import HelpAndContact from '@/views/tos/HelpAndContact.vue'
 import TermsAndConditions from '@/views/tos/TermsAndConditions.vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import LoginView from '../views/LoginView.vue'
+import PaymentCompleted from '../views/PayementCompleted.vue'
 import SignupView from '../views/SignupView.vue'
+import UserBrowser from '../views/UsersBrowser.vue'
 import ContactView from '../views/main/ContactView.vue'
 import CreatorFolio from '../views/main/CreatorFolio.vue'
-import PaymentCompleted from '../views/PayementCompleted.vue'
 import HomeView from '../views/main/HomeView.vue'
 import YourProfile from '../views/main/YourProfile.vue'
-
+import ChloeBeauregard from '../views/manualusers/ChloeProfile.vue'
+import Hutopy from '../views/manualusers/HutopyProfile.vue'
+import Leffet from '../views/manualusers/LeffetProfile.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -89,6 +92,30 @@ const router = createRouter({
       name: 'about',
       component: About
     },
+
+    {
+      path: '/Hutopy',
+      name: 'Hutopy',
+      component: Hutopy
+    },
+
+    {
+      path: '/Leffet',
+      name: 'Leffet',
+      component: Leffet
+    },
+
+    {
+      path: '/userbrowser',
+      name: 'userbrowser',
+      component: UserBrowser
+    },
+
+    {
+      path: '/chloebeauregard',
+      name: 'chloebeauregard',
+      component: ChloeBeauregard
+    },
   ],
   scrollBehavior(to, from, savedPosition) {
     return { top: 0 };

src/views/PayementCompleted.vue

@@ -1,44 +1,67 @@
-<script setup>
+<template>
 
+  <body style="background-color: #f4f4f4;">
+
+    <DefaultLayout></DefaultLayout>
+    <v-container>
+      <div class="margin-top-mobile">
+        <v-row style="margin-top: 8%; margin-bottom: 2%" class="d-flex justify-center align-center">
+          <v-col cols="12" xxl="3" xl="4" lg="6" md="7" sm="9"> <v-card class="custom-dialog"
+              style="background-color: white;">
+              <v-container>
+                <!-- Title Card -->
+                <v-card-text style="font-weight: 600; margin-top: 25px; margin-bottom: 25px; font-size: 2.5rem;"
+                  class="text-center">
+                  Paiement complété
+                </v-card-text>
+                <v-row justify="center">
+
+                  <!-- Icon Check -->
+                  <v-col cols="12" class="text-center">
+                    <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+                  </v-col>
+                </v-row>
+                <!-- Informations -->
+                <v-row justify="center">
+                  <v-col cols="12">
+                    <v-card-text style="font-size: 1.2rem; text-align: center;">
+                      Merci de supporter
+                    </v-card-text>
+                    <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
+                      Guillaume Mousseau
+                    </v-card-text>
+                  </v-col>
+                </v-row>
+                <!-- Ok btn -->
+                <v-row>
+                  <v-col cols="12">
+                    <v-card-actions class="justify-center">
+                      <v-btn color="white" outlined elevation="2"
+                        style="font-size: 2rem; width: 250px; height: 50px; margin-bottom: 25px; background-color: #a30e79;"
+                        @click="this.$router.push({ path: '/guillaumeaime' })">Ok</v-btn>
+                    </v-card-actions>
+                  </v-col>
+                </v-row>
+              </v-container>
+            </v-card>
+          </v-col>
+        </v-row>
+      </div>
+    </v-container>
+    <FooterLayout></FooterLayout>
+
+  </body>
+</template>
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
 </script>
 
-<template>
+<style scoped>
-  <v-card class="custom-dialog" style="background-color: #f4f4f4;">
+@media (min-width: 200px) and (max-width: 960px) {
-    <v-container>
+  .margin-top-mobile {
-      <v-row justify="center">
+    margin-top: 60px;
-        <!-- Icon Check -->
+  }
-        <v-col cols="12" class="text-center">
+}
-          <v-icon color=#a30e79 size="250">mdi-check-circle</v-icon>
+</style>
-        </v-col>
-      </v-row>
-
-      <!-- Informations -->
-      <v-row justify="center">
-        <v-col cols="12">
-          <v-card-text style="font-weight: 600;">
-            Paiement complété
-          </v-card-text>
-          <v-card-text style="margin-top: -24px;">
-            Transaction : #
-          </v-card-text>
-
-          <v-card-text style="font-size: 1.2rem; text-align: center;">
-            Merci de supporter
-          </v-card-text>
-          <v-card-text style="font-weight: 600; font-size: 1.6rem; text-align: center;">
-            Guillaume Mousseau
-          </v-card-text>
-        </v-col>
-      </v-row>
-
-      <!-- Ok btn -->
-      <v-row>
-        <v-col cols="12">
-          <v-card-actions class="justify-end">
-            <v-btn @click="this.$router.push({path: '/guillaumeaime'})">Ok</v-btn>
-          </v-card-actions>
-        </v-col>
-      </v-row>
-    </v-container>
-  </v-card>
-</template>

src/views/StripePayment.vue

@@ -2,7 +2,7 @@
   <v-container>
 
     <v-row>
-      <v-text-field label="Message" v-model="tipMessage"
+      <v-text-field label="Message (facultatif)" v-model="tipMessage"
         style="border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
       </v-text-field>
     </v-row>

src/views/UsersBrowser.vue

@@ -0,0 +1,104 @@
+<template>
+    <div style="background-color: #f4f4f4;">
+        <DefaultLayout />
+
+        <v-container fluid style="margin-top: 100px; font-size: 3rem;">
+            <v-row justify="center">
+                <v-col cols="12" class="text-center">
+                    <v-row justify="center">
+                        <!-- Colonne de gauche -->
+                        <v-col class="text-left d-flex justify-center "> <!-- Ajout de align-center -->
+                            <router-link to="/" class="d-flex justify-center">
+                                <!-- Retrait de la classe align-center -->
+                                <v-btn color="#a30e79">Accueil</v-btn>
+                            </router-link>
+                        </v-col>
+                        <v-col cols="12">
+
+                            <div class="headline font-weight-bold">UTILISATEURS</div>
+
+                        </v-col>
+                    </v-row>
+                </v-col>
+            </v-row>
+        </v-container>
+
+        <v-container fluid style="margin-bottom: 80px;">
+            <v-row justify="center">
+                <v-col cols="12" sm="8" md="8">
+                    <v-container class="mt-10">
+                        <v-row justify="center">
+                            <router-link v-for="(profile, index) in profiles" :key="index" :to="profile.routerLink"
+                                class="text-decoration-none">
+                                <v-col>
+                                    <v-card class="mb-4 card-equal-width" style="max-width: 250px; height: 325px;">
+                                        <v-img :src="profile.imageUrl" height="200px" width="300px"
+                                            style="margin-top: 10px;"></v-img>
+                                        <v-card-title style="font-weight: 600;" class="text-center">{{ profile.name
+                                            }}</v-card-title>
+                                        <v-card-text class="text-center">{{ profile.description }}</v-card-text>
+                                    </v-card>
+                                </v-col>
+                            </router-link>
+                        </v-row>
+                    </v-container>
+                </v-col>
+            </v-row>
+        </v-container>
+        <FooterLayout />
+    </div>
+</template>
+
+<style>
+.card-equal-width {
+    max-width: 300px;
+    /* Ajustez cette valeur selon vos besoins */
+}
+</style>
+
+<script setup>
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.vue';
+import { ref } from 'vue';
+
+const profiles = ref([
+    {
+        id: 1,
+        name: "Hutopy",
+        description: "Page officiel",
+        imageUrl: '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png',
+        routerLink: 'Hutopy'
+    },
+    {
+        id: 2,
+        name: "L'effet",
+        description: "Fondation",
+        imageUrl: '/images/usersmedia/leffet/profilepictures/leffetProfile01.png',
+        routerLink: 'leffet'
+    },
+    {
+        id: 3,
+        name: "Guillaume M",
+        description: "Créateur de contenus",
+        imageUrl: '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
+        routerLink: 'guillaumeaime'
+    },
+    {
+        id: 4,
+        name: "Chloé Beaugrand",
+        description: "Spécialiste en médias sociaux",
+        imageUrl: '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png',
+        routerLink: 'chloebeauregard'
+    }
+]);
+</script>
+
+<style scoped>
+.text-decoration-none {
+    text-decoration: none;
+}
+
+.card-equal-width {
+    width: 220px;
+}
+</style>

src/views/main/ContactView.vue

@@ -33,10 +33,12 @@
                 <h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
                 <v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
                 <v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
-                <v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
+                <v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)"
-                  placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+                  label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici"
-                <v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
+                  rows="3" auto-grow></v-textarea>
-                  placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
+                <v-textarea v-model="socialNetworkAccount" 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 @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
                   class="mt-4 send-btn" block>Envoyez
                 </v-btn>
@@ -101,16 +103,19 @@
         </v-col>
       </v-row>
 
-      <!-- Form Information  -->+
+      <!-- Form Information  -->
-      <v-text-field v-model="name" class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
+      <v-text-field v-model="name" class="labelsize" label="Nom"
-      <v-text-field v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
+        style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
+      <v-text-field v-model="emailAddress" class="labelsize" label="Courriel"
+        style="color: rgb(107, 0, 101);"></v-text-field>
       <v-textarea v-model="reasonToJoin" class="labelsize" 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 v-model="socialNetworkAccount" class="labelsize" 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 @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
+      <v-btn @click="sendForm()"
+        style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
         class="mt-4 send-btn" block>
         Envoyez
       </v-btn>
@@ -182,8 +187,8 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import { ref } from 'vue';
 import { useClient } from "@/plugins/api.js";
+import { ref } from 'vue';
 
 const client = useClient();
 

src/views/main/CreatorFolio.vue

@@ -35,7 +35,7 @@
         </v-col>
         <!-- Instagram -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.instagram.com/p/C2f-3UnNdfX//">
+          <a href="https://www.instagram.com/guillaumeaime/">
             <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
               alt="Instagram"></v-img>
           </a>
@@ -46,12 +46,7 @@
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
           </v-row>
         </v-col>
-        <!-- X
+
-        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
-          <a href="https://www.x.com/">
-            <v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></v-img>
-          </a>
-        </v-col> -->
         <!-- TikTok -->
         <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
           <a href="https://www.tiktok.com/@guillaumeaime">
@@ -59,18 +54,25 @@
               alt="TikTok"></v-img>
           </a>
         </v-col>
+
+
+
+
+        <v-spacer class="hidden-xs"> </v-spacer>
+
+
       </v-row>
 
       <!-- User informations Name title and description  -->
       <v-row class="social-container-mobile">
         <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row>
+          <v-row class="d-flex justify-center">
             {{ name }}
           </v-row>
         </v-col>
         <v-spacer xs="12" sm="4"></v-spacer>
         <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
-          <v-row>
+          <v-row class="d-flex justify-center">
             {{ title }}
           </v-row>
         </v-col>
@@ -253,11 +255,6 @@
                       <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
                         alt="Description image 2">
                     </a>
-                    <!-- x
-                    <a href="https://www.facebook.com/profile.php?id=61556819217561">
-                      <img class="socialicons" src="/images/hutopymedia/icons/black/xblack.png"
-                        alt="Description image 2">
-                    </a> -->
 
                     <a href="https://www.tiktok.com/@guillaumeaime">
                       <img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
@@ -286,7 +283,7 @@
           </v-container>
         </v-container>
 
-
+        <!--   <PostContentMenu style="margin-top: -30px;"></PostContentMenu>  Post   -->
 
         <!-- Card youtube balado -->
         <v-container>
@@ -552,7 +549,7 @@ let drawerbottom = ref(false)
 
 let navigationItems = [
   { icon: 'mdi-home', text: 'Accueil', link: 'home' },
-  { icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
+  { icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
   //{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
 ];
 </script>
@@ -766,6 +763,7 @@ let navigationItems = [
 
 .profile-banner {
   margin-top: 25px;
+  min-height: 200px
 }
 
 .v-navigation-drawer {
@@ -1089,6 +1087,9 @@ let navigationItems = [
 }
 
 @media (min-width: 2560px) {
+
+
+
   .mobile-profile-picture-creator {
     transform: scale(1.5) translateY(25%) translateX(-20px);
   }

src/views/main/HomeView.vue

@@ -190,9 +190,9 @@
             <!-- Account links  -->
             <v-row justify="center" class="profile-images">
               <v-col>
-                <router-link :to="{ name: 'creatorfolio' }">
+                <router-link :to="{ name: 'Hutopy' }">
-                  <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
+                  <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
-                    class="profile-image  ">
+                    alt="Profile Image" class="profile-image  ">
                 </router-link>
               </v-col>
               <v-col>
@@ -202,9 +202,9 @@
                 </router-link>
               </v-col>
               <v-col>
-                <router-link :to="{ name: 'creatorfolio' }">
+                <router-link :to="{ name: 'chloebeauregard' }">
-                  <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
+                  <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
-                    class="profile-image">
+                    alt="Profile Image" class="profile-image">
                 </router-link>
               </v-col>
             </v-row>
@@ -327,8 +327,16 @@
           style="margin-top: 50px;  margin-bottom: 50px; text-align: center;  font-size: 3rem; font-weight: bold; color: #24393c">
           Ils sont sur Hutopy.</h1>
 
+
+
         <v-col>
           <v-row justify="center" class="profile-images">
+            <v-col cols="8">
+              <router-link :to="{ name: 'Hutopy' }">
+                <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
+                  alt="Profile Image" class="profile-image  ">
+              </router-link>
+            </v-col>
             <v-col cols="8">
               <router-link :to="{ name: 'creatorfolio' }">
                 <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
@@ -336,15 +344,9 @@
               </router-link>
             </v-col>
             <v-col cols="8">
-              <router-link :to="{ name: 'creatorfolio' }">
+              <router-link :to="{ name: 'chloebeauregard' }">
-                <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
+                <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
-                  class="profile-image  ">
+                  alt="Profile Image" class="profile-image">
-              </router-link>
-            </v-col>
-            <v-col cols="8">
-              <router-link :to="{ name: 'creatorfolio' }">
-                <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                  class="profile-image">
               </router-link>
             </v-col>
           </v-row>