Merged PR 89: Login & landing page overhaul.

src/views/LoginView.vue

@@ -1,143 +1,113 @@
 <template>
-  <div class="min-h-screen flex items-center justify-center">
+  <div class="hidden sm:block" style="height: 40px"></div>
-    <!-- Desktop View -->
+
-    <div class="hidden sm:flex items-center justify-center w-full">
+  <div>
-      <div class="container mx-auto px-4 flex items-center justify-center">
+  <div class="flex flex-col lg:flex-row items-center justify-center">
-        <!-- Header -->
+    <div class="max-w-[700px] min-w-[300px]">
-        <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-none sm:rounded-2xl sm:w-full mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
-          <img class="rounded-2xl mr-8" src="/images/hutopymedia/loginpage/loginhutopy.png" alt="hutopy login">
-        </div>
-        <!-- Connexion-objects -->
-        <div class="lg:w-4/12 md:w-6/12 sm:w-6/12 xs:w-6/12  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>
+
+    <div class="flex flex-col items-center min-w-[300px] m-12">
+      <h1 class="text-center text-2xl font-bold mb-5">Connexion</h1>
+      
+      <google-login class="w-full" :callback="googleCallback" popup-type="TOKEN">
+        <template #default>
+          <v-btn density="comfortable" class="mb-2 w-full">
+            <v-icon left>mdi-google</v-icon>
+            Google
+          </v-btn>
+        </template>
+      </google-login>
+
+<!--      <v-btn density="comfortable" class="mb-2 w-full">-->
+<!--        <v-icon left>mdi-facebook</v-icon>-->
+<!--        Facebook-->
+<!--      </v-btn>-->           
+  
+      <div class="w-full h-0.5 mt-4 mb-4" :style="{ backgroundColor: '#A30E79' }"></div>
+
+      <v-btn density="comfortable" class="mb-2 w-full" @click="showEmailForm = !showEmailForm">
+        <v-icon left>mdi-account</v-icon>
+        Utilisateur
+      </v-btn>
+
+      <div v-if="showEmailForm" class="w-full mt-2">
+        <v-text-field v-model="user.email"
+            label="Courriel"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-email"
+            color="transparent"
+            class="text-black"
+        ></v-text-field>
+
+        <v-text-field v-model="user.password"
+            label="Mot de passe"
+            :type="showPassword ? 'text' : 'password'"
+            variant="outlined"
+            dense
+            prepend-inner-icon="mdi-lock"
+            append-inner-icon="mdi-eye"
+            @click:append-inner="showPassword = !showPassword"
+            color="transparent"
+            class="text-black"
+        ></v-text-field>
+
+        <v-btn class="w-full text-center text-white" :style="{ backgroundColor: '#A30E79' }" @click="login">Connecter</v-btn>
+
+        <p class="mt-4 text-sm text-center">
+          Si vous n'avez pas de compte, <a href="/register" class="text-blue-500">cliquez ici</a> pour en créer un.
+        </p>
+
         <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">
+  <selected-footer class="py-15"></selected-footer>
-      <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';
 import { useRouter } from 'vue-router';
 import { useClient } from "@/plugins/api.js";
+import { auth } from '@/stores/auth.js';
 import { GoogleLogin } from "vue3-google-login";
-import {FacebookAuth} from '@xtiannyeto/vue-auth-social';
+// import { FacebookAuth } from '@xtiannyeto/vue-auth-social';
-
+import SelectedFooter from "@/views/main/SelectedFooter.vue";
-const api = useClient()
 
+const api = useClient();
 const store = auth();
-const router = useRouter()
+const router = useRouter();
 
-let user = ref({});
+const user = ref({});
-let errorSnackBar = ref(false);
+const errorSnackBar = ref(false);
+const showEmailForm = ref(false);
+const showPassword = ref(false);
 
 async function login() {
-  // TODO: Make the store handle errors
   try {
-    await store.login(api, user.value.email, user.value.password)
+    await store.login(api, user.value.email, user.value.password);
     await router.push('/');
+    window.location.reload();
   } catch (error) {
     errorSnackBar.value = true;
   }
-  window.location.reload();
 }
 
 const googleCallback = async (response) => {
-  // TODO: Make the store handle errors
+  await store.loginGoogle(api, response["access_token"]);
-  await store.loginGoogle(api, response["access_token"])
   await router.push("/");
-}
+};
-
-
-const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
-const facebookCallback = async (response) => {
-  console.log("User Successfully Logged In", response)
-}
 
+// const facebookAppId = import.meta.env.VITE_FACEBOOK_APP_ID;
+// const facebookCallback = (response) => {
+//   console.log("User Successfully Logged In", response);
+// };
 </script>

src/views/main/Home.vue

