📱 Improve home page

src/app/components/home-page/home-page.component.html

@@ -1,34 +1,35 @@
-<img src="/home.jpg" alt="image carte du monde" style="width: 100%" />
-<hr class="h-3 bg-yellow-50 border-0 brown" />
+<div class="relative w-full">
+  <img
+    src="/home.jpg"
+    alt="image carte du monde"
+    class="w-full h-[150px] object-cover"
+  />
+</div>
 
 <div
-  style="
-    display: flex;
-    gap: 20px;
-    padding: 20px;
-    justify-content: center;
-    align-items: stretch;
-  "
+  class="flex flex-col lg:flex-row gap-5 p-5 justify-center items-stretch"
+  id="about"
 >
   <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;
-    "
+    class="bg-white dark:bg-gray-900 rounded-lg flex flex-col justify-between p-6 flex-1"
   >
     <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"
+      class="flex flex-col sm:flex-row gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:px-6 h-full"
     >
-      <div>
-        <img src="/logo.png" alt="Équipe Memory sombre" />
+      <div
+        class="flex justify-center items-center w-full sm:w-[50%] lg:w-[35%]"
+      >
+        <div
+          class="w-full aspect-square max-w-[150px] sm:max-w-[200px] md:max-w-[250px] lg:max-w-[350px] rounded overflow-hidden"
+        >
+          <img
+            src="/map.png"
+            alt="Carte interactive Memory"
+            class="w-full h-full object-cover"
+          />
+        </div>
       </div>
-      <div class="mt-4 md:mt-0">
+      <div class="mt-4 sm:mt-0 w-full sm:w-[50%] lg:w-[65%]">
         <h2
           class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
         >
@@ -40,7 +41,7 @@
           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
+          Enrichissez vos pins avec des photos, des légendes, des notes
           personnelles, et même des amis identifiés pour revivre chaque moment
           important.
         </p>
@@ -65,22 +66,14 @@
       </div>
     </div>
   </section>
+
   <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;
-    "
+    class="bg-white dark:bg-gray-900 rounded-lg flex flex-col justify-between p-6 flex-1"
   >
     <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"
+      class="flex flex-col sm:flex-row gap-8 items-center py-8 px-4 mx-auto max-w-screen-xl lg:px-6 h-full"
     >
-      <div class="mt-4 md:mt-0">
+      <div class="mt-4 sm:mt-0 w-full sm:w-[50%] lg:w-[65%]">
         <h2
           class="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
         >
@@ -96,29 +89,35 @@
           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
+        class="flex justify-center items-center w-full sm:w-[50%] lg:w-[35%]"
+      >
+        <div
+          class="w-full aspect-square max-w-[150px] sm:max-w-[200px] md:max-w-[250px] lg:max-w-[350px] rounded overflow-hidden"
+        >
+          <img
+            src="/team.png"
+            alt="Équipe Memory"
+            class="w-full h-full object-cover"
+          />
+        </div>
       </div>
     </div>
   </section>
 </div>
-<section class="bg-white dark:bg-gray-900 p-20">
+
+<section class="bg-white dark:bg-gray-900 pt-12" id="features">
   <div class="py-8 px-4 mx-auto max-w-screen-xl sm:py-16 lg:px-6">
-    <div class="max-w-screen-md mb-8 lg:mb-16">
+    <div class="mb-8 lg:mb-16 relative">
       <h2
-        class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white"
+        class="text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white text-center -mx-4 sm:mx-0"
       >
         Fonctionnalités principales
       </h2>
     </div>
     <div
-      class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0"
+      class="space-y-8 md:grid md:grid-cols-2 lg:grid-cols-3 md:gap-12 md:space-y-0 p-10 pt-4"
     >
       <div>
         <div
@@ -199,7 +198,7 @@
           Partager vos histoires
         </h3>
         <p class="text-gray-500 dark:text-gray-400">
-          WChaque souvenir a une histoire, et vous pouvez maintenant partager la
+          Chaque souvenir a une histoire, et vous pouvez maintenant partager la
           vôtre. Racontez les moments qui ont rendu chaque lieu inoubliable.
           Partagez vos aventures et revivez vos expériences les plus chères à
           travers vos propres mots.
@@ -208,6 +207,7 @@
     </div>
   </div>
 </section>
+
 <section class="dark:bg-white bg-gray-900">
   <div class="py-8 px-4 mx-auto max-w-screen-l lg:py-16 lg:px-6">
     <div class="mx-auto max-w-screen-md text-center mb-8 lg:mb-12">
@@ -410,3 +410,35 @@
     </div>
   </div>
 </section>
+<footer class="bg-gray-100 dark:bg-gray-900 py-6">
+  <div class="max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <div class="flex flex-col md:flex-row justify-between items-center gap-4">
+      <!-- Logo ou Nom -->
+      <div class="flex items-center gap-2">
+        <img src="/logo.png" alt="Logo Memory Map" class="w-8 h-8" />
+        <span class="text-lg font-semibold text-gray-800 dark:text-gray-100">
+          Memory Map
+        </span>
+      </div>
+
+      <div class="flex flex-wrap justify-center gap-6">
+        <a
+          href="#about"
+          class="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+        >
+          À propos
+        </a>
+        <a
+          href="#features"
+          class="text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400"
+        >
+          Fonctionnalités
+        </a>
+      </div>
+
+      <p class="text-sm text-gray-500 dark:text-gray-400 text-center">
+        © {{ currentYear }} Memory Map
+      </p>
+    </div>
+  </div>
+</footer>

src/app/components/home-page/home-page.component.ts

@@ -6,4 +6,6 @@ import { RouterLink } from '@angular/router';
   imports: [RouterLink],
   templateUrl: './home-page.component.html',
 })
-export class HomePageComponent {}
+export class HomePageComponent {
+  currentYear = new Date().getFullYear();
+}