Fix login page and center home

src/app/app.module.ts

@@ -19,6 +19,7 @@ import { AnimauxDetailsComponent } from './components/animaux/animaux-details/an
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MatTabsModule } from '@angular/material/tabs';
+import { NoHeaderFooterDirective } from './no-header-footer.directive';
 
 @NgModule({
   declarations: [
@@ -32,6 +33,7 @@ import { MatTabsModule } from '@angular/material/tabs';
     ContactComponent,
     AnimauxListComponent,
     AnimauxDetailsComponent,
+    NoHeaderFooterDirective,
   ],
   imports: [
     BrowserModule,

src/app/components/footer/footer.component.html

@@ -1,11 +1,12 @@
-<footer class="bg-slate-50">
+<footer noHeaderFooter [restrictedRoutes]="['/connexion', '/inscription']" class="bg-slate-50 mt-12">
     <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div class="py-16 text-center"> <!-- Center the content in the container -->
             <a href="#" class="mx-auto flex items-center justify-center">
                 <!-- Center the image and text horizontally and vertically -->
                 <img src="../../../assets/logo-potit-chat.png" class="mr-3 h-20 sm:h-20" alt="Flowbite Logo" />
-                <span class="text-xl text-orange-500 font-semibold whitespace-nowrap dark:text-orange-500">Potits
-                    Chats</span>
+                <span class="text-xl text-orange-500 font-semibold whitespace-nowrap dark:text-orange-500">
+                    Potits Chats
+                </span>
             </a>
             <nav class="mt-10 text-sm" aria-label="quick links">
                 <div class="flex justify-center gap-x-6">

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

@@ -1,4 +1,4 @@
-<header>
+<header noHeaderFooter [restrictedRoutes]="['/connexion', '/inscription']">
     <nav class="bg-white border-gray-200 px-4 lg:px-6 py-2.5 dark:bg-gray-800">
         <div class="flex flex-wrap justify-between items-center mx-auto max-w-screen-xl">
             <a href="#" class="flex items-center">
@@ -57,7 +57,7 @@
                             </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">
+                                placeholder="Recherche">
                         </div>
                     </div>
                 </ul>

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

@@ -1,15 +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">
+<div class="text-center lg:pt-32">
+    <h1 class="font-display text-5xl font-medium tracking-tight text-slate-900 sm:text-7xl">
         Bienvenue chez les petits chats !
         <fa-icon [icon]="faPaw"></fa-icon>
     </h1>
-    <p class="mx-auto mt-6 max-w-2xl text-lg tracking-tight text-slate-700">
-        Notre plateforme regroupe les annonces de divers associations afin de vous aider à trouver votre nouveau
+    <p class="text-center  text-lg tracking-tight text-slate-700">
+        Notre plateforme regroupe les annonces de diverses 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" routerLink="/animaux">Voir tout les animaux</a>
+            variant="solid" color="slate" routerLink="/animaux">Voir tous les animaux</a>
     </div>
-
 </div>

src/app/no-header-footer.directive.ts

@@ -0,0 +1,49 @@
+// no-header-footer.directive.ts
+import {
+  Directive,
+  Input,
+  OnInit,
+  OnDestroy,
+  ElementRef,
+  Renderer2,
+} from '@angular/core';
+import { Router, NavigationEnd } from '@angular/router';
+import { Subscription } from 'rxjs';
+
+@Directive({
+  selector: '[noHeaderFooter]',
+})
+export class NoHeaderFooterDirective implements OnInit, OnDestroy {
+  @Input() restrictedRoutes: string[] = [];
+
+  private subscription: Subscription = new Subscription();
+
+  constructor(
+    private el: ElementRef,
+    private renderer: Renderer2,
+    private router: Router
+  ) {}
+
+  ngOnInit() {
+    this.checkVisibility();
+    this.subscription = this.router.events.subscribe((event) => {
+      if (event instanceof NavigationEnd) {
+        this.checkVisibility();
+      }
+    });
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+
+  private checkVisibility() {
+    const currentRoute = this.router.url;
+    const shouldHide = this.restrictedRoutes.includes(currentRoute);
+    if (shouldHide) {
+      this.renderer.setStyle(this.el.nativeElement, 'display', 'none');
+    } else {
+      this.renderer.setStyle(this.el.nativeElement, 'display', 'block');
+    }
+  }
+}