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

Fix mobile UI

Browse Source
This commit is contained in:
PascalMarchesseault
2025-01-23 09:57:11 -05:00
parent 2b30479263
commit 9e8cf4fe4f
1 changed files with 92 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,24 +4,22 @@ import Footer from "@/views/main/Footer.vue";
<template>
<div>
<div class="pa-4 flex flex-col space-x-10 justify-center md:flex-row">
<div class="py-6">
<div>
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 sm:h-28 sm:mx-auto">
<div class="pa-4 flex flex-col justify-center md:flex-row">
<div class="py-6">
<div>
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="md:h-44 logo-image sm:h-28 sm:mx-auto">
</div>
</div>
</div>
<div class="flex flex-col space-y-3 header-btn">
<v-btn
to="/login"
class="text-white w-full sm:w-auto"
style="background-color: #6A0164;">
class="text-white w-full sm:w-auto inscription-btn-header">
Inscription
</v-btn>
<v-btn
to="/create-creator"
variant="outlined"
class="w-full sm:w-auto"
style="color: #6A0164;">
class="w-full sm:w-auto inscription-btn-header-outlined">
Créer ma page
</v-btn>
</div>
@@ -46,31 +44,31 @@ import Footer from "@/views/main/Footer.vue";
class="responsive-banner"
/>
<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 shadow-xl h-[500px]">
<div class="text-xl font-semibold mb-2">Je soutiens</div>
<div class="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je soutiens</div>
<img
src="/images/hutopymedia/homepage/hands.png"
alt="YourHutopy"
class="max-h-56 mx-auto"
>
<div class="text-sm text-justify px-6">
<div class="text-md 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.
</div>
<!-- <v-btn>Soutenir</v-btn> -->
</div>
<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="bg-white p-4 max-w-md text-center rounded-3xl space-y-8 shadow-xl h-[520px]">
<div class="text-xl mb-2 box-text">Je crée</div>
<img
src="/images/hutopymedia/homepage/brain.png"
alt="YourHutopy"
class="max-h-56 mx-auto"
>
<div class="text-sm text-justify px-6">
<div class="text-md 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.
</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"
class="inscription-btn"
>
Inscription
</v-btn>
@@ -80,7 +78,8 @@ import Footer from "@/views/main/Footer.vue";
</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="gap-8 items-start flex flex-col md:flex-row">
<!-- Section de texte -->
<div class="space-y-6">
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="w-full mb-6">
<div class="space-y-4">
@@ -94,8 +93,7 @@ import Footer from "@/views/main/Footer.vue";
<div class="flex justify-center">
<v-btn
to="/create-creator"
class="text-white mt-12 flex items-center justify-center round "
style="background-color: #6A0164; font-size: 18px; height: 48px; width: auto; padding: 0 32px; font-weight: bold; border-radius: 10px "
class="text-white mt-12 flex items-center justify-center round create-btn"
>
Créer ma page
</v-btn>
@@ -104,7 +102,7 @@ import Footer from "@/views/main/Footer.vue";
</div>
<!-- Section droite : 4 images -->
<div class="grid grid-cols-2 gap-4 mt-15">
<div class="mt-8 md:mt-0 grid grid-cols-2 gap-4 lg:ml-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/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>
@@ -116,8 +114,58 @@ import Footer from "@/views/main/Footer.vue";
<Footer class="mt-10"></Footer>
</template>
<style scoped>
.bg-primary{
background-color: #6A0164;
}
.box-text{
color: #6A0164;
font-size: 30px;
font-weight: bold;
}
.inscription-btn-header{
color: white;
background-color: #6A0164;
font-size: 18px;
height: 40px;
width: auto;
padding: 0 32px;
font-weight: bold;
}
.inscription-btn-header-outlined{
color: #6A0164;
font-size: 18px;
height: 40px;
width: auto;
padding: 0 32px;
font-weight: bold;
}
.inscription-btn{
color: white;
background-color: #6A0164;
font-size: 18px;
height: 40px;
width: auto;
padding: 0 32px;
font-weight: bold;
border-radius: 10px;
}
.create-btn {
background-color: #6A0164;
font-size: 18px;
height: 48px;
width: auto;
padding: 0 32px;
font-weight: bold;
border-radius: 10px
}
.overlay p {
color: white;
@@ -137,7 +185,7 @@ body {
}
.support-text {
font-size: 3.5rem; /* Ajustez la taille du texte */
font-size: 2.5rem; /* Ajustez la taille du texte */
line-height: 1.1; /* Ajustez l'espacement entre les lignes */
text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */
@@ -152,13 +200,7 @@ body {
color: #B81286; /* Remplacez par la couleur souhaitée */
}
.custom-image {
max-height: 220px; /* Limite la hauteur de l'image */
position: absolute; /* Permet de positionner manuellement */
top: 300px; /* Ajuste verticalement (déplace vers le haut) */
left: 1670px; /* Ajuste horizontalement (déplace vers la gauche) */
transform: translate(0, 0); /* Optionnel : ajuste de manière plus précise */
}
.responsive-banner {
width: 100vw; /* Prend toute la largeur de l'écran */
@@ -166,19 +208,30 @@ body {
object-fit: cover; /* Maintient les proportions de l'image */
}
.header-btn{
margin-top: 60px;
.header-btn {
}
.logo-image {
margin-left: auto;
}
@media (min-width: 640px) {
.responsive-banner {
height: 1100px; /* Pour les écrans >= 640px */
}
.header-btn{
margin-top: 25px;
margin-bottom: 25px;
}
.responsive-banner {
height: 1100px; /* Pour les écrans >= 640px */
}
.support-text {
font-size: 3.5rem; /* Ajustez la taille du texte */
line-height: 1.1; /* Ajustez l'espacement entre les lignes */
text-align: left; /* Alignement du texte à gauche */
font-weight: bold; /* Rend le texte gras */
}
}
@media (min-width: 768px) {
@@ -187,6 +240,10 @@ body {
}
.header-btn{
margin-top: 60px;
}
.logo-image {
margin-right: 20px;
margin-left: 0;
}
}
@@ -202,10 +259,4 @@ body {
height: 600px; /* Pour les écrans >= 1280px */
}
}
</style>
<script setup lang="ts">
</script>
</style>