From aa4af266c05c455f83d73b479e006c89bdda746a Mon Sep 17 00:00:00 2001
From: Kamigen <46357922+Edouard127@users.noreply.github.com>
Date: Wed, 26 Jun 2024 15:01:34 -0400
Subject: [PATCH 1/2] Refactor: Login and profile page

---
 src/views/LoginView.vue        | 450 +++++++--------------------------
 src/views/main/Footer.vue      |  17 +-
 src/views/main/Header.vue      |   9 +-
 src/views/main/YourProfile.vue | 117 ++++-----
 4 files changed, 150 insertions(+), 443 deletions(-)

diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 84f2b21..61578c3 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -1,102 +1,106 @@
 <template>
-    
-  <!-- Google Oauth -->
-  <div class="sm:flex hidden items-center justify-between flex-col"
-       style="margin-top: 3%;">
-
-    <v-container>
-      <v-row align="center" justify="center">
+  <div class="min-h-screen flex items-center justify-center">
+    <!-- Desktop View -->
+    <div class="hidden sm:flex items-center justify-center w-full">
+      <div class="container mx-auto px-4 flex items-center justify-center">
         <!-- Header -->
-        <v-col cols="8" lg="8" md="10" sm="10" xs="10" style=" align-items: center; ">
-          <img class="login-picture" src="/images/hutopymedia/loginpage/loginhutopy.png">
-        </v-col>
-
+        <div class="w-full lg:w-6/12 md:w-6/12 sm:w-6/12 xs:w-6/12 flex items-center justify-center">
+          <img class="rounded-2xl mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
+        </div>
         <!-- 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>
-          <v-card-text>
-            <v-form class="label-mail-password">
-              <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email"
-                            label="Nom d'utilisateur" class="text-start"></v-text-field>
-              <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
-                            label="Mot de passe" class="text-start"></v-text-field>
-            </v-form>
-            <v-snackbar v-model="errorSnackBar">
-              Nom d'utilisateur ou mot de passe invalide.
-              <template v-slot:actions>
-                <v-btn color="red" variant="text" @click="errorSnackBar = false">Fermer</v-btn>
-              </template>
-            </v-snackbar>
-          </v-card-text>
-          <v-card-actions>
-            <div class="flex-grow-1"></div>
-            <RouterLink to="/">
-              <v-btn color="#6b0065" class="ma-2 btnhome">Accueil</v-btn>
-            </RouterLink>
-            <v-btn color="primary" class="ma-2 btnhome" @click="login">Login</v-btn>
-            <GoogleLogin :callback="googleCallback" popup-type="TOKEN">
-              <v-btn color="primary" class="ma-2 btnhome">Google Login</v-btn>
-            </GoogleLogin>
-
-            <FacebookAuth :appId="facebookAppId" @on-submit="facebookCallback">
-              <v-btn color="primary" class="ma-2 btnhome">Facebook Login</v-btn>
-            </FacebookAuth>
-
-          </v-card-actions>
-          <div class="text-center">
-            <h2 class="text-center display-3 h2pasinscrit">Pas encore inscrit?</h2>
-            <RouterLink :to="{ name: 'join' }">
-              <v-btn color="#6b0065" class="inscriptionbtn"
-                     style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
-              </v-btn>
-            </RouterLink>
+        <div class="lg:w-4/12 md:w-6/12 sm:w-6/12 xs:w-6/12 bg-white shadow-lg rounded-lg p-8">
+          <h1 class="text-center text-2xl font-bold mb-6">Connexion</h1>
+          <div class="mb-4">
+            <!-- TODO: Fix input box overflowing when screen it too small -->
+            <form class="mb-4">
+              <div class="mb-4">
+                <input type="text" v-model="user.email" placeholder="Nom d'utilisateur" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
+              </div>
+              <div class="mb-4">
+                <input type="password" v-model="user.password" placeholder="Mot de passe" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
+              </div>
+            </form>
           </div>
