Add home page

src/app/app-routing.module.ts

@@ -4,24 +4,30 @@ import { RouterModule, Routes } from '@angular/router';
 import { ProfilComponent } from './components/profil/profil.component';
 import { ConnexionComponent } from './components/connexion/connexion.component';
 import { InscriptionComponent } from './components/inscription/inscription.component';
+import { HomeComponent } from './components/home/home.component';
 
 const routes: Routes = [
   {
     path: 'profil',
-    component: ProfilComponent
+    component: ProfilComponent,
   },
   {
     path: 'connexion',
-    component: ConnexionComponent
+    component: ConnexionComponent,
   },
   {
     path: 'inscription',
-    component: InscriptionComponent
-  }
+    component: InscriptionComponent,
+  },
+  // home
+  {
+    path: '',
+    component: HomeComponent,
+  },
 ];
 
 @NgModule({
   imports: [RouterModule.forRoot(routes)],
-  exports: [RouterModule]
+  exports: [RouterModule],
 })
-export class AppRoutingModule { }
+export class AppRoutingModule {}

src/app/app.component.scss

@@ -0,0 +1,4 @@
+* { 
+    height: 100vh;
+overflow: auto;
+}

src/app/app.module.ts

@@ -11,6 +11,7 @@ import { ProfilComponent } from './components/profil/profil.component';
 import { ConnexionComponent } from './components/connexion/connexion.component';
 import { InscriptionComponent } from './components/inscription/inscription.component';
 import { FooterComponent } from './components/footer/footer.component';
