From 9e8cf4fe4f51c9203a6364b21278c505f1d28c95 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 23 Jan 2025 09:57:11 -0500
Subject: [PATCH] Fix mobile UI

---
 frontend/src/views/main/Home.vue | 133 +++++++++++++++++++++----------
 1 file changed, 92 insertions(+), 41 deletions(-)

diff --git a/frontend/src/views/main/Home.vue b/frontend/src/views/main/Home.vue
index ade986b..42934c5 100644
--- a/frontend/src/views/main/Home.vue
+++ b/frontend/src/views/main/Home.vue
@@ -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>
\ No newline at end of file
+</style>
\ No newline at end of file