Added featured cases to index, other improvements

layouts/_default/list.html

@@ -26,8 +26,19 @@
          data-description="{{ if .Description }}{{ .Description }}{{ else if .Summary }}{{ .Summary | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" | truncate 200 }}{{ else }}{{ .Content | plainify | replaceRE "^### \\*\\*Summary\\*\\*\\s*" "" | truncate 200 }}{{ end }}"
          data-tags="{{ if .Params.tags }}{{ delimit .Params.tags "," }}{{ end }}"
          data-date="{{ .Date.Format "2006-01-02" }}">
-        {{ if .Params.image }}
-        <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo" />
+        {{ if .Params.banner }}
+        <a href="{{ .RelPermalink }}" class="card-banner-link">
+            <div class="card-banner">
+                <img src="{{ .Params.banner }}" alt="{{ .Title }} banner" class="case-banner" />
+                {{ if .Params.image }}
+                <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo-overlay" />
+                {{ end }}
+            </div>
+        </a>
+        {{ else if .Params.image }}
+        <a href="{{ .RelPermalink }}" class="card-logo-link">
+            <img src="{{ .Params.image }}" alt="{{ .Title }} logo" class="case-logo" />
+        </a>
         {{ end }}
         <h3><a href="{{ .RelPermalink }}" class="card-title-link">{{ .Title }}</a></h3>
         {{ if .Description }}
@@ -159,6 +170,52 @@
     display: none;
 }
 
+.card-banner {
+    position: relative;
+    margin-bottom: 1rem;
+    border-radius: 12px;
+    overflow: hidden;
+    aspect-ratio: 16/9;
+}
+
+.case-banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    display: block;
+}
+
+.case-logo-overlay {
+    position: absolute;
+    bottom: 16px;
+    right: 16px;
+    width: 72px;
+    height: 72px;
+    object-fit: contain;
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 12px;
+    padding: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.card-banner-link, .card-logo-link {
+    display: block;
+    text-decoration: none;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.card-banner-link:hover, .card-logo-link:hover {
+    transform: translateY(-2px);
+}
+
+.card-banner-link:hover .card-banner {
+    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
+}
+
+.card-logo-link:hover .case-logo {
+    transform: scale(1.05);
+}
+
 @media (max-width: 768px) {
     .filter-controls {
         margin-bottom: 32px;