142 lines
4.6 KiB
Vue
142 lines
4.6 KiB
Vue
<template>
|
|
<DefaultLayout></DefaultLayout>
|
|
|
|
<!--PC -->
|
|
<div class="md:flex hidden items-center justify-between flex-col">
|
|
<main class="top-aligned-column grid grid-cols-3 gap-4">
|
|
|
|
<div class="column"></div>
|
|
<div class="center-column" style="width: 70vw; margin: auto;">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="rectangular-image h-full flex justify-center items-center">
|
|
<img src="../../../images/contactpicture.png" alt="Bannière" class="contactpicture">
|
|
</div>
|
|
|
|
<div>
|
|
<h1 class="h1-inscription-betacolor">Hutopy</h1>
|
|
<h1 class="h1-inscription-beta">Participez au développement de </h1>
|
|
|
|
<p class="para-inscription">
|
|
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
|
|
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
|
|
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
|
|
rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
|
|
utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
|
|
</p>
|
|
<FormInscriptionBeta></FormInscriptionBeta>
|
|
<v-btn style=" margin-bottom: 45px; background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
|
|
class="mt-4" block>Envoyez</v-btn>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column"></div>
|
|
</main>
|
|
</div>
|
|
|
|
|
|
<!-- Mobile -->
|
|
|
|
<v-container style="margin-top: -100px;">
|
|
|
|
<div class="md:hidden flex flex-col items-center justify-center">
|
|
<h1 class="h1-inscription-betacolor" style="margin-bottom: 35px;">Hutopy</h1>
|
|
<h1 class="h1-inscription-beta">Participez au développement de </h1>
|
|
|
|
|
|
<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;">
|
|
Étant au début de notre projet, vous pouvez nous contacter pour être ajouté à la liste des ambassadeurs et
|
|
nous aider à créer la plateforme de vos rêves pour partager votre contenu. Nous recherchons des personnes
|
|
passionnées et qui ont une vision d'un monde meilleur. Aidez-nous à grandir en nous donnant vos
|
|
rétroactions afin que l'on puisse développer des outils qui seront uniques pour les créateurs et les
|
|
utilisateurs de la plateforme. Nous voulons créer un réseau social qui fera une différence dans ce monde.
|
|
</p>
|
|
|
|
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-bottom: 20px;">
|
|
</div>
|
|
|
|
<FormInscriptionBeta></FormInscriptionBeta>
|
|
|
|
<v-btn style=" background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4"
|
|
block>Envoyez</v-btn>
|
|
|
|
|
|
|
|
</div>
|
|
</v-container>
|
|
|
|
<FooterLayout></FooterLayout>
|
|
</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 {
|
|
margin-top: 15px;
|
|
/* 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 */
|
|
}
|
|
|
|
.mallowbanner {
|
|
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
.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 */
|
|
|
|
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;
|
|
}
|
|
</style>
|