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

Merged PR 10: ContactView UI Updated

Browse Source
This commit is contained in:
Pascal Marchesseault
2024-03-28 03:55:47 +00:00
committed by Dominic Villemure
parent 4917314eef 5cd4eb531a
commit 73858a1bae
7 changed files with 1308 additions and 637 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
images/facebookiconblackpink.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 22 KiB

BIN
images/xblackpink.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 44 KiB

6
src/App.vue
View File

@@ -1,8 +1,10 @@
<template>
<RouterView>
<v-app>
<RouterView>
</RouterView>
</RouterView>
</v-app>
</template>
<script>

105
src/layouts/FooterLayout.vue
View File

@@ -1,37 +1,56 @@
<!--lg="8" md="10" sm="10" xs="10" -->
<template>
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;">
<v-container style="background-color: #f4f4f4">
<v-row justify="center" style="margin-top: 30px;">
<v-row cols="auto" class="d-flex justify-center align-center">
<img src="../../../images/hutopy.png" style="height: 70px; margin-right: 2%;">
<a href="https://www.facebook.com/profile.php?id=61556819217561"><img
src="../../../images/facebookiconblackpink.png" alt="Description image 2"
style="width: 50px; height: 50px; margin-right: 40px; "></a>
<a href="https://www.instagram.com/hutopy.inc/"><img src="../../../images/instagramblackpink.png"
alt="Description image 3" style="width: 50px; height: 50px; margin-right:40px; "></a>
<router-link :to="{ name: 'home' }">
<img src="../../../images/xblackpink.png" alt="Description image 1"
style="width: 50px; height: 50px; margin-right: 40px; "></router-link>
<v-container>
<div style="background-color: #f4f4f4; min-height: 10vh; display: flex; flex-direction: column;"
class="footer-align">
<v-container style="background-color: #f4f4f4">
<v-row justify="center" style="margin-top: 30px;">
<v-col cols="5" lg="5" md="5" sm="12" xs="7">
<v-row>
<v-img src="../../../images/hutopy.png" class="hutopy-footer-picture"></v-img>
</v-row>
</v-col>
</v-row>
</v-row>
</v-container>
</v-container>
<v-container>
<v-row justify="center">
<v-col cols="auto">
<a href="https://www.facebook.com/profile.php?id=61556819217561">
<img class="icons" src="../../../images/facebookiconblackpink.png" alt="Description image 2">
</a>
</v-col>
<v-col cols="auto">
<a href="https://www.instagram.com/hutopy.inc/">
<img src="../../../images/instagramblackpink.png" alt="Description image 3" class="icons">
</a>
</v-col>
<v-col cols="auto">
<router-link :to="{ name: 'home' }">
<img src="../../../images/xblackpink.png" alt="Description image 1" class="icons">
</router-link>
</v-col>
</v-row>
</v-container>
<v-container class="text-center" style="flex-grow: 1;">
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
{{ link }}
</v-btn>
</v-container>
<v-container class="text-center" style="flex-grow: 1;">
<v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
{{ link }}
</v-btn>
</v-container>
<v-container class="text-black text-center">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</v-container>
<v-container class="text-black text-center ">
{{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
</v-container>
<v-container class="custom-footer">
</v-container>
</div>
</div>
</v-container>
</template>
@@ -52,6 +71,18 @@ export default {
</script>
<style>
.icons {
width: 50px;
height: auto;
}
.hutopy-footer-picture {
height: 70px;
margin-bottom: 3%;
min-height: 70px;
min-width: auto;
}
.custom-footer {
padding: 10px;
@@ -102,4 +133,26 @@ footer a:not(:last-child) {
.background {
background-color: rgba(107, 0, 101, 1);
}
@media (min-width: 150px) and (max-width: 598px) {
.hutopy-footer-picture {
min-width: 200px;
}
}
@media (min-width: 599px) and (max-width: 999px) {}
@media (min-width: 1000px) and (max-width: 1279px) {}
@media (min-width: 1280px) and (max-width: 1600px) {}
@media (min-width: 1600px) and (max-width: 1919px) {}
@media (min-width: 1920px) and (max-width: 2559px) {}
@media (min-width: 2559px) {}
</style>

342
src/views/LoginView.vue
View File

@@ -4,16 +4,15 @@
style="background-color: #f4f4f4; margin-top: 3%;">
<body style="background-color: #f4f4f4;">
<v-container style="background-color: #f4f4f4;">
<v-container style=" background-color: #f4f4f4;">
<v-row align="center" justify="center">
<!-- Colonne de l'image -->
<v-col cols="8" lg="8" style="align-items: center;">
<img class="headermarginleft" style="border-radius: 20px; max-width: 90%;"
src="../../../images/loginpage/loginhutopy.png">
<!-- Header -->
<v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
<img class="login-picture" src="../../../images/loginpage/loginhutopy.png">
</v-col>
<!-- Colonne du contenu -->
<v-col cols="3" lg="4" md="5" sm="6" xs="6">
<!-- Connexion-objects -->
<v-col cols="3" lg="4" md="10" sm="10" xs="10" class="connexion-container">
<h1 class="text-center display-6 h1-connexion">Connexion</h1>
<h2 class="text-center display-3 h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2>
@@ -34,16 +33,16 @@
<v-card-actions>
<div class="flex-grow-1"></div>
<router-link :to="{ name: 'home' }">
<v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
<v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
</router-link>
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
<v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
</v-card-actions>
<div class="text-center">
<h2 class="text-center display-3 h2-connexion">
<h2 class="text-center display-3 h2pasinscrit">
Pas encore
inscrit?</h2>
<router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065"
<v-btn color="#6b0065" class="inscriptionbtn"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link>
</div>
@@ -58,11 +57,11 @@
<div class="sm:hidden flex flex-col items-center justify-start"
style="background-color: #f4f4f4; height: 100vh;">
<img style="box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-bottom-left-radius: 25px; border-bottom-right-radius: 25px; "
<img style="margin-top: 10%; width: 350px; box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px; "
src="../../../images/loginpage/loginhutopy.png">
<h1 class="text-center">Connexion</h1>
<h2 class="text-center">Comment souhaitez-vous
<h1 class="h1-connexion">Connexion</h1>
<h2 class="h2-connexion">Comment souhaitez-vous
vous connecter à votre compte?</h2>
<v-form style="max-width: 400px; width: 350px;">
@@ -79,11 +78,11 @@
<v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
</v-card-actions>
<div class="text-center">
<h2 class="text-center display-3 h2-connexion">
<h2 class="h2pasinscrit">
Pas encore
inscrit?</h2>
<router-link :to="{ name: 'contact' }">
<v-btn color="#6b0065"
<v-btn color="#6b0065" class="inscriptionbtn"
style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions</v-btn>
</router-link>
</div>
@@ -111,6 +110,7 @@ let errorSnackBar = ref(false);
const goHome = () => {
router.push('/');
}
@@ -126,7 +126,7 @@ async function login() {
</script>
<style>
<style scoped>
.h1-connexion {
font-size: 0.55em;
}
@@ -139,99 +139,273 @@ async function login() {
margin-bottom: -10%;
}
.logincol {
cols: 3;
}
@media (max-width: 475px) {
@media (min-width: 300px) {
.h1-connexion {
font-size: 1em;
}
}
@media (min-width: 476px) and (max-width: 640px) {
.h1-connexion {
font-size: 1em;
}
}
@media (min-width: 641px) and (max-width: 768px) {
.h1-connexion {
font-size: 1em;
font-size: 2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1em;
font-size: 1.1em;
margin-bottom: 5%;
text-align: center;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.inscriptionbtn {
transform: scale(.7);
}
}
@media (min-width: 450px) and (max-width: 670px) {
.h1-connexion {
font-size: 2em;
margin-bottom: 5%;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
text-align: center;
}
.h2pasinscrit {
margin-bottom: 6%;
font-size: 1.1em;
}
.inscriptionbtn {
transform: scale(.7);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
}
@media (min-width: 641px) and (max-width: 770px) {
.h1-connexion {
font-size: 2.5em;
}
.h2-connexion {
font-size: 1.1em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.1em;
}
.headermarginleft {
margin-left: 4%;
}
.label-mail-password {
margin-bottom: -3%;
width: 425px;
margin-left: 6%;
}
.btnhome {
font-size: 1em;
justify-content: center;
transform: matrix(1, 0, 0, 1, -160, 0);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.inscriptionbtn {
transform: scale(.8);
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.h1-connexion {
font-size: 1em;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.headermarginleft {
margin-left: 4%;
}
}
@media (min-width: 1025px) and (max-width: 1272px) {
@media (min-width: 769px) and (max-width: 1280px) {
.h1-connexion {
font-size: 3em;
margin-top: 15%;
margin-bottom: 1%;
}
.h2-connexion {
font-size: 1.2em;
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-bottom: -3%;
width: 550px;
margin-left: 9%;
}
.headermarginleft {
margin-left: 4%;
}
.inscriptionbtn {
transform: scale(.8);
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}
.btnhome {
font-size: 1em;
justify-content: center;
}
}
@media (min-width: 1279px) and (max-width: 1920px) {
.h1-connexion {
font-size: 2em;
margin-top: 4%;
font-weight: 600;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
font-weight: 500;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.3em;
}
.h2-pasinscrit {
margin-bottom: -10%;
}
.label-mail-password {
margin-bottom: -10%;
margin-top: -4%;
}
.headermarginleft {
margin-left: -10%;
min-width: 700px;
.inscriptionbtn {
transform: scale(.6);
margin-top: -5%;
}
}
@media (min-width: 1537px) and (max-width: 1920px) {
.h1-connexion {
font-size: 3.0em;
margin-top: 18%;
}
.h2-connexion {
font-size: 1em;
margin-bottom: 5%;
}
.label-mail-password {
margin-bottom: 0%;
}
.headermarginleft {
margin-left: 0%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
}
@media (min-width: 1921px) {
.h1-connexion {
font-size: 4.2em;
}
.h2-connexion {
font-size: 1.3em;
margin-bottom: 5%;
margin-left: 6%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-left: 5%;
margin-bottom: 0%;
width: auto;
}
.insriptionbutton {
font-size: 1.2em;
}
.headermarginleft {
margin-left: 0%;
}
.connexion-container {
margin-left: -7%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -10%;
}
}
@media (min-width: 2500px) and (max-width: 4000px) {
.h1-connexion {
font-size: 6.2em;
}
@@ -241,8 +415,15 @@ async function login() {
margin-bottom: 5%;
}
.h2pasinscrit {
margin-bottom: 5%;
font-size: 1.7em;
}
.label-mail-password {
margin-bottom: 0%;
margin-left: 10%;
width: auto;
}
.insriptionbutton {
@@ -250,12 +431,25 @@ async function login() {
}
.headermarginleft {
margin-left: 0%;
margin-left: 1%;
}
.inscriptionbtn {
transform: scale(1);
}
.connexion-container {
margin-left: -3%;
}
.login-picture {
width: auto;
border-radius: 30px;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
margin-left: -5%;
}
}

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

@@ -1,203 +1,614 @@
<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>
<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%;">
<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>
<img style=" max-width: 60%;" src="../../../images/hutopy.png">
<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 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-col>
</v-row>
</v-row>
</div>
</v-container>
</div>
<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>
<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.
<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>
<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>
<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>
</v-container>
<FooterLayout></FooterLayout>
<FooterLayout></FooterLayout>
</div>
</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;
/* 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 */
.hutopy-backgroud-color {
background-color: #f4f4f4;
}
.mallowbanner {
@media (min-width: 150px) and (max-width: 598px) {
.contact-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;
}
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%;
}
.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 */
margin-bottom: 25px;
color: rgba(163, 14, 121, 0.85);
/* Couleur du texte (utilisez la couleur souhaitée) */
@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%;
}
}
.para-inscription {
margin-bottom: 20px;
text-align: justify;
@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>

753
src/views/main/HomeView.vue
View File

@@ -1,399 +1,408 @@
<template>
<div style="background-color: #F4F4F4;">
<!--PC -->
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
<v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%;">
<v-row>
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }">
<v-btn size="large"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
light elevation="0">
Connexion
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'contact' }">
<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">
Inscription
</v-btn>
</RouterLink>
</v-row>
<v-row>
</v-row>
</div>
</v-container>
<div>
<v-container style="margin: 0; padding: 0;">
<v-row style="justify-content: center;">
<img src="../../../images/homepage/bannierehomepage.png"
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
</v-row>
</v-container>
</div>
<v-app style="background-color: #F4F4F4;">
<!-- Colonnes Créer Partager Inspirer-->
<v-container>
<v-row>
<!-- vide de gauche -->
<v-col cols="1" class="ml-4 ml-sm-0">
</v-col>
<!-- Colonne Centre -->
<v-col cols="9" style="margin-left: 4%;">
<div style="background-color: #F4F4F4;">
<!-- Créer Profiter Inspirer -->
<!--PC -->
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<div class="d-flex justify-center align-center">
<div>
<div style="margin-top: 40px;">
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
<v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/creer.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
CRÉER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
</p>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
<div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/partager.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text"
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
PROFITER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
Plongez dans l'univers Hutopy et
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des
interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens
et enrichir votre quotidien.</p>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
<div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text"
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
INSPIRER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
Devenez une source d'inspiration
sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
</v-container>
</div>
</div>
</div>
</v-col>
<!-- vide de droite -->
<v-col cols="2" class="mr-4 mr-sm-0">
</v-col>
</v-row>
</v-container>
<!-- Description D'hutopy -->
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
<v-row class="justify-center">
<v-col cols="6">
<v-col cols="11" class="d-flex justify-center align-center">
<v-img style="margin-top: -5%; min-width: 350px;" src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col>
<v-col cols="auto" md="10">
<p class="text-center text-justify votre_hutopy_fontsize"
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
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é.
</p>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
prendre vie.
</p>
<v-col cols="auto" class="d-flex justify-center align-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-col>
</v-col>
<!-- Colonne de droite -->
<v-col cols="3">
<v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
</v-col>
<v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
</v-col>
</v-row>
</v-container>
<!-- ILS SONT SUR HUTOPY -->
<v-container style="max-width: 1500px;">
<v-card-text>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<!--Logo & bouttons -->
<v-container class="d-flex justify-center align-center">
<div style="margin-left: 20%;">
<v-row>
<img style=" max-width: 60vh; max-height: 11vh;" src="../../../images/hutopy.png">
<RouterLink :to="{ name: 'login' }">
<v-btn size="large"
style="margin-left: 20%; margin-top: 50%; background-color: #F4F4F4; min-width: 100px; max-width: 100;"
light elevation="0">
Connexion
</v-btn>
</RouterLink>
<RouterLink :to="{ name: 'contact' }">
<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">
Inscription
</v-btn>
</RouterLink>
</v-row>
</v-container>
</v-card-text>
</v-container>
<!-- Fin Description D'hutopy -->
</div>
<!-- Mobile -->
<div class="md:hidden flex flex-col items-center justify-center">
<div>
<DefaultLayout></DefaultLayout>
<img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
</div>
</v-container>
<div>
<v-card-text>
<div>
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
par son engagement envers une expérience numérique enrichissante, offrant une interface
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
</div>
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
<router-link :to="{ name: 'contact' }">
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
CONNECTEZ-VOUS
</v-btn>
</router-link>
</v-card-text>
<v-container style="margin: 0; padding: 0;">
<v-row style="justify-content: center;">
<img src="../../../images/homepage/bannierehomepage.png"
style="max-width: 100%; height: auto; max-height: 50vh; min-width: 1000px; min-height: 450px; object-fit: cover; border-radius: 20px; margin: auto;">
</v-row>
</v-container>
</div>
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
</v-container>
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une
expérience
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
</v-container>
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
partageant votre vision,
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
d'inspiration.</p>
</v-container>
<!-- Colonnes Créer Partager Inspirer-->
<v-container>
<v-row>
<!-- vide de gauche -->
<v-col cols="1" class="ml-4 ml-sm-0">
</v-col>
<!-- Colonne Centre -->
<v-col cols="9" style="margin-left: 4%;">
<!-- Créer Profiter Inspirer -->
<div class="d-flex justify-center align-center">
<div>
<div style="margin-top: 40px;">
<v-container class="d-flex justify-center align-center" style="width: 128vh;">
<v-hover v-slot="{ isHovering, props }">
<v-card style="border-radius: 20px; min-width: 325px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/creer.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text" style="text-align: center; margin-top: 10%; font-size: 1.5em;">
CRÉER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">Libérez votre créativité sur
Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde
rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en
réalité.
</p>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
<div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/partager.png"
style="min-width: 325px; border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text"
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
PROFITER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
Plongez dans l'univers Hutopy et
découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques,
des
interactions authentiques et une expérience personnalisée conçue pour éveiller vos
sens
et enrichir votre quotidien.</p>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
<div style="margin-left: 5vw;"></div>
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto" :max-width="600"
v-bind="props">
<v-img src="../../../images/homepage/inspirer.png"
style="border-radius: 20px; width: 80vw;"></v-img>
<v-overlay :model-value="isHovering" class="align-center justify-center" scrim="#6b0065"
contained>
<v-container>
<v-card class="mx-auto" :max-width="600" v-bind="props" color="#a30e79">
<h3 class="white--text"
style="text-align: center; margin-top: 10%; font-size: 1.5em; @media screen and (min-width: 768px) { font-size: 2vw; }">
INSPIRER</h3>
<p class="text-justify pa-4" style="font-size: 1.2em;">
Devenez une source d'inspiration
sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez
positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre
leurs rêves dans un cercle vertueux de créativité et d'inspiration.</p>
</v-card>
</v-container>
</v-overlay>
</v-card>
</v-hover>
</v-container>
</div>
</div>
</div>
</v-col>
<!-- vide de droite -->
<v-col cols="2" class="mr-4 mr-sm-0">
</v-col>
</v-row>
</v-container>
<!-- Description D'hutopy -->
<v-container style="max-width: 65%; min-width: 1150px;" class="custom-width">
<v-row class="justify-center">
<v-col cols="6">
<v-col cols="11" class="d-flex justify-center align-center">
<v-img style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
</v-col>
<v-col cols="auto" md="10">
<p class="text-center text-justify votre_hutopy_fontsize"
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
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é.
</p>
<p class="text-center text-justify votre_hutopy_fontsize"
style="margin-top: 3%; margin-bottom: 5%; max-width: 900px;">
Chez Hutopy, nous croyons en la puissance de la créativité sans limites. Notre environnement est
conçu pour inspirer, soutenir et propulser chaque membre vers de nouveaux sommets de
réalisation. Qu'il s'agisse de vidéo, d'art, de musique, d'écriture, de formation ou de toute
autre forme d'expression, Hutopy offre les outils nécessaires pour que chaque vision puisse
prendre vie.
</p>
<v-col cols="auto" class="d-flex justify-center align-center">
<RouterLink style="width: 450px;" :to="{ name: 'contact' }">
<v-btn size="x-large" style="width: 400px; border-radius: 40px;" color="rgb(107, 0, 101)" outlined
elevation="0">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-col>
</v-col>
<!-- Colonne de droite -->
<v-col cols="3">
<v-img src="../../../images/homepage/grinding.png"
style="margin-bottom: 4%; border-radius: 30px; width: 80 vw;"></v-img>
<v-img src="../../../images/homepage/girlarmy.png" style="border-radius: 30px; min-width: 250px;"></v-img>
</v-col>
<v-col cols="3" style>
<v-img src="../../../images/homepage/microphone.png"
style="margin-bottom: 4%; border-radius: 30px; min-width: 250px; max-height: auto; height: auto;"></v-img>
<v-img src="../../../images/homepage/girlvr.png"
style="border-radius: 30px; min-width: 250pxpx; max-height: 350;"></v-img>
</v-col>
</v-row>
</v-container>
<!-- ILS SONT SUR HUTOPY -->
<v-container style="max-width: 1500px;">
<v-card-text>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
</div>
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
</h1>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
</div>
<div class="d-flex justify-content-center"
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
</router-link>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
</router-link>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
</router-link>
</div>
<h1 style="text-align: center; margin-bottom: 2%; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-container style="margin-top: 25px; margin-bottom: -6%; max-width: 1200px;">
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image ">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
<RouterLink :to="{ name: 'creatorfolio' }">
<v-btn size="large" style="margin-left: 29%; margin-top: -20%; border-radius: 40px;"
color="rgb(107, 0, 101)" outlined elevation="10">
Inscription
</v-btn>
</RouterLink>
</v-col>
</v-row>
</v-container>
</v-card-text>
</v-container>
<!-- Fin Description D'hutopy -->
</div>
<!-- Mobile -->
<div class="md:hidden flex flex-col items-center justify-center">
<div>
<DefaultLayout></DefaultLayout>
<img src="../../../images/bannieremobile.png" class="banner-image" alt="Bannière" style="margin-top: -100px;">
<div>
<v-card-text>
<div>
<h2 style="text-align: center;">C'EST QUOI HUTOPY</h2>
<p class="textjustify pa-4">Découvrez Hutopy, une plateforme révolutionnaire conçue pour célébrer
la créativité, l'authenticité et l'inspiration. Ici, chaque créateur trouve un espace pour
exprimer sa passion et partager ses œuvres avec une communauté engagée. Hutopy se distingue
par son engagement envers une expérience numérique enrichissante, offrant une interface
intuitive où profiter, créer et inspirer deviennent un quotidien enrichi et significatif.
Hutopy n'est pas seulement une plateforme, c'est un mouvement vers une interaction plus
humaine et créative dans l'espace numérique. Avec un modèle économique équitable et une
variété de contenus, nous offrons un lieu où les inspirations se rencontrent et où les idées
prennent vie. Rejoindre Hutopy, c'est faire partie d'une communauté qui valorise
l'expression authentique et construit un avenir où la technologie enrichit véritablement nos
vies. Nous vous invitons à explorer Hutopy, à contribuer à sa vision et à faire partie de
notre communauté mondiale. Ensemble, façonnons l'avenir de la création et du partage de
contenu. Bienvenue sur Hutopy, où vous pouvez créer votre propre univers.</p>
</div>
<v-img src="../../../images/world.png" class="v-card-imagecontainerpos" alt="Image"></v-img>
<router-link :to="{ name: 'contact' }">
<v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;" class="mt-4" block>
CONNECTEZ-VOUS
</v-btn>
</router-link>
</v-card-text>
</div>
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
<v-img src="../../../images/creermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Libérez votre créativité sur Hutopy,
où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de
possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.</p>
</v-container>
<v-container style="margin-top: 25px;" class="layer2-backgroundmobile">
<v-img src="../../../images/profitezmobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Plongez dans l'univers Hutopy et découvrez un
espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et
une
expérience
personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.</p>
</v-container>
<v-container style="margin-top: 25px;" class="layer1-backgroundmobile">
<v-img src="../../../images/inspirermobile.png" width="400" height="300"></v-img>
<p class="text-justify pa-4" style="font-size: 1em;">Devenez une source d'inspiration sur Hutopy, en
partageant votre vision,
votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez
les
autres à poursuivre leurs rêves dans un cercle vertueux de créativité et
d'inspiration.</p>
</v-container>
<v-container>
<v-card-text>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -50px;">
</div>
<h1 style="text-align: center; color: #24393c; font-size: 2.2em; margin-bottom: 10%;">ILS SONT SUR HUTOPY
</h1>
<div style="background-color: rgba(163, 14, 121, 1); height: 2px; width: 100%; margin-top: -40px;">
</div>
<div class="d-flex justify-content-center"
style="margin-left: -10px; margin-right: 10px; margin-top: 50px;">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
</router-link>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
</router-link>
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
</router-link>
</div>
</v-card-text>
</v-container>
</div>
</div>
<v-btn variant="outlined" @click="callBackend()">
Get items
</v-btn>
<v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter !
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
Fermer
</v-btn>
<v-btn color="green" variant="text" @click="goToLoginPage()">
Se connecter
</v-btn>
</template>
</v-snackbar>
<v-list style="background-color: #F4F4F4;" lines="one">
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
</v-list>
<FooterLayout></FooterLayout>
</div>
<v-btn variant="outlined" @click="callBackend()">
Get items
</v-btn>
<v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter !
<template v-slot:actions>
<v-btn color="red" variant="text" @click="errorNoAccessSnackBar = false">
Fermer
</v-btn>
<v-btn color="green" variant="text" @click="goToLoginPage()">
Se connecter
</v-btn>
</template>
</v-snackbar>
<v-list style="background-color: #F4F4F4;" lines="one">
<v-list-item v-for=" item in itemList " :key="item" :title="item.id" :subtitle="item.title"></v-list-item>
</v-list>
<FooterLayout></FooterLayout>
</div>
</v-app>
</template>
<script async setup>
@@ -644,6 +653,8 @@ body {
.votre_hutopy_fontsize {
font-size: 0.9em;
}
}
@media (min-width: 1537px) and (max-width: 1920px) {