refacto page mon profile

package.json

@@ -9,7 +9,7 @@
     "watch": "ng build --watch --configuration development",
     "tsc": "tsc --noEmit",
     "tsc:watch": "tsc --noEmit --watch",
-    "format": "prettier --write \"src/**/*.{ts,html,scss,css,md,json}\"",
+    "prettier": "prettier --write \"src/**/*.{ts,html,scss,css,md,json}\"",
     "check:all": "npm run format && npm run tsc && npm run lint && npm run test",
     "test": "jest",
     "test:watch": "jest --watch",

src/app/routes/authentification/auth/auth.component.html

@@ -1,7 +1,8 @@
-<section class="min-h-screen flex justify-center items-center ">
+<section class="min-h-screen flex justify-center items-center">
-
+  <div class="w-full max-w-6xl animate-fade-in">
-  <div class="  w-full max-w-6xl animate-fade-in">
+    <div
-    <div class="flex flex-col md:flex-row bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden">
+      class="flex flex-col md:flex-row bg-white dark:bg-gray-800 rounded-2xl shadow-2xl overflow-hidden"
+    >
       <!-- Panneau gauche - Image de fond -->
       <section class="hidden md:flex md:w-1/2 bg-cover bg-center bg-auth relative">
         <!-- Overlay pour améliorer la lisibilité -->
@@ -32,15 +33,10 @@
       <!-- Panneau droit - Formulaire -->
       <section class="w-full md:w-1/2 bg-gray-50 dark:bg-gray-800">
         <div class="w-full max-w-md mx-auto p-8 md:p-12 animate-slide-up-delay">
-
           <!-- Titre -->
           <div class="text-center mb-8">
-            <h2 class="text-3xl font-bold text-gray-900 dark:text-white">
+            <h2 class="text-3xl font-bold text-gray-900 dark:text-white">Identifiez-vous</h2>
-              Identifiez-vous
+            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">Accédez à votre espace</p>
-            </h2>
-            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-              Accédez à votre espace
-            </p>
           </div>
 
           <!-- Formulaire (login ou register) -->

src/app/routes/home/home.component.html

@@ -1,25 +1,42 @@
-<section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-white via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
+<section
+  class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-white via-indigo-50 to-purple-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900"
+>
   <!-- Décorations de fond animées -->
   <div class="absolute inset-0 overflow-hidden pointer-events-none">
-    <div class="absolute top-1/4 -left-20 w-72 h-72 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"></div>
+    <div
-    <div class="absolute top-1/3 -right-20 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"></div>
+      class="absolute top-1/4 -left-20 w-72 h-72 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob"
-    <div class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"></div>
+    ></div>
+    <div
+      class="absolute top-1/3 -right-20 w-96 h-96 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-2000"
+    ></div>
+    <div
+      class="absolute bottom-1/4 left-1/2 transform -translate-x-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-30 animate-blob animation-delay-4000"
+    ></div>
   </div>
 
   <!-- Grille de points en arrière-plan (effet moderne) -->
   <div class="absolute inset-0 opacity-10 dark:opacity-5">
