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

Updating UI - ContactView.vue Modification pour que la page soit dynamique

Browse Source
This commit is contained in:
PascalMarchesseault
2024-03-23 20:14:15 -04:00
parent 77404f1f0a
commit 18187d8c18
1 changed files with 563 additions and 156 deletions
Download Patch File Download Diff File Expand all files Collapse all files

719
src/views/main/ContactView.vue
View File

@@ -1,203 +1,610 @@
<template>
<!--PC -->
<v-app style="background-color: #F4F4F4;">
<div class="md:flex hidden items-center justify-between flex-col" style="margin-top: 3%;">
<v-container class="d-flex justify-center align-center" sty>
<div style="margin-left: 20%; margin-bottom: 3%;">
<!--lg="8" md="10" sm="10" xs="10" -->
<div class="hidden-xs flex-col items-center justify-center">
<v-container>
<v-row class="text-center align-center row-between-logo-text home-row">
<v-col xl="7" lg="9" md="11" sm="12" xs="12"> </v-col>
<v-col cols="auto">
<img class="hutopy-header-image" src="../../../images/hutopy.png">
</v-col>
<v-col class="ml-0 text-left ">
<RouterLink :to="{ name: 'home' }">
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
Accueil
</v-btn>
</RouterLink>
</v-col>
<v-col>
</v-col>
</v-row>
</v-container>
<v-container class="row-between-logo-text">
<v-row>
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
<v-col>
</v-col>
<v-col xl="8" lg="11" md="12" sm="12" xs="12">
<v-row>
<v-col>
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
</v-col>
<v-col class="row-joinus">
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
<v-text-field label="Nom ($)" style="color: rgb(107, 0, 101);"></v-text-field>
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea 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 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>
<RouterLink :to="{ name: 'home' }">
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4 send-btn" block>
Envoyez
</v-btn>
</RouterLink>
</v-col>
</v-row>
<v-row>
<v-container>
<p class="h3-text paragraph">Rejoignez l'aventure
Hutopy : une
invitation à façonner l'avenir de la création.
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
inspirer.
</p>
<p class="h3-text paragraph {">
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
d'élargir
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
et
l'innovation.
</p>
<p class="h3-text h3-last-text paragraph {">
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
créateurs
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
votre
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
Hutopy.
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
dans le ciel de notre utopie partagée.
</p>
</v-container>
</v-row>
</v-col>
<v-col>
</v-col>
</v-row>
</v-container>
</div>
<div class="hidden-sm-and-up flex-col items-center justify-center">
<img class="hutopy-header-image" src="../../../images/hutopy.png">
<img class="contact-image" src="../../../images/contactpage/contactpicture.png">
<v-row>
<v-col cols="7">
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
</v-col>
<v-col>
<RouterLink :to="{ name: 'home' }">
<v-btn size="large"
style="margin-left: 50%; margin-top: 48%; min-width: 150px; max-width: 200px; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="0">
<v-btn class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
Accueil
</v-btn>
</RouterLink>
</v-row>
</div>
</v-container>
</div>
</v-col>
</v-row>
<v-container>
<v-row justify="center" align="center">
<v-col cols="auto">
<img src="../../../images/contactpage/contactpicture.png" alt="Bannière" class="contactpicture"
style="max-width: 400px; margin-top: 14%; height: auto; float: right;">
</v-col>
<v-col style="max-width: 700px;">
<h1 style=" font-size: 3rem; margin-bottom: 5%;" class="h1-inscription-beta">Participez au
développement</h1>
<v-text-field label="Nom ($)" style=" color: rgb(107, 0, 101); background-color: #F4F4F4;"></v-text-field>
<v-text-field label="Courriel ($)" style="color: rgb(107, 0, 101); background-color: #F4F4F4"></v-text-field>
<v-textarea 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 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>
<RouterLink :to="{ name: 'home' }">
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4" block>Envoyez</v-btn>
</RouterLink>
</v-col>
</v-row>
</v-container>
<v-container style="max-width: 1200px;">
<p class="para-inscription" style="margin-top: -4%; font-size: 1.3rem;">Rejoignez l'aventure
Hutopy : une
invitation à façonner l'avenir de la création.
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
inspirer.
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un
écosystème florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser
votre empreinte, d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes
idées.
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et
l'innovation.
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
dans le ciel de notre utopie partagée.
</p>
</v-container>
<!-- Mobile -->
<v-container style="margin-top: -100px;">
<div class="md:hidden flex flex-col items-center justify-center">
<DefaultLayout></DefaultLayout>
<h1 class="h1-inscription-betacolor" style=" margin-bottom: 35px;">Hutopy</h1>
<v-text-field class="labelsize" label="Nom ($)" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
<v-text-field class="labelsize" label="Courriel ($)" style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea 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 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>
<RouterLink :to="{ name: 'home' }">
<v-btn style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
class="mt-4 send-btn" block>
Envoyez
</v-btn>
</RouterLink>
<div class="w-screen flex justify-center" style="margin-left: -5px; margin-right: -5px;">
<img src="../../../images/contactpicturemobile.png" alt="Bannière">
</div>
<p class="text-justify pa-4" style="font-size: 1em;">
Rejoignez l'aventure Hutopy : une invitation à façonner l'avenir de la création.
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme plateforme,
mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie collective. Ici, votre
art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et inspirer.
Devenez créateur sur Hutopy et plongez dans une expérience sans pareille où vos œuvres rejoindront un écosystème
florissant, prêtes à être découvertes, appréciées et soutenues. C'est l'occasion de laisser votre empreinte,
d'enseigner, d'apprendre et de grandir aux côtés d'âmes créatives partageant les mêmes idées.
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité, d'élargir votre
réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en profession,
d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité et l'innovation.
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de créateurs
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et votre numéro
de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur Hutopy.
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite. Votre
aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile dans le ciel de
notre utopie partagée.
<p class="h3-text paragraph">Rejoignez l'aventure
Hutopy : une
invitation à façonner l'avenir de la création.
Vous avez un talent, une passion, une vision ? Hutopy vous ouvre ses portes, non seulement comme
plateforme, mais comme une communauté vibrante où chaque créateur devient un architecte de l'utopie
collective. Ici, votre art, vos idées, et vos rêves trouvent un espace pour s'épanouir, se partager et
inspirer.
</p>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
</div>
<p class="h3-text paragraph">
Faire partie de Hutopy, c'est embrasser une opportunité unique de monétiser votre créativité,
d'élargir
votre réseau et de participer à un projet grandiose. C'est le moment de transformer votre passion en
profession, d'atteindre un public mondial et de contribuer à un mouvement qui valorise la créativité
et
l'innovation.
<FormInscriptionBeta></FormInscriptionBeta>
<v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
block>Envoyez</v-btn>
</p>
<p class="h3-text h3-last-text paragraph">
Pour embarquer dans ce voyage vers la réalisation de vos rêves et rejoindre notre communauté de
créateurs
visionnaires, nous vous invitons à inscrire vos informations. Partagez avec nous votre courriel et
votre
numéro de téléphone, et nous vous guiderons à travers chaque étape pour établir votre présence sur
Hutopy.
Laissez-nous votre marque, et ensemble, construisons un monde où la créativité connaît aucune limite.
Votre aventure commence maintenant. Bienvenue dans l'univers Hutopy, où chaque créateur est une étoile
dans le ciel de notre utopie partagée.
</p>
</div>
</v-container>
<FooterLayout></FooterLayout>
<FooterLayout></FooterLayout>
</v-app>
</template>
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import FormInscriptionBeta from '@/layouts/FormInscriptionBeta.vue';
</script>
<style scoped>
.contactpicture {
height: 800px;
width: auto;
@media (min-width: 150px) and (max-width: 598px) {
.contact-image {
/* ajustez cette valeur selon votre besoin */
margin-bottom: 45px;
border-radius: 12px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.6);
/* ombre avec 2px de décalage vertical, 4px de flou et couleur noire transparente */
z-index: 2;
/* Met l'image derrière */
}
width: auto;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
clip-path: polygon(0 30%, 100% 30%, 100% 80%, 0 80%);
margin-top: -40%;
margin-bottom: -30%;
}
.mallowbanner {
.hutopy-header-image {
top: 0;
left: 0;
z-index: -2;
/* Met l'image derrière */
margin-top: 5.5vw;
/* ajustez cette valeur selon votre besoin */
margin-bottom: 4.5vw;
margin-left: -1.0vw;
}
height: 70px;
margin-left: 5%;
margin-top: 5%;
}
.h2-Participez-au-développement {
font-size: 1.8rem;
margin-top: 3%;
margin-bottom: 6%;
margin-left: 5%;
}
.home-btn {
margin-left: 20%;
margin-top: 16%;
}
.paragraph {
font-size: 1.2rem;
text-align: justify;
margin-bottom: 10%;
margin-top: 3%;
margin-left: 3%;
margin-right: 3%;
}
.labelsize {
max-width: 95%;
margin-left: 3%;
}
.center-column {
width: 70vw;
/* ajustez cette valeur selon votre besoin */
margin: auto;
/* centre le contenu horizontalement */
}
.h1-inscription-beta {
font-size: 25px;
/* Taille de la police de 20 pixels */
font-weight: bold;
/* Texte en gras */
text-align: center;
/* Centrer le texte */
margin-top: 20px;
margin-bottom: 5px;
color: #24393c;
}
.h1-inscription-betacolor {
font-size: 65px;
/* Taille de la police de 20 pixels */
font-weight: bold;
/* Texte en gras */
text-align: center;
/* Centrer le texte */
@media (min-width: 599px) and (max-width: 999px) {
.contact-image {
border-radius: 25px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
max-width: 100%;
margin-top: 4%;
}
.home-btn {
margin-top: 5%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 150%;
}
.h2-Participez-au-développement {
font-size: 2rem;
margin-top: -3%;
margin-bottom: 6%;
}
.paragraph {
font-size: 1.3rem;
text-align: justify;
margin-bottom: 4%;
margin-top: 3%;
}
margin-bottom: 25px;
color: rgba(163, 14, 121, 0.85);
/* Couleur du texte (utilisez la couleur souhaitée) */
}
.para-inscription {
margin-bottom: 20px;
text-align: justify;
@media (min-width: 1000px) and (max-width: 1279px) {
.hutopy-header-image {
margin: 0 auto;
height: 120px;
margin-left: -0%;
}
.home-btn {
margin-top: 5%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 22%;
margin-top: 37%;
}
.h2-Participez-au-développement {
font-size: 3rem;
margin-top: 3%;
margin-bottom: 6%;
}
.contact-image {
border-radius: 25px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}
.row-joinus {
margin-right: -4%;
margin-left: -1%;
}
.paragraph {
font-size: 1.5rem;
text-align: justify;
margin-right: -4%;
margin-bottom: 4%;
margin-top: 3%;
}
}
@media (min-width: 1280px) and (max-width: 1600px) {
.hutopy-header-image {
margin: 0 auto;
height: 165px;
margin-left: -4%;
}
.home-btn {
margin-top: 5%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 50%;
margin-top: 45%;
}
.row-between-logo-text {
margin-top: 2%;
}
.contact-image {
border-radius: 25px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
margin-top: 0%;
margin-left: -13%
}
.h2-Participez-au-développement {
font-size: 3rem;
margin-top: 15%;
margin-bottom: 6%;
}
.h3-text {
font-size: 1.3rem;
margin-top: 2%;
text-align: justify;
}
.h3-last-text {
margin-bottom: 5%;
}
.row-joinus {
margin-right: -8%;
margin-left: -10%;
}
.paragraph {
margin-right: -6%;
margin-left: -7%;
}
}
@media (min-width: 1600px) and (max-width: 1919px) {
.hutopy-header-image {
margin: 0 auto;
height: 165px;
margin-left: -5%;
}
.home-btn {
margin-top: 5%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-left: 93%;
margin-top: 40%;
}
.row-between-logo-text {
margin-top: 2%;
}
.contact-image {
border-radius: 25px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
margin-top: 0%;
margin-left: -13%
}
.h2-Participez-au-développement {
font-size: 3rem;
margin-top: 15%;
margin-bottom: 6%;
}
.h3-text {
font-size: 1.3rem;
margin-top: 2%;
text-align: justify;
}
.h3-last-text {
margin-bottom: 5%;
}
.row-joinus {
margin-right: -15%;
margin-left: -13%;
}
.paragraph {
margin-right: -16%;
margin-left: -9%;
}
}
@media (min-width: 1920px) and (max-width: 2559px) {
.hutopy-header-image {
margin: 0 auto;
height: 160px;
margin-left: -8%;
}
.contact-image {
border-radius: 25px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
}
.home-btn {
margin-top: 5%;
margin-left: 95%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-bottom: -15%;
}
.send-btn {
margin-bottom: 4%;
margin-top: -1%;
}
.row-between-logo-text {
margin-top: 3%;
}
.home-row {
margin-left: 20%;
}
.h2-Participez-au-développement {
font-size: 3rem;
margin-top: 15%;
margin-bottom: 6%;
}
.h3-text {
font-size: 1.3rem;
margin-top: 2%;
text-align: justify;
}
.h3-last-text {
margin-bottom: 5%;
}
.row-joinus {
margin-right: -18%;
margin-left: -10%;
}
.paragraph {
margin-right: -20%;
}
}
@media (min-width: 2559px) {
.hutopy-header-image {
margin: 0 auto;
height: 180px;
margin-left: 7%;
}
.contact-image {
border-radius: 25px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
margin-left: 20%;
}
.home-btn {
margin-top: 5%;
margin-left: 66%;
border-radius: 30px;
width: 180px;
min-width: 175px;
margin-bottom: -15%;
}
.send-btn {
margin-bottom: 4%;
margin-top: -1%;
}
.row-between-logo-text {
margin-top: 3%;
}
.home-row {
margin-left: 20%;
}
.h2-Participez-au-développement {
font-size: 3rem;
margin-top: 15%;
margin-bottom: 6%;
}
.h3-text {
font-size: 1.3rem;
margin-top: 2%;
text-align: justify;
}
.h3-last-text {
margin-bottom: 5%;
}
.paragraph {
margin-left: 10%;
}
}
</style>