+import { HomeComponent } from './components/home/home.component';
 
 @NgModule({
   declarations: [
@@ -20,6 +21,7 @@ import { FooterComponent } from './components/footer/footer.component';
     ProfilComponent,
     ConnexionComponent,
     InscriptionComponent,
+    HomeComponent,
   ],
   imports: [
     BrowserModule,

src/app/components/header/header.component.html

@@ -3,44 +3,61 @@
         <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
             <a href="#" class="flex items-center">
                 <img src="../../../assets/logo-potit-chat.png" class="mr-3 h-20 sm:h-20" alt="Flowbite Logo" />
-                <span class="self-center text-xl text-orange-500 font-semibold whitespace-nowrap dark:text-orange-500">Potits Chats</span>
+                <span
+                    class="self-center text-xl text-orange-500 font-semibold whitespace-nowrap dark:text-orange-500">Potits
+                    Chats</span>
             </a>
             <div class="flex items-center lg:order-2">
-                <a class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800" routerLink="/connexion" routerLinkActive="active" ariaCurrentWhenActive="page">Connexion</a>
-                <a class="text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none dark:focus:ring-orange-700" routerLink="/inscription" routerLinkActive="active" ariaCurrentWhenActive="page">Inscription</a>
-                <button data-collapse-toggle="mobile-menu-2" type="button" class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu-2" aria-expanded="false">
+                <a class="text-gray-800 dark:text-white hover:bg-gray-50 focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:hover:bg-gray-700 focus:outline-none dark:focus:ring-gray-800"
+                    routerLink="/connexion" routerLinkActive="active" ariaCurrentWhenActive="page">Connexion</a>
+                <a class="text-white bg-orange-700 hover:bg-orange-800 focus:ring-4 focus:ring-orange-300 font-medium rounded-lg text-sm px-4 lg:px-5 py-2 lg:py-2.5 mr-2 dark:bg-orange-600 dark:hover:bg-orange-700 focus:outline-none dark:focus:ring-orange-700"
+                    routerLink="/inscription" routerLinkActive="active" ariaCurrentWhenActive="page">Inscription</a>
+                <button data-collapse-toggle="mobile-menu-2" type="button"
+                    class="inline-flex items-center p-2 ml-1 text-sm text-gray-500 rounded-lg lg:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600"
+                    aria-controls="mobile-menu-2" aria-expanded="false">
                     <span class="sr-only">Open main menu</span>
-                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
-                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
+                    <svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+                            clip-rule="evenodd"></path>
+                    </svg>
+                    <svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path fill-rule="evenodd"
+                            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
+                            clip-rule="evenodd"></path>
+                    </svg>
                 </button>
             </div>
             <div class="hidden justify-between items-center w-full lg:flex lg:w-auto lg:order-1" id="mobile-menu-2">
                 <ul class="flex flex-col mt-4 font-medium lg:flex-row lg:space-x-8 lg:mt-0">
                     <li>
-                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-orange-500 border-opacity-0 hover:text-orange-500 hover:border-opacity-100 duration-200 cursor-pointer lg:hover:bg-transparent lg:border-b-2
+                        <a href="#"
+                            class="block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-orange-500 border-opacity-0 hover:text-orange-500 hover:border-opacity-100 duration-200 cursor-pointer lg:hover:bg-transparent lg:border-b-2
                         lg:hover:text-orange-500 dark:border-b-2 dark:text-white dark:border-orange-500 dark:border-opacity-0 dark:hover:text-orange-500 dark:hover:border-opacity-100 lg:dark:hover:text-orange-500 lg:dark:hover:bg-transparent">Accueil</a>
                     </li>
                     <li>
-                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-orange-500 border-opacity-0 hover:text-orange-500 hover:border-opacity-100 duration-200 cursor-pointer lg:hover:bg-transparent lg:border-b-2
+                        <a href="#"
+                            class="block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-orange-500 border-opacity-0 hover:text-orange-500 hover:border-opacity-100 duration-200 cursor-pointer lg:hover:bg-transparent lg:border-b-2
                         lg:hover:text-orange-500 dark:border-b-2 dark:text-white dark:border-orange-500 dark:border-opacity-0 dark:hover:text-orange-500 dark:hover:border-opacity-100 lg:dark:hover:text-orange-500 lg:dark:hover:bg-transparent">Adopter</a>
                     </li>
                     <li>
-                        <a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-orange-500 border-opacity-0 hover:text-orange-500 hover:border-opacity-100 duration-200 cursor-pointer lg:hover:bg-transparent lg:border-b-2
+                        <a href="#"
+                            class="block py-2 pr-4 pl-3 text-gray-700 border-b-2 border-orange-500 border-opacity-0 hover:text-orange-500 hover:border-opacity-100 duration-200 cursor-pointer lg:hover:bg-transparent lg:border-b-2
                         lg:hover:text-orange-500 dark:border-b-2 dark:text-white dark:border-orange-500 dark:border-opacity-0 dark:hover:text-orange-500 dark:hover:border-opacity-100 lg:dark:hover:text-orange-500 lg:dark:hover:bg-transparent">Partenariat</a>
                     </li>
                     <div class="w-96">
                         <div class="relative rounded-md">
-                          <div class="absolute inset-y-0 left-0 flex items-center pl-3">
-                            <button>
-                                <span class="material-symbols-outlined">
-                                    search
-                                </span>
-                            </button>
-                          </div>
-                          <input 
-                          type="email" name="email" id="email" 
-                          class="bg-slate-400 block w-full rounded-full border-0 py-1.5 pl-10 text-white placeholder:text-white placeholder focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" 
-                          placeholder="Search">
+                            <div class="absolute inset-y-0 left-0 flex items-center pl-3">
+                                <button>
+                                    <span class="material-symbols-outlined">
+                                        search
+                                    </span>
+                                </button>
+                            </div>
+                            <input type="email" name="email" id="email"
+                                class="bg-slate-400 block w-full rounded-full border-0 py-1.5 pl-10 text-white placeholder:text-white placeholder focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                                placeholder="Search">
                         </div>
                     </div>
                 </ul>

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

@@ -0,0 +1,14 @@
+<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 pb-16 pt-20 text-center lg:pt-32">
+    <h1 class="mx-auto max-w-4xl font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
+        Bienvenue chez les petits chats!
+
+    </h1>
+    <p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
+        Notre plateforme regroupe les annonces de X associations afin de vous aider à trouver votre nouveau compagnon.
+    </p>
+    <div class="mt-10 flex justify-center gap-x-6">
+        <a class="group inline-flex items-center justify-center rounded-full py-2 px-4 text-sm font-semibold focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 bg-slate-900 text-white hover:bg-slate-700 hover:text-slate-100 active:bg-slate-800 active:text-slate-300 focus-visible:outline-slate-900"
+            variant="solid" color="slate" href="/animaux">Voir tout les animaux</a>
+    </div>
+
+</div>

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

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

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

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-home',
+  templateUrl: './home.component.html',
+  styleUrls: ['./home.component.scss']
+})
+export class HomeComponent {
+
+}

src/index.html

@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+
 <head>
   <meta charset="utf-8">
   <title>PotitsChats</title>
@@ -8,7 +9,9 @@
   <link rel="icon" type="image/x-icon" href="favicon.ico">
   <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 </head>
+
 <body>
   <app-root></app-root>
 </body>
-</html>
+
+</html>