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

Fix for mobile!

Browse Source
This commit is contained in:
PascalMarchesseault
2025-01-22 19:52:41 -05:00
parent 2a1deca161
commit e5ff90ef3f
1 changed files with 81 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
frontend/src/views/main/Home.vue
View File

@@ -4,21 +4,31 @@ import Footer from "@/views/main/Footer.vue";
<template> <template>
<div> <div>
<div class="flex flex-row space-x-10 justify-center"> <div class="pa-4 flex flex-col space-x-10 justify-center md:flex-row">
<div class="py-6"> <div class="py-6">
<div> <div>
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-48"> <img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 sm:h-28 sm:mx-auto">
</div> </div>
</div> </div>
<div class="mt-13 flex flex-col space-y-3"> <div class="flex flex-col space-y-3 header-btn">
<v-btn to="/login" class="text-white" style="background-color: #6A0164;">Inscription</v-btn> <v-btn
<v-btn to="/create-creator" variant="outlined" style="color: #6A0164;">Créer ma page</v-btn> to="/login"
class="text-white w-full sm:w-auto"
style="background-color: #6A0164;">
Inscription
</v-btn>
<v-btn
to="/create-creator"
variant="outlined"
class="w-full sm:w-auto"
style="color: #6A0164;">
Créer ma page
</v-btn>
</div> </div>
</div> </div>
</div> </div>
<!-- text-->
<div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6"> <div class="support-container flex flex-col items-center space-y-4 md:flex-row md:space-y-0 md:space-x-6">
<div class="support-text text-justify md:text-left"> <div class="support-text text-justify md:text-left">
<span> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br> <span> Ici, vous <span class="highlight">SOUTENEZ</span> </span><br>
@@ -29,19 +39,14 @@ import Footer from "@/views/main/Footer.vue";
<img src="/images/hutopymedia/banners/heart.png" alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain"> <img src="/images/hutopymedia/banners/heart.png" alt="YourHutopy" class="w-48 h-48 md:w-48 md:h-48 object-contain">
</div> </div>
<div class="relative mt-10"> <div class="relative mt-10">
<img <img
src="/images/hutopymedia/banners/bannerbg.png" src="/images/hutopymedia/banners/bannerbg.png"
alt="YourHutopy" alt="YourHutopy"
class="w-screen h-[540px] object-cover" class="responsive-banner"
> />
<div class="absolute inset-0 flex justify-center items-center space-x-14 pa-1"> <div class="absolute inset-0 flex flex-col lg:flex-row justify-center items-center lg:space-x-14 space-y-6 lg:space-y-0 pa-1">
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 h-[500px]"> <div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[500px]">
<div class="text-xl font-semibold mb-2">Je soutiens</div> <div class="text-xl font-semibold mb-2">Je soutiens</div>
<img <img
src="/images/hutopymedia/homepage/hands.png" src="/images/hutopymedia/homepage/hands.png"
@@ -51,9 +56,9 @@ import Footer from "@/views/main/Footer.vue";
<div class="text-sm text-justify px-6"> <div class="text-sm text-justify px-6">
Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution est un geste fort pour encourager leur talent et leur passion. Soutenez financièrement vos créateurs préférés et participez directement à leur succès. Chaque contribution est un geste fort pour encourager leur talent et leur passion.
</div> </div>
<!-- <v-btn>Soutenir</v-btn>--> <!-- <v-btn>Soutenir</v-btn> -->
</div> </div>
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 h-[500px]"> <div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[500px]">
<div class="text-xl font-semibold mb-2">Je crée</div> <div class="text-xl font-semibold mb-2">Je crée</div>
<img <img
src="/images/hutopymedia/homepage/brain.png" src="/images/hutopymedia/homepage/brain.png"
@@ -63,29 +68,27 @@ import Footer from "@/views/main/Footer.vue";
<div class="text-sm text-justify px-6"> <div class="text-sm text-justify px-6">
Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos idées en réalité grâce à ceux qui croient en vous. Offrez à votre communauté l’opportunité de vous soutenir dans vos projets et vos passions. Transformez vos idées en réalité grâce à ceux qui croient en vous.
</div> </div>
<v-btn to="/login" style="color: white; background-color: #6A0164; font-size: 18px; height: 40px; width: auto; padding: 0 32px; font-weight: bold; border-radius: 10px ">Inscription</v-btn> <v-btn
to="/login"
style="color: white; background-color: #6A0164; font-size: 18px; height: 40px; width: auto; padding: 0 32px; font-weight: bold; border-radius: 10px"
>
Inscription
</v-btn>
</div> </div>
</div> </div>
</div> </div>
<div class="max-w-5xl mx-auto px-6 py-8">
<div class="gap-8 items-start flex sm:flex-col md:flex-row">
<div class="max-w-7xl mx-auto px-6 py-8">
<div class="grid grid-cols-2 gap-8 items-start">
<!-- Section gauche : Image bannière et texte -->
<div class="space-y-6"> <div class="space-y-6">
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6"> <img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6">
<div class="space-y-4"> <div class="space-y-4">
<p class="text-lg leading-relaxed text-justify">Hutopy, c'est quoi ?</p> <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1">Hutopy, c'est quoi ?</p>
<p class="text-lg leading-relaxed text-justify"> <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1">
Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves. Hutopy est une plateforme qui permet de soutenir financièrement vos créateurs préférés et de les encourager dans leurs projets. C'est aussi un espace où les créateurs peuvent partager leur passion, créer leur page, et donner à leur communauté l’opportunité de les aider à réaliser leurs rêves.
</p> </p>
<p class="text-lg leading-relaxed text-justify"> <p class="text-lg leading-relaxed text-justify sm:mx-5 md:mx-1">
Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie. Simple, accessible et humain, Hutopy valorise le talent et le soutien, car chaque geste, aussi petit soit-il, peut faire une grande différence dans l’accomplissement de sa propre utopie.
</p> </p>
<div class="flex justify-center"> <div class="flex justify-center">
@@ -101,9 +104,9 @@ import Footer from "@/views/main/Footer.vue";
</div> </div>
<!-- Section droite : 4 images --> <!-- Section droite : 4 images -->
<div class="grid grid-cols-2 gap-4"> <div class="grid grid-cols-2 gap-4 mt-15">
<div><img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="w-full h-auto object-cover rounded-2xl"></div> <div><img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="w-full h-auto object-cover rounded-2xl"></div>
<div><img src="/images/hutopymedia/homepage/microphone.png" alt="Microphone" class="w-full h-auto object-cover rounded-2xl"></div> <div><img src="/images/hutopymedia/homepage/sign.png" alt="Microphone" class="w-full h-auto object-cover rounded-2xl"></div>
<div><img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"></div> <div><img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="w-full h-auto object-cover rounded-2xl"></div>
<div><img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"></div> <div><img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="w-full h-auto object-cover rounded-2xl"></div>
</div> </div>
@@ -134,7 +137,7 @@ body {
} }
.support-text { .support-text {
font-size: 4.6rem; /* Ajustez la taille du texte */ font-size: 3.5rem; /* Ajustez la taille du texte */
line-height: 1.1; /* Ajustez l'espacement entre les lignes */ line-height: 1.1; /* Ajustez l'espacement entre les lignes */
text-align: left; /* Alignement du texte à gauche */ text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */ font-weight: bold; /* Rend le texte gras */
@@ -157,6 +160,49 @@ body {
transform: translate(0, 0); /* Optionnel : ajuste de manière plus précise */ transform: translate(0, 0); /* Optionnel : ajuste de manière plus précise */
} }
.responsive-banner {
width: 100vw; /* Prend toute la largeur de l'écran */
height: 1100px; /* Hauteur par défaut pour les petits écrans */
object-fit: cover; /* Maintient les proportions de l'image */
}
.header-btn{
margin-top: 60px;
}
@media (min-width: 640px) {
.responsive-banner {
height: 1100px; /* Pour les écrans >= 640px */
}
.header-btn{
margin-top: 25px;
margin-bottom: 25px;
}
}
@media (min-width: 768px) {
.responsive-banner {
height: 1100px; /* Pour les écrans >= 768px */
}
.header-btn{
margin-top: 60px;
}
}
@media (min-width: 1024px) {
.responsive-banner {
height: 750px; /* Pour les écrans >= 1024px */
}
}
@media (min-width: 1280px) {
.responsive-banner {
height: 600px; /* Pour les écrans >= 1280px */
}
}