start home page

angular.json

@@ -86,5 +86,8 @@
         }
       }
     }
+  },
+  "cli": {
+    "analytics": false
   }
 }

src/app/app.component.html

@@ -1,4 +1,4 @@
 <app-navbar></app-navbar>
-<app-leaflet-map></app-leaflet-map>
+<!-- <app-leaflet-map></app-leaflet-map> -->
 
 <router-outlet />

src/app/app.component.ts

@@ -1,11 +1,10 @@
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
-import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component';
 import { NavbarComponent } from './components/navbar/navbar.component';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet, NavbarComponent, LeafletMapComponent],
+  imports: [RouterOutlet, NavbarComponent],
   templateUrl: './app.component.html',
 })
 export class AppComponent {

src/app/app.routes.ts

@@ -1,3 +1,8 @@
 import { Routes } from '@angular/router';
+import { HomePageComponent } from './components/home-page/home-page.component';
+import { LeafletMapComponent } from './components/leaflet-map/leaflet-map.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {path: '', component: HomePageComponent},
+    {path: 'map', component: LeafletMapComponent}
+];

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

@@ -0,0 +1,42 @@
+<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" >
+
+        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">L'équipe Memory</h5>
+    
+        <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>    
+</div>

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HomePageComponent } from './home-page.component';
+
+describe('HomePageComponent', () => {
+  let component: HomePageComponent;
+  let fixture: ComponentFixture<HomePageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HomePageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HomePageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'app-home-page',
+  imports: [],
+  templateUrl: './home-page.component.html',
+  styleUrl: './home-page.component.css'
+})
+export class HomePageComponent {
+
+}