added profil section

src/app/app.html

@@ -5,11 +5,11 @@
             <div class="logo">
                 <a routerLink="/welcome">
                     <img
-                            src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
-                            alt="logo"
-                            style="width: 100px; height: auto"
+                        src="https://www.pyro-fetes.com/wp-content/themes/pcptheme/img/logo-pyro-fetes-OR-top.png"
+                        alt="logo"
+                        style="width: 100px; height: auto"
                     />
-                    <h1>PYRO FÊTES</h1>
+                    <h1 class="text-amber-300">PYRO FÊTES</h1>
                 </a>
             </div>
 
@@ -70,7 +70,9 @@
             <!-- ICONES À DROITE -->
             <div class="right-icons">
                 <app-modal-nav nameIcon="bell" name="Notification"></app-modal-nav>
-                <app-modal-nav nameIcon="user" name="Profil"></app-modal-nav>
+                <app-modal-nav nameIcon="user" name="Profil">
+                    <app-profil></app-profil>
+                </app-modal-nav>
                 <app-modal-nav nameIcon="setting" name="Paramètres"></app-modal-nav>
             </div>
         </div>

src/app/app.ts

@@ -4,10 +4,11 @@ import { NzLayoutModule } from 'ng-zorro-antd/layout';
 import { NzMenuModule } from 'ng-zorro-antd/menu';
 import {NzIconDirective} from "ng-zorro-antd/icon";
 import {ModalNav} from "./components/modal-nav/modal-nav";
+import {Profil} from "./components/profil/profil";
 
 @Component({
   selector: 'app-root',
-    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav],
+    imports: [RouterOutlet, NzLayoutModule, NzMenuModule, NzIconDirective, RouterLinkActive, RouterLink, ModalNav, Profil],
   templateUrl: './app.html',
   styleUrl: './app.css'
 })

src/app/components/profil/profil.css

@@ -0,0 +1,13 @@
+.festive {
+    font-family: "Comic Sans MS", cursive;
+    text-shadow: 2px 2px #8C731A, -2px -2px #8C731A;
+    color: #fff;
+    font-weight: bold;
+}
+
+.festive2 {
+    font-family: "Comic Sans MS", cursive;
+    color: #001529;
+    font-weight: bold;
+}
+

src/app/components/profil/profil.html

@@ -0,0 +1,10 @@
+<div class="mx-auto flex items-center justify-center w-30 h-30 rounded-full bg-blue-900 text-white text-6xl festive">
+    {{ getInitial(data.name) }}
+</div>
+
+<div class="mt-6">
+    <p class="text-2xl festive2 mx-auto flex items-center justify-center">{{data.name}}</p>
+    <p class="text-l festive2 mt-0 flex items-center justify-center">{{data.email}}</p>
+    <p class="text-l festive2 mt-0 flex items-center justify-center">{{data.fonction}}</p>
+    <button nz-button nzType="primary" class="ml-82">Modifier mon profil</button>
+</div>

src/app/components/profil/profil.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import {UserInfo} from "../../interfaces/user.interface";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+
+@Component({
+  selector: 'app-profil',
+    imports: [
+        NzButtonComponent
+    ],
+  templateUrl: './profil.html',
+  styleUrl: './profil.css',
+})
+export class Profil {
+    data: UserInfo =
+    {
+        name: 'Mathys Sanchez Vendé',
+        email: 'mathys.sanchez@vende.fr',
+        fonction: 'admin',
+    };
+
+    getInitial(name: string): string {
+        if (!name || name.trim() === '') return '?';
+        return name[0].toUpperCase();
+    }
+}

src/app/interfaces/user.interface.ts

@@ -0,0 +1,5 @@
+export interface UserInfo {
+    name: string;
+    email: string;
+    fonction: string;
+}