refacto les card items et list

src/app/shared/components/project-list/project-list.component.html

@@ -1,12 +1,41 @@
-<div class="min-h-screen py-4 font-sans">
-  <div class="max-w-4xl max-lg:max-w-2xl max-sm:max-w-sm mx-auto">
-    <h2 class="text-2xl font-bold text-gray-800 mb-8">Explorer les projets</h2>
-    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-      @for (project of projects(); track project) {
-        <app-project-item [project]="project" />
-      } @empty {
-        <p>Aucun projet</p>
-      }
-    </div>
+<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <!-- Grid des projets -->
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+    @for (project of projects(); track project.id) {
+      <app-project-item [project]="project" />
+    } @empty {
+      <!-- Message si aucun projet -->
+      <div class="col-span-full">
+        <div
+          class="bg-gradient-to-r from-gray-50 to-gray-100 dark:from-gray-800 dark:to-gray-700 rounded-xl p-12 text-center"
+        >
+          <div
+            class="inline-flex w-20 h-20 bg-white dark:bg-gray-600 rounded-full items-center justify-center mb-6 shadow-lg"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              class="w-10 h-10 text-gray-400 dark:text-gray-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"
+              />
+            </svg>
+          </div>
+          <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-3">
+            Aucun projet disponible
+          </h3>
+          <p class="text-gray-600 dark:text-gray-300 max-w-md mx-auto">
+            Il n'y a pas encore de projets à explorer. Revenez plus tard pour découvrir de nouvelles
+            réalisations !
+          </p>
+        </div>
+      </div>
+    }
   </div>
 </div>

src/app/shared/components/project-list/project-list.component.scss

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