74 lines
2.7 KiB
HTML
74 lines
2.7 KiB
HTML
@if (project) {
|
|
<div
|
|
class="group bg-white dark:bg-gray-800 rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-2xl hover:-translate-y-2 animate-fade-in"
|
|
>
|
|
<!-- Image du projet -->
|
|
<div class="relative h-48 overflow-hidden bg-gray-100 dark:bg-gray-700">
|
|
@if (project.fichier) {
|
|
<img
|
|
alt="{{ project.nom }}"
|
|
class="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-110"
|
|
src="{{ environment.baseUrl }}/api/files/projets/{{ project.id }}/{{ project.fichier }}"
|
|
loading="lazy"
|
|
/>
|
|
} @else {
|
|
<img
|
|
alt="{{ project.nom }}"
|
|
class="w-full h-full object-cover object-center transition-transform duration-500 group-hover:scale-110 opacity-60"
|
|
src="https://api.dicebear.com/9.x/shapes/svg?seed={{ project.nom }}"
|
|
loading="lazy"
|
|
/>
|
|
}
|
|
|
|
<!-- Overlay gradient au hover -->
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<div class="p-6 space-y-4">
|
|
<!-- Titre -->
|
|
<h3
|
|
class="text-xl font-bold text-gray-900 dark:text-white line-clamp-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors"
|
|
>
|
|
{{ project.nom }}
|
|
</h3>
|
|
|
|
<!-- Description -->
|
|
<p class="text-sm text-gray-600 dark:text-gray-300 line-clamp-3">
|
|
{{ project.description || 'Aucune description disponible.' }}
|
|
</p>
|
|
|
|
<!-- Lien vers le projet -->
|
|
@if (project.lien) {
|
|
<a
|
|
[href]="project.lien"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
class="inline-flex items-center gap-2 text-indigo-600 dark:text-indigo-400 hover:text-indigo-700 dark:hover:text-indigo-300 font-medium text-sm transition-all duration-200 group/link"
|
|
>
|
|
<span>Explorer le projet</span>
|
|
<svg
|
|
class="w-4 h-4 transition-transform duration-200 group-hover/link:translate-x-1"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
fill="none"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
>
|
|
<path d="M5 12h14"></path>
|
|
<path d="M12 5l7 7-7 7"></path>
|
|
</svg>
|
|
</a>
|
|
}
|
|
</div>
|
|
|
|
<!-- Bordure animée au hover -->
|
|
<div
|
|
class="absolute inset-0 border-2 border-transparent group-hover:border-indigo-500 rounded-xl transition-all duration-300 pointer-events-none"
|
|
></div>
|
|
</div>
|
|
}
|