From 27143e646a49a6b858b495939328eb28aa97d880 Mon Sep 17 00:00:00 2001
From: Maxence <maxence.jouannet@etu.uca.fr>
Date: Wed, 8 Jan 2025 09:13:52 +0100
Subject: [PATCH] front home page

---
 .../home-page/home-page.component.html        | 92 +++++++++++--------
 .../home-page/home-page.component.ts          |  3 +-
 2 files changed, 56 insertions(+), 39 deletions(-)

diff --git a/src/app/components/home-page/home-page.component.html b/src/app/components/home-page/home-page.component.html
index df4d23c..67311cd 100644
--- a/src/app/components/home-page/home-page.component.html
+++ b/src/app/components/home-page/home-page.component.html
@@ -1,42 +1,58 @@
-<img src="/home.jpg" alt="image carte du monde">
-<hr class="h-3 bg-yellow-50 border-0 brown">
-
-<div style="padding: 20px;">
-    <div class="max-w-screen-xl p-6 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" >
-
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Bienvenue sur Memory Map</h5>
-    
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-            Plongez dans un voyage interactif à travers vos souvenirs avec <strong>Memory Map</strong>, l'application qui transforme vos aventures en une carte unique et personnalisée. 
-            Avec notre outil intuitif, vous pouvez placer des "pins" sur une carte mondiale pour marquer les lieux que vous avez visités ou que vous rêvez de découvrir.
-        </p>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-            Enrichissez vos marqueurs avec des photos, des légendes, des notes personnelles, et même des amis identifiés pour revivre chaque moment important. 
-            Memory Map ne se limite pas à capturer vos souvenirs : elle vous invite également à explorer et à découvrir, grâce à un système de quêtes et de défis conçus pour stimuler votre curiosité et enrichir votre carte de nouveaux horizons.
-        </p>
-        <a href="#" class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">
-            Commencez votre aventure
-            <svg class="rtl:rotate-180 w-3.5 h-3.5 ms-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
-                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
-            </svg>
-        </a>
-    </div>    
-</div>
 
-<div style="padding: 20px;">
-    <div class="max-w-screen-xl p-6 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700" >
+<img src="/home.jpg" alt="image carte du monde" style="width: 100%">
+<hr class="h-3 bg-yellow-50 border-0 brown">
 
-        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">L'équipe Memory</h5>
+<div style="display: flex; gap: 20px; padding: 20px; justify-content: center; align-items: stretch;">
+    <section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
+        <div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
+            <div>
+                <img src="/logo.png" alt="Équipe Memory sombre" >
+            </div>
+            <div class="mt-4 md:mt-0">
+                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
+                    Bienvenue sur Memory Map
+                </h2>
+                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+                    Plongez dans un voyage interactif à travers vos souvenirs avec 
+                    <strong>Memory Map</strong>, l'application qui transforme vos aventures 
+                    en une carte unique et personnalisée.
+                </p>
+                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+                    Enrichissez vos marqueurs avec des photos, des légendes, des notes personnelles, et même des amis 
+                    identifiés pour revivre chaque moment important.
+                </p>
+                <button routerLink="/map" class="inline-flex items-center text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:focus:ring-blue-800">
+                    Commencez votre aventure
+                    <svg class="ml-2 -mr-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd" d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </section>
     
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-            Toute l'équipe de <strong>Memory</strong> est fière de vous présenter <strong>Memory Map</strong>, une application conçue avec passion et créativité pour vous permettre de revivre vos meilleurs souvenirs et d'en découvrir de nouveaux. 
-            Ce projet est le fruit de nombreuses heures de réflexion, de travail collaboratif, et de l'envie de créer quelque chose de véritablement unique pour tous les aventuriers et rêveurs.
-        </p>
-        <p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
-            Nous vous remercions de nous accompagner dans cette belle aventure, et nous avons hâte de voir les magnifiques cartes que vous allez créer !
-        </p>
-        <p class="font-medium text-lg text-center text-gray-900 dark:text-gray-100">
-            Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
-        </p>
-    </div>    
+    <section class="bg-white dark:bg-gray-900" style="border-radius: 15px; flex: 1 ; padding: 20px; display: flex; flex-direction: column; justify-content: space-between;">
+        <div style="display: flex; flex: 3; flex-direction: row;" class="gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl xl:gap-16 md:grid md:grid-cols-2 sm:py-16 lg:px-6">
+            <div class="mt-4 md:mt-0" >
+                <h2 class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">
+                    L'équipe Memory
+                </h2>
+                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+                    Toute l'équipe de <strong>Memory</strong> est fière de vous présenter 
+                    <strong>Memory Map</strong>, une application conçue avec passion et créativité pour vous permettre 
+                    de revivre vos meilleurs souvenirs et d'en découvrir de nouveaux.
+                </p>
+                <p class="mb-6 font-light text-gray-500 md:text-lg dark:text-gray-400">
+                    Nous vous remercions de nous accompagner dans cette belle aventure, et nous avons hâte de voir les 
+                    magnifiques cartes que vous allez créer !
+                </p>
+                <p class="font-medium text-lg text-center text-gray-900 dark:text-gray-100">
+                    Bonne année 2025 à tous, remplie de souvenirs inoubliables 🌍✨
+                </p>
+            </div>
+            <div>
+                <img src="/logo.png" alt="Équipe Memory sombre" >
+            </div>
+        </div>
+    </section>
 </div>
diff --git a/src/app/components/home-page/home-page.component.ts b/src/app/components/home-page/home-page.component.ts
index 5d6dffe..643bba6 100644
--- a/src/app/components/home-page/home-page.component.ts
+++ b/src/app/components/home-page/home-page.component.ts
@@ -1,9 +1,10 @@
 import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
 
 
 @Component({
   selector: 'app-home-page',
-  imports: [],
+  imports: [RouterLink],
   templateUrl: './home-page.component.html',
   styleUrl: './home-page.component.css'
 })