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

#30 Merge fix + some more image location change

Browse Source
This commit is contained in:
Dominic Villemure
2024-04-21 14:14:40 -04:00
parent 5d37cefec1 722265b5c1
commit 0b5988fd4c
30 changed files with 1393 additions and 1866 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<template>
<div style="background-color: #F4F4F4;">
<DefaultLayout></DefaultLayout>
<!--PC -->
<!--PC ---------------------------------------------------------------------------------------------->
<div class="md:flex hidden items-center justify-between flex-col" style=" margin-top: 3%;">
<!--Logo & bouttons -->
@@ -65,6 +65,7 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size " v-bind="props">
@@ -86,6 +87,7 @@
</v-card>
</v-hover>
</v-col>
<v-col cols="4" sm="4" md="4">
<v-hover v-slot="{ isHovering, props }">
<v-card style="min-width: 325px; border-radius: 20px;" class="mx-auto card-size" v-bind="props">
@@ -110,7 +112,6 @@
</v-col>
</v-row>
</v-col>
</v-row>
</v-container>
@@ -120,9 +121,12 @@
<v-col cols="7" xs="12" sm="11" md="12" lg="10" xl="7" xxl="6">
<v-row justify="center">
<v-col cols="6" md="7" lg="6">
<!-- Subtitle : Votre Hutopy -->
<v-img cols="12" style="margin-top: -5%; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
<!-- Your Hutopy text-->
<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
@@ -132,6 +136,7 @@
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
@@ -151,7 +156,7 @@
</v-col>
</v-col>
<!-- 4 pictures -->
<v-col cols="6" md="5" lg="6">
<v-row justify="center" class="votre-hutopy-img">
<v-col cols="6" sm="12" md="12" lg="6">
@@ -176,18 +181,18 @@
</v-container>
<!-- They are on the Hutopy section -->
<v-row style="margin-top: 40px; margin-bottom: 60px;">
<v-spacer></v-spacer>
<!-- Subtitle :Ils sont sur Hutopy -->
<v-col cols="7" xs="12" sm="12" md="12" lg="10" xl="6" xxl="7">
<h1 style=" margin-bottom: 70px; text-align: center; font-size: 4rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
<v-spacer></v-spacer>
<v-col>
<!-- Account links -->
<v-row justify="center" class="profile-images">
<v-col>
<router-link :to="{ name: 'creatorfolio' }">
@@ -204,132 +209,154 @@
<img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
</v-col>
</v-row>
</v-col>
<v-spacer></v-spacer>
</v-col>
<v-spacer></v-spacer>
</v-row>
</div>
<!-- Mobile -->
<!-- Mobile ---------------------------------------------------------------------------------------->
<div class="md:hidden flex flex-col items-center justify-center">
<div>
<!--Banner -->
<img src="../../../public/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière">
<!-- Créer -->
<v-row style="margin-top: 30px;" align="center">
<v-col cols="6">
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
src="../../../images/homepage/creer.png"></v-img>
</v-col>
<v-col>
<p style="margin: 20px; text-align: justify;" class="center-vertical">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-col>
</v-row>
<img src="../../../public/images/homepage/bannierehomepage.png" class="banner-image" alt="Bannière"
style="margin-top: -100px;">
<!-- Partager -->
<v-row align="center">
<v-col>
<p style=" margin: 20px; text-align: justify;" class="center-vertical">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-col>
<v-col cols="6">
<v-img style="margin-right: 25px; border-radius: 20px; width: 85%;"
src="../../../images/homepage/partager.png"></v-img>
</v-col>
</v-row>
<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>
<!-- Inspirer -->
<v-row align="center">
<v-col cols="6">
<v-img style="margin-left: 25px; border-radius: 20px; width: 85%;"
src="../../../images/homepage/inspirer.png"></v-img>
</v-col>
<v-col>
<p style="margin: 20px; text-align: justify;" class="center-vertical">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-col>
</v-row>
<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>
<!-- Votre Hutopy : Title -->
<v-img style="margin-top: 50px; margin-bottom: 25px; min-width: 350px;"
src="../../../images/homepage/votrehutopy.png"></v-img>
</v-card-text>
</div>
<!-- Votre Hutopy : Text -->
<v-row align="center">
<v-col cols="11" style="margin: 4%;">
<p style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
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 style="margin-top: 3%; margin-bottom: 5%; text-align: justify;" class="center-vertical">
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>
</v-row>
<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>
<!-- 4 pictures -->
<v-row style="margin-left: 15px; margin-right: 15px;">
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/microphone.png"></v-img>
</v-col>
<v-col cols="6" style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/grinding.png"></v-img>
</v-col>
</v-row>
<v-row style="margin-left: 15px; margin-right: 15px;">
<v-col style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlarmy.png"></v-img>
</v-col>
<v-col style="padding-left: 15px; padding-right: 15px;">
<v-img style="border-radius: 30px; width: 100%;" src="../../../images/homepage/girlvr.png"></v-img>
</v-col>
</v-row>
<!-- Inscription Btn -->
<v-container align="center">
<RouterLink :to="{ name: 'contact' }">
<v-btn block size="x-large" style="margin-top: 60px; border-radius: 10px;" color="rgb(107, 0, 101)" outlined
elevation="4">
Inscription
</v-btn>
</RouterLink>
</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>
<!-- They are on the Hutopy section -->
<h1
style="margin-top: 50px; margin-bottom: 50px; text-align: center; font-size: 3rem; font-weight: bold; color: #24393c">
Ils sont sur Hutopy.</h1>
</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;">
<v-col>
<v-row justify="center" class="profile-images">
<v-col cols="8">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-right: 20px; width: 120px; height: auto;" />
<img src="../../../public/images/guillaume.jpg" alt="Profile Image" class="profile-image">
</router-link>
</v-col>
<v-col cols="8">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin: 0 20px; width: 120px; height: auto;" />
<img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image ">
</router-link>
</v-col>
<v-col cols="8">
<router-link :to="{ name: 'creatorfolio' }">
<img src="../../../public/images/guillaume.png" alt="Profile Image" class="profile-image"
style="border-radius: 50%; margin-left: 20px; width: 120px; height: auto;" />
<img src="../../../public/images/anonymelarge.png" alt="Profile Image" class="profile-image">
</router-link>
</div>
</v-card-text>
</v-container>
</v-col>
</v-row>
</v-col>
</div>
</div>
<!-- Back-end tools -->
<v-btn variant="outlined" @click="callBackend()">
Get items
</v-btn>
<v-snackbar v-model="errorNoAccessSnackBar">
Vous n'etes pas connecter !
<template v-slot:actions>
@@ -359,10 +386,8 @@ import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter()
const client = useClient();
let itemList = ref([]);
let errorNoAccessSnackBar = ref(false);
@@ -380,14 +405,16 @@ const goToLoginPage = () => {
router.push('/login');
}
</script>
<style src="../../cssstyle/index.css"></style>
<style src="../../cssstyle/homeView.css"></style>
<style scoped>
.center-vertical {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.layer1-backgroundmobile {
background-color: rgba(163, 14, 121, 0.1);
border-radius: 20px;
@@ -401,7 +428,6 @@ const goToLoginPage = () => {
.container-spacer {
margin-bottom: 50px;
/* Augmente l'espace entre les v-containers */
}
.profile-images {
@@ -429,7 +455,6 @@ const goToLoginPage = () => {
width: 100%;
height: 100%;
background-color: rgba(163, 14, 121, 0.80);
/* Voile noir avec une opacité de 0.5 */
display: flex;
text-align: left;
font-size: 1.5rem;
@@ -440,6 +465,7 @@ const goToLoginPage = () => {
.banner-image {
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
margin-top: 60px;
}
.image-container:hover .overlay {
@@ -455,17 +481,14 @@ const goToLoginPage = () => {
.custom-container {
position: relative;
max-width: 100vw;
/* Limiter la largeur de la v-container à la largeur de l'écran */
}
.v-card {
max-width: calc(100% - 20px);
/* Limiter la largeur de la v-card à la largeur des trois photos avec un espacement de 10px de chaque côté */
}
.v-card-imagecontainerpos {
margin-top: 55px;
/* Déplace l'image vers le bas de 10 pixels */
border-radius: 8px;
}
@@ -607,11 +630,8 @@ body {
.créer-profiter-inspirer-row {
margin-top: -60px;
}
.banner-homepage {
transform: scale(1.0)
}
@@ -624,7 +644,6 @@ body {
.votre-hutopy-img {
margin-top: 65px;
}
}
@media (min-width: 2561px) {
@@ -652,6 +671,5 @@ body {
.votre-hutopy-img {
margin-top: -10px;
}
}
</style>