Added users, Added router links, Added Userbrowser

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">
-                  ANONYME
-                </v-btn>
-              </div>
+
+
+
+                <!-- Colonne de droite -->
+                <v-col class="text-right d-flex align-center justify-end">
+                  <div class="d-flex align-center ">
+                    <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>

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/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/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 { ref } from 'vue';
+import DefaultLayout from '@/layouts/DefaultLayout.vue';
+import FooterLayout from '@/layouts/FooterLayout.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é Beauregard",
+        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/CreatorFolio.vue

@@ -46,13 +46,14 @@
             <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> -->
+        </v-col>
         <!-- TikTok -->
+        <v-spacer></v-spacer>
         <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">
             <v-img class="socialicons-mobile invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
@@ -64,13 +65,13 @@
       <!-- 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>
@@ -552,7 +553,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 +767,7 @@ let navigationItems = [
 
 .profile-banner {
   margin-top: 25px;
+  min-height: 200px
 }
 
 .v-navigation-drawer {
@@ -1089,6 +1091,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' }">
-                  <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                    class="profile-image  ">
+                <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>
@@ -202,9 +202,9 @@
                 </router-link>
               </v-col>
               <v-col>
-                <router-link :to="{ name: 'creatorfolio' }">
-                  <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" alt="Profile Image"
-                    class="profile-image">
+                <router-link :to="{ name: 'chloebeauregard' }">
+                  <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
+                    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' }">
-                <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeLarge.png" 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 :to="{ name: 'chloebeauregard' }">
+                <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
+                  alt="Profile Image" class="profile-image">
               </router-link>
             </v-col>
           </v-row>