701 lines
16 KiB
Vue
701 lines
16 KiB
Vue
<template>
|
|
<DefaultLayout></DefaultLayout>
|
|
<!--PC -->
|
|
<div class="hutopy-backgroud-color">
|
|
<div class="hidden-xs flex-col items-center page-margin">
|
|
<v-container>
|
|
|
|
<!-- Banner -->
|
|
<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>
|
|
<img class="hutopy-header-image" src="/images/hutopymedia/banners/hutopy.png">
|
|
<v-col class="ml-0 text-left ">
|
|
<!-- Home btn -->
|
|
<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>
|
|
|
|
<!-- Home btn -->
|
|
<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>
|
|
<!-- Contact image -->
|
|
<v-col>
|
|
<img class="contact-image" src="/images/hutopymedia/contactpage/contactpicture.png">
|
|
</v-col>
|
|
<!-- Form Information -->
|
|
<v-col class="row-joinus">
|
|
<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-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
|
class="mt-4 send-btn" block>Envoyez
|
|
</v-btn>
|
|
</v-col>
|
|
</v-row>
|
|
|
|
<!-- Text about joining us -->
|
|
<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>
|
|
<!-- Offset -->
|
|
<v-spacer></v-spacer>
|
|
</v-row>
|
|
</v-container>
|
|
</div>
|
|
|
|
|
|
<!-- Mobile low dimensions -->
|
|
<div class="hidden-sm-and-up flex-col items-center justify-center">
|
|
|
|
<!-- Offset -->
|
|
<v-spacer style="margin-bottom: 25px;"></v-spacer>
|
|
|
|
<!-- Contact image -->
|
|
<v-img src="/images/hutopymedia/contactpage/contactpicture.png" contain aspect-ratio="16/9"
|
|
style="clip-path: polygon(0 50%, 100% 0, 100% 80%, 0 100%);" class="Scale-80"></v-img>
|
|
|
|
<!-- Title -->
|
|
<v-row class="labelgroup">
|
|
<v-col cols="12">
|
|
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
|
|
</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>
|
|
<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;"
|
|
class="mt-4 send-btn" block>
|
|
Envoyez
|
|
</v-btn>
|
|
|
|
|
|
<!-- Text about joining us -->
|
|
<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>
|
|
|
|
|
|
|
|
|
|
<v-dialog v-model="showModal" max-width="600">
|
|
<v-card>
|
|
<v-card-title class="text-center" style="margin-top: 30px; margin-bottom: 40px;">
|
|
<p style="font-size: 2rem; font-weight: 600">INFORMATIONS REÇU</p>
|
|
</v-card-title>
|
|
<v-icon class="mx-auto" style="font-size: 10em; color: #a30e79;">mdi-emoticon-happy</v-icon>
|
|
<v-card-text style="margin-top: 40px; font-size: 1.3rem; margin-bottom: 50px;" class="text-justify">
|
|
Merci de vous intéresser à notre projet. Lorsque nous serons prêts, nous vous contacterons afin que vous
|
|
puissiez vous inscrire en primeur sur la plateforme pour nous aider à la développer. Chaque étape du
|
|
développement est importante, et nous voulons construire cette plateforme avec vous, pour vous.
|
|
</v-card-text>
|
|
<v-card-actions class="justify-end" style="margin-right: 20px;">
|
|
<v-btn to="/" size="large" class="text-center" color="primary" text @click="showModal = false">Fermer</v-btn>
|
|
</v-card-actions>
|
|
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
import DefaultLayout from '@/layouts/DefaultLayout.vue';
|
|
import FooterLayout from '@/layouts/FooterLayout.vue';
|
|
import { useClient } from "@/plugins/api.js";
|
|
import { ref } from 'vue';
|
|
|
|
const client = useClient();
|
|
|
|
const showModal = ref(false);
|
|
const name = ref("");
|
|
const emailAddress = ref("");
|
|
const reasonToJoin = ref("");
|
|
const socialNetworkAccount = ref("");
|
|
|
|
//const firstName = name.value.split(" ")[0];
|
|
//const lastName = name.value.split(" ")[1];
|
|
|
|
async function sendForm() {
|
|
try {
|
|
const requestBody = {
|
|
FirstName: name.value,
|
|
LastName: name.value,
|
|
EmailAddress: emailAddress.value,
|
|
PhoneNumber: "",
|
|
SocialNetworkAccount: socialNetworkAccount.value,
|
|
ReasonToJoin: reasonToJoin.value
|
|
};
|
|
|
|
await client.post('/api/JoinUs', requestBody);
|
|
showModal.value = true;
|
|
|
|
} catch (error) {
|
|
console.log(error);
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style scoped>
|
|
.hutopy-backgroud-color {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
.Scale-80 {
|
|
transform: translateY(-30%);
|
|
}
|
|
|
|
@media (min-width: 150px) and (max-width: 598px) {
|
|
|
|
.labelgroup {
|
|
margin-top: -50%;
|
|
}
|
|
|
|
.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.4rem;
|
|
margin-top: 5%;
|
|
margin-bottom: 6%;
|
|
margin-left: 5%;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.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%;
|
|
height: 103%;
|
|
}
|
|
|
|
.home-btn {
|
|
margin-top: 20%;
|
|
|
|
border-radius: 30px;
|
|
width: 140px;
|
|
|
|
min-width: 140px;
|
|
margin-left: 55%;
|
|
}
|
|
|
|
.h2-Participez-au-développement {
|
|
font-size: 1.6rem;
|
|
margin-top: 10%;
|
|
margin-bottom: 6%;
|
|
}
|
|
|
|
|
|
.paragraph {
|
|
font-size: 1.3rem;
|
|
text-align: justify;
|
|
|
|
margin-bottom: 4%;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
|
|
.hutopy-header-image {
|
|
margin-top: 6%;
|
|
width: 400px;
|
|
margin-left: 2%;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
@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: 35%;
|
|
|
|
border-radius: 30px;
|
|
width: auto;
|
|
min-width: 160px;
|
|
max-width: 180px;
|
|
margin-left: 40%;
|
|
|
|
|
|
}
|
|
|
|
.h2-Participez-au-développement {
|
|
font-size: 2rem;
|
|
margin-top: 10%;
|
|
margin-bottom: 6%;
|
|
}
|
|
|
|
|
|
.paragraph {
|
|
font-size: 1.3rem;
|
|
text-align: justify;
|
|
|
|
margin-bottom: 4%;
|
|
margin-top: 3%;
|
|
}
|
|
|
|
.hutopy-header-image {
|
|
margin-top: 6%;
|
|
width: 500px;
|
|
margin-left: 1%;
|
|
}
|
|
|
|
}
|
|
|
|
@media (min-width: 1000px) and (max-width: 1279px) {
|
|
|
|
.hutopy-header-image {
|
|
margin: 0 auto;
|
|
height: 120px;
|
|
margin-left: 1%;
|
|
}
|
|
|
|
|
|
.home-btn {
|
|
margin-top: 5%;
|
|
|
|
border-radius: 30px;
|
|
width: 180px;
|
|
min-width: 175px;
|
|
margin-left: 30%;
|
|
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: -2.8%;
|
|
}
|
|
|
|
.home-btn {
|
|
margin-top: 5%;
|
|
|
|
border-radius: 30px;
|
|
width: 180px;
|
|
min-width: 175px;
|
|
margin-left: 53%;
|
|
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: -3%;
|
|
}
|
|
|
|
.home-btn {
|
|
margin-top: 5%;
|
|
|
|
border-radius: 30px;
|
|
width: 180px;
|
|
min-width: 175px;
|
|
margin-left: 82%;
|
|
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: -4.6%;
|
|
}
|
|
|
|
.contact-image {
|
|
border-radius: 25px;
|
|
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
|
|
.home-btn {
|
|
margin-top: 5%;
|
|
margin-left: 53%;
|
|
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: 3.5%;
|
|
}
|
|
|
|
.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: 30%;
|
|
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>
|