-        </v-col>
-      </v-row>
-    </v-container>
-  </div>
-
-
-  <div class="sm:hidden flex flex-col items-center justify-start"
-       style="height: 100vh;">
-    
-    <img style="margin-top: 10%;  width: 350px;  box-shadow: 0 4px 6px rgba(0, 0, 0, .5); border-radius: 25px;"
-         src="/images/hutopymedia/loginpage/loginhutopy.png">
-
-    <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;">
-      <v-text-field prepend-icon="mdi-email" type="text" v-model="user.email" label="Nom d'utilisateur"></v-text-field>
-      <v-text-field prepend-icon="mdi-lock" type="password" v-model="user.password"
-                    label="Mot de passe"></v-text-field>
-    </v-form>
-
-    <v-card-actions>
-      <div class="flex-grow-1"></div>
-      <RouterLink to="/">
-        <v-btn color="#6b0065" class="ma-2">Accueil</v-btn>
-      </RouterLink>
-      <v-btn color="primary" class="ma-2" @click="login">Login</v-btn>
-    </v-card-actions>
-    <div class="text-center">
-      <h2 class="h2pasinscrit">
-        Pas encore
-        inscrit?</h2>
-      <RouterLink :to="{ name: 'join' }">
-        <v-btn color="#6b0065" class="inscriptionbtn"
-               style="height: 50px; width: 200px; border-radius: 30px; font-size: 1.2rem;">Inscriptions
-        </v-btn>
-      </RouterLink>
+          <div v-if="errorSnackBar" class="mb-4 text-red-600">
+            Nom d'utilisateur ou mot de passe invalide.
+            <button class="text-red-600 ml-4" @click="errorSnackBar = false">Fermer</button>
+          </div>
+          <div class="flex justify-center mb-4">
+            <button class="bg-blue-500 text-white px-8 py-2 rounded-lg shadow-md hover:bg-blue-400 transition-colors duration-300 ease-in-out" @click="login">Login</button>
+          </div>
+          <div class="flex justify-center mb-4">
+            <!-- TODO: Remove custom elements -->
+            <google-login :callback="googleCallback" popup-type="TOKEN">
+              <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-500 transition-colors duration-300 ease-in-out mr-2 flex items-center">
+                <svg class="w-5 h-5 mr-2" viewBox="0 0 512 512">
+                  <path xmlns="http://www.w3.org/2000/svg" d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"/>
+                </svg>
+                Google
+              </button>
+            </google-login>
+            <facebook-auth :appId="facebookAppId" @on-submit="facebookCallback">
+              <button class="bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300 ease-in-out flex items-center">
+                <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
+                  <path fill="#ffffff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.794.714-1.794 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.406 24 22.676V1.325C24 .593 23.407 0 22.675 0z"></path>
+                </svg>
+                Facebook
+              </button>
+            </facebook-auth>
+          </div>
+          <div class="text-center">
+            <h2 class="text-xl mb-4">Pas de compte ?</h2>
+            <router-link :to="{ name: 'join' }">
+              <button class="bg-purple-800 text-white px-4 py-2 rounded-full shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out" style="width: 200px;">Inscriptions</button>
+            </router-link>
+          </div>
+        </div>
+      </div>
     </div>
 
