Added users, Added router links, Added Userbrowser

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>