Merge remote-tracking branch 'origin/main' into feature/oauth
This commit is contained in:
Dominic Villemure
@@ -24,12 +24,12 @@
|
||||
<v-card-text>
|
||||
<v-form class="label-mail-password">
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
|
||||
label="E-mail" class="text-start"></v-text-field>
|
||||
label="Nom d'utilisateur" class="text-start"></v-text-field>
|
||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
||||
label="Mot de passe" class="text-start"></v-text-field>
|
||||
</v-form>
|
||||
<v-snackbar v-model="errorSnackBar">
|
||||
Email ou mot de passe invalide.
|
||||
Nom d'utilisateur ou mot de passe invalide.
|
||||
<template v-slot:actions>
|
||||
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
||||
</template>
|
||||
@@ -68,7 +68,7 @@
|
||||
vous connecter à votre compte?</h2>
|
||||
|
||||
<v-form style="max-width: 400px; width: 350px;">
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="E-mail"></v-text-field>
|
||||
<v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
|
||||
<v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
|
||||
label="Mot de passe"></v-text-field>
|
||||
</v-form>
|
||||
|
||||
@@ -1,44 +1,113 @@
|
||||
<script setup>
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<v-container>
|
||||
<div class="margin-top-mobile">
|
||||
<v-row style="margin-top: 4%; margin-bottom: 2%" class="d-flex justify-center align-center">
|
||||
<v-col cols="12" xxl="4" xl="4" lg="5" 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: 20px; margin-bottom: 20px; font-size: 2rem;"
|
||||
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="150">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; margin-bottom: 10px;">
|
||||
{{ creatorName }}
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<!-- Ok btn -->
|
||||
<v-row>
|
||||
<v-row style="margin-left: 30px; margin-right: 30px; margin-bottom: 10px;">
|
||||
<v-text-field variant="underlined" style=" margin-right: 10px;" v-model="email"
|
||||
label="Email"></v-text-field>
|
||||
<v-btn color="#6b0065" variant="outlined" style="margin-top: 10px;" @click="getReceipt">Reçu</v-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: 175px; height: 45px; margin-bottom: 25px; background-color: #a30e79;"
|
||||
@click="router.push({ path: `/${creatorUserName}` })">Ok</v-btn>
|
||||
</v-card-actions>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
<v-snackbar v-model="errorSnackBar">
|
||||
Aucun reçu trouvé pour ce email.
|
||||
<template v-slot:actions>
|
||||
<v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script async setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { useClient } from '@/plugins/api.js';
|
||||
import { onBeforeMount, ref } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter()
|
||||
const client = useClient();
|
||||
|
||||
const queryString = window.location.search;
|
||||
const urlParams = new URLSearchParams(queryString);
|
||||
const creatorId = urlParams.get('creatorId')
|
||||
const creatorName = ref("");
|
||||
const creatorUserName = ref("");
|
||||
const email = ref("");
|
||||
const errorSnackBar = ref(false);
|
||||
|
||||
|
||||
onBeforeMount(async () => {
|
||||
const creatorResponse = await client.get(`/api/Users?UserId=${creatorId}`);
|
||||
creatorName.value = creatorResponse.data.firstName + " " + creatorResponse.data.lastName;
|
||||
creatorUserName.value = creatorResponse.data.userName;
|
||||
})
|
||||
|
||||
async function getReceipt() {
|
||||
const receiptResponse = await client.get(`/api/Stripe/GetMyLastReceipt?CreatorId=${creatorId}&Email=${email.value}`);
|
||||
const receiptUrl = receiptResponse.data.receiptUrl;
|
||||
|
||||
if (receiptUrl === "") {
|
||||
errorSnackBar.value = true;
|
||||
return;
|
||||
}
|
||||
window.open(receiptUrl);
|
||||
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<v-card class="custom-dialog" style="background-color: #f4f4f4;">
|
||||
<v-container>
|
||||
<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-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>
|
||||
<style scoped>
|
||||
@media (min-width: 200px) and (max-width: 960px) {
|
||||
.margin-top-mobile {
|
||||
margin-top: 60px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -2,12 +2,11 @@
|
||||
<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>
|
||||
|
||||
|
||||
<v-row>
|
||||
<v-text-field label="Montant ($)" v-model="price"
|
||||
style="border-radius: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
|
||||
@@ -24,7 +23,6 @@
|
||||
</v-btn>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
|
||||
<template v-slot:default>
|
||||
<v-card>
|
||||
@@ -40,10 +38,6 @@
|
||||
</v-dialog>
|
||||
</v-container>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
@@ -51,6 +45,8 @@ import { useClient } from '@/plugins/api.js';
|
||||
import { loadStripe } from '@stripe/stripe-js';
|
||||
import { onMounted, ref } from "vue";
|
||||
|
||||
const props = defineProps(['creatorId'])
|
||||
|
||||
let stripe = null;
|
||||
const client = useClient();
|
||||
const price = ref(0);
|
||||
@@ -72,7 +68,7 @@ async function createCheckoutSession() {
|
||||
let clientSecret = await client.post('/api/Stripe', {
|
||||
amount: (price.value * 100),
|
||||
tipMessage: tipMessage.value,
|
||||
creatorId: "5b122430-442a-4967-98b6-6c7787c70c91"
|
||||
creatorId: props.creatorId
|
||||
});
|
||||
|
||||
let secret = clientSecret["data"];
|
||||
|
||||
883
src/views/UsersBrowser.vue
Normal file
883
src/views/UsersBrowser.vue
Normal file
@@ -0,0 +1,883 @@
|
||||
<template>
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||
|
||||
<!-- "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>
|
||||
<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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile-Profile" -->
|
||||
<!-- "Profile picture" -->
|
||||
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</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>
|
||||
|
||||
<!-- 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/Hutopy">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
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/hutopy.inc/">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
<!-- Profile picture - Small -->
|
||||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<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://twitter.com/Hutopyinc">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png"
|
||||
alt="X"></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 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 class="d-flex justify-center">
|
||||
{{ title }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
</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">
|
||||
<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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
|
||||
title="À propos d'Hutopy :">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</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-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>
|
||||
</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>
|
||||
|
||||
<!-- "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 style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky-mobile">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- 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>
|
||||
<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-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height: 400px;"></v-row>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- creators -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="6" xl="6" xxl="8">
|
||||
<v-container fluid style="margin-bottom: -40px; font-size: 3rem;">
|
||||
<v-row justify="center" class="text-center">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" class="text-left d-flex justify-center ">
|
||||
<div class="headline font-weight-bold">CRÉATEURS</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-container>
|
||||
<v-row justify="center">
|
||||
<v-col cols="12">
|
||||
<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: 300px;">
|
||||
<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>
|
||||
</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-row>
|
||||
<v-col>
|
||||
<v-container class="sticky-bottom-label Je-soutien-container"
|
||||
style="max-width: 400px ; bottom: 0;">
|
||||
<!-- Donnation -->
|
||||
<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;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
<StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container style="height: 400px;">
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-spacer>
|
||||
</v-spacer>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</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;">
|
||||
|
||||
<!-- 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 ">
|
||||
JE SOUTIENS
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- Drawer du bas -->
|
||||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
|
||||
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
|
||||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||||
<StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
||||
</v-container>
|
||||
</v-bottom-sheet>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import StripePayment from './StripePayment.vue';
|
||||
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
|
||||
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
||||
let name = 'Hutopy'
|
||||
let title = 'Page officiel'
|
||||
let drawerbottom = ref(false)
|
||||
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
|
||||
const profiles = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "Hutopy",
|
||||
description: "Page officielle",
|
||||
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: 'chloebeaugrand'
|
||||
},
|
||||
|
||||
{
|
||||
id: 5,
|
||||
name: "Mathieu Caron",
|
||||
description: "Entrevue Atypique",
|
||||
imageUrl: '/images/usersmedia/mathieuCaron/profilepictures/profileMathieuCaron01.png',
|
||||
routerLink: 'mathieuCaron'
|
||||
},
|
||||
|
||||
{
|
||||
id: 6,
|
||||
name: "ARPS",
|
||||
description: "Agence créative",
|
||||
imageUrl: '/images/usersmedia/ARPS/profilepictures/profileARPS.png',
|
||||
routerLink: 'ARPS'
|
||||
}
|
||||
]);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.sticky-bottom-label {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sticky-top-label {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
right: 10%;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
margin-left: 22px;
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.main-background {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #23393b;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-weight: 400;
|
||||
margin-left: 3%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin-top: -15%;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #6b0065;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #a30e79;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #a30e79;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-container2-mobile {
|
||||
background-color: #0baab2;
|
||||
z-index: 1000;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #6b0065;
|
||||
}
|
||||
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.btn-card-options {
|
||||
background-color: #f4f4f4;
|
||||
width: 50px;
|
||||
margin-left: -12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 4px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
margin-left: -13%;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
.h1-navigation {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.mobile-profile-picture {
|
||||
height: 40px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #a30e79;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 474px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 475px) and (max-width: 599px) {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -112px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 325px;
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 40px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 80px;
|
||||
min-width: 270px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 50px;
|
||||
min-width: 250px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 70px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
|
||||
margin-left: 40px;
|
||||
min-width: 290px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -171px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-top: -4px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 75px;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 70px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 35px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 110px;
|
||||
margin-top: -4px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 30px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 38px;
|
||||
max-width: 100px;
|
||||
margin-top: 13px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -150px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 65px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 45px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -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?"
|
||||
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-textarea v-model="reasonToJoin" 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" 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 -->+
|
||||
<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="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
|
||||
<!-- 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="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();
|
||||
|
||||
|
||||
@@ -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"
|
||||
@@ -287,6 +284,8 @@
|
||||
</v-container>
|
||||
|
||||
|
||||
<PostContentMenu style="margin-top: -30px;"></PostContentMenu>
|
||||
|
||||
|
||||
<!-- Card youtube balado -->
|
||||
<v-container>
|
||||
@@ -309,8 +308,7 @@
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
|
||||
<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"
|
||||
@@ -320,14 +318,14 @@
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
24-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">C’est un honneur de vous
|
||||
<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
|
||||
@@ -349,13 +347,14 @@
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
@@ -366,19 +365,18 @@
|
||||
<h1 class="card-title">
|
||||
NOUVELLE BOUTIQUE À SAINT-HYACINTHE</h1>
|
||||
</v-col>
|
||||
<!--
|
||||
<v-col class="text-right">
|
||||
<v-btn class="btn-card-options" flat tile elevation="0">
|
||||
|
||||
<!--<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-col> -->
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/nouvelleboutique.jpg"
|
||||
title="Guillaumem"></v-img>
|
||||
@@ -386,13 +384,14 @@
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
23-04-2024
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
24-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">J’ai découvert une nouvelle
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">J’ai découvert une nouvelle
|
||||
boutique
|
||||
à St-Hyacinthe qui embrasse exactement ma philosophie derrière la page Guillaume Aime: faire découvrir
|
||||
le
|
||||
@@ -405,6 +404,7 @@
|
||||
Carl
|
||||
pour ce projet!</p>
|
||||
|
||||
|
||||
<!-- Like dislike commment Section -->
|
||||
<div style="height: 20px;"></div>
|
||||
<div
|
||||
@@ -414,8 +414,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
@@ -442,8 +442,7 @@
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div
|
||||
style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/guillaumeMousseau/pictures/posts/cestparti.jpg"
|
||||
title="Guillaumem"></v-img>
|
||||
@@ -451,13 +450,13 @@
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px">
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px" class="card-date">
|
||||
22-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">C'est parti pour 2024 ! De
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">C'est parti pour 2024 ! De
|
||||
retour au
|
||||
travail officiellement ce matin afin d'aider les entreprises de la région à rayonner ! Mettre en
|
||||
lumière les
|
||||
@@ -474,8 +473,8 @@
|
||||
</div>
|
||||
|
||||
<!-- Comments -->
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px;"
|
||||
placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
|
||||
<v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
@@ -542,6 +541,7 @@
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
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';
|
||||
@@ -552,8 +552,8 @@ let drawerbottom = ref(false)
|
||||
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Amis', link: '/contact' },
|
||||
//{ icon: 'mdi-file-document-outline', text: 'Contenu', link: '/creatorfolio' }
|
||||
{ icon: 'mdi-account-group', text: 'Utilisateur', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
</script>
|
||||
|
||||
@@ -562,6 +562,7 @@ let navigationItems = [
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
@@ -682,9 +683,13 @@ let navigationItems = [
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.social-container {
|
||||
background-color: #006d77;
|
||||
border-top-right-radius: 30px;
|
||||
@@ -766,6 +771,7 @@ let navigationItems = [
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
@@ -1089,6 +1095,9 @@ let navigationItems = [
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
|
||||
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
@@ -162,7 +162,7 @@
|
||||
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
|
||||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
|
||||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||||
la créativité.
|
||||
@@ -226,26 +226,32 @@
|
||||
<!-- 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>
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<router-link :to="{ name: 'guillaumeaime' }">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</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: 'chloebeaugrand' }">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
<v-row justify='center'>
|
||||
<router-link :to="{ name: 'userbrowser' }">
|
||||
<v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-row>
|
||||
<v-spacer></v-spacer>
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
@@ -314,7 +320,7 @@
|
||||
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
|
||||
Bienvenue sur Hutopy, votre nouvelle frontière de création, de connexion et d'innovation. Au
|
||||
cœur de notre mission réside une ambition audacieuse : transformer l'espace numérique en un
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer
|
||||
écosystème où chaque créateur, chaque rêveur, chaque professionnel, peut non seulement imaginer,
|
||||
mais concrétiser son utopie personnelle. Hutopy est plus qu'une simple plateforme c'est une
|
||||
communauté vibrante qui défie les conventions de l’éducation, encourage l'originalité et célèbre
|
||||
la créativité.
|
||||
@@ -366,28 +372,36 @@
|
||||
<v-col>
|
||||
<v-row justify="center" class="profile-images">
|
||||
<v-col cols="8">
|
||||
<router-link :to="{ name: 'creatorfolio' }">
|
||||
<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: 'guillaumeaime' }">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||||
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-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>
|
||||
<router-link :to="{ name: 'chloebeaugrand' }">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||||
alt="Profile Image" class="profile-image">
|
||||
</router-link>
|
||||
</v-col>
|
||||
<v-row justify='center'>
|
||||
<router-link :to="{ name: 'userbrowser' }">
|
||||
<v-btn style="margin-top:30px; border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-row>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<v-snackbar v-model="errorNoAccessSnackBar">
|
||||
Vous n'etes pas connecter !
|
||||
<template v-slot:actions>
|
||||
|
||||
1020
src/views/manualusers/ARPS.vue
Normal file
1020
src/views/manualusers/ARPS.vue
Normal file
File diff suppressed because it is too large
Load Diff
941
src/views/manualusers/ChloeProfile.vue
Normal file
941
src/views/manualusers/ChloeProfile.vue
Normal file
@@ -0,0 +1,941 @@
|
||||
<template>
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||
|
||||
<!-- "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>
|
||||
<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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile-Profile" -->
|
||||
<!-- "Profile picture" -->
|
||||
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</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>
|
||||
|
||||
<!-- 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/chloegestionmedias">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Facebook"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
|
||||
<!-- Profile picture - Small -->
|
||||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
</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/chloe.photo_gms">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
</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 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 class="d-flex justify-center">
|
||||
{{ title }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
</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">
|
||||
<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="
|
||||
|
||||
Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté!
|
||||
Chaque collaboration est une aventure marketing inspirante!
|
||||
|
||||
|
||||
Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
|
||||
" title="À propos de moi.">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</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-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>
|
||||
</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>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
<!-- "Menu" -->
|
||||
<v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||||
<v-col style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky-mobile">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- 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>
|
||||
<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-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height: 3000px;"></v-row>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/chloegestionmedias">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/chloe.photo_gms">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
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="
|
||||
|
||||
Axé sur l’être humain et le désir de performer, j’ai trouvé mon X avec les médias sociaux → Mon but est d’aider les entreprises à communiquer et à prospérer en renforçant leur image de marque à travers leur communauté!
|
||||
Chaque collaboration est une aventure marketing inspirante!
|
||||
|
||||
|
||||
Je suis authentique, créative, stratégique, caféinée et à l’écoute. Et surtout, j’ai hâte de travailler avec vous!
|
||||
" title="À propos de moi.">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
|
||||
<!-- <PostContentMenu style="margin-top: -30px;"></PostContentMenu> Post -->
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container style="margin-top: -15px;">
|
||||
<v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand01.png"
|
||||
title="Savoir faire"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
|
||||
23-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">Quand on observe des gens
|
||||
réaliser un
|
||||
Rubik’s Cube ça a l’air si facile pour eux qu’on est vraiment impressionnés et peut-être même
|
||||
découragés…<br><br>
|
||||
|
||||
Mais saviez-vous que pour résoudre ce casse-tête, il suffit d’une série de mouvements exécutés à
|
||||
répétitions
|
||||
dans le même ordre jusqu’à la fin?<br><br>
|
||||
|
||||
La gestion de médias sociaux peut donner l’impression d’être un vrai casse-tête!
|
||||
|
||||
La clé c’est de comprendre chaque élément individuellement et ensuite en faire un tout.
|
||||
</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" class="Comments-font"
|
||||
placeholder="Commentaire (Arrive bientôt)"></v-text-field>
|
||||
</v-container>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
|
||||
<!-- Card nouvelle boutique -->
|
||||
<v-container>
|
||||
<v-card class="flow-menu m-0 youtube-card">
|
||||
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
|
||||
<v-container style="margin-top: -15px;">
|
||||
<v-img src="images/usersmedia/chloebeaugrand/pictures/posts/postsChloeBeaugrand02.png"
|
||||
title="Guillaumem"></v-img>
|
||||
|
||||
<!-- Date -->
|
||||
<v-row class="text-right">
|
||||
<v-col>
|
||||
<h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
|
||||
23-04-2024
|
||||
</h1>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
Que ce soit pour un portrait créatif, la gestion totales de tes médias sociaux où pour devenir
|
||||
autonome à
|
||||
les gérer par toi-même → Je suis là pour ça!
|
||||
<br><br>
|
||||
|
||||
Je te promets qu’on passera un bon moment ET que tu auras des résultats à la hauteur de tes attentes
|
||||
<v-icon icon=" mdi-emoticon"></v-icon>
|
||||
</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>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
||||
<!-- Donnation -->
|
||||
<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;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
<StripePayment creator-id="27e5321d-2bcc-42b0-9548-33802431e8f3"></StripePayment>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container style="height: 3000px;">
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-spacer>
|
||||
</v-spacer>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</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;">
|
||||
|
||||
<!-- 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 ">
|
||||
JE SOUTIENS
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- Drawer du bas -->
|
||||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
|
||||
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
|
||||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||||
<StripePayment creator-id="27e5321d-2bcc-42b0-9548-33802431e8f3"></StripePayment>
|
||||
</v-container>
|
||||
</v-bottom-sheet>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
let imageSrc = '/images/usersmedia/chloebeaugrand/banners/bannerChloeBeaugrand01.png';
|
||||
let profilePicture = '/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand01.png';
|
||||
let name = 'Chloé Beaugrand'
|
||||
let title = 'Spécialiste en média'
|
||||
let drawerbottom = ref(false)
|
||||
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.Comments-font {
|
||||
font-size: .1rem;
|
||||
}
|
||||
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.sticky-bottom-label {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sticky-top-label {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
right: 10%;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
margin-left: 22px;
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.main-background {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #231f20;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-weight: 400;
|
||||
margin-left: 3%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin-top: -15%;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #8c5536;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #231f20;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #8c5536;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-container2-mobile {
|
||||
background-color: #0baab2;
|
||||
z-index: 1000;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #272526;
|
||||
}
|
||||
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.btn-card-options {
|
||||
background-color: #f4f4f4;
|
||||
width: 50px;
|
||||
margin-left: -12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 4px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
margin-left: -13%;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
.h1-navigation {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.mobile-profile-picture {
|
||||
height: 40px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #a30e79;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 474px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 475px) and (max-width: 599px) {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -112px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 325px;
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 40px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 80px;
|
||||
min-width: 270px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 50px;
|
||||
min-width: 250px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 70px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
|
||||
margin-left: 40px;
|
||||
min-width: 290px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -171px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-top: -4px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 75px;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 70px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 35px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 110px;
|
||||
margin-top: -4px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 30px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 38px;
|
||||
max-width: 100px;
|
||||
margin-top: 13px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 65px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 45px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1054
src/views/manualusers/GuillaumeAime.vue
Normal file
1054
src/views/manualusers/GuillaumeAime.vue
Normal file
File diff suppressed because it is too large
Load Diff
936
src/views/manualusers/HutopyProfile.vue
Normal file
936
src/views/manualusers/HutopyProfile.vue
Normal file
@@ -0,0 +1,936 @@
|
||||
<template>
|
||||
<div style="background-color: #f4f4f4;">
|
||||
<DefaultLayout style="margin-bottom: 30px"></DefaultLayout>
|
||||
|
||||
<!-- "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>
|
||||
<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>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- "PurpleLine" -->
|
||||
<v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
|
||||
</v-row>
|
||||
|
||||
<!-- "Mobile-Profile" -->
|
||||
<!-- "Profile picture" -->
|
||||
<v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</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>
|
||||
|
||||
<!-- 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/Hutopy">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
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/hutopy.inc/">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Instagram"></v-img>
|
||||
</a>
|
||||
</v-col>
|
||||
<!-- Profile picture - Small -->
|
||||
<v-col cols="4" sm="4" xs="0" class="hidden-xs">
|
||||
<v-row class="d-flex justify-center align-center">
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<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://twitter.com/Hutopyinc">
|
||||
<v-img class="socialicons-mobile" src="/images/hutopymedia/icons/black/xblack.png" alt="X"></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 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 class="d-flex justify-center">
|
||||
{{ title }}
|
||||
</v-row>
|
||||
</v-col>
|
||||
</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">
|
||||
<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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
|
||||
title="À propos d'Hutopy :">
|
||||
|
||||
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</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-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>
|
||||
</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>
|
||||
|
||||
<!-- "Core (Menu / Center / Donation)" -->
|
||||
<v-row>
|
||||
<!-- "Menu" -->
|
||||
<v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
|
||||
<v-col style="margin: 0;">
|
||||
<v-row class="Hutopy-menu-sticky-mobile">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col>
|
||||
<v-container style=" overflow-y: hidden;">
|
||||
<!-- 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>
|
||||
<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-icon left class="mr-4">{{ item.icon }}</v-icon>
|
||||
{{ item.text }}
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-container>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="height: 1000px;"></v-row>
|
||||
</v-col>
|
||||
</v-col>
|
||||
|
||||
<!-- Profile Info Picture name title & description -->
|
||||
<v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
|
||||
<v-container class="profile-container hidden-sm-and-down" hidden-md-and-up>
|
||||
<v-container>
|
||||
<v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
|
||||
<!-- User informations Name & title -->
|
||||
<v-container class="background-profile-container" style="margin-top: -8%;">
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="7" offset="2" class="social-container">
|
||||
<h1 class="name-info">{{ name }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
<v-row>
|
||||
<v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
|
||||
<h1 class="occupation-info">{{ title }}</h1>
|
||||
</v-col>
|
||||
<v-col></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- User Social Network Links -->
|
||||
<v-row>
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7" style="margin-top: 1%; margin-bottom: -2%;">
|
||||
<v-row>
|
||||
<a href="https://www.facebook.com/Hutopy">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
|
||||
<a href="https://twitter.com/Hutopyinc">
|
||||
<img class="socialicons" src="/images/hutopymedia/icons/black/xblack.png"
|
||||
alt="Description image 2">
|
||||
</a>
|
||||
|
||||
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-col background-color="primary"></v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- Description -->
|
||||
<v-row>
|
||||
<v-container
|
||||
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="Notre mission chez Hutopy est d'aider les gens à s'épanouir en leur proposant un environnement de partage unique qui va leur permettre de se surpasser. Nous travaillons étroitement avec la communauté d'Hutopy afin de concentrer notre développement sur ce que vous demandez et sur vos besoins, afin d'offrir les meilleurs outils. Le tout en gardant à l'esprit l'aspect humain de chacun. Il est important pour nous de contribuer à créer un monde meilleur."
|
||||
title="À propos d'Hutopy :">
|
||||
</v-expansion-panel>
|
||||
</v-col>
|
||||
</v-expansion-panels>
|
||||
</v-container>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</v-container>
|
||||
|
||||
<!-- <PostContentMenu style="margin-top: -30px;"></PostContentMenu> Post -->
|
||||
|
||||
<!-- Release v0.1 -->
|
||||
<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">
|
||||
Déploiement de la version 0.10 d'Hutopy</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> (a intégrer)
|
||||
</v-col> -->
|
||||
</v-row>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- Card core Video/image & text -->
|
||||
<div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%">
|
||||
<v-container>
|
||||
<v-img src="images/usersmedia/HutopyProfile/pictures/version.png" title="Release v0.1"></v-img>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
|
||||
<p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
|
||||
|
||||
Bonjour, Nous sommes fiers de vous présenter la version 0.10 d'Hutopy. Nous sommes au début d'une
|
||||
aventure
|
||||
visant à transformer la sphère des médias sociaux. Notre objectif est d'apporter un souffle de
|
||||
fraîcheur en
|
||||
favorisant des interactions plus constructives entre les individus.
|
||||
|
||||
Dans cette première version, seuls nos utilisateurs testeurs ont accès à la plateforme comme créateur.
|
||||
Dans
|
||||
un futur
|
||||
proche, avec le déploiement de la version 0.2, nous contacterons les personnes qui se sont inscrites
|
||||
via
|
||||
l'onglet d'inscription et ont rempli quelques questions.
|
||||
|
||||
Si vous souhaitez soutenir le développement de la plateforme, deux options s'offrent à vous. La
|
||||
première
|
||||
consiste à nous apporter un soutien financier, tandis que la seconde est de nous contacter pour faire
|
||||
partie
|
||||
de l'équipe de développement. Nous recherchons actuellement un programmeur supplémentaire pour faire
|
||||
progresser certaines fonctionnalités.
|
||||
|
||||
Merci de visiter Hutopy.</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>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-container>
|
||||
|
||||
</v-col>
|
||||
|
||||
<!-- "Large-Monitor-RightCol" Donation -->
|
||||
<v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
|
||||
<v-row>
|
||||
<v-col>
|
||||
<v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ; bottom: 0;">
|
||||
<!-- Donnation -->
|
||||
<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;">
|
||||
<v-card-title class="text-soutiens" style="margin-top: 15px;">
|
||||
JE SOUTIENS!
|
||||
</v-card-title>
|
||||
</v-row>
|
||||
<StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
||||
</v-container>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container style="height: 1000px;">
|
||||
</v-container>
|
||||
</v-col>
|
||||
<v-spacer>
|
||||
</v-spacer>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</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;">
|
||||
|
||||
<!-- 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 ">
|
||||
JE SOUTIENS
|
||||
</v-btn>
|
||||
</v-col>
|
||||
|
||||
<!-- Drawer du bas -->
|
||||
<template>
|
||||
<div>
|
||||
<v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
|
||||
<v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
|
||||
<h1 class="text-soutiens">JE SOUTIENS</h1>
|
||||
<StripePayment creator-id="3c4317c6-af4d-475a-a382-6d0a675cc67f"></StripePayment>
|
||||
</v-container>
|
||||
</v-bottom-sheet>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
import { ref } from 'vue';
|
||||
import StripePayment from '../StripePayment.vue';
|
||||
let imageSrc = '/images/usersmedia/HutopyProfile/banners/banner01.png';
|
||||
let profilePicture = '/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile01.png';
|
||||
let name = 'Hutopy'
|
||||
let title = 'Page officiel'
|
||||
let drawerbottom = ref(false)
|
||||
|
||||
let navigationItems = [
|
||||
{ icon: 'mdi-home', text: 'Accueil', link: 'home' },
|
||||
{ icon: 'mdi-account-group', text: 'Créateurs', link: '/userbrowser' },
|
||||
{ icon: 'mdi-handshake', text: 'Aidez-nous', link: '/contact' },
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.invert-color {
|
||||
filter: invert(1);
|
||||
}
|
||||
|
||||
|
||||
.Hutopy-menu-sticky-mobile {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: -40px;
|
||||
}
|
||||
|
||||
.sticky-bottom-label {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.sticky-top-label {
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
right: 10%;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
margin-bottom: 15px;
|
||||
color: white;
|
||||
font-size: 1.5rem;
|
||||
letter-spacing: 7px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
margin-top: -10px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 15%;
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
margin-left: 22px;
|
||||
font-size: 1.3rem
|
||||
}
|
||||
|
||||
.main-background {
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -16%;
|
||||
}
|
||||
|
||||
.btn-custom {
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.background-profile-container {
|
||||
background-color: #ececec;
|
||||
color: white;
|
||||
border-top: 3px solid #a30e79;
|
||||
border-right: 3px solid #a30e79;
|
||||
font-weight: 700;
|
||||
font-size: 1.15rem;
|
||||
border-radius: 25px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
|
||||
}
|
||||
|
||||
.background-pink {
|
||||
background-color: #23393b;
|
||||
color: white;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.label-text {
|
||||
font-weight: 400;
|
||||
margin-left: 3%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin-top: -15%;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 3px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 27px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.youtube-card {
|
||||
margin-left: 2%;
|
||||
margin-right: 2%;
|
||||
border-radius: 15px;
|
||||
background-color: #f4f4f4;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 1.4rem;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
margin-left: 10px;
|
||||
margin-top: -18px;
|
||||
margin-bottom: -20px;
|
||||
font-size: .8rem;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
background-color: #6b0065;
|
||||
border-top-right-radius: 30px;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.7rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
background-color: #a30e79;
|
||||
border-bottom-right-radius: 30px;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-container-mobile {
|
||||
background-color: #a30e79;
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
z-index: 1000;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.social-container2-mobile {
|
||||
background-color: #0baab2;
|
||||
z-index: 1000;
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.social-icon-group-mobile {
|
||||
background-color: #6b0065;
|
||||
}
|
||||
|
||||
.mini-profile-picture {
|
||||
border-radius: 100px;
|
||||
}
|
||||
|
||||
.btn-card-options {
|
||||
background-color: #f4f4f4;
|
||||
width: 50px;
|
||||
margin-left: -12px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
border-radius: 100px;
|
||||
height: 150px;
|
||||
width: 150px;
|
||||
border-radius: 50%;
|
||||
max-width: 150px;
|
||||
border: 4px solid white;
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.mobile-header {
|
||||
height: 50px;
|
||||
margin-left: -13%;
|
||||
margin-top: 6%;
|
||||
}
|
||||
|
||||
.h1-navigation {
|
||||
text-align: center;
|
||||
font-weight: 600;
|
||||
margin-bottom: 10%;
|
||||
}
|
||||
|
||||
.mobile-profile-picture {
|
||||
height: 40px;
|
||||
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
|
||||
border: 2px solid #a30e79;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 200px
|
||||
}
|
||||
|
||||
.v-navigation-drawer {
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
@media (min-width: 150px) and (max-width: 474px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (min-width: 475px) and (max-width: 599px) {
|
||||
.socialicons-mobile {
|
||||
width: 35px;
|
||||
max-width: 100px;
|
||||
margin-top: 0px;
|
||||
margin-left: px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(-30%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -112px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
.name-info-mobile {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 599px) and (max-width: 749px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 330px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 750px) and (max-width: 960px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.8) translateY(25%) translateX(0%);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
}
|
||||
|
||||
.profile-container-mobile {
|
||||
width: 110%;
|
||||
margin-left: -3%;
|
||||
margin-top: -110px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 425px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 960px) and (max-width: 1280px) {
|
||||
.middle-col {
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: 5px;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -185px;
|
||||
min-width: 480px
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 270px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 325px;
|
||||
margin-left: -35px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 40px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 80px;
|
||||
min-width: 270px;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 50px;
|
||||
min-width: 250px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1600px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
letter-spacing: 8px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.3) translateY(25%) translateX(-50px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -180px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 290px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 350px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.2rem;
|
||||
margin-left: 20px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 90px;
|
||||
min-width: 350;
|
||||
max-height: 40px
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
margin-left: 70px;
|
||||
margin-top: -8px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
|
||||
margin-left: 40px;
|
||||
min-width: 290px;
|
||||
max-height: 35px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 34px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1600px) and (max-width: 1919px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -171px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 355px;
|
||||
}
|
||||
|
||||
.menu-col {
|
||||
margin-left: -4%;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-top: -4px;
|
||||
margin-left: 35px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 75px;
|
||||
margin-top: -2px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 70px;
|
||||
min-width: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1920px) and (max-width: 2559px) {
|
||||
.text-soutiens {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -160px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.Je-soutien-container {
|
||||
min-width: 400px;
|
||||
}
|
||||
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.4) translateY(25%) translateX(-40px);
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 35px;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 100px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.3rem;
|
||||
margin-left: 110px;
|
||||
margin-top: -4px
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 30px;
|
||||
min-width: 360px;
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 38px;
|
||||
max-width: 100px;
|
||||
margin-top: 13px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
.mobile-profile-picture-creator {
|
||||
transform: scale(1.5) translateY(25%) translateX(-20px);
|
||||
}
|
||||
|
||||
.profile-container {
|
||||
margin-top: -150px
|
||||
}
|
||||
|
||||
.profile-banner {
|
||||
margin-top: 25px;
|
||||
min-height: 450px;
|
||||
}
|
||||
|
||||
.card-youtube {
|
||||
min-height: 380px;
|
||||
}
|
||||
|
||||
.text-soutiens {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.name-info {
|
||||
font-size: 2rem;
|
||||
|
||||
}
|
||||
|
||||
.social-container {
|
||||
margin-left: 140px;
|
||||
}
|
||||
|
||||
.social-container2 {
|
||||
margin-left: 130px;
|
||||
}
|
||||
|
||||
.occupation-info {
|
||||
font-size: 1.5rem;
|
||||
margin-left: 65px;
|
||||
margin-top: -6px
|
||||
}
|
||||
|
||||
.socialicons {
|
||||
width: 45px;
|
||||
max-width: 100px;
|
||||
margin-top: 15px;
|
||||
margin-left: 40px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1012
src/views/manualusers/LeffetProfile.vue
Normal file
1012
src/views/manualusers/LeffetProfile.vue
Normal file
File diff suppressed because it is too large
Load Diff
1072
src/views/manualusers/MathieuCaron.vue
Normal file
1072
src/views/manualusers/MathieuCaron.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -18,6 +18,16 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn flat style="background-color: #f4f4f4;">
|
||||
<v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
@@ -79,68 +89,104 @@
|
||||
contenu. Notre équipe est notre plus grande force, chaque membre apportant une expertise
|
||||
unique et une perspective fraîche à notre mission commune.
|
||||
</p>
|
||||
<br>
|
||||
<v-row justify="center">
|
||||
<v-card max-width="250px" style="margin: 10px;">
|
||||
|
||||
<v-row>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
<img class="member-profile-picture"
|
||||
src="/images/hutopymedia/tospage/membersPictures/profileMarco.png"
|
||||
alt="Marc-Olivier Hébert">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Marc-Olivier
|
||||
</v-typography><br> <v-typography class="name"
|
||||
style="font-size: 1.5rem; font-weight: bold;">
|
||||
Hébert</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Fondateur</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Avec une
|
||||
vision claire et un engagement sans faille, il a lancé Hutopy pour changer la
|
||||
manière dont le contenu est créé et partagé.</v-typography>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
<div style="margin: 10px;">
|
||||
<v-typography class="name"
|
||||
style="font-size: 1.5rem; font-weight: bold;">Marc-Olivier
|
||||
</v-typography><br> <v-typography class="name"
|
||||
style="font-size: 1.5rem; font-weight: bold;">
|
||||
Hébert</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Fondateur</v-typography><br><br>
|
||||
<p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Avec
|
||||
une
|
||||
vision claire et un engagement sans faille, il a lancé Hutopy pour changer la
|
||||
manière dont le contenu est créé et partagé.</p>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card max-width="250px" style="margin: 10px;">
|
||||
<img class="member-profile-picture"
|
||||
src="/images/hutopymedia/tospage/membersPictures/profileDominique.png"
|
||||
alt="Dominic Villemure">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Dominic
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Villemure</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Responsable
|
||||
Technique</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">À la tête de
|
||||
notre équipe de développement, il assure qu’Hutopy reste à la pointe de la
|
||||
technologie.</v-typography>
|
||||
</v-col>
|
||||
<v-col>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
alt="Parcal Marchesseault">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Pascal
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Marchesseault</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Expérience
|
||||
utilisateur</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Le champion
|
||||
de l'expérience utilisateur, il veille à ce que chaque interaction avec Hutopy soit
|
||||
positive et enrichissante pour tous les utilisateurs.</v-typography>
|
||||
</v-col>
|
||||
<v-col>
|
||||
<div style="margin: 10px;">
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Dominic
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Villemure</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Responsable
|
||||
Technique</v-typography><br><br>
|
||||
<p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">À la
|
||||
tête de notre équipe de développement, il assure qu’Hutopy reste à la pointe de
|
||||
la technologie.
|
||||
</p>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card max-width="250px" style="margin: 10px;">
|
||||
<img class="member-profile-picture"
|
||||
src="/images/hutopymedia/tospage/membersPictures/profilePascal.png"
|
||||
alt="Pascal Marchesseault">
|
||||
<div style="margin: 10px;">
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Pascal
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Marchesseault</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Expérience
|
||||
utilisateur</v-typography><br>
|
||||
<br>
|
||||
|
||||
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
|
||||
<p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Le
|
||||
champion
|
||||
de l'expérience utilisateur, il veille à ce que chaque interaction avec Hutopy
|
||||
soit
|
||||
positive et enrichissante pour tous les utilisateurs.</p>
|
||||
</div>
|
||||
</v-card>
|
||||
|
||||
<v-card max-width="250px" style="margin: 10px;">
|
||||
<img class="member-profile-picture"
|
||||
src="/images/hutopymedia/tospage/membersPictures/profileChloe.png"
|
||||
alt="Chloé Beaugrand">
|
||||
<br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Chloé
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Beaugrand</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Responsable
|
||||
Marketing</v-typography><br>
|
||||
<v-typography class="text" style="font-size: 0.8rem; text-align: justify;">Elle façonne
|
||||
l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes et
|
||||
impactantes.</v-typography>
|
||||
</v-col>
|
||||
<div style="margin: 10px;">
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Chloé
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Beaugrand</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Responsable
|
||||
Marketing</v-typography><br>
|
||||
<br>
|
||||
<p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Elle
|
||||
façonne
|
||||
l'image d’Hutopy et engage notre communauté à travers des campagnes innovantes
|
||||
et
|
||||
impactantes.</p>
|
||||
</div>
|
||||
</v-card>
|
||||
<v-card max-width="250px" style="margin: 10px;">
|
||||
<img class="member-profile-picture"
|
||||
src="/images/hutopymedia/tospage/membersPictures/profileEdouard.png"
|
||||
alt="Édouard Letarte">
|
||||
<div style="margin: 10px;">
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">Édouard
|
||||
</v-typography><br>
|
||||
<v-typography class="name" style="font-size: 1.5rem; font-weight: bold;">
|
||||
Letarte</v-typography><br>
|
||||
<v-typography class="task" style="font-size: 1rem;">Intégrateur
|
||||
</v-typography><br><br>
|
||||
<p class="text" style="hyphens: auto; font-size: 0.8rem; text-align: justify;">Son
|
||||
expertise nous permet d'intégrer des fonctionnalités qui permettent à Hutopy de
|
||||
devenir réalité.</p>
|
||||
</div>
|
||||
</v-card>
|
||||
</v-row>
|
||||
<br>
|
||||
|
||||
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
@@ -205,4 +251,9 @@ import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.member-profile-picture {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,6 +11,8 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
@@ -18,6 +20,16 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn flat style="background-color: #f4f4f4;">
|
||||
<v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
|
||||
@@ -18,6 +18,16 @@
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn flat style="background-color: #f4f4f4;">
|
||||
<v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
|
||||
107
src/views/tos/Transactions.vue
Normal file
107
src/views/tos/Transactions.vue
Normal file
@@ -0,0 +1,107 @@
|
||||
<template>
|
||||
|
||||
<body style="background-color: #f4f4f4;">
|
||||
<DefaultLayout></DefaultLayout>
|
||||
<div>
|
||||
<v-row class="fluid" style="margin-top: -30px; position: relative; z-index: 0;" hidden-md-and-down>
|
||||
<v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
|
||||
<v-img class="profile-banner" max-height="375"
|
||||
src="/images/hutopymedia/tospage/headerbackground.png" cover
|
||||
style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center" style="color:white; margin-top: -250px;"
|
||||
class="header-text-size">
|
||||
<v-typography class="headline text-center">Transactions</v-typography>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
||||
<v-row class="fluid d-flex justify-center" style="margin-bottom: 25px; margin-top: 25px;">
|
||||
<v-col cols="auto">
|
||||
<router-link :to="{ name: 'home' }">
|
||||
<v-btn flat style="background-color: #f4f4f4;">
|
||||
<v-icon left style="margin-right: 10px;">mdi-home</v-icon> Accueil
|
||||
</v-btn>
|
||||
</router-link>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
|
||||
<v-container style="z-index: 100; position: relative;">
|
||||
<v-row justify="center" align="center">
|
||||
<v-spacer></v-spacer>
|
||||
<v-col cols="7">
|
||||
<p style="font-weight: 600; font-size: 2rem; margin-bottom: 25px;">
|
||||
Transactions
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une
|
||||
commission réduite à seulement 9 %, notre engagement envers votre succès est palpable.
|
||||
Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance afin de
|
||||
développer des fonctionnalités innovantes, maintenir une infrastructure technologique de
|
||||
pointe, et un support utilisateur de premier ordre. Notre objectif ? Amplifier votre
|
||||
expansion et garantir une expérience utilisateur sans précédent.
|
||||
|
||||
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Pour chaque transaction, un frais minime assure la sécurité et la fiabilité des paiements,
|
||||
grâce à un partenaire de confiance mondialement reconnu. Ce dernier sécurise des milliards
|
||||
en transactions chaque année pour une diversité d'entreprises, à des entreprises en
|
||||
démarrage aux conglomérats établis. Ce gage de sécurité est disponible pour une somme de 2,9
|
||||
% plus un 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et
|
||||
la protection de vos revenus.
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
|
||||
Notre modèle tarifaire, pensé pour la simplicité et la transparence, a pour ambition ultime
|
||||
d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre
|
||||
épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit
|
||||
votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts et ceux de
|
||||
vos donnateurs sont précieusement gardés.
|
||||
|
||||
</p>
|
||||
|
||||
<p style="margin-top: 25px; margin-bottom: 25px;">
|
||||
Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion
|
||||
en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir
|
||||
votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de
|
||||
succès, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une
|
||||
aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre
|
||||
allié dans la quête du succès.
|
||||
</p>
|
||||
|
||||
</v-col>
|
||||
<v-spacer></v-spacer>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<FooterLayout></FooterLayout>
|
||||
|
||||
</body>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
||||
import FooterLayout from '@/layouts/FooterLayout.vue';
|
||||
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.header-text-size {
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.member-profile-picture {
|
||||
width: 250px;
|
||||
height: auto;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user