+    <!-- Mobile View -->
+    <div class="sm:hidden flex flex-col items-center justify-center w-full">
+      <img class="w-72 shadow-lg rounded-lg mb-6" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
+      <h1 class="text-center text-2xl font-bold mb-4">Connexion</h1>
+      <h2 class="text-center text-xl mb-4">Comment souhaitez-vous vous connecter à votre compte?</h2>
+      <form class="w-72 mb-4">
+        <div class="mb-4">
+          <input type="text" v-model="user.email" placeholder="Nom d'utilisateur" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
+        </div>
+        <div class="mb-4">
+          <input type="password" v-model="user.password" placeholder="Mot de passe" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-800">
+        </div>
+      </form>
+      <div class="flex justify-end w-72 mb-4">
+        <router-link to="/">
+          <button class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out mr-2">Accueil</button>
+        </router-link>
+        <button class="bg-blue-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-400 transition-colors duration-300 ease-in-out" @click="login">Login</button>
+      </div>
+      <div class="flex justify-center mb-4">
+        <google-login :callback="googleCallback" popup-type="TOKEN">
+          <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-500 transition-colors duration-300 ease-in-out mr-2 flex items-center">
+            <svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="-3 0 262 262" preserveAspectRatio="xMidYMid"><path d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027" fill="#4285F4"/><path d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1" fill="#34A853"/><path d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782" fill="#FBBC05"/><path d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251" fill="#EB4335"/></svg>
+          </button>
+        </google-login>
+        <facebook-auth :appId="facebookAppId" @on-submit="facebookCallback">
+          <button class="bg-blue-700 text-white px-4 py-2 rounded-lg shadow-md hover:bg-blue-600 transition-colors duration-300 ease-in-out flex items-center">
+            <svg class="w-5 h-5 mr-2" viewBox="0 0 24 24">
+              <path fill="#ffffff" d="M22.675 0H1.325C.593 0 0 .593 0 1.325v21.351C0 23.406.593 24 1.325 24H12.82v-9.294H9.692v-3.622h3.128V8.413c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.464.099 2.796.143v3.24l-1.918.001c-1.504 0-1.794.714-1.794 1.763v2.313h3.587l-.467 3.622h-3.12V24h6.116C23.407 24 24 23.406 24 22.676V1.325C24 .593 23.407 0 22.675 0z"></path>
+            </svg>
+            Facebook Login
+          </button>
+        </facebook-auth>
+      </div>
+      <div class="text-center">
+        <h2 class="text-xl mb-4">Pas encore inscrit?</h2>
+        <router-link :to="{ name: 'join' }">
+          <button class="bg-purple-800 text-white px-4 py-2 rounded-full shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out" style="width: 200px;">Inscriptions</button>
+        </router-link>
+      </div>
+    </div>
   </div>
-
 </template>
 
-
 <script setup>
 import {auth} from '@/stores/auth.js';
 import {ref} from 'vue';
@@ -136,269 +140,3 @@ const facebookCallback = async (response) => {
 }
 
 </script>
-
-<style scoped>
-.h1-connexion {
-  font-size: 0.55em;
-}
-
-.h2-connexion {
-  font-size: 0.55em;
-}
-
-.label-mail-password {
-  margin-bottom: -10%;
-}
-
-
-@media (min-width: 300px) {
-  .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);
-  }
-}
-
-@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;
-  }
-
-  .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: 1280px) {
-  .h1-connexion {
-    font-size: 3em;
-  }
-
-  .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%;
-
-  }
-
-  .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;
-  }
-
-  .label-mail-password {
-    margin-bottom: -10%;
-    margin-top: -4%;
-
-  }
-
-  .inscriptionbtn {
-    transform: scale(.6);
-    margin-top: -5%;
-  }
-
-  .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;
-  }
-
-  .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;
-  }
-
-  .h2-connexion {
-    font-size: 1.7em;
-    margin-bottom: 5%;
-  }
-
-  .h2pasinscrit {
-    margin-bottom: 5%;
-    font-size: 1.7em;
-  }
-
-  .label-mail-password {
-    margin-bottom: 0%;
-    margin-left: 10%;
-    width: auto;
-  }
-
-  .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%;
-  }
-}
-</style>
diff --git a/src/views/main/Footer.vue b/src/views/main/Footer.vue
index 2b166b6..69637cf 100644
--- a/src/views/main/Footer.vue
+++ b/src/views/main/Footer.vue
@@ -1,20 +1,7 @@
 <template>
