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>