jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New CreatorMainpage more built with components

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-20 22:00:10 -04:00
parent 24ecff0d59
commit bb14c6071e
5 changed files with 167 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
src/layouts/DefaultLayout.vue
View File

@@ -3,16 +3,22 @@
<body style="background-color: #f4f4f4;">
<!-- PC Version -->
<v-card style="z-index: 1000; background-color: #ffff;" class="hidden-sm-and-down" elevation="5">
<v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
<v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
<v-container fluid>
<v-row>
<v-menu>
<template v-slot:activator="{ props }">
<v-row>
<!-- Colonne de droite -->
<v-col class="text-right d-flex align-center justify-end">
<v-row align="center"> <!-- Utilisation de align="center" pour aligner verticalement le contenu -->
<v-col class="ml-4">
<router-link to="/">
<v-img src="/images/hutopymedia/icons/logohutopy.png" alt="Description de l'image"
style="height: 70px; width: 70px;" class="mr-2" :elevation="10"></v-img>
</router-link>
</v-col>
<v-col cols="auto" class="ml-auto"> <!-- Utilisation de ml-auto pour aligner à droite -->
<div class="d-flex align-center">
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
class="header-profile-icon mr-2" alt="Logo">
class="header-profile-icon mr-2" alt="Logo">
<v-btn flat style="min-width: 200px; font-size: 1.3rem;" dark v-bind="props" ref="walletActivator">
{{ currentUserName }}
</v-btn>
@@ -207,18 +213,15 @@ function openWalletDialog() {
padding-right: 24px;
z-index: 1001;
}
.mini-profile-picture {
border-radius: 100px;
}
.header-profile-icon {
height: 60px;
width: 60px;
border-radius: 50px;
border: 2px solid #a30e79;
}
.mobile-profile-picture {
height: 40px;
border-radius: 50px;
@@ -226,37 +229,11 @@ function openWalletDialog() {
border: 2px solid #a30e79;
margin-right: 10px;
}
.header-banner {
border-top: 5px solid rgba(107, 0, 101, 1);
margin-top: 15%;
}
.social-container {
background-color: #006d77;
margin-top: -20%;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.social-container2 {
background-color: #0baab2;
font-size: 1.4rem;
font-weight: 800;
color: white;
}
.mobile-header {
height: 50px;
width: auto;
border-radius: 10px;
}
.mobile-navigation-container {
background-color: #a30e79;
}
.h1-navigation {
padding-left: 20%;
font-size: 1.4rem;

6
src/router/index.js
View File

@@ -13,6 +13,7 @@ import LoginView from '../views/LoginView.vue'
import PaymentCompleted from '../views/PayementCompleted.vue'
import SignupView from '../views/SignupView.vue'
import ContactView from '../views/main/ContactView.vue'
import CreatorMainPage from '../views/main/CreatorMainPage.vue'
import CreatorFolio from '../views/main/CreatorFolio.vue'
import HomeView from '../views/main/HomeView.vue'
import UserBrowser from '../views/main/UsersBrowser.vue'
@@ -143,6 +144,11 @@ const routes = [
path: '/creatorFolio',
name: 'creatorFolio',
component: CreatorFolio
},
{
path: '/creatormainpage',
name: 'creatormainpage',
component: CreatorMainPage
}
]

224
src/views/main/CreatorFolio.vue
View File

@@ -4,10 +4,10 @@
<!-- "Mobile -->
<v-row class="fluid hidden-md-and-up social-mobile-container"
style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
style="margin-top: -10px; position: relative; z-index: 0;">
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
@@ -22,22 +22,21 @@
</v-row>
<!-- User Social Network Links -->
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
hidden-md-and-down>
<v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons">
<!-- Facebook -->
<v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
<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.facebook.com/GuillaumeMousseau222">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Facebook"></v-img>
alt="Facebook"></v-img>
</a>
</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/guillaumeaime/">
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Instagram"></v-img>
alt="Instagram"></v-img>
</a>
</v-col>
<!-- Profile picture - Small -->
@@ -51,16 +50,11 @@
<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"
alt="TikTok"></v-img>
alt="TikTok"></v-img>
</a>
</v-col>
<v-spacer class="hidden-xs"> </v-spacer>
</v-row>
<!-- User informations Name title and description -->
@@ -79,14 +73,12 @@
</v-row>
<v-row>
<v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
class="social-icon-group-mobile">
class="social-icon-group-mobile">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify" style="color: white;"
text="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 : Ma mission est claire :">
text="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 : Ma mission est claire :">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
@@ -95,21 +87,19 @@
</v-container>
<!-- Bannière Pc -->
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
hidden-sm-and-up>
<v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0;">
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
<v-img class="profile-banner" max-height="375" :src="imageSrc" cover
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row>
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
hidden-sm-and-up>
<v-row class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
<!-- "Core (Menu / Center / Donation)" -->
<v-row>
<!-- "Menu" -->
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
<v-col cols="2" md="3" lg="3" xl="3" xxl="2" class="hidden-sm-and-down menu-col">
<v-col style="margin: 0;">
<v-row class="Hutopy-menu-sticky-mobile">
<v-spacer></v-spacer>
@@ -118,12 +108,11 @@
<!-- Nav-Btn -->
<v-col cols="12" class="px-0">
<v-img src="/images/hutopymedia/banners/hutopy.png" alt="Description de l'image"
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
<v-list dense class="main-background">
<v-list-item v-for="item in navigationItems" :key="item.link">
<router-link :to="item.link">
<v-btn text class="d-flex align-start align-center main-background" elevation="0"
outlined="false">
<v-btn text class="d-flex align-start align-center main-background" elevation="0">
<v-icon left class="mr-4">{{ item.icon }}</v-icon>
{{ item.text }}
</v-btn>
@@ -142,7 +131,7 @@
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
<v-container class="profile-container hidden-sm-and-down">
<v-container>
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
<!-- User informations Name & title -->
@@ -167,16 +156,16 @@
<v-row>
<a href="https://www.facebook.com/GuillaumeMousseau222">
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
alt="Description image 2">
alt="Description image 2">
</a>
<a href="https://www.instagram.com/p/C2f-3UnNdfX/">
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
alt="Description image 2">
alt="Description image 2">
</a>
<a href="https://www.tiktok.com/@guillaumeaime">
<img class="socialicons invert-color" src="/images/hutopymedia/icons/white/tiktokwhite.png"
alt="Description image 2">
alt="Description image 2">
</a>
</v-row>
</v-col>
@@ -186,12 +175,12 @@
<!-- Description -->
<v-row>
<v-container
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
<v-expansion-panels style="min-width: 320px;">
<v-col cols="12" offset="-1">
<v-expansion-panel class="background-pink text-justify" style="color: white;"
text="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 : Ma mission est claire :">
text="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 : Ma mission est claire :">
</v-expansion-panel>
</v-col>
</v-expansion-panels>
@@ -209,84 +198,92 @@
</v-col>
</v-row>
<!-- Card youtube balado -->
<!-- Example carte dynamique avec expension -->
<v-row class="d-flex justify-center align-center">
<v-col xl="10" xxl="8">
<v-container>
<v-card class="flow-menu m-0 youtube-card">
<!-- Title, date and btn -->
<v-col>
<v-row>
<v-col class="text-center">
<h1 class="card-title">
MON PREMIER BALADO</h1>
<h1 class="card-title">POST DYNAMIQUE</h1>
</v-col>
<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn>
</v-col>
<!--<v-col class="text-right">
<v-btn class="btn-card-options" flat tile elevation="0">
<v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
</v-btn> (a intégrer)
</v-col> -->
</v-row>
</v-col>
<v-img :src="imageSrc" title="Guillaumem"></v-img>
<p class="text-justify pa-10" style="margin-bottom: -10px; font-size: 1em">
C’est un honneur de vous présenter mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement.
</p>
<div v-if="showMore">
<v-row no-gutters>
<v-col cols="6" class="text-center pa-0">
<v-img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png" @click="openCarousel(0)" class="image-full"></v-img>
</v-col>
<v-col cols="6" class="text-center pa-0">
<v-img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png" @click="openCarousel(1)" class="image-full"></v-img>
</v-col>
</v-row>
<p class="text-justify pa-10" style="font-size: 1em; margin-bottom: -25px">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- Card core Video/image & text -->
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
<v-container>
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<p class="text-justify pa-10" style="font-size: 1em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<!-- Date -->
<v-row class="text-right">
<v-col>
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
24-04-2024
</h1>
</v-col>
</v-row>
<iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen></iframe>
<p class="text-justify pa-10" style="margin-bottom: -50px; font-size: 1em">C’est un honneur de vous
présenter
mon tout premier balado. Dans ce premier épisode, les passionnés de cinéma et de gadgets seront
particulièrement gâtés, car je dévoile les gadgets que j'utilise professionnellement. Par la
suite,
je
partage mon itinéraire professionnel peu conventionnel : de mes débuts dans le secteur bovin à
travers
le
Canada, à mon poste actuel comme directeur marketing chez Journal Mobile, jusqu'à la direction de
mon
agence
créative, Alliés. Enfin, je vous invite à découvrir un autre aspect de ma vie à travers ma page
personnelle,
"Guillaume aime", où je partage tout ce qui me passionne.</p>
<!-- Like dislike commment Section -->
<div style="height: 20px;"></div>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
</v-container>
<p class="text-justify pa-10" style="font-size: 1em;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<!-- Like dislike commment Section -->
<div style="height: 20px;"></div>
<div
style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
</div>
<!-- Comments -->
<v-text-field style="margin-bottom: 15px; margin-bottom: -20px"
placeholder="Commentaire"></v-text-field>
<v-row>
<v-col class="text-right" style="margin-right: 25px">
<v-btn variant="plain" @click="toggleShowMore" class="text-body-2" style="margin-bottom: 10px; font-weight: bold">
{{ showMore ? 'AFFICHER MOINS' : 'AFFICHER PLUS' }}
</v-btn>
</v-col>
</v-row>
</v-card>
</v-container>
</v-col>
<v-dialog v-model="carouselVisible" max-width="600px">
<v-carousel v-model="currentImage">
<v-carousel-item v-for="(image, index) in images" :key="index">
<v-img :src="image"></v-img>
</v-carousel-item>
</v-carousel>
</v-dialog>
</v-row>
<!-- Card youtube balado -->
</v-col>
<!-- "Large-Monitor-RightCol" Donation -->
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down" hidden-sm-and-up>
<v-col cols="2" md="3" lg="3" xl="2" xxl="2" class="hidden-sm-and-down">
<v-row>
<v-col>
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
@@ -294,7 +291,7 @@
<v-card style="border-radius: 20px;">
<v-container>
<v-row class="mb-0"
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
<v-card-title class="text-soutiens" style="margin-top: 15px;">
JE SOUTIENS!
</v-card-title>
@@ -313,12 +310,11 @@
</v-row>
<!-- "Mobile" Donation -->
<v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
<v-col class="hidden-md-and-up sticky-bottom-label"
style="background-color: #6b0065; margin-top: 30px; text-align: center;">
<!-- Barre cliquable pour ouvrir le drawer -->
<v-btn @click="drawerbottom = !drawerbottom" elevation="0"
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
style="background-color: #6b0065; color: white; text-align: center;" class="text-soutiens ">
JE SOUTIENS
</v-btn>
</v-col>
@@ -332,7 +328,6 @@
<StripePayment></StripePayment>
</v-container>
</v-bottom-sheet>
</div>
</template>
@@ -346,17 +341,39 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
import PostContentMenu from '@/layouts/PostContentMenu.vue';
import { ref } from 'vue';
import StripePayment from '../StripePayment.vue';
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
let name = 'Guillaume Mousseau'
let title = 'Créateur de contenus'
let drawerbottom = ref(false)
let name = 'Guillaume Mousseau';
let title = 'Créateur de contenus';
let drawerbottom = ref(false);
let navigationItems = [
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
{ icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
];
// Ajouter la variable réactive pour gérer l'état d'affichage du contenu
let showMore = ref(false);
// Ajouter les variables et méthodes pour gérer le carrousel
let carouselVisible = ref(false);
let currentImage = ref(0);
let images = [
'/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png',
'/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand.jpg',
// Ajoutez ici toutes les images que vous souhaitez afficher dans le carrousel
];
const toggleShowMore = () => {
showMore.value = !showMore.value;
};
const openCarousel = (index) => {
currentImage.value = index;
carouselVisible.value = true;
};
</script>
<style scoped>
@@ -364,7 +381,6 @@ let navigationItems = [
filter: invert(1);
}
.Hutopy-menu-sticky-mobile {
position: sticky;
top: 0;
@@ -490,8 +506,6 @@ let navigationItems = [
font-size: .8rem;
}
.social-container {
background-color: #006d77;
border-top-right-radius: 30px;
@@ -897,9 +911,6 @@ let navigationItems = [
}
@media (min-width: 2560px) {
.mobile-profile-picture-creator {
transform: scale(1.5) translateY(25%) translateX(-20px);
}
@@ -914,7 +925,6 @@ let navigationItems = [
.name-info {
font-size: 2rem;
}
.social-container {
@@ -938,4 +948,4 @@ let navigationItems = [
margin-left: 40px;
}
}
</style>
</style>

11
src/views/main/CreatorMainPage.vue Normal file
View File

@@ -0,0 +1,11 @@
<template>
<default-layout></default-layout>
<banner></banner>
<FooterLayout></FooterLayout>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import Banner from '@/views/main/CreatorViewComponents/Banner.vue';
</script>

21
src/views/main/CreatorViewComponents/Banner.vue Normal file
View File

@@ -0,0 +1,21 @@
<template>
<v-container fluid>
<!-- Bannière Pc -->
<v-row style="margin-top: -15px; position: relative; z-index: 0; width: 100vw;">
<v-col cols="12" class="pa-0">
<v-img class="profile-banner" max-height="375" max-width="100%" :src="imageSrc" cover
style="width: 100%; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
</v-col>
</v-row >
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
</v-row>
</v-container>
</template>
<script setup>
let imageSrc = '/images/usersmedia/guillaumeMousseau/banners/bannerGuillaumeMousseau01.png';
let profilePicture = '/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.png';
</script>