-  
-  <footer>
-
-    <div class="text-black text-center ">
+  <footer class="mt-auto">
+    <div class="text-black text-center py-4">
       {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
     </div>
-    
   </footer>
-  
 </template>
-
-
-<style>
-
-footer {
-  @apply flex justify-center pt-10
-}
-
-</style>
\ No newline at end of file
diff --git a/src/views/main/Header.vue b/src/views/main/Header.vue
index a60ef7c..fe0f6cd 100644
--- a/src/views/main/Header.vue
+++ b/src/views/main/Header.vue
@@ -39,14 +39,15 @@
       <v-icon class="mx-2">mdi-bell-outline</v-icon>
 
       <span class="flex items-center mx-2">
-        
+
       <span class="text-black text-base font-sans font-medium mr-3">
       {{ currentUserName }}
       </span>
-  
+
+      <!-- TODO: Link to /profile if logged -->
       <img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png"
            class="rounded-circle h-10 w-10"
-           alt="Logo"/>        
+           alt="Logo"/>
       </span>
 
     </div>
@@ -57,7 +58,7 @@
 
 
 <script setup>
-import {ref, onMounted, onUnmounted} from 'vue';
+import {onMounted, onUnmounted, ref} from 'vue';
 import {useRouter} from 'vue-router';
 import SiteMenu from "@/views/main/SiteMenu.vue";
 
diff --git a/src/views/main/YourProfile.vue b/src/views/main/YourProfile.vue
index aad3771..0bdbe39 100644
--- a/src/views/main/YourProfile.vue
+++ b/src/views/main/YourProfile.vue
@@ -1,59 +1,56 @@
 <template>
+  <div class="bg-purple-800 h-24 -mt-12 -mb-6"></div>
+  <div class="flex justify-center">
+    <div class="w-full">
+      <img :src="bannerImageUrl" class="max-h-96 object-cover shadow-md profile-banner">
+    </div>
+  </div>
+  <div class="bg-purple-800 h-24 flex items-center">
+    <div class="w-full text-right pr-12">
+      <button class="bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out mr-3">
+        <i class="mdi mdi-pencil"></i>
+      </button>
+    </div>
+  </div>
+  <div class="max-w-4xl -mt-24 mx-auto flex justify-center items-center">
+    <div class="w-full">
+      <div class="bg-white rounded-3xl shadow-md p-6">
+        <div class="flex justify-center mb-5">
+          <div class="relative">
+            <img :src="profilePictureUrl" class="w-32 h-32 rounded-full shadow-lg border-4 border-white transition-transform duration-500 ease-in-out hover:scale-110">
+            <button class="absolute bottom-0 right-0 bg-white text-purple-800 p-2 rounded-full shadow-md hover:bg-purple-600 hover:text-white transition-colors duration-300 ease-in-out -mt-4">
+              <i class="mdi mdi-pencil"></i>
+            </button>
+          </div>
+        </div>
 
-    <v-row style="background-color: #6b0065; height: 100px; margin-top: -50px; margin-bottom: -25px;">
-    </v-row>
+        <p class="text-center mb-3 text-3xl font-semibold">{{ userName }}</p>
+        <p class="text-center mb-12 text-lg">{{ firstName }} {{ lastName }}</p>
 
-    <v-row justify="center">
-      <v-col cols="12">
-        <v-img class="profile-banner" max-height="375" :src="bannerImageUrl" cover
-          style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-      </v-col>
-    </v-row>
-    <v-row style="background-color: #6b0065; height: 100px; margin-top: 0;" align="center">
-      <v-col cols="12" class="text-right">
-        <v-btn style="margin-right: 3%;"> <v-icon>mdi-pencil</v-icon></v-btn>
-      </v-col>
-    </v-row>
-
-    <v-container style="max-width: 800px; margin-top: -100px" class="d-flex justify-center align-center">
-      <v-container>
-        <v-row justify="center">
-          <v-col style="background-color: white; border-radius: 30px;" class="col-shadow" cols="12">
-            <v-row justify="center" style="margin-bottom: 20px;">
-              <v-col cols="auto" class="d-flex justify-center">
-                <v-img class="your-profile-picture" :src="profilePictureUrl"></v-img>
-              </v-col>
-              <v-col cols="auto" class="d-flex justify-center align-center">
-                <v-btn style="margin-top: -30px;">
-                  <v-icon>mdi-pencil</v-icon>
-                </v-btn>
-              </v-col>
-            </v-row>
-            <p class="text-center" style="margin-bottom: 10px; font-size: 2.5rem; font-weight: 600;">
-              {{ userName }}
-            </p>
-            <p class="text-center" style="margin-bottom: 50px; font-size: 1.2rem">
-              {{ firstName }} {{ lastName }}
-            </p>
-
-            <v-form>
-              <v-text-field variant="solo" v-model="firstName" label="Prénom" :readonly="!isEditing"></v-text-field>
-              <v-text-field variant="solo" v-model="lastName" label="Nom" :readonly="!isEditing"></v-text-field>
-              <v-text-field variant="solo" v-model="titre" label="Titre" :readonly="!isEditing"></v-text-field>
-              <v-text-field variant="solo" v-model="description" label="Description"
-                :readonly="!isEditing"></v-text-field>
-            </v-form>
-            <v-col class="text-right">
-              <RouterLink :to="{ name: 'creatorfolio' }" class="">
-                <v-btn style="margin-right: 20px;">Retour</v-btn>
-              </RouterLink>
-              <v-btn @click="toggleEdit">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</v-btn>
-            </v-col>
-          </v-col>
-        </v-row>
-      </v-container>
-    </v-container>
+        <form>
+          <div class="mb-4">
+            <input type="text" v-model="firstName" placeholder="Prénom" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+          <div class="mb-4">
+            <input type="text" v-model="lastName" placeholder="Nom" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+          <div class="mb-4">
+            <input type="text" v-model="titre" placeholder="Titre" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+          <div class="mb-4">
+            <input type="text" v-model="description" placeholder="Description" :readonly="!isEditing" class="input input-bordered w-full">
+          </div>
+        </form>
 
+        <div class="text-right">
+          <router-link :to="{ name: 'creatorfolio' }">
+            <button class="bg-gray-500 text-white px-4 py-2 rounded-lg shadow-md hover:bg-gray-700 transition-colors duration-300 ease-in-out mr-5">Retour</button>
+          </router-link>
+          <button @click="toggleEdit" class="bg-purple-800 text-white px-4 py-2 rounded-lg shadow-md hover:bg-purple-600 transition-colors duration-300 ease-in-out">{{ isEditing ? 'Sauvegarder' : 'Éditer' }}</button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script async setup>
@@ -93,19 +90,3 @@ const toggleEdit = () => {
 
 onBeforeMount(fetchUserData);
 </script>
-
-<style>
-.your-profile-picture {
-  width: 300px;
-  border-radius: 40px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
-}
-
-.row-shadow {
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.6);
-}
-
-.col-shadow {
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
-}
-</style>

From 2898265d9264a66f5443bb06c4d01e4de88f22e7 Mon Sep 17 00:00:00 2001
From: Kamigen <46357922+Edouard127@users.noreply.github.com>
Date: Wed, 26 Jun 2024 16:31:20 -0400
Subject: [PATCH 2/2] Refactor: Home & Footer

---
 src/App.vue               |   6 +-
 src/views/main/Footer.vue |  61 +++++++++++++-
 src/views/main/Home.vue   | 168 ++++++++++++--------------------------
 3 files changed, 116 insertions(+), 119 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 3f26cbc..e275201 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,9 +15,9 @@
         </div>
 
         <!-- TODO: Put this #F4F4F4 color into a style somewhere as SystemDefaultBackground or something similar -->
-        <div class="flex flex-col p-2 ml-48 mt-16 bg-amber-50">
-          <RouterView></RouterView>
-          <Footer></Footer>
+        <div class="flex flex-col p-2 ml-48 mt-16">
+          <RouterView/>
+          <Footer/>
         </div>
 
       </div>
diff --git a/src/views/main/Footer.vue b/src/views/main/Footer.vue
index 69637cf..d656559 100644
--- a/src/views/main/Footer.vue
+++ b/src/views/main/Footer.vue
@@ -1,7 +1,64 @@
 <template>
-  <footer class="mt-auto">
-    <div class="text-black text-center py-4">
+  <footer class="text-center text-surface/75 dark:bg-gray-950 dark:text-white/75 lg:text-left">
+    <div class="mx-6 py-10 text-center md:text-left">
+      <div class="grid-1 grid gap-4 grid-cols-2">
+        <!-- Useful links section -->
+        <div>
+          <h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">
+            Liens utils
+          </h6>
+          <p class="mb-4">
+            <a href="#">Pricing</a>
+          </p>
+          <p class="mb-4">
+            <a href="#">Aide & Contact</a>
+          </p>
+          <p class="mb-4">
+            <a href="#">Conditions générales d'utilisation</a>
+          </p>
+          <p class="mb-4">
+            <a href="#">Conditions générales de vente</a>
+          </p>
+          <p class="mb-4">
+            <a href="#">Cookies</a>
+          </p>
+        </div>
+
+        <!-- Contacts-->
+        <div>
+          <h6 class="mb-4 flex justify-center font-semibold uppercase md:justify-start">Contact</h6>
+          <p class="mb-4 flex items-center justify-center md:justify-start">
+            <div class="flex justify-center">
+              <a href="#" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 320 512">
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/>
+                </svg>
+              </a>
+              <a href="#" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 448 512">
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
+                </svg>
+              </a>
+              <a href="mailto:a@hutopy.com" class="me-6 [&>svg]:h-4 [&>svg]:w-4">
+                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                  <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc. -->
+                  <path d="M1.5 8.67v8.58a3 3 0 003 3h15a3 3 0 003-3V8.67l-8.928 5.493a3 3 0 01-3.144 0L1.5 8.67z" />
+                  <path d="M22.5 6.908V6.75a3 3 0 00-3-3h-15a3 3 0 00-3 3v.158l9.714 5.978a1.5 1.5 0 001.572 0L22.5 6.908z" />
+                </svg>
+              </a>
+            </div>
+          </p>
+        </div>
+      </div>
+    </div>
+
+    <div class="bg-black/5 p-6 text-center">
       {{ new Date().getFullYear() }} — <strong>Hutopy v.01</strong>
     </div>
   </footer>
 </template>
+
+<script setup lang="ts">
+</script>
diff --git a/src/views/main/Home.vue b/src/views/main/Home.vue
index 7d8f606..4722aba 100644
--- a/src/views/main/Home.vue
+++ b/src/views/main/Home.vue
@@ -1,42 +1,32 @@
 <template>
-  <div class="px-40 flex flex-column items-center border-4 border-amber-700 ">
+  <div class="bg-gray-100 min-h-screen">
 
-    <div class="py-20 w-1/2">
-      <img src="/images/hutopymedia/banners/hutopy.png"
-           alt="Hutopy Logo">
+    <!-- Header Section -->
+    <div class="px-6 py-12">
+      <div class="max-w-4xl mx-auto flex items-center justify-center">
+        <img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-24">
+      </div>
     </div>
 
-    <div class="py-2 w-full ">
-      <img src="/images/hutopymedia/homepage/bannierehomepage.png"
-           alt="Hutopy Banner"
-           class="rounded-xl">
+    <!-- Banner Section -->
+    <div class="relative">
+      <img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Hutopy Banner" class="w-full rounded-xl shadow-lg">
     </div>
 
-    <div class="flex flex-row justify-center h-40 w-full bg-red overflow-auto ">
-      
-      <img src="/images/hutopymedia/homepage/creer.png"
-           alt="Create CallToAction"
-           class="rounded-xl">
-
-      <img src="/images/hutopymedia/homepage/partager.png"
-           alt="Share CallToAction"
-           class="rounded-xl">
-
-      <img src="/images/hutopymedia/homepage/inspirer.png"
-           alt="Inspire CallToAction"
-           class="rounded-xl">
-
+    <!-- Call-to-Action Section -->
+    <div class="flex justify-center py-8 space-x-4 overflow-auto">
+      <img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12">
+      <img src="/images/hutopymedia/homepage/partager.png" alt="Share CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12">
+      <img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="rounded-xl shadow-lg w-1/4 sm:w-1/6 md:w-1/8 lg:w-1/12">
     </div>
 
-    <div class="flex flex-column">
+    <!-- Main Content Section -->
+    <div class="max-w-4xl mx-auto px-6 py-8 space-y-6">
+      <img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="mx-auto mb-8">
 
-      <img src="/images/hutopymedia/homepage/votrehutopy.png"
-           alt="YourHutopy">
-
-      <div class="grid grid-cols-2">
-
-        <div>
-          <p>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div class="space-y-4">
+          <p class="text-lg leading-relaxed text-gray-800">
             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,
@@ -45,7 +35,7 @@
             la créativité.
           </p>
 
-          <p>
+          <p class="text-lg leading-relaxed text-gray-800">
             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
@@ -54,103 +44,53 @@
           </p>
         </div>
 
-        <div class="grid grid-cols-2 space-x-2 space-y-2">
+        <div class="grid grid-cols-2 md:grid-cols-2 gap-4">
+          <img src="/images/hutopymedia/homepage/grinding.png" alt="Grinding" class="rounded-lg shadow-lg">
+          <img src="/images/hutopymedia/homepage/microphone.png" alt="Microphone" class="rounded-lg shadow-lg">
+          <img src="/images/hutopymedia/homepage/girlarmy.png" alt="Girl Army" class="rounded-lg shadow-lg">
+          <img src="/images/hutopymedia/homepage/girlvr.png" alt="Girl VR" class="rounded-lg shadow-lg">
+        </div>
+      </div>
+    </div>
 
-          <v-img src="/images/hutopymedia/homepage/grinding.png"
-                 class="rounded-lg">
-          </v-img>  
-
-          <v-img src="/images/hutopymedia/homepage/microphone.png"
-                 class="rounded-lg">
-          </v-img>
-
-          <v-img src="/images/hutopymedia/homepage/girlarmy.png"
-                 class="rounded-lg">
-          </v-img>
-
-          <v-img src="/images/hutopymedia/homepage/girlvr.png"
-                 class="rounded-lg skew-x-12">
-          </v-img>
+    <!-- Profile Section -->
+    <div class="bg-white py-12">
+      <div class="max-w-4xl mx-auto px-6 space-y-8">
+        <h1 class="text-4xl font-bold text-center text-purple-900">Ils sont sur Hutopy.</h1>
 
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <div class="flex justify-center items-center">
+            <RouterLink to="/">
+              <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
+            </RouterLink>
+          </div>
+          <div class="flex justify-center items-center">
+            <RouterLink to="/@guillaumeaime">
+              <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg" alt="Profile Image" class="rounded-2xl shadow-lg">
+            </RouterLink>
+          </div>
+          <div class="flex justify-center items-center">
+            <RouterLink to="/@chloebeaugrand">
+              <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
+            </RouterLink>
+          </div>
         </div>
 
+        <div class="flex justify-center">
+          <RouterLink to="/browse">
+            <button class="px-6 py-3 bg-purple-700 text-white rounded-lg hover:bg-purple-600 focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out">Découvre les autres créateurs</button>
+          </RouterLink>
+        </div>
       </div>
-
     </div>
 
   </div>
-
-
-  <!-- They are on the Hutopy section -->
-  <v-row style="margin-top: 20px; margin-bottom: 10px;">
-    <v-spacer></v-spacer>
-
-    <!-- Subtitle :Ils sont sur Hutopy -->
-    <v-col cols="9" xs="12" sm="12" md="12" lg="10" xl="8" xxl="7">
-      <h1 style=" margin-bottom: 20px; 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>
-            <RouterLink to="/">
-              <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png"
-                   alt="Profile Image" class="profile-image  ">
-            </RouterLink>
-          </v-col>
-          <v-col>
-            <RouterLink to="/@guillaumeaime">
-              <img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
-                   alt="Profile Image" class="profile-image">
-            </RouterLink>
-          </v-col>
-          <v-col>
-            <RouterLink to="@chloebeaugrand">
-              <img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
-                   alt="Profile Image" class="profile-image">
-            </RouterLink>
-          </v-col>
-        </v-row>
-      </v-col>
-      <v-row justify='center'>
-        <RouterLink to="/browse">
-          <v-btn style="border-radius:10px; background-color:#a30e79; color:white">Découvre les autres créateurs
-          </v-btn>
-        </RouterLink>
-      </v-row>
-      <v-spacer></v-spacer>
-    </v-col>
-    <v-spacer></v-spacer>
-  </v-row>
-
 </template>
 
 <script setup>
 </script>
 
 <style scoped>
-
-p {
-  @apply my-4 font-semibold font-sans
-}
-
-.container-spacer {
-  margin-bottom: 50px;
-}
-
-.profile-images {
-  gap: 15px;
-  transform: scale(.92);
-}
-
-.profile-image {
-  width: auto;
-  border-radius: 35px;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
-}
-
 .overlay p {
   color: white;
   font-size: 1.5rem;