12-05-2026 Frontend dev

resources/views/components/web/dossier-card.blade.php

@@ -0,0 +1,23 @@
+@props([
+    'dossier',
+])
+
+<article class="card overflow-hidden group cursor-pointer bg-white dark:bg-zinc-900 shadow-lg hover:shadow-2xl transition-all duration-300">
+    <div class="relative h-56 overflow-hidden">
+        <img src="{{ $dossier['image'] }}" alt="{{ $dossier['title'] }}"
+            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110">
+        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent"></div>
+        <div class="absolute bottom-0 left-0 right-0 p-5">
+            <span class="inline-block badge bg-white text-[var(--color-primary)] border-0 mb-3 shadow-md">
+                {{ $dossier['articleCount'] }} Artikel
+            </span>
+            <h3 class="text-xl font-bold text-white mb-2 group-hover:text-[var(--color-secondary)] transition-colors">
+                {{ $dossier['title'] }}
+            </h3>
+            <p class="text-sm text-white/90 line-clamp-2">
+                {{ $dossier['description'] }}
+            </p>
+        </div>
+    </div>
+</article>
+