style: enhance post card design and refine footer

partials/post-card.hbs

@@ -1,8 +1,8 @@
-<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group">
-    <a href="{{url}}" class="block">
+<article class="post-grid-item opacity-0 relative bg-[var(--bg-secondary)] rounded-lg shadow-lg overflow-hidden group h-80">
+    <a href="{{url}}" class="block h-full relative">
         {{#if feature_image}}
             <img
-                class="w-full h-72 object-cover transition-transform duration-300 ease-in-out group-hover:scale-105"
+                class="w-full h-full object-cover transition-transform duration-500 ease-in-out group-hover:scale-110"
                 src="{{img_url feature_image size="m"}}"
                 srcset="{{img_url feature_image size="s"}} 400w,
                         {{img_url feature_image size="m"}} 600w,
@@ -13,7 +13,22 @@
                 loading="lazy"
             >
         {{else}}
-            <div class="w-full h-72 flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
+            <div class="w-full h-full flex items-center justify-center bg-[var(--bg-tertiary)] text-[var(--text-tertiary)] text-2xl">No Image</div>
         {{/if}}
+
+        {{!-- Gradient Overlay --}}
+        <div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-60 group-hover:opacity-90 transition-opacity duration-300"></div>
+
+        {{!-- Content Overlay --}}
+        <div class="absolute inset-0 p-6 flex flex-col justify-end transform transition-transform duration-300 group-hover:translate-y-[-4px]">
+            {{#if primary_tag}}
+                <span class="text-[var(--brand-primary)] text-xs uppercase tracking-widest font-bold mb-2 block">
+                    {{primary_tag.name}}
+                </span>
+            {{/if}}
+            <h2 class="text-white text-xl md:text-2xl font-bold leading-tight line-clamp-2">
+                {{title}}
+            </h2>
+        </div>
     </a>
 </article>