@@ -1,32 +1,56 @@
 <template>
-  <div class="bg-gray-100 min-h-screen">
+  <div class="bg-gray-100">   
-
+    <div class="py-6">
-    <!-- Header Section -->
+      <div class=" mx-auto flex justify-center">
-    <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>    
-
-    <!-- Banner Section -->
-    <div class="relative">
-      <img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Hutopy Banner" class="w-full rounded-xl shadow-lg">
   </div>
 
-    <!-- Call-to-Action Section -->
+  <div class="mx-auto flex justify-center pt-10 max-w-[980px]">
-    <div class="flex justify-center py-8 space-x-4 overflow-auto">
+    <img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction" class="max-w-full block rounded-none md:rounded-2xl">
-      <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>    
+    <div class="mx-auto flex flex-col md:flex-row justify-center max-w-[1000px] space-y-2 md:space-x-4 md:space-y-0 py-5">
+      <div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
+        <img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="w-full rounded-2xl">
+        <div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
+          <p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
+            Libérez votre créativité sur Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
+          </p>
+        </div>
+      </div>
+
+      <div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
+        <img src="/images/hutopymedia/homepage/partager.png" alt="Share CallToAction" class="w-full rounded-2xl">
+        <div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
+          <p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
+            Plongez dans l'univers Hutopy et découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.
+          </p>
+        </div>
+      </div>
+
+      <div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
+        <img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="w-full rounded-2xl">
+        <div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
+          <p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
+            Devenez une source d'inspiration sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle vertueux de créativité et d'inspiration.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div>
+    
     <!-- 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">
 
       <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">
+          <p class="text-lg leading-relaxed text-justify">
             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,
@@ -35,7 +59,7 @@
             la créativité.
           </p>
 
-          <p class="text-lg leading-relaxed text-gray-800">
+          <p class="text-lg leading-relaxed text-justify">
             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
@@ -53,14 +77,13 @@
       </div>
     </div>
 
-    <!-- Profile Section -->
+    <div class=" py-12">
-    <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="/">
+            <RouterLink to="/@Hutopy">
               <img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
             </RouterLink>
           </div>
@@ -77,17 +100,27 @@
         </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>
+          <v-btn variant="tonal" density="default" class="mb-2 w-full">
+            Découvre les autres créateurs
+                    
+          </v-btn>
           </RouterLink>
-        </div>
+      
-      </div>
         </div>
         
       </div>
+      <selected-footer></selected-footer>
+    </div>
+   </div>
+  
+  
 </template>
 
 <script setup>
+import SelectedFooter from "@/views/main/SelectedFooter.vue";
 </script>
 
 <style scoped>
@@ -101,4 +134,6 @@ body {
   background-color: #F4F4F4;
 }
 
+
+
 </style>

src/views/main/SelectedFooter.vue

@@ -0,0 +1,50 @@
+<template>
+  <router-link to="/">
+  <div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
+    <img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
+  </div>
+  </router-link>
+
+  <div class="flex flex-row justify-center space-x-10 py-10">
+    <a href="https://www.facebook.com/profile.php?id=61556819217561">
+      <img class="max-h-10" src="/images/hutopymedia/icons/pink/facebookpink.png" alt="Facebook">
+    </a>
+
+    <a href="https://www.instagram.com/hutopy.inc/">
+      <img class="max-h-10" src="/images/hutopymedia/icons/pink/instagrampink.png" alt="Instagram">
+    </a>
+
+    <a href="https://x.com/Hutopyinc/">
+      <img class="max-h-10" src="/images/hutopymedia/icons/pink/xpink.png" alt="X">
+    </a>
+  </div>
+
+  <div class="flex flex-row flex-wrap justify-center space-x-2 py-2 pb-6">
+    <router-link to="/helpandcontact">
+      <v-btn variant="plain"> Aide & Contact</v-btn>
+    </router-link>
+    <router-link to="/faq">
+      <v-btn variant="plain"> FAQ</v-btn>
+    </router-link>
+    <router-link to="/guideforcreators">
+      <v-btn variant="plain"> Guide pour les créateurs</v-btn>
+    </router-link>
+    <router-link to="/termsandconditions">
+      <v-btn variant="plain"> TermsAndConditions </v-btn>
+    </router-link>
+    <router-link to="/contentpolicy">
+      <v-btn variant="plain"> Politique de Contenu </v-btn>
+    </router-link>
+    <router-link to="/about">
+      <v-btn variant="plain"> À Propos</v-btn>
+    </router-link>
+    <router-link to="/pricing">
+      <v-btn variant="plain"> Frais</v-btn>
+    </router-link>
+  </div>
+
+
+</template>
+
+<script setup lang="ts">
+</script>