✨ Story 3.3: liste projets vedettes

templates/project-card.php

@@ -0,0 +1,50 @@
+<?php
+/**
+ * Carte projet réutilisable
+ * @param array $project Données du projet
+ */
+
+$title = $project['title'] ?? 'Sans titre';
+$slug = $project['slug'] ?? '#';
+$thumbnail = $project['thumbnail'] ?? 'default-project.svg';
+$technologies = $project['technologies'] ?? [];
+$maxTechs = 4;
+?>
+
+<article class="card-interactive group">
+    <a href="/projet/<?= htmlspecialchars($slug, ENT_QUOTES, 'UTF-8') ?>" class="block">
+        <div class="aspect-thumbnail overflow-hidden">
+            <picture>
+                <source
+                    srcset="/assets/img/projects/<?= htmlspecialchars($thumbnail, ENT_QUOTES, 'UTF-8') ?>"
+                    type="image/webp"
+                >
+                <img
+                    src="/assets/img/projects/<?= htmlspecialchars(str_replace('.webp', '.jpg', $thumbnail), ENT_QUOTES, 'UTF-8') ?>"
+                    alt="Aperçu du projet <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>"
+                    width="400"
+                    height="225"
+                    loading="lazy"
+                    class="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+                    onerror="this.onerror=null;this.src='/assets/img/projects/default-project.svg';"
+                >
+            </picture>
+        </div>
+
+        <div class="card-body">
+            <h3 class="text-lg font-semibold text-text-primary mb-3 group-hover:text-primary transition-colors">
+                <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
+            </h3>
+
+            <div class="flex flex-wrap gap-2">
+                <?php foreach (array_slice($technologies, 0, $maxTechs) as $tech): ?>
+                    <span class="badge"><?= htmlspecialchars($tech, ENT_QUOTES, 'UTF-8') ?></span>
+                <?php endforeach; ?>
+
+                <?php if (count($technologies) > $maxTechs): ?>
+                    <span class="badge badge-muted">+<?= count($technologies) - $maxTechs ?></span>
+                <?php endif; ?>
+            </div>
+        </div>
+    </a>
+</article>