added profil section

.postcssrc.json

@@ -0,0 +1,5 @@
+{
+  "plugins": {
+    "@tailwindcss/postcss": {}
+  }
+}

package-lock.json

@@ -14,8 +14,10 @@
         "@angular/forms": "^20.3.0",
         "@angular/platform-browser": "^20.3.0",
         "@angular/router": "^20.3.0",
+        "@tailwindcss/postcss": "^4.1.17",
         "@tailwindcss/vite": "^4.1.17",
         "ng-zorro-antd": "^20.4.0",
+        "postcss": "^8.5.6",
         "rxjs": "~7.8.0",
         "tailwindcss": "^4.1.17",
         "tslib": "^2.3.0",
@@ -238,6 +240,18 @@
         "node": ">= 14.0.0"
       }
     },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/@ampproject/remapping": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.3.0.tgz",
@@ -3680,6 +3694,19 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@tailwindcss/postcss": {
+      "version": "4.1.17",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/postcss/-/postcss-4.1.17.tgz",
+      "integrity": "sha512-+nKl9N9mN5uJ+M7dBOOCzINw94MPstNR/GtIhz1fpZysxL/4a+No64jCBD6CPN+bIHWFx3KWuu8XJRrj/572Dw==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "@tailwindcss/node": "4.1.17",
+        "@tailwindcss/oxide": "4.1.17",
+        "postcss": "^8.4.41",
+        "tailwindcss": "4.1.17"
+      }
+    },
     "node_modules/@tailwindcss/vite": {
       "version": "4.1.17",
       "resolved": "https://registry.npmjs.org/@tailwindcss/vite/-/vite-4.1.17.tgz",

package.json

@@ -27,8 +27,10 @@
     "@angular/forms": "^20.3.0",
     "@angular/platform-browser": "^20.3.0",
     "@angular/router": "^20.3.0",
+    "@tailwindcss/postcss": "^4.1.17",
     "@tailwindcss/vite": "^4.1.17",
     "ng-zorro-antd": "^20.4.0",
+    "postcss": "^8.5.6",
     "rxjs": "~7.8.0",
     "tailwindcss": "^4.1.17",
     "tslib": "^2.3.0",

src/app/app.html

@@ -9,7 +9,7 @@
                         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;
+}