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

<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">
          <!-- Overlay gradient -->
          <div class="absolute inset-0 bg-gradient-to-b from-transparent to-black/30"></div>

          <!-- Bouton retour -->
          <div class="relative z-10 p-4 flex justify-between items-start">
            <a
              [routerLink]="['/profiles']"
              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="w-6 h-6 text-white group-hover:text-white transition-transform group-hover:-translate-x-1"
              >
                <title>Retour</title>
                <path
                  fill-rule="evenodd"
                  d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25Zm-4.28 9.22a.75.75 0 0 0 0 1.06l3 3a.75.75 0 1 0 1.06-1.06l-1.72-1.72h5.69a.75.75 0 0 0 0-1.5h-5.69l1.72-1.72a.75.75 0 0 0-1.06-1.06l-3 3Z"
                  clip-rule="evenodd"
                />
              </svg>
            </a>

            <!-- 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="w-5 h-5 md:w-6 md:h-6 text-purple-300"
                >
                  <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>

        <!-- Avatar positionné sur le bord de la bannière -->
        <div class="relative -mt-16 md:-mt-20 px-4 md:px-8 pb-6">
          <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-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 }}"
                      loading="lazy"
                    />
                  } @else {
                    <img
                      alt="{{ user().username }}"
                      class="object-cover w-full h-full"
                      src="https://api.dicebear.com/9.x/adventurer/svg?seed={{ user().username }}"
                      loading="lazy"
                    />
                  }
                </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>

            <!-- Nom et profession -->
            <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 }}
                </h1>
              } @else if (user().username) {
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                  {{ user().username }}
                </h1>
              } @else {
                <h1 class="text-2xl md:text-3xl font-bold text-gray-900 dark:text-white mb-1">
                  {{ user().email }}
                </h1>
              }

              <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-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">
            <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>
            } @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
                compétences. N'hésitez pas à me contacter pour en savoir plus sur mon parcours et
                mes domaines d'intervention.
              </p>
            }
          </div>

          <!-- 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">
              <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="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>

        <!-- 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">
            <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>
            <p class="text-gray-700 dark:text-gray-300 leading-relaxed text-base">
              {{ profile().apropos }}
            </p>
          </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">
            <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
            </h2>
            <app-project-list [userProjectId]="profile().utilisateur" />
          </div>
        </div>
      </div>
    </div>
  </div>
</section>