From 6c2b99d3feec3dd4798b6e7d15c881af13406b71 Mon Sep 17 00:00:00 2001
From: Rico <rvzelst7@gmail.com>
Date: Wed, 7 Jan 2026 19:23:54 +0100
Subject: [PATCH] style: redesign post list component layout

---
 .../components/posts/listposts.blade.php      | 56 ++++++++++++++-----
 1 file changed, 41 insertions(+), 15 deletions(-)

diff --git a/resources/views/components/posts/listposts.blade.php b/resources/views/components/posts/listposts.blade.php
index dbcb67c..6293ac5 100644
--- a/resources/views/components/posts/listposts.blade.php
+++ b/resources/views/components/posts/listposts.blade.php
@@ -1,28 +1,54 @@
 @use('Carbon\Carbon')
 
 <div class="container flex flex-col items-center justify-center p-4 mx-auto mt-3">
-    <div class="grid w-full grid-cols-1 gap-12 md:grid-cols-2 auto-cols-max">
+    <div class="grid w-full grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-2 items-stretch">
         @foreach ($posts as $post)
             @if ($post->hidden)
                 @continue
             @endif
-            <article
-                class="relative items-center inline-block text-gray-200 border shadow-md bg-stone-800/40 rounded-2xl border-stone-800 hover:border-orange-500/10 hover:shadow-orange-500/10 h-80">
-                <span class="absolute px-1 py-1 text-sm font-medium text-gray-100 rounded-lg top-4 left-4 bg-black/60">
-                    <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
-                </span>
-                <img src="{{ $post->thumbnail }}" alt="Post Thumbnail"
-                    class="object-cover w-full h-48 aspect-video rounded-t-2xl">
-                <div class="p-4">
-                    <h2 class="mb-2 text-xl font-bold line-clamp-1" itemprop="name">{{ $post->title }}</h2>
-                    <p class="text-sm line-clamp-3" itemprop="headline">{{ $post->description }}</p>
+            <article class="flex flex-col h-full overflow-hidden transition-colors duration-300 border shadow-md group bg-stone-800/40 rounded-2xl border-stone-800 hover:border-orange-500/30">
+                <!-- Image Wrapper -->
+                <a href="{{ route('posts.show', $post->slug) }}" class="relative w-full overflow-hidden aspect-[1.91/1] block">
+                    <img 
+                        src="{{ $post->thumbnail }}" 
+                        alt="{{ $post->title }} Thumbnail"
+                        class="object-cover w-full h-full"
+                    >
+                </a>
+                
+                <!-- Content -->
+                <div class="flex flex-col flex-1 p-5">
+                    <!-- Date -->
+                    <div class="mb-2 text-xs font-medium tracking-wider text-orange-400 uppercase">
+                        <abbr itemprop="datePublished">{{ Carbon::parse($post->date)->format('F d, Y') }}</abbr>
+                    </div>
+
+                    <!-- Title -->
+                    <a href="{{ route('posts.show', $post->slug) }}" class="block group-hover:text-orange-400 transition-colors duration-200">
+                        <h2 class="mb-3 text-xl font-bold leading-tight text-gray-100 line-clamp-2" itemprop="name">
+                            {{ $post->title }}
+                        </h2>
+                    </a>
+
+                    <!-- Description -->
+                    <p class="mb-4 text-sm leading-relaxed text-gray-400 line-clamp-3" itemprop="headline">
+                        {{ $post->description }}
+                    </p>
+                    
+                    <!-- Footer / Action -->
+                    <div class="mt-auto pt-4 border-t border-stone-700/50 flex items-center justify-between">
+                         <a href="{{ route('posts.show', $post->slug) }}" itemprop="url" class="inline-flex items-center text-sm font-medium text-orange-400 transition-colors group-hover:text-orange-300">
+                            Read Article
+                            <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 ml-1 transition-transform duration-300 group-hover:translate-x-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
+                            </svg>
+                        </a>
+                    </div>
                 </div>
-                <a href="{{ route('posts.show', $post->slug) }}" itemprop="url"
-                    class="absolute text-sm text-orange-400 bottom-4 right-4 hover:text-orange-600">Read more</a>
             </article>
         @endforeach
     </div>
-    <div class="mt-4">
+    <div class="mt-8">
         {{ $posts->links() }}
     </div>
-</div>
\ No newline at end of file
+</div>