635 lines
14 KiB
Vue
635 lines
14 KiB
Vue
<template>
|
|
<!--PC -->
|
|
<div class="hutopy-backgroud-color">
|
|
<div class="hidden-xs flex-col items-center page-margin">
|
|
<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-row>
|
|
</v-container>
|
|
|
|
<v-container class="row-between-logo-text">
|
|
<v-row>
|
|
<v-spacer></v-spacer>
|
|
|
|
<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-spacer></v-spacer>
|
|
</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 class="home-btn" size="large" color="rgb(107, 0, 101)" outlined elevation="0">
|
|
Accueil
|
|
</v-btn>
|
|
</RouterLink>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<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>
|
|
|
|
<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>
|
|
</div>
|
|
|
|
<FooterLayout></FooterLayout>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
message: '',
|
|
social_media: '',
|
|
phone_number: ''
|
|
}
|
|
},
|
|
methods: {
|
|
/*submit() {
|
|
this.$emit('submit', this.email)
|
|
}*/
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<script setup>
|
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.hutopy-backgroud-color {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
@media (min-width: 150px) and (max-width: 598px) {
|
|
.contact-image {
|
|
|
|
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%;
|
|
}
|
|
|
|
.hutopy-header-image {
|
|
|
|
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%;
|
|
border-radius: 150px;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
@media (min-width: 599px) and (max-width: 749px) {
|
|
|
|
.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: 70%;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
@media (min-width: 750px) 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: 74%;
|
|
}
|
|
|
|
.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%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
@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: 75%;
|
|
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: 47%;
|
|
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%;
|
|
}
|
|
|
|
.page-margin {
|
|
margin-left: -9%;
|
|
}
|
|
|
|
}
|
|
|
|
@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: 33%;
|
|
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%;
|
|
}
|
|
|
|
.page-margin {
|
|
margin-left: -5.5%;
|
|
}
|
|
}
|
|
</style>
|