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] 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;