-    <div class="absolute inset-0" style="background-image: radial-gradient(circle, #6366f1 1px, transparent 1px); background-size: 50px 50px;"></div>
+    <div
+      class="absolute inset-0"
+      style="
+        background-image: radial-gradient(circle, #6366f1 1px, transparent 1px);
+        background-size: 50px 50px;
+      "
+    ></div>
   </div>
 
   <div class="relative w-full mx-auto px-4 sm:px-6 lg:px-8 pt-20 pb-16 sm:pt-24 sm:pb-20">
     <!-- Contenu principal -->
     <div class="max-w-5xl mx-auto">
-
       <!-- Badge ou tag -->
       <div class="flex justify-center mb-6 animate-fade-in">
-        <div class="inline-flex items-center gap-2 bg-white dark:bg-gray-800 rounded-full px-4 py-2 shadow-lg border border-indigo-100 dark:border-indigo-900">
+        <div
+          class="inline-flex items-center gap-2 bg-white dark:bg-gray-800 rounded-full px-4 py-2 shadow-lg border border-indigo-100 dark:border-indigo-900"
+        >
           <span class="relative flex h-2 w-2">
-            <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"></span>
+            <span
+              class="animate-ping absolute inline-flex h-full w-full rounded-full bg-indigo-400 opacity-75"
+            ></span>
             <span class="relative inline-flex rounded-full h-2 w-2 bg-indigo-500"></span>
           </span>
           <span class="text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -30,13 +47,17 @@
 
       <!-- Titre principal avec animation de mots -->
       <div class="text-center mb-8 sm:mb-12">
-        <h1 class="block font-bold text-gray-900 dark:text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-tight animate-slide-up">
+        <h1
+          class="block font-bold text-gray-900 dark:text-white text-4xl sm:text-5xl md:text-6xl lg:text-7xl leading-tight animate-slide-up"
+        >
           Dans quel secteur se cache
           <br class="hidden sm:block" />
           votre prochaine
           <br />
           <span class="inline-block mt-2 sm:mt-4">
-            <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 animate-gradient">
+            <span
+              class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 via-purple-600 to-pink-600 animate-gradient"
+            >
               pépite?
             </span>
           </span>
@@ -53,47 +74,81 @@
                 <span class="word text-green-500 dark:text-green-400">La Tech</span>
               </div>
             </div>
-            <div class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent pointer-events-none"></div>
+            <div
+              class="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent pointer-events-none"
+            ></div>
           </div>
         </div>
       </div>
 
       <!-- Description -->
       <div class="text-center mb-8 sm:mb-12 animate-fade-in animation-delay-300">
-        <p class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed">
+        <p
+          class="text-lg sm:text-xl text-gray-600 dark:text-gray-300 max-w-3xl mx-auto leading-relaxed"
+        >
           Connectez-vous avec des professionnels talentueux dans tous les secteurs d'activité
         </p>
       </div>
 
       <!-- Barre de recherche -->
       <div class="max-w-3xl mx-auto mb-12 animate-slide-up animation-delay-400">
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-4 sm:p-6 hover:shadow-3xl transition-all duration-300 transform hover:scale-[1.02]">
+        <div
+          class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl p-4 sm:p-6 hover:shadow-3xl transition-all duration-300 transform hover:scale-[1.02]"
+        >
           <app-search (onSearchChange)="showNewQuery($event)" />
         </div>
       </div>
 
       <!-- CTA ou statistiques -->
       <div class="flex flex-wrap justify-center gap-4 sm:gap-6 animate-fade-in animation-delay-500">
-        <div class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+        <div
+          class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
+        >
           <div class="flex items-center gap-3">
-            <div class="bg-indigo-100 dark:bg-indigo-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300">
+            <div
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-600 dark:text-indigo-400" viewBox="0 0 20 20" fill="currentColor">
+              class="bg-indigo-100 dark:bg-indigo-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300"
-                <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-indigo-600 dark:text-indigo-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
+                />
               </svg>
             </div>
             <div>
-              <p class="text-2xl sm:text-3xl font-bold text-indigo-600 dark:text-indigo-400">250+</p>
+              <p class="text-2xl sm:text-3xl font-bold text-indigo-600 dark:text-indigo-400">
+                250+
+              </p>
               <p class="text-sm text-gray-600 dark:text-gray-400">Profils actifs</p>
             </div>
           </div>
         </div>
 
-        <div class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+        <div
+          class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
+        >
           <div class="flex items-center gap-3">
-            <div class="bg-purple-100 dark:bg-purple-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300">
+            <div
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-purple-600 dark:text-purple-400" viewBox="0 0 20 20" fill="currentColor">
+              class="bg-purple-100 dark:bg-purple-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300"
-                <path fill-rule="evenodd" d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z" clip-rule="evenodd" />
+            >
-                <path d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z" />
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-purple-600 dark:text-purple-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
+                  clip-rule="evenodd"
+                />
+                <path
+                  d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
+                />
               </svg>
             </div>
             <div>
@@ -103,10 +158,19 @@
           </div>
         </div>
 
-        <div class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+        <div
+          class="group bg-white dark:bg-gray-800 rounded-2xl px-6 py-4 shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
+        >
           <div class="flex items-center gap-3">
-            <div class="bg-pink-100 dark:bg-pink-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300">
+            <div
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-pink-600 dark:text-pink-400" viewBox="0 0 20 20" fill="currentColor">
+              class="bg-pink-100 dark:bg-pink-900 rounded-full p-3 group-hover:scale-110 transition-transform duration-300"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-pink-600 dark:text-pink-400"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
                 <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
               </svg>
             </div>
@@ -120,8 +184,19 @@
 
       <!-- Scroll indicator (optionnel) -->
       <div class="flex justify-center mt-12 sm:mt-16 animate-bounce animation-delay-600">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8 text-gray-400 dark:text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <svg
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-8 w-8 text-gray-400 dark:text-gray-600"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M19 14l-7 7m0 0l-7-7m7 7V3"
+          />
         </svg>
       </div>
     </div>

src/app/routes/home/home.component.scss

@@ -12,7 +12,8 @@ $gradient-duration: 3s;
 
 // Animation du gradient de fond
 @keyframes gradient {
-  0%, 100% {
+  0%,
+  100% {
     background-position: 0% 50%;
   }
   50% {
@@ -22,7 +23,8 @@ $gradient-duration: 3s;
 
 // Animation des blobs de fond
 @keyframes blob {
-  0%, 100% {
+  0%,
+  100% {
     transform: translate(0, 0) scale(1);
   }
   25% {
@@ -61,16 +63,20 @@ $gradient-duration: 3s;
 
 // Animation des mots qui défilent
 @keyframes wordSlide {
-  0%, 20% {
+  0%,
+  20% {
     transform: translateY(0);
   }
-  25%, 45% {
+  25%,
+  45% {
     transform: translateY(-100%);
   }
-  50%, 70% {
+  50%,
+  70% {
     transform: translateY(-200%);
   }
-  75%, 95% {
+  75%,
+  95% {
     transform: translateY(-300%);
   }
   100% {

src/app/routes/my-profile/my-profile.component.html

@@ -1,14 +1,27 @@
 @if (profile != undefined) {
-  <section class="text-gray-600">
+  <section
-    <div class="container px-5 py-5 mx-auto flex flex-col">
+    class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"
-      <div class="w-full max-md:mx-5 mx-auto my-5 rounded-lg min-h-56 max-h-64 bg-cover bg-auth">
+  >
-        <div class="w-max flex justify-between items-center">
+    <div class="container mx-auto px-4 py-6 md:py-12">
-          <a [routerLink]="['']" (click)="location.back()">
+      <div class="max-w-7xl mx-auto">
+        <!-- Header avec bannière -->
+        <div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
+          <div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
+            <!-- Overlay -->
+            <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>
+
+            <!-- Navigation -->
+            <div class="relative z-10 p-4 flex justify-between items-start">
+              <!-- Bouton retour -->
+              <button
+                (click)="location.back()"
+                class="group flex items-center justify-center w-10 h-10 md:w-12 md:h-12 bg-white/20 backdrop-blur-md rounded-full hover:bg-white/30 transition-all duration-300 hover:scale-110"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
                   fill="currentColor"
-              class="hover:text-gray-300 text-white size-6 w-5 h-5 sm:w-9 sm:h-9 mx-4 my-4 hover:w-10 hover:h-10"
+                  class="w-6 h-6 text-white group-hover:-translate-x-1 transition-transform"
                 >
                   <title>Retour</title>
                   <path
@@ -17,55 +30,45 @@
                     clip-rule="evenodd"
                   />
                 </svg>
-          </a>
+              </button>
 
+              <!-- Badge vérifié -->
               @if (profile().estVerifier) {
+                <div
+                  class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
+                >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     viewBox="0 0 24 24"
                     fill="currentColor"
-              class="hover:text-purple-300 size-6 text-purple-500 w-6 h-6 sm:w-11 sm:h-11 text-end mx-4 my-4"
+                    class="w-5 h-5 md:w-6 md:h-6 text-purple-300"
                   >
-              <title>Profile verifier</title>
+                    <title>Profil vérifié</title>
                     <path
                       fill-rule="evenodd"
                       d="M8.603 3.799A4.49 4.49 0 0 1 12 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 0 1 3.498 1.307 4.491 4.491 0 0 1 1.307 3.497A4.49 4.49 0 0 1 21.75 12a4.49 4.49 0 0 1-1.549 3.397 4.491 4.491 0 0 1-1.307 3.497 4.491 4.491 0 0 1-3.497 1.307A4.49 4.49 0 0 1 12 21.75a4.49 4.49 0 0 1-3.397-1.549 4.49 4.49 0 0 1-3.498-1.306 4.491 4.491 0 0 1-1.307-3.498A4.49 4.49 0 0 1 2.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 0 1 1.307-3.497 4.49 4.49 0 0 1 3.497-1.307Zm7.007 6.387a.75.75 0 1 0-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 0 0-1.06 1.06l2.25 2.25a.75.75 0 0 0 1.14-.094l3.75-5.25Z"
                       clip-rule="evenodd"
                     />
                   </svg>
+                  <span class="text-white text-sm font-medium hidden md:inline">Vérifié</span>
+                </div>
               }
             </div>
           </div>
 
-      <div class="flex flex-col justify-center sm:flex-row sm:justify-between">
+          <!-- Avatar et info principale -->
-        <div class="text-center sm:pr-8 sm:py-8">
+          <div class="relative -mt-16 md:-mt-20 px-4 md:px-8 pb-6">
-          @if (!isEditMode()) {
+            <div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
-            <div class="w-max" (click)="isEditMode.set(!isEditMode())">
+              <!-- Avatar avec bouton edit -->
-              <svg
+              <div class="relative group animate-slide-up">
-                xmlns="http://www.w3.org/2000/svg"
-                viewBox="0 0 24 24"
-                fill="currentColor"
-                class="w-6 h-6 cursor-pointer hover:text-gray-800 dark:text-white"
-              >
-                <title>Editer le profil</title>
-                <path
-                  d="M21.731 2.269a2.625 2.625 0 0 0-3.712 0l-1.157 1.157 3.712 3.712 1.157-1.157a2.625 2.625 0 0 0 0-3.712ZM19.513 8.199l-3.712-3.712-8.4 8.4a5.25 5.25 0 0 0-1.32 2.214l-.8 2.685a.75.75 0 0 0 .933.933l2.685-.8a5.25 5.25 0 0 0 2.214-1.32l8.4-8.4Z"
-                />
-                <path
-                  d="M5.25 5.25a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h10.5a3 3 0 0 0 3-3V13.5a.75.75 0 0 0-1.5 0v5.25a1.5 1.5 0 0 1-1.5 1.5H5.25a1.5 1.5 0 0 1-1.5-1.5V8.25a1.5 1.5 0 0 1 1.5-1.5h5.25a.75.75 0 0 0 0-1.5H5.25Z"
-                />
-              </svg>
-            </div>
-          }
-
-          @if (!isEditMode()) {
                 <div
-              class="w-28 h-28 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-400"
+                  class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
                 >
+                  <div class="w-full h-full rounded-full overflow-hidden bg-white">
                     @if (user().avatar) {
                       <img
                         alt="{{ user().username }}"
-                  class="object-cover object-center h-full w-full rounded-full"
+                        class="object-cover w-full h-full"
                         src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{
                           user().avatar
                         }}"
@@ -73,180 +76,269 @@
                     } @else {
                       <img
                         alt="{{ user().username }}"
-                  class="object-cover object-center h-full w-full rounded-full"
+                        class="object-cover w-full h-full"
                         src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
                       />
                     }
                   </div>
+                </div>
+              </div>
 
-            <div class="flex flex-col w-full items-center text-center justify-center">
+              <!-- Nom et titre -->
+              <div
+                class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100"
+              >
                 @if (user().name) {
-                <h2
+                  <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
-                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white"
-                >
                     {{ user().name }}
-                </h2>
+                  </h1>
                 } @else if (user().username) {
-                <h2
+                  <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
-                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white"
-                >
                     {{ user().username }}
-                </h2>
+                  </h1>
                 } @else {
-                <h2
+                  <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
-                  class="font-medium title-font mt-4 text-gray-900 text-lg w-full dark:text-white"
-                >
                     {{ user().email }}
-                </h2>
+                  </h1>
                 }
-              <div class="w-12 h-1 bg-indigo-500 rounded mt-2 mb-4"></div>
+
+                <p class="text-lg md:text-xl text-indigo-600 dark:text-indigo-400 font-semibold">
+                  {{ profile().profession | uppercase }}
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Contenu principal -->
+        <div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
+          <!-- Sidebar - Informations -->
+          <aside class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
+            <!-- Card Apropos -->
+            <div
+              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
+            >
+              <h3
+                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-6 w-6 text-indigo-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                À propos
+              </h3>
+              <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
+                {{ profile().apropos }}
+              </p>
+            </div>
+
+            <!-- Card Bio -->
+            <div
+              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
+            >
+              <h3
+                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 text-indigo-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    fill-rule="evenodd"
+                    d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+                    clip-rule="evenodd"
+                  />
+                </svg>
+                Biographie
+              </h3>
               @if (profile().bio) {
-                <p class="text-base dark:text-white w-full">{{ profile().bio }}</p>
+                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                  {{ profile().bio }}
+                </p>
               } @else {
-                <p class="text-base dark:text-white w-full">
+                <p class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
                   Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
-                  compétences. N’hésitez pas à me contacter pour en savoir plus sur mon parcours et
+                  compétences.
-                  mes domaines d’intervention.
                 </p>
               }
+            </div>
 
+            <!-- Card Secteur -->
             @if (profile().secteur) {
-                <div class="space-y-2 flex flex-col my-4">
+              <div
-                  <p class="text-base dark:text-white">Secteur</p>
+                class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
+              >
+                <h3
+                  class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-5 w-5 text-indigo-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
+                    />
+                  </svg>
+                  Secteur
+                </h3>
                 <app-chips [sectorId]="profile().secteur" />
               </div>
             }
 
+            <!-- Card Réseaux -->
             @if (profile().reseaux) {
-                <div class="space-y-2 flex flex-col my-4">
+              <div
-                  <p class="text-base dark:text-white">Réseaux</p>
+                class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
+              >
+                <h3
+                  class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+                >
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    class="h-5 w-5 text-indigo-500"
+                    viewBox="0 0 20 20"
+                    fill="currentColor"
+                  >
+                    <path
+                      d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
+                    />
+                    <path
+                      d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
+                    />
+                  </svg>
+                  Réseaux
+                </h3>
                 <app-reseaux [reseaux]="profile().reseaux" />
               </div>
             }
-            </div>
+          </aside>
-          }
 
-          @if (isEditMode()) {
+          <!-- Contenu principal avec onglets -->
-            <app-update-user [user]="user()" (isCancelEditMode)="onCancelEditMode($event)" />
+          <main class="lg:col-span-3 animate-slide-up animation-delay-300">
-          }
+            <!-- Navigation par onglets -->
-        </div>
+            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-4 mb-6">
-
+              <nav class="flex flex-wrap gap-2">
-        <div
+                <button
-          class="flex-1 sm:pl-8 sm:py-8 sm:border-l border-gray-200 sm:border-t-0 border-t mt-4 pt-4 sm:mt-0 text-center sm:text-left"
-        >
-          <div class="p-4">
-            <ul
-              class="w-full flex flex-wrap gap-x-2 gap-y-2 rounded-lg items-center max-sm:mx-auto"
-            >
-              <li
-                id="homeTab"
                   (click)="menu.set('home')"
-                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'home'.toLowerCase() }"
+                  [class.active-tab]="menu() === 'home'"
-                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+                  class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5"
+                    viewBox="0 0 20 20"
                     fill="currentColor"
-                  class="w-5 mb-1.5"
-                  viewBox="0 0 511 511.999"
                   >
                     <path
-                    d="M498.7 222.695c-.016-.011-.028-.027-.04-.039L289.805 13.81C280.902 4.902 269.066 0 256.477 0c-12.59 0-24.426 4.902-33.332 13.809L14.398 222.55c-.07.07-.144.144-.21.215-18.282 18.386-18.25 48.218.09 66.558 8.378 8.383 19.44 13.235 31.273 13.746.484.047.969.07 1.457.07h8.32v153.696c0 30.418 24.75 55.164 55.168 55.164h81.711c8.285 0 15-6.719 15-15V376.5c0-13.879 11.293-25.168 25.172-25.168h48.195c13.88 0 25.168 11.29 25.168 25.168V497c0 8.281 6.715 15 15 15h81.711c30.422 0 55.168-24.746 55.168-55.164V303.14h7.719c12.586 0 24.422-4.903 33.332-13.813 18.36-18.367 18.367-48.254.027-66.633zm-21.243 45.422a17.03 17.03 0 0 1-12.117 5.024h-22.72c-8.285 0-15 6.714-15 15v168.695c0 13.875-11.289 25.164-25.168 25.164h-66.71V376.5c0-30.418-24.747-55.168-55.169-55.168H232.38c-30.422 0-55.172 24.75-55.172 55.168V482h-66.71c-13.876 0-25.169-11.29-25.169-25.164V288.14c0-8.286-6.715-15-15-15H48a13.9 13.9 0 0 0-.703-.032c-4.469-.078-8.66-1.851-11.8-4.996-6.68-6.68-6.68-17.55 0-24.234.003 0 .003-.004.007-.008l.012-.012L244.363 35.02A17.003 17.003 0 0 1 256.477 30c4.574 0 8.875 1.781 12.113 5.02l208.8 208.796.098.094c6.645 6.692 6.633 17.54-.031 24.207zm0 0"
+                      d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"
-                    data-original="#000000"
+                    />
-                  ></path>
                   </svg>
-                Mon profile
+                  <span class="hidden sm:inline">Mon profil</span>
-              </li>
+                </button>
-              <li
+
-                id="settingTab"
+                <button
                   (click)="menu.set('projects')"
-                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'projects'.toLowerCase() }"
+                  [class.active-tab]="menu() === 'projects'"
-                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+                  class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5"
                     fill="none"
                     viewBox="0 0 24 24"
-                  stroke-width="1.5"
                     stroke="currentColor"
-                  class="size-6"
                   >
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                    d="M9.75 3.104v5.714a2.25 2.25 0 0 1-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 0 1 4.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0 1 12 15a9.065 9.065 0 0 0-6.23-.693L5 14.5m14.8.8 1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0 1 12 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
+                      stroke-width="2"
+                      d="M9.75 3.104v5.714a2.25 2.25 0 01-.659 1.591L5 14.5M9.75 3.104c-.251.023-.501.05-.75.082m.75-.082a24.301 24.301 0 014.5 0m0 0v5.714c0 .597.237 1.17.659 1.591L19.8 15.3M14.25 3.104c.251.023.501.05.75.082M19.8 15.3l-1.57.393A9.065 9.065 0 0112 15a9.065 9.065 0 00-6.23-.693L5 14.5m14.8.8l1.402 1.402c1.232 1.232.65 3.318-1.067 3.611A48.309 48.309 0 0112 21c-2.773 0-5.491-.235-8.135-.687-1.718-.293-2.3-2.379-1.067-3.61L5 14.5"
                     />
                   </svg>
-                Mes projets
+                  <span class="hidden sm:inline">Mes projets</span>
-              </li>
+                </button>
-              <li
+
-                id="profileTab"
+                <button
                   (click)="menu.set('update')"
-                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'update'.toLowerCase() }"
+                  [class.active-tab]="menu() === 'update'"
-                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+                  class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5"
+                    viewBox="0 0 20 20"
                     fill="currentColor"
-                  class="w-5 mb-1.5"
-                  viewBox="0 0 512 512"
                   >
                     <path
-                    d="M437.02 74.98C388.668 26.63 324.379 0 256 0S123.332 26.629 74.98 74.98C26.63 123.332 0 187.621 0 256s26.629 132.668 74.98 181.02C123.332 485.37 187.621 512 256 512s132.668-26.629 181.02-74.98C485.37 388.668 512 324.379 512 256s-26.629-132.668-74.98-181.02zM111.105 429.297c8.454-72.735 70.989-128.89 144.895-128.89 38.96 0 75.598 15.179 103.156 42.734 23.281 23.285 37.965 53.687 41.742 86.152C361.641 462.172 311.094 482 256 482s-105.637-19.824-144.895-52.703zM256 269.507c-42.871 0-77.754-34.882-77.754-77.753C178.246 148.879 213.13 114 256 114s77.754 34.879 77.754 77.754c0 42.871-34.883 77.754-77.754 77.754zm170.719 134.427a175.9 175.9 0 0 0-46.352-82.004c-18.437-18.438-40.25-32.27-64.039-40.938 28.598-19.394 47.426-52.16 47.426-89.238C363.754 132.34 315.414 84 256 84s-107.754 48.34-107.754 107.754c0 37.098 18.844 69.875 47.465 89.266-21.887 7.976-42.14 20.308-59.566 36.542-25.235 23.5-42.758 53.465-50.883 86.348C50.852 364.242 30 312.512 30 256 30 131.383 131.383 30 256 30s226 101.383 226 226c0 56.523-20.86 108.266-55.281 147.934zm0 0"
+                      fill-rule="evenodd"
-                    data-original="#000000"
+                      d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
-                  ></path>
+                      clip-rule="evenodd"
+                    />
                   </svg>
-                Mes informations
+                  <span class="hidden sm:inline">Mes informations</span>
-              </li>
+                </button>
-              <li
+
-                id="cvTab"
+                <button
                   (click)="menu.set('cv')"
-                [ngClass]="{ 'border-blue-600 text-blue-600': menu() == 'cv'.toLowerCase() }"
+                  [class.active-tab]="menu() === 'cv'"
-                class="tab flex flex-col justify-center items-center border-2 hover:border-blue-600 rounded-lg bg-gray-100 text-sm font-semibold hover:text-blue-600 py-2 px-2 min-w-[100px] cursor-pointer transition-all"
+                  class="tab-button flex items-center gap-2 px-4 py-2.5 rounded-lg font-medium text-sm transition-all duration-200"
                 >
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
+                    class="w-5 h-5"
                     fill="none"
                     viewBox="0 0 24 24"
-                  stroke-width="1.5"
                     stroke="currentColor"
-                  class="size-6"
                   >
                     <path
                       stroke-linecap="round"
                       stroke-linejoin="round"
-                    d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z"
+                      stroke-width="2"
+                      d="M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z"
                     />
                   </svg>
+                  <span class="hidden sm:inline">Lecteur PDF</span>
+                </button>
+              </nav>
+            </div>
 
-                Lecteur de PDF
+            <!-- Contenu des onglets -->
-              </li>
+            <div class="tab-content">
-            </ul>
-
-            <div id="homeContent" class="tab-content max-w-2xl block mt-8">
               @switch (menu().toLowerCase()) {
-                @case ('home'.toLowerCase()) {
+                @case ('home') {
-                  <app-my-home-profile [profile]="profile()" />
+                  <app-update-user [user]="user()" />
                 }
-                @case ('projects'.toLowerCase()) {
+                @case ('projects') {
                   <app-my-profile-project-list
                     [projectIds]="profile().projets"
                     [userId]="user().id"
                   />
                   <router-outlet />
                 }
-                @case ('update'.toLowerCase()) {
+                @case ('update') {
                   <app-my-profile-update-form [profile]="profile()" />
                 }
-                @case ('cv'.toLowerCase()) {
+                @case ('cv') {
                   <app-pdf-viewer [profile]="profile()" />
                 }
                 @default {
-                  <app-my-home-profile [profile]="profile()" />
+                  <app-update-user [user]="user()" />
                 }
               }
             </div>
-          </div>
+          </main>
         </div>
       </div>
     </div>

src/app/routes/my-profile/my-profile.component.scss

@@ -0,0 +1,345 @@
+// ============================================
+// ANIMATIONS
+// ============================================
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes pulseSlow {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+.animate-slide-up {
+  animation: slideUp 0.6s ease-out;
+}
+
+.animate-pulse-slow {
+  animation: pulseSlow 3s ease-in-out infinite;
+}
+
+.animation-delay-100 {
+  animation-delay: 0.1s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+.animation-delay-200 {
+  animation-delay: 0.2s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+.animation-delay-300 {
+  animation-delay: 0.3s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+// ============================================
+// NAVIGATION PAR ONGLETS
+// ============================================
+
+.tab-button {
+  @apply bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-300;
+  @apply hover:bg-indigo-50 dark:hover:bg-gray-600 hover:text-indigo-600 dark:hover:text-indigo-400;
+
+  &.active-tab {
+    @apply bg-gradient-to-r from-indigo-600 to-purple-600 text-white;
+    @apply shadow-lg;
+
+    svg {
+      @apply text-white;
+    }
+  }
+
+  // Animation au hover
+  &:hover:not(.active-tab) {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  }
+
+  // Effet au clic
+  &:active {
+    transform: scale(0.98);
+  }
+}
+
+// ============================================
+// CARDS
+// ============================================
+
+.card {
+  @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6;
+  @apply transition-shadow duration-300;
+
+  &:hover {
+    @apply shadow-xl;
+  }
+}
+
+// ============================================
+// RESPONSIVE BREAKPOINTS
+// ============================================
+
+// Mobile (par défaut)
+@media (max-width: 640px) {
+  .tab-button {
+    min-width: auto;
+    padding: 0.625rem;
+
+    span {
+      display: none;
+    }
+  }
+}
+
+// Tablet
+@media (min-width: 768px) and (max-width: 1023px) {
+  .tab-button {
+    font-size: 0.875rem;
+  }
+}
+
+// Desktop
+@media (min-width: 1024px) {
+  // Grille sidebar + contenu
+  .sidebar-layout {
+    display: grid;
+    grid-template-columns: 300px 1fr;
+    gap: 1.5rem;
+  }
+}
+
+// ============================================
+// BOUTON D'ÉDITION SUR L'AVATAR
+// ============================================
+
+.edit-button {
+  @apply absolute -top-2 -right-2 z-10;
+  @apply w-8 h-8 bg-indigo-600 hover:bg-indigo-700;
+  @apply rounded-full flex items-center justify-center;
+  @apply shadow-lg transition-all duration-300;
+
+  &:hover {
+    transform: scale(1.1);
+  }
+
+  svg {
+    @apply w-4 h-4 text-white;
+  }
+}
+
+// ============================================
+// AVATAR
+// ============================================
+
+.avatar-wrapper {
+  position: relative;
+
+  .avatar-ring {
+    @apply w-28 h-28 md:w-36 md:h-36;
+    @apply rounded-full bg-gradient-to-br from-indigo-500 to-purple-600;
+    @apply p-1 shadow-2xl;
+    @apply transition-transform duration-300;
+
+    &:hover {
+      transform: scale(1.05);
+    }
+  }
+
+  .avatar-image {
+    @apply w-full h-full rounded-full overflow-hidden bg-white;
+
+    img {
+      @apply object-cover w-full h-full;
+    }
+  }
+}
+
+// ============================================
+// BANNIÈRE
+// ============================================
+
+.banner {
+  @apply relative rounded-2xl overflow-hidden shadow-xl;
+
+  .banner-image {
+    @apply h-48 md:h-64 bg-cover bg-center;
+  }
+
+  .banner-overlay {
+    @apply absolute inset-0 bg-gradient-to-b from-transparent to-black/30;
+  }
+
+  .banner-content {
+    @apply relative z-10 p-4 flex justify-between items-start;
+  }
+}
+
+// ============================================
+// BACK BUTTON
+// ============================================
+
+.back-button {
+  @apply flex items-center justify-center;
+  @apply w-10 h-10 md:w-12 md:h-12;
+  @apply bg-white/20 backdrop-blur-md rounded-full;
+  @apply hover:bg-white/30 transition-all duration-300;
+
+  &:hover {
+    transform: scale(1.1);
+
+    svg {
+      transform: translateX(-4px);
+    }
+  }
+
+  svg {
+    @apply w-6 h-6 text-white transition-transform;
+  }
+}
+
+// ============================================
+// BADGE VÉRIFIÉ
+// ============================================
+
+.verified-badge {
+  @apply flex items-center gap-2;
+  @apply bg-purple-500/20 backdrop-blur-md;
+  @apply px-3 py-2 rounded-full;
+
+  svg {
+    @apply w-5 h-5 md:w-6 md:h-6 text-purple-300;
+  }
+
+  span {
+    @apply text-white text-sm font-medium;
+  }
+}
+
+// ============================================
+// SECTIONS AVEC ICÔNES
+// ============================================
+
+.section-title {
+  @apply text-lg font-bold text-gray-900 dark:text-white mb-3;
+  @apply flex items-center gap-2;
+
+  svg {
+    @apply h-5 w-5 text-indigo-500;
+  }
+}
+
+// ============================================
+// AMÉLIORATION DE L'ACCESSIBILITÉ
+// ============================================
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+
+// Focus visible pour l'accessibilité
+*:focus-visible {
+  outline: 2px solid #4f46e5;
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+// ============================================
+// MODE SOMBRE
+// ============================================
+
+@media (prefers-color-scheme: dark) {
+  .card {
+    background-color: rgba(31, 41, 55, 0.8);
+    border: 1px solid rgba(55, 65, 81, 0.3);
+  }
+
+  .tab-button {
+    &:not(.active-tab) {
+      background-color: rgba(55, 65, 81, 0.5);
+      color: rgba(209, 213, 219, 1);
+    }
+  }
+}
+
+// ============================================
+// UTILITAIRES PERSONNALISÉS
+// ============================================
+
+// Divider avec gradient
+.divider-gradient {
+  height: 4px;
+  background: linear-gradient(90deg, transparent, #4f46e5, transparent);
+  border-radius: 9999px;
+}
+
+// Card avec hover effect
+.hover-lift {
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+  }
+}
+
+// Glassmorphism effect
+.glass {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+// ============================================
+// PRINT STYLES (optionnel)
+// ============================================
+
+@media print {
+  .banner,
+  .back-button,
+  .edit-button,
+  .tab-button {
+    display: none;
+  }
+
+  .card {
+    box-shadow: none;
+    border: 1px solid #e5e7eb;
+  }
+}

src/app/routes/my-profile/my-profile.component.spec.ts

@@ -6,12 +6,14 @@ import { ProfileRepository } from '@app/domain/profiles/profile.repository';
 import { PROFILE_REPOSITORY_TOKEN } from '@app/infrastructure/profiles/profile-repository.token';
 import { of } from 'rxjs';
 import { Profile } from '@app/domain/profiles/profile.model';
+import {ToastrService} from "ngx-toastr";
 
 describe('MyProfileComponent', () => {
   let component: MyProfileComponent;
   let fixture: ComponentFixture<MyProfileComponent>;
 
   let mockProfileRepo: ProfileRepository;
+  let mockToastrService: Partial<ToastrService>;
 
   beforeEach(async () => {
     mockProfileRepo = {
@@ -20,11 +22,18 @@ describe('MyProfileComponent', () => {
       update: jest.fn(),
       getByUserId: jest.fn().mockReturnValue(of({} as Profile)),
     };
+    mockToastrService = {
+      warning: jest.fn(),
+      success: jest.fn(),
+      info: jest.fn(),
+      error: jest.fn(),
+    };
     await TestBed.configureTestingModule({
       imports: [MyProfileComponent],
       providers: [
         provideRouter([]),
         { provide: PROFILE_REPOSITORY_TOKEN, useValue: mockProfileRepo },
+        { provide: ToastrService, useValue: mockToastrService },
       ],
     }).compileComponents();
 

src/app/routes/my-profile/my-profile.component.ts

@@ -1,14 +1,13 @@
 import { Component, computed, inject, OnInit, signal } from '@angular/core';
-import { ActivatedRoute, RouterLink, RouterOutlet } from '@angular/router';
+import { ActivatedRoute, RouterOutlet } from '@angular/router';
 import { User } from '@app/shared/models/user';
-import { Location, NgClass } from '@angular/common';
+import { Location, UpperCasePipe } from '@angular/common';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { environment } from '@env/environment';
 import { ChipsComponent } from '@app/shared/components/chips/chips.component';
 import { ReseauxComponent } from '@app/shared/components/reseaux/reseaux.component';
 import { UpdateUserComponent } from '@app/shared/features/update-user/update-user.component';
 import { MyProfileProjectListComponent } from '@app/shared/components/my-profile-project-list/my-profile-project-list.component';
-import { MyHomeProfileComponent } from '@app/shared/components/my-home-profile/my-home-profile.component';
 import { MyProfileUpdateFormComponent } from '@app/shared/components/my-profile-update-form/my-profile-update-form.component';
 import { PdfViewerComponent } from '@app/shared/features/pdf-viewer/pdf-viewer.component';
 import { ProfileFacade } from '@app/ui/profiles/profile.facade';
@@ -17,16 +16,14 @@ import { ProfileFacade } from '@app/ui/profiles/profile.facade';
   selector: 'app-my-profile',
   standalone: true,
   imports: [
-    RouterLink,
     ChipsComponent,
     ReseauxComponent,
     UpdateUserComponent,
     MyProfileProjectListComponent,
     RouterOutlet,
-    MyHomeProfileComponent,
     MyProfileUpdateFormComponent,
-    NgClass,
     PdfViewerComponent,
+    UpperCasePipe,
   ],
   templateUrl: './my-profile.component.html',
   styleUrl: './my-profile.component.scss',
@@ -48,13 +45,6 @@ export class MyProfileComponent implements OnInit {
     return {} as User;
   });
 
-  protected isEditMode = signal<boolean>(false);
-
-
-  onCancelEditMode($event: boolean) {
-    this.isEditMode.set(!$event);
-  }
-
   private readonly profileFacade = new ProfileFacade();
   protected profile = this.profileFacade.profile;
   protected readonly loading = this.profileFacade.loading;

src/app/routes/profile/profile-detail/profile-detail.component.html

@@ -1,7 +1,8 @@
-<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
+<section
+  class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800"
+>
   <div class="container mx-auto px-4 py-6 md:py-12">
     <div class="max-w-5xl mx-auto">
-
       <!-- Header avec bannière et bouton retour -->
       <div class="relative rounded-2xl overflow-hidden shadow-xl mb-8 animate-fade-in">
         <div class="h-48 md:h-64 bg-cover bg-center bg-auth relative">
@@ -31,7 +32,9 @@
 
             <!-- Badge vérifié -->
             @if (profile().estVerifier) {
-              <div class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow">
+              <div
+                class="flex items-center gap-2 bg-purple-500/20 backdrop-blur-md px-3 py-2 rounded-full animate-pulse-slow"
+              >
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
                   viewBox="0 0 24 24"
@@ -56,13 +59,17 @@
           <div class="flex flex-col md:flex-row items-center md:items-end gap-4 md:gap-6">
             <!-- Avatar avec animation -->
             <div class="relative group animate-slide-up">
-              <div class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300">
+              <div
+                class="w-28 h-28 md:w-36 md:h-36 rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 p-1 shadow-2xl group-hover:scale-105 transition-transform duration-300"
+              >
                 <div class="w-full h-full rounded-full overflow-hidden bg-white">
                   @if (user().avatar) {
                     <img
                       alt="{{ user().username }}"
                       class="object-cover w-full h-full"
-                      src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{ user().avatar }}"
+                      src="{{ environment.baseUrl }}/api/files/users/{{ user().id }}/{{
+                        user().avatar
+                      }}"
                       loading="lazy"
                     />
                   } @else {
@@ -76,11 +83,15 @@
                 </div>
               </div>
               <!-- Indicateur en ligne (optionnel) -->
-              <div class="absolute bottom-2 right-2 w-4 h-4 md:w-5 md:h-5 bg-green-500 rounded-full border-4 border-white shadow-lg"></div>
+              <div
+                class="absolute bottom-2 right-2 w-4 h-4 md:w-5 md:h-5 bg-green-500 rounded-full border-4 border-white shadow-lg"
+              ></div>
             </div>
 
             <!-- Nom et profession -->
-            <div class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100">
+            <div
+              class="flex-1 text-center md:text-left mb-4 md:mb-0 animate-slide-up animation-delay-100"
+            >
               @if (user().name) {
                 <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                   {{ user().name }}
@@ -105,20 +116,33 @@
 
       <!-- Contenu principal -->
       <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 md:gap-8">
-
         <!-- Colonne gauche - Informations -->
         <div class="lg:col-span-1 space-y-6 animate-slide-up animation-delay-200">
-
           <!-- Card Biographie -->
-          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
+          <div
-            <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
+          >
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" />
+            <h3
+              class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-5 w-5 text-indigo-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+                  clip-rule="evenodd"
+                />
               </svg>
               Biographie
             </h3>
             @if (profile().bio) {
-              <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">{{ profile().bio }}</p>
+              <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
+                {{ profile().bio }}
+              </p>
             } @else {
               <p class="text-gray-600 dark:text-gray-300 text-sm leading-relaxed">
                 Je suis sur la plateforme Trouve Ton Profile pour partager mon expertise et mes
@@ -130,10 +154,21 @@
 
           <!-- Card Secteur -->
           @if (profile().secteur) {
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
+            <div
-              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
+            >
-                  <path d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z" />
+              <h3
+                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 text-indigo-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
+                  />
                 </svg>
                 Secteur
               </h3>
@@ -143,11 +178,24 @@
 
           <!-- Card Réseaux -->
           @if (profile().reseaux) {
-            <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300">
+            <div
-              <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2">
+              class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 hover:shadow-xl transition-shadow duration-300"
-                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
+            >
-                  <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
+              <h3
-                  <path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
+                class="text-lg font-bold text-gray-900 dark:text-white mb-3 flex items-center gap-2"
+              >
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  class="h-5 w-5 text-indigo-500"
+                  viewBox="0 0 20 20"
+                  fill="currentColor"
+                >
+                  <path
+                    d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z"
+                  />
+                  <path
+                    d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
+                  />
                 </svg>
                 Réseaux
               </h3>
@@ -158,12 +206,24 @@
 
         <!-- Colonne droite - À propos et Projets -->
         <div class="lg:col-span-2 space-y-6 animate-slide-up animation-delay-300">
-
           <!-- Card À propos -->
-          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300">
+          <div
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
+          >
-                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+            <h2
+              class="text-2xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-indigo-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
+                <path
+                  fill-rule="evenodd"
+                  d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
+                  clip-rule="evenodd"
+                />
               </svg>
               À propos
             </h2>
@@ -173,9 +233,18 @@
           </div>
 
           <!-- Card Projets -->
-          <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300">
+          <div
-            <h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
+            class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 md:p-8 hover:shadow-xl transition-shadow duration-300"
-              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-indigo-500" viewBox="0 0 20 20" fill="currentColor">
+          >
+            <h2
+              class="text-2xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2"
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="h-6 w-6 text-indigo-500"
+                viewBox="0 0 20 20"
+                fill="currentColor"
+              >
                 <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" />
               </svg>
               Projets

src/app/routes/profile/profile-detail/profile-detail.component.scss

@@ -22,7 +22,8 @@
 }
 
 @keyframes pulseSlow {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {

src/app/routes/profile/profile-detail/profile-detail.component.ts

@@ -12,13 +12,7 @@ import { Profile } from '@app/domain/profiles/profile.model';
 @Component({
   selector: 'app-profile-detail',
   standalone: true,
-  imports: [
+  imports: [ChipsComponent, ReseauxComponent, RouterLink, UpperCasePipe, ProjectListComponent],
-    ChipsComponent,
-    ReseauxComponent,
-    RouterLink,
-    UpperCasePipe,
-    ProjectListComponent,
-  ],
   templateUrl: './profile-detail.component.html',
   styleUrl: './profile-detail.component.scss',
 })

src/app/routes/profile/profile-list/profile-list.component.html

@@ -1,19 +1,31 @@
-<section class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16">
+<section
+  class="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800 pb-16"
+>
   <!-- Hero Section avec recherche -->
   <div class="relative overflow-hidden">
     <!-- Décorations de fond -->
     <div class="absolute inset-0 overflow-hidden pointer-events-none">
-      <div class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"></div>
+      <div
-      <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"></div>
+        class="absolute -top-40 -right-40 w-80 h-80 bg-indigo-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob"
-      <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"></div>
+      ></div>
+      <div
+        class="absolute -bottom-40 -left-40 w-80 h-80 bg-purple-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-2000"
+      ></div>
+      <div
+        class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-80 h-80 bg-pink-400 rounded-full mix-blend-multiply filter blur-3xl opacity-20 animate-blob animation-delay-4000"
+      ></div>
     </div>
 
     <div class="relative max-w-screen-xl mx-auto px-4 sm:px-6 lg:px-8 pt-24 pb-12">
       <!-- Titre de la page -->
       <div class="text-center mb-8 animate-fade-in">
-        <h1 class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4">
+        <h1
+          class="text-3xl sm:text-4xl lg:text-5xl font-extrabold text-gray-900 dark:text-white mb-4"
+        >
           Découvrez les
-          <span class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600">
+          <span
+            class="text-transparent bg-clip-text bg-gradient-to-r from-indigo-600 to-purple-600"
+          >
             meilleurs profils
           </span>
         </h1>
@@ -24,7 +36,9 @@
 
       <!-- Barre de recherche améliorée -->
       <div class="max-w-3xl mx-auto animate-slide-up animation-delay-200">
-        <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300">
+        <div
+          class="bg-white dark:bg-gray-800 rounded-2xl shadow-xl p-4 sm:p-6 hover:shadow-2xl transition-shadow duration-300"
+        >
           <app-search (onSearchChange)="showNewQuery($event)" />
         </div>
       </div>
@@ -34,16 +48,21 @@
   <!-- Liste des profils -->
   <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-8">
     @if (loading().isLoading) {
-      <app-loading message="Chargement des profils..."/>
+      <app-loading message="Chargement des profils..." />
     } @else {
       <!-- Titre de section -->
       <div class="mb-6 flex items-center justify-between animate-fade-in">
-        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+        <h2 class="text-2xl font-bold text-gray-900 dark:text-white">Tous les profils</h2>
-          Tous les profils
-        </h2>
         <div class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z" />
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              d="M9 6a3 3 0 11-6 0 3 3 0 016 0zM17 6a3 3 0 11-6 0 3 3 0 016 0zM12.93 17c.046-.327.07-.66.07-1a6.97 6.97 0 00-1.5-4.33A5 5 0 0119 16v1h-6.07zM6 11a5 5 0 015 5v1H1v-1a5 5 0 015-5z"
+            />
           </svg>
           <span>{{ profiles().length }} profil(s)</span>
         </div>

src/app/routes/profile/profile-list/profile-list.component.scss

@@ -1,6 +1,7 @@
 /* Animations blob pour le fond */
 @keyframes blob {
-  0%, 100% {
+  0%,
+  100% {
     transform: translate(0, 0) scale(1);
   }
   25% {

src/app/routes/profile/profile-list/profile-list.component.ts

@@ -3,8 +3,8 @@ import { SearchComponent } from '@app/shared/features/search/search.component';
 import { VerticalProfileListComponent } from '@app/shared/components/vertical-profile-list/vertical-profile-list.component';
 import { UntilDestroy } from '@ngneat/until-destroy';
 import { ProfileFacade } from '@app/ui/profiles/profile.facade';
-import {LoadingComponent} from "@app/shared/components/loading/loading.component";
+import { LoadingComponent } from '@app/shared/components/loading/loading.component';
-import {Router} from "@angular/router";
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-profile-list',

src/app/shared/components/loading/loading.component.html

@@ -1,10 +1,14 @@
 <!-- État de chargement amélioré -->
 <div class="flex flex-col items-center justify-center h-96 space-y-4">
   <div class="relative">
-    <div class="w-16 h-16 border-4 border-indigo-200 dark:border-indigo-800 rounded-full animate-spin border-t-indigo-600 dark:border-t-indigo-400"></div>
+    <div
-    <div class="absolute inset-0 w-16 h-16 border-4 border-transparent border-t-purple-600 dark:border-t-purple-400 rounded-full animate-spin-slow"></div>
+      class="w-16 h-16 border-4 border-indigo-200 dark:border-indigo-800 rounded-full animate-spin border-t-indigo-600 dark:border-t-indigo-400"
+    ></div>
+    <div
+      class="absolute inset-0 w-16 h-16 border-4 border-transparent border-t-purple-600 dark:border-t-purple-400 rounded-full animate-spin-slow"
+    ></div>
   </div>
   <p class="text-lg text-gray-600 dark:text-gray-300 font-medium animate-pulse">
-    {{message}}
+    {{ message }}
   </p>
 </div>

src/app/shared/components/loading/loading.component.spec.ts

@@ -8,9 +8,8 @@ describe('LoadingComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [LoadingComponent]
+      imports: [LoadingComponent],
-    })
+    }).compileComponents();
-    .compileComponents();
 
     fixture = TestBed.createComponent(LoadingComponent);
     component = fixture.componentInstance;

src/app/shared/components/loading/loading.component.ts

@@ -1,11 +1,11 @@
-import {Component, Input} from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-loading',
   standalone: true,
   imports: [],
   templateUrl: './loading.component.html',
-  styleUrl: './loading.component.scss'
+  styleUrl: './loading.component.scss',
 })
 export class LoadingComponent {
   @Input() message: string = 'Chargement...';

src/app/shared/components/my-home-profile/my-home-profile.component.html

@@ -1,6 +0,0 @@
-@if (profile != undefined) {
-  <h2 class="text-3xl font-extrabold text-black dark:text-white">
-    {{ profile.profession | uppercase }}
-  </h2>
-  <p class="leading-relaxed text-lg mb-4 dark:text-white">{{ profile.apropos }}</p>
-}

src/app/shared/components/my-home-profile/my-home-profile.component.spec.ts

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

src/app/shared/components/my-home-profile/my-home-profile.component.ts

@@ -1,16 +0,0 @@
-import { Component, Input } from '@angular/core';
-import { UpperCasePipe } from '@angular/common';
-import { UntilDestroy } from '@ngneat/until-destroy';
-import { ProfileViewModel } from '@app/ui/profiles/profile.presenter.model';
-
-@Component({
-  selector: 'app-my-home-profile',
-  standalone: true,
-  imports: [UpperCasePipe],
-  templateUrl: './my-home-profile.component.html',
-  styleUrl: './my-home-profile.component.scss',
-})
-@UntilDestroy()
-export class MyHomeProfileComponent {
-  @Input({ required: true }) profile: ProfileViewModel | undefined = undefined;
-}

src/app/shared/components/my-profile-update-form/my-profile-update-form.component.html

@@ -1,261 +1,406 @@
-<form
+<form [formGroup]="profileForm" (ngSubmit)="onSubmit()" class="space-y-8">
-  class="space-y-6 font-[sans-serif] max-w-md"
+  <!-- Section CV -->
-  [formGroup]="profileForm"
+  <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in">
-  (ngSubmit)="onSubmit()"
+    <div class="flex items-center gap-3 mb-6">
->
+      <div
-  <h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white mb-4">
+        class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center"
-    Mon curriculum vitae (CV)
+      >
-  </h3>
-  <app-my-profile-update-cv-form [profile]="profile" />
-
-  <h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white">
-    Ce qu'il faut savoir de moi
-  </h3>
-  <div class="mx-8">
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white">Biographie</label>
-      <div class="relative flex items-center">
-        <textarea
-          placeholder="Type Message"
-          formControlName="bio"
-          class="p-4 bg-white max-w-md mx-auto w-full block text-sm border border-gray-300 outline-[#007bff] rounded"
-          rows="4"
-        ></textarea>
-      </div>
-    </div>
-
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white">A propos de vous</label>
-      <div class="relative flex items-center">
-        <textarea
-          placeholder="Type Message"
-          formControlName="apropos"
-          class="p-4 bg-white max-w-md mx-auto w-full block text-sm border border-gray-300 outline-[#007bff] rounded"
-          rows="4"
-        ></textarea>
-      </div>
-    </div>
-  </div>
-
-  <h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white">Mon domaine de competence</h3>
-
-  <div class="mx-8">
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white">Profession</label>
-      <div class="relative flex items-center">
-        <input
-          type="text"
-          placeholder="votre metier"
-          formControlName="profession"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
-        />
-
-        <div class="absolute left-4">
         <svg
           xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 16 16"
+          class="w-6 h-6 text-indigo-600 dark:text-indigo-400"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke="currentColor"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            stroke-width="2"
+            d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+          />
+        </svg>
+      </div>
+      <h3 class="text-xl font-bold text-gray-900 dark:text-white">Mon curriculum vitae (CV)</h3>
+    </div>
+    <app-my-profile-update-cv-form [profile]="profile" />
+  </div>
+
+  <!-- Section À propos de moi -->
+  <div
+    class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in animation-delay-100"
+  >
+    <div class="flex items-center gap-3 mb-6">
+      <div
+        class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-6 h-6 text-purple-600 dark:text-purple-400"
+          viewBox="0 0 20 20"
           fill="currentColor"
-            class="size-4"
         >
           <path
             fill-rule="evenodd"
-              d="M11 4V3a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v1H4a2 2 0 0 0-2 2v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-1ZM9 2.5H7a.5.5 0 0 0-.5.5v1h3V3a.5.5 0 0 0-.5-.5ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"
+            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
+            clip-rule="evenodd"
+          />
+        </svg>
+      </div>
+      <h3 class="text-xl font-bold text-gray-900 dark:text-white">Ce qu'il faut savoir de moi</h3>
+    </div>
+
+    <div class="space-y-4">
+      <!-- Biographie -->
+      <div>
+        <label for="bio" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Biographie
+        </label>
+        <textarea
+          id="bio"
+          formControlName="bio"
+          placeholder="Parlez de vous en quelques lignes..."
+          rows="4"
+          class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all resize-none"
+        ></textarea>
+      </div>
+
+      <!-- À propos -->
+      <div>
+        <label
+          for="apropos"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
+          À propos de vous
+        </label>
+        <textarea
+          id="apropos"
+          formControlName="apropos"
+          placeholder="Décrivez votre parcours, vos objectifs..."
+          rows="4"
+          class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all resize-none"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+
+  <!-- Section Compétences -->
+  <div
+    class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in animation-delay-200"
+  >
+    <div class="flex items-center gap-3 mb-6">
+      <div
+        class="w-10 h-10 bg-blue-100 dark:bg-blue-900 rounded-lg flex items-center justify-center"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-6 h-6 text-blue-600 dark:text-blue-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
             clip-rule="evenodd"
           />
           <path
-              d="M3 11.83V12a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2v-.17c-.313.11-.65.17-1 .17H4c-.35 0-.687-.06-1-.17Z"
+            d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
+          />
+        </svg>
+      </div>
+      <h3 class="text-xl font-bold text-gray-900 dark:text-white">Mon domaine de compétence</h3>
+    </div>
+
+    <div class="space-y-4">
+      <!-- Profession -->
+      <div>
+        <label
+          for="profession"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
+          Profession
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M6 6V5a3 3 0 013-3h2a3 3 0 013 3v1h2a2 2 0 012 2v3.57A22.952 22.952 0 0110 13a22.95 22.95 0 01-8-1.43V8a2 2 0 012-2h2zm2-1a1 1 0 011-1h2a1 1 0 011 1v1H8V5zm1 5a1 1 0 011-1h.01a1 1 0 110 2H10a1 1 0 01-1-1z"
+                clip-rule="evenodd"
+              />
+              <path
+                d="M2 13.692V16a2 2 0 002 2h12a2 2 0 002-2v-2.308A24.974 24.974 0 0110 15c-2.796 0-5.487-.46-8-1.308z"
+              />
+            </svg>
+          </div>
+          <input
+            id="profession"
+            type="text"
+            formControlName="profession"
+            placeholder="Ex: Développeur Web, Designer..."
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          />
+        </div>
+      </div>
+
+      <!-- Secteur -->
+      <div>
+        <label
+          for="secteur"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
+          Secteur d'activité
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="h-5 w-5 text-gray-400"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                d="M2 11a1 1 0 011-1h2a1 1 0 011 1v5a1 1 0 01-1 1H3a1 1 0 01-1-1v-5zM8 7a1 1 0 011-1h2a1 1 0 011 1v9a1 1 0 01-1 1H9a1 1 0 01-1-1V7zM14 4a1 1 0 011-1h2a1 1 0 011 1v12a1 1 0 01-1 1h-2a1 1 0 01-1-1V4z"
+              />
+            </svg>
+          </div>
+          <select
+            id="secteur"
+            formControlName="secteur"
+            class="w-full pl-10 pr-10 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all appearance-none cursor-pointer"
+          >
+            <option [ngValue]="null" disabled>Sélectionnez votre secteur</option>
+            @for (sector of sectors(); track sector.id) {
+              <option [value]="sector.id">{{ sector.nom }}</option>
+            }
+          </select>
+          <div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+            <svg
+              class="h-5 w-5 text-gray-400"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 20 20"
+              fill="currentColor"
+            >
+              <path
+                fill-rule="evenodd"
+                d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+                clip-rule="evenodd"
               />
             </svg>
           </div>
         </div>
       </div>
+    </div>
+  </div>
 
-    <div>
+  <!-- Section Réseaux sociaux -->
-      <label class="mb-2 text-sm text-black block dark:text-white">Secteur</label>
+  <div
-
+    class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in animation-delay-300"
-      <div class="relative flex items-center">
+  >
-        <select
+    <div class="flex items-center gap-3 mb-6">
-          formControlName="secteur"
+      <div
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+        class="w-10 h-10 bg-pink-100 dark:bg-pink-900 rounded-lg flex items-center justify-center"
       >
-          <option [ngValue]="null" disabled>Selectionner votre secteur d'activité</option>
-          @for (sector of sectors(); track sector.id) {
-            <option [value]="sector.id">{{ sector.nom }}</option>
-          }
-        </select>
-      </div>
-    </div>
-  </div>
-
-  <h3 class="font-ubuntu font-bold text-xl uppercase dark:text-white">Mes réseaux</h3>
-  <div formGroupName="reseaux" class="mx-8">
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">Facebook</label>
-      <div class="relative flex items-center">
-        <input
-          type="text"
-          placeholder="lien vers votre facebook"
-          formControlName="facebook"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
-        />
-
-        <div class="absolute left-4">
         <svg
-            class="w-6 h-6"
+          xmlns="http://www.w3.org/2000/svg"
+          class="w-6 h-6 text-pink-600 dark:text-pink-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
+          <path
+            d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z"
+          />
+        </svg>
+      </div>
+      <h3 class="text-xl font-bold text-gray-900 dark:text-white">Mes réseaux sociaux</h3>
+    </div>
+
+    <div formGroupName="reseaux" class="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <!-- Facebook -->
+      <div>
+        <label
+          for="facebook"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
+          Facebook
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+            <svg
+              class="w-5 h-5"
               fill="#0866FF"
-            role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-            <title>Facebook</title>
               <path
                 d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z"
               />
             </svg>
           </div>
-      </div>
-    </div>
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">Github</label>
-      <div class="relative flex items-center">
           <input
-          type="text"
+            id="facebook"
-          placeholder="Lien vers votre github"
+            type="url"
-          formControlName="github"
+            formControlName="facebook"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+            placeholder="https://facebook.com/votreprofil"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           />
-
+        </div>
-        <div class="absolute left-4">
+      </div>
+      <!-- GitHub -->
+      <div>
+        <label for="github" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          GitHub
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <svg
-            class="w-6 h-6"
+              class="w-5 h-5"
               fill="#181717"
-            role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-            <title>GitHub</title>
               <path
                 d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
               />
             </svg>
           </div>
-      </div>
-    </div>
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">Instagram</label>
-      <div class="relative flex items-center">
           <input
-          type="text"
+            id="github"
-          placeholder="Lien vers votre instagram"
+            type="url"
-          formControlName="instagram"
+            formControlName="github"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+            placeholder="https://github.com/votreprofil"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           />
-
+        </div>
-        <div class="absolute left-4">
+      </div>
+      <!-- Instagram -->
+      <div>
+        <label
+          for="instagram"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
+          Instagram
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <svg
-            class="w-6 h-6"
+              class="w-5 h-5"
               fill="#E4405F"
-            role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-            <title>Instagram</title>
               <path
                 d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077"
               />
             </svg>
           </div>
-      </div>
-    </div>
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">linkedIn</label>
-      <div class="relative flex items-center">
           <input
-          type="text"
+            id="instagram"
-          placeholder="Lien vers votre linkedIn"
+            type="url"
-          formControlName="linkedIn"
+            formControlName="instagram"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+            placeholder="https://instagram.com/votreprofil"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           />
-
+        </div>
-        <div class="absolute left-4">
+      </div>
+      <!-- LinkedIn -->
+      <div>
+        <label
+          for="linkedIn"
+          class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+        >
+          LinkedIn
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <svg
-            class="w-6 h-6"
+              class="w-5 h-5"
               fill="#0A66C2"
-            role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-            <title>LinkedIn</title>
               <path
                 d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"
               />
             </svg>
           </div>
-      </div>
-    </div>
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">web</label>
-      <div class="relative flex items-center">
           <input
-          type="text"
+            id="linkedIn"
-          placeholder="Lien vers votre site web"
+            type="url"
-          formControlName="web"
+            formControlName="linkedIn"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+            placeholder="https://linkedin.com/in/votreprofil"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           />
-
+        </div>
-        <div class="absolute left-4">
+      </div>
+      <!-- Site Web -->
+      <div>
+        <label for="web" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Site Web
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <svg
-            id="Layer_1"
+              class="w-5 h-5 text-gray-400"
-            class="w-6 h-6"
-            data-name="Layer 1"
               xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 512 512"
+              viewBox="0 0 20 20"
+              fill="currentColor"
             >
-            <title>world-globe-outline</title>
               <path
-              d="M256,0Q362.11,0,436.9,75.1,512,149.89,512,256T436.9,436.9Q362.11,512,256,512T75.1,436.9Q0,362.11,0,256T75.1,75.1Q149.89,0,256,0ZM55.34,190.63a211.82,211.82,0,0,0,0,130.73h66a416,416,0,0,1,0-130.73Zm14.9,165.7q34.36,63.55,100.64,92.73a232.64,232.64,0,0,1-20.07-31.92,302.59,302.59,0,0,1-22.2-60.81ZM170.87,63.24Q104.59,92.43,70.54,155.37h58.07a304.36,304.36,0,0,1,22.2-60.51A198.45,198.45,0,0,1,170.87,63.24ZM151.72,190.63A390.59,390.59,0,0,0,145.94,256a390.48,390.48,0,0,0,5.78,65.37H241.1V190.63Zm82.7-143.51q-32.83,13.38-57.16,61.11-9.43,19.16-17.63,47.13H241.1V45.61a3.4,3.4,0,0,1-1.52.3h-1.82Zm3.34,419h1.82a5.12,5.12,0,0,0,1.52.3V356.33H159.62q8.21,28.28,17.63,47.43,24.32,47.74,57.16,61.11ZM274.24,45.91h-1.83a3.38,3.38,0,0,1-1.52-.3V155.37h81.48q-8.21-28-17.63-47.13-24.33-47.73-57.16-61.11Zm86,275.46A391.23,391.23,0,0,0,366.06,256a395,395,0,0,0-5.78-65.37H270.9V321.37Zm-82.7,143.51q32.84-13.39,57.16-61.11,9.73-19.16,17.63-47.43H270.9V466.39a5.1,5.1,0,0,0,1.52-.3h1.83ZM441.46,155.37q-34.06-62.94-100-92.12A212.61,212.61,0,0,1,361.2,94.86a295.22,295.22,0,0,1,22.2,60.51Zm-100,293.7q66-29.49,100-92.73H383.39q-8.52,33.74-22.2,60.81A226,226,0,0,1,341.43,449.06Zm49.25-258.43A412,412,0,0,1,395.86,256a415.71,415.71,0,0,1-5.17,65.37h66a211.89,211.89,0,0,0,0-130.73Z"
+                fill-rule="evenodd"
+                d="M4.083 9h1.946c.089-1.546.383-2.97.837-4.118A6.004 6.004 0 004.083 9zM10 2a8 8 0 100 16 8 8 0 000-16zm0 2c-.076 0-.232.032-.465.262-.238.234-.497.623-.737 1.182-.389.907-.673 2.142-.766 3.556h3.936c-.093-1.414-.377-2.649-.766-3.556-.24-.56-.5-.948-.737-1.182C10.232 4.032 10.076 4 10 4zm3.971 5c-.089-1.546-.383-2.97-.837-4.118A6.004 6.004 0 0115.917 9h-1.946zm-2.003 2H8.032c.093 1.414.377 2.649.766 3.556.24.56.5.948.737 1.182.233.23.389.262.465.262.076 0 .232-.032.465-.262.238-.234.498-.623.737-1.182.389-.907.673-2.142.766-3.556zm1.166 4.118c.454-1.147.748-2.572.837-4.118h1.946a6.004 6.004 0 01-2.783 4.118zm-6.268 0C6.412 13.97 6.118 12.546 6.03 11H4.083a6.004 6.004 0 002.783 4.118z"
+                clip-rule="evenodd"
               />
             </svg>
           </div>
-      </div>
-    </div>
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">x</label>
-      <div class="relative flex items-center">
           <input
-          type="text"
+            id="web"
-          placeholder="Lien vers votre compte X"
+            type="url"
-          formControlName="x"
+            formControlName="web"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+            placeholder="https://votresite.com"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           />
-
+        </div>
-        <div class="absolute left-4">
+      </div>
+      <!-- X (Twitter) -->
+      <div>
+        <label for="x" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          X (Twitter)
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <svg
-            class="w-6 h-6"
+              class="w-5 h-5"
               fill="#000000"
-            role="img"
               viewBox="0 0 24 24"
               xmlns="http://www.w3.org/2000/svg"
             >
-            <title>X</title>
               <path
                 d="M18.901 1.153h3.68l-8.04 9.19L24 22.846h-7.406l-5.8-7.584-6.638 7.584H.474l8.6-9.83L0 1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"
               />
             </svg>
           </div>
-      </div>
-    </div>
-    <div>
-      <label class="mb-2 text-sm text-black block dark:text-white uppercase">YouTube</label>
-      <div class="relative flex items-center">
           <input
-          type="text"
+            id="x"
-          placeholder="Lien vers votre compte youtube"
+            type="url"
-          formControlName="youTube"
+            formControlName="x"
-          class="pr-4 pl-14 py-3 text-sm text-black rounded bg-white border border-gray-400 w-full outline-[#333]"
+            placeholder="https://x.com/votreprofil"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
           />
-
+        </div>
-        <div class="absolute left-4">
+      </div>
+      <!-- Youtube -->
+      <div>
+        <label for="x" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+          Youtube
+        </label>
+        <div class="relative">
+          <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <svg
               class="w-6 h-6"
               fill="#FF0000"
@@ -269,15 +414,37 @@
               />
             </svg>
           </div>
+          <input
+            id="x"
+            type="url"
+            formControlName="youTube"
+            placeholder="https://youtube.com/votreprofil"
+            class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-all"
+          />
+        </div>
       </div>
     </div>
   </div>
 
+  <div class="flex justify-end animate-fade-in animation-delay-400">
     <button
       type="submit"
-    [ngClass]="{ 'bg-purple-600': profileForm.valid }"
+      [disabled]="profileForm.invalid"
-    class="!mt-8 px-6 py-2 w-full bg-[#333] hover:bg-[#444] text-sm text-white mx-auto block"
+      class="px-8 py-3 bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 text-white font-medium rounded-lg shadow-lg hover:shadow-xl transform hover:-translate-y-0.5 transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:transform-none"
     >
-    Sauvegarder
+      <span class="flex items-center gap-2">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            d="M7.707 10.293a1 1 0 10-1.414 1.414l3 3a1 1 0 001.414 0l3-3a1 1 0 00-1.414-1.414L11 11.586V6h5a2 2 0 012 2v7a2 2 0 01-2 2H4a2 2 0 01-2-2V8a2 2 0 012-2h5v5.586l-1.293-1.293zM9 4a1 1 0 012 0v2H9V4z"
+          />
+        </svg>
+        Sauvegarder les modifications
+      </span>
     </button>
+  </div>
 </form>

src/app/shared/components/my-profile-update-form/my-profile-update-form.component.scss

@@ -0,0 +1,48 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+.animation-delay-100 {
+  animation-delay: 0.1s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+.animation-delay-200 {
+  animation-delay: 0.2s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+.animation-delay-300 {
+  animation-delay: 0.3s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+.animation-delay-400 {
+  animation-delay: 0.4s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

src/app/shared/components/user-form/user-form.component.ts

@@ -35,10 +35,10 @@ export class UserFormComponent implements OnInit {
 
   ngOnInit(): void {
     this.userForm = this.fb.group({
-      firstname: new FormControl(this.user?.name!.split(' ').slice(0, -1).join(' ') ?? '', [
+      firstname: new FormControl(this.user?.name?.split(' ').slice(0, -1).join(' ') ?? '', [
         Validators.required,
       ]),
-      name: new FormControl(this.user?.name!.split(' ').slice(-1)[0] ?? '', [Validators.required]),
+      name: new FormControl(this.user?.name?.split(' ').slice(-1)[0] ?? '', [Validators.required]),
     });
   }
 

src/app/shared/features/login/login.component.html

@@ -1,5 +1,4 @@
 <form [formGroup]="loginForm" (ngSubmit)="onSubmit()" class="space-y-4">
-
   <!-- Champ Email -->
   <div class="space-y-2">
     <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -7,9 +6,14 @@
     </label>
     <div class="relative">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+        <svg
-          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+          xmlns="http://www.w3.org/2000/svg"
-          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+          class="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
         </svg>
       </div>
       <input
@@ -33,8 +37,17 @@
     </label>
     <div class="relative">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+        <svg
-          <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+            clip-rule="evenodd"
+          />
         </svg>
       </div>
       <input
@@ -53,14 +66,34 @@
         class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
       >
         @if (pwdInput.type === 'password') {
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+            xmlns="http://www.w3.org/2000/svg"
-            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+            <path
+              fill-rule="evenodd"
+              d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+              clip-rule="evenodd"
+            />
           </svg>
         } @else {
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd"/>
+            xmlns="http://www.w3.org/2000/svg"
-            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+              clip-rule="evenodd"
+            />
+            <path
+              d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
+            />
           </svg>
         }
       </button>
@@ -72,7 +105,10 @@
 
   <!-- Mot de passe oublié -->
   <div class="flex justify-end">
-    <a [routerLink]="['/forgot-password']" class="text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition-colors">
+    <a
+      [routerLink]="['/forgot-password']"
+      class="text-sm text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium transition-colors"
+    >
       Mot de passe oublié ?
     </a>
   </div>
@@ -85,9 +121,25 @@
   >
     @if (isLoading()) {
       <span class="flex items-center justify-center gap-2">
-        <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <svg
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          class="animate-spin h-5 w-5"
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
         </svg>
         Connexion en cours...
       </span>
@@ -100,12 +152,14 @@
   <div class="text-center">
     <p class="text-sm text-gray-600 dark:text-gray-400">
       Vous n'avez pas de compte ?
-      <a [routerLink]="['register']" class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors">
+      <a
+        [routerLink]="['register']"
+        class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors"
+      >
         Créez-en un ici
       </a>
     </p>
   </div>
-
 </form>
 
 <!-- Progress bar -->

src/app/shared/features/register/register.component.html

@@ -1,5 +1,4 @@
 <form [formGroup]="registerForm" (ngSubmit)="onSubmit()" class="space-y-4">
-
   <!-- Champ Email -->
   <div class="space-y-2">
     <label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">
@@ -7,9 +6,14 @@
     </label>
     <div class="relative">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+        <svg
-          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z"/>
+          xmlns="http://www.w3.org/2000/svg"
-          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z"/>
+          class="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" />
+          <path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" />
         </svg>
       </div>
       <input
@@ -33,8 +37,17 @@
     </label>
     <div class="relative">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+        <svg
-          <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+            clip-rule="evenodd"
+          />
         </svg>
       </div>
       <input
@@ -53,14 +66,34 @@
         class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
       >
         @if (pwdInput.type === 'password') {
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+            xmlns="http://www.w3.org/2000/svg"
-            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+            <path
+              fill-rule="evenodd"
+              d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+              clip-rule="evenodd"
+            />
           </svg>
         } @else {
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd"/>
+            xmlns="http://www.w3.org/2000/svg"
-            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+              clip-rule="evenodd"
+            />
+            <path
+              d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
+            />
           </svg>
         }
       </button>
@@ -77,8 +110,17 @@
     </label>
     <div class="relative">
       <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
+        <svg
-          <path fill-rule="evenodd" d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z" clip-rule="evenodd"/>
+          xmlns="http://www.w3.org/2000/svg"
+          class="h-5 w-5 text-gray-400"
+          viewBox="0 0 20 20"
+          fill="currentColor"
+        >
+          <path
+            fill-rule="evenodd"
+            d="M5 9V7a5 5 0 0110 0v2a2 2 0 012 2v5a2 2 0 01-2 2H5a2 2 0 01-2-2v-5a2 2 0 012-2zm8-2v2H7V7a3 3 0 016 0z"
+            clip-rule="evenodd"
+          />
         </svg>
       </div>
       <input
@@ -93,23 +135,47 @@
       />
       <button
         type="button"
-        (click)="pwdInputConfirmation.type = pwdInputConfirmation.type === 'password' ? 'text' : 'password'"
+        (click)="
+          pwdInputConfirmation.type = pwdInputConfirmation.type === 'password' ? 'text' : 'password'
+        "
         class="absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
       >
         @if (pwdInputConfirmation.type === 'password') {
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
+            xmlns="http://www.w3.org/2000/svg"
-            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
+            <path
+              fill-rule="evenodd"
+              d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
+              clip-rule="evenodd"
+            />
           </svg>
         } @else {
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
+          <svg
-            <path fill-rule="evenodd" d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z" clip-rule="evenodd"/>
+            xmlns="http://www.w3.org/2000/svg"
-            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"/>
+            class="h-5 w-5"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+              clip-rule="evenodd"
+            />
+            <path
+              d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z"
+            />
           </svg>
         }
       </button>
     </div>
-    @if (registerForm.get('passwordConfirm')?.invalid && registerForm.get('passwordConfirm')?.touched) {
+    @if (
+      registerForm.get('passwordConfirm')?.invalid && registerForm.get('passwordConfirm')?.touched
+    ) {
       <p class="text-xs text-red-500 mt-1">Les mots de passe ne correspondent pas</p>
     }
   </div>
@@ -119,8 +185,16 @@
     <div class="space-y-2">
       <div class="flex gap-1">
         <div class="h-1 flex-1 rounded-full bg-red-500"></div>
-        <div class="h-1 flex-1 rounded-full" [class.bg-yellow-500]="pwd.length >= 8" [class.bg-gray-200]="pwd.length < 8"></div>
+        <div
-        <div class="h-1 flex-1 rounded-full" [class.bg-green-500]="pwd.length >= 10" [class.bg-gray-200]="pwd.length < 10"></div>
+          class="h-1 flex-1 rounded-full"
+          [class.bg-yellow-500]="pwd.length >= 8"
+          [class.bg-gray-200]="pwd.length < 8"
+        ></div>
+        <div
+          class="h-1 flex-1 rounded-full"
+          [class.bg-green-500]="pwd.length >= 10"
+          [class.bg-gray-200]="pwd.length < 10"
+        ></div>
       </div>
       <p class="text-xs text-gray-500 dark:text-gray-400">
         @if (pwd.length < 8) {
@@ -142,9 +216,25 @@
   >
     @if (isLoading()) {
       <span class="flex items-center justify-center gap-2">
-        <svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+        <svg
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+          class="animate-spin h-5 w-5"
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+        >
+          <circle
+            class="opacity-25"
+            cx="12"
+            cy="12"
+            r="10"
+            stroke="currentColor"
+            stroke-width="4"
+          ></circle>
+          <path
+            class="opacity-75"
+            fill="currentColor"
+            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+          ></path>
         </svg>
         Inscription en cours...
       </span>
@@ -157,7 +247,10 @@
   <div class="text-center">
     <p class="text-sm text-gray-600 dark:text-gray-400">
       Vous avez déjà un compte ?
-      <a [routerLink]="['/auth']" class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors">
+      <a
+        [routerLink]="['/auth']"
+        class="text-indigo-600 hover:text-indigo-700 dark:text-indigo-400 dark:hover:text-indigo-300 font-semibold transition-colors"
+      >
         Connectez-vous ici
       </a>
     </p>

src/app/shared/features/update-user/update-user.component.html

@@ -1,38 +1,53 @@
-<div class="flex w-full justify-between items-center mb-6">
-  <span
-    (click)="isCancelEditMode.emit(true)"
-    class="cursor-pointer px-3 py-3 text-white bg-purple-600 w-max flex space-x-2 items-center rounded-full justify-center"
-  >
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
-      <path
-        fill-rule="evenodd"
-        d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-
-    <small>Terminer</small>
-  </span>
-
-  <span
-    (click)="isCancelEditMode.emit(true)"
-    class="cursor-pointer px-3 py-3 text-white bg-red-600 w-max flex space-x-2 items-center rounded-full justify-center"
-  >
-    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" class="size-4">
-      <path
-        fill-rule="evenodd"
-        d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14Zm2.78-4.22a.75.75 0 0 1-1.06 0L8 9.06l-1.72 1.72a.75.75 0 1 1-1.06-1.06L6.94 8 5.22 6.28a.75.75 0 0 1 1.06-1.06L8 6.94l1.72-1.72a.75.75 0 1 1 1.06 1.06L9.06 8l1.72 1.72a.75.75 0 0 1 0 1.06Z"
-        clip-rule="evenodd"
-      />
-    </svg>
-
-    <small>Annuler</small>
-  </span>
-</div>
-
 @if (user != undefined) {
-  <div class="w-full flex flex-col space-y-4">
+  <div class="space-y-6">
+    <!-- Section Avatar -->
+    <div class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in">
+      <div class="flex items-center gap-3 mb-6">
+        <div
+          class="w-10 h-10 bg-indigo-100 dark:bg-indigo-900 rounded-lg flex items-center justify-center"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-6 h-6 text-indigo-600 dark:text-indigo-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm12 12H4l4-8 3 6 2-4 3 6z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Photo de profil</h3>
+      </div>
       <app-user-avatar-form [user]="user" />
+    </div>
+
+    <!-- Section Informations utilisateur -->
+    <div
+      class="bg-white dark:bg-gray-800 rounded-xl shadow-lg p-6 animate-fade-in animation-delay-100"
+    >
+      <div class="flex items-center gap-3 mb-6">
+        <div
+          class="w-10 h-10 bg-purple-100 dark:bg-purple-900 rounded-lg flex items-center justify-center"
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="w-6 h-6 text-purple-600 dark:text-purple-400"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z"
+              clip-rule="evenodd"
+            />
+          </svg>
+        </div>
+        <h3 class="text-xl font-bold text-gray-900 dark:text-white">Informations personnelles</h3>
+      </div>
       <app-user-form [user]="user" />
     </div>
+  </div>
 }

src/app/shared/features/update-user/update-user.component.scss

@@ -0,0 +1,30 @@
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.animate-fade-in {
+  animation: fadeIn 0.6s ease-out;
+}
+
+.animation-delay-100 {
+  animation-delay: 0.1s;
+  opacity: 0;
+  animation-fill-mode: forwards;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}

src/app/shared/features/update-user/update-user.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, output } from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { User } from '@app/shared/models/user';
 import { UserFormComponent } from '@app/shared/components/user-form/user-form.component';
 import { UserAvatarFormComponent } from '@app/shared/components/user-avatar-form/user-avatar-form.component';
@@ -12,6 +12,4 @@ import { UserAvatarFormComponent } from '@app/shared/components/user-avatar-form
 })
 export class UpdateUserComponent {
   @Input({ required: true }) user: User | undefined = undefined;
-  onFormSubmitted = output<any>();
-  isCancelEditMode = output<boolean>();
 }