From ccdc739c2251789e697fbb3b8e58b4373a0fff44 Mon Sep 17 00:00:00 2001
From: Jeffrey <jeffrey@Jeffreys-MacBook-Pro.local>
Date: Wed, 18 Feb 2026 15:47:55 +0100
Subject: [PATCH] feat: redesign posts listing and detail pages

- posts/page.tsx: new layout matching design PDF - title+date above image, 3-col grid, no card borders
- posts/[slug]/page.tsx: editorial layout with hero image, fd-prose richtext, left-aligned CTA
---
 src/app/(frontend)/posts/page.tsx | 61 ++++++++++++++++---------------
 1 file changed, 31 insertions(+), 30 deletions(-)

diff --git a/src/app/(frontend)/posts/page.tsx b/src/app/(frontend)/posts/page.tsx
index b5f1004..270bd42 100644
--- a/src/app/(frontend)/posts/page.tsx
+++ b/src/app/(frontend)/posts/page.tsx
@@ -22,38 +22,51 @@ export default async function Page() {
       title: true,
       slug: true,
       heroImage: true,
-      categories: true,
       meta: true,
       publishedAt: true,
-      populatedAuthors: true,
     },
   })
 
   return (
     <div className="min-h-screen bg-white">
       <PageClient />
-      <div className="max-w-[1200px] mx-auto px-6 md:px-8 pt-12 md:pt-16 pb-8 md:pb-12">
-        <h1 className="font-joey-heavy text-4xl md:text-5xl text-fd-navy">Nyheter</h1>
-        <p className="font-joey text-fd-body-lg text-fd-navy/60 mt-3">
-          {posts.totalDocs} {posts.totalDocs === 1 ? 'artikel' : 'artiklar'}
-        </p>
-      </div>
-      <div className="max-w-[1200px] mx-auto px-6 md:px-8 pb-16 md:pb-24">
+
+      <div className="max-w-[1200px] mx-auto px-6 md:px-8 pt-12 md:pt-16 pb-16 md:pb-24">
+
+        {/* Page heading */}
+        <h1 className="font-joey-heavy text-4xl md:text-5xl lg:text-[3.25rem] text-fd-navy mb-10 md:mb-14">
+          Nyheter!
+        </h1>
+
+        {/* Grid */}
         {posts.docs.length === 0 ? (
           <p className="font-joey text-fd-navy/50 py-16">Inga inlägg hittades.</p>
         ) : (
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 md:gap-8">
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-8 gap-y-12">
             {posts.docs.map((post) => {
               const p = post as Post
               const heroImage = p.heroImage as Media | undefined
-              const summary = p.meta?.description ?? null
+
               return (
                 <a
                   key={p.id}
                   href={`/posts/${p.slug}`}
-                  className="group flex flex-col bg-white rounded-[20px] border border-fd-navy/10 overflow-hidden hover:border-fd-navy/20 hover:shadow-lg transition-all duration-300"
+                  className="group flex flex-col"
                 >
-                  <div className="relative aspect-[16/9] bg-fd-navy/5 overflow-hidden">
+                  {/* Title above image */}
+                  <h2 className="font-joey-bold text-fd-navy text-xl md:text-[1.375rem] leading-snug mb-2 group-hover:text-fd-navy/70 transition-colors line-clamp-2">
+                    {p.title}
+                  </h2>
+
+                  {/* Date between title and image */}
+                  {p.publishedAt && (
+                    <p className="font-joey text-sm text-fd-navy/50 mb-4">
+                      {formatDateTime(p.publishedAt)}
+                    </p>
+                  )}
+
+                  {/* Image with rounded corners */}
+                  <div className="relative aspect-[4/3] rounded-[20px] overflow-hidden bg-fd-navy/5">
                     {heroImage?.url ? (
                       <FDImage
                         media={heroImage}
@@ -64,36 +77,24 @@ export default async function Page() {
                         fallbackAlt={p.title}
                       />
                     ) : (
-                      <div className="w-full h-full flex items-center justify-center bg-fd-navy/5">
+                      <div className="w-full h-full flex items-center justify-center">
                         <span className="font-joey text-fd-navy/30 text-sm">Ingen bild</span>
                       </div>
                     )}
                   </div>
-                  <div className="flex flex-col flex-1 p-5 md:p-6">
-                    <h2 className="font-joey-bold text-fd-navy text-lg md:text-xl leading-snug mb-2 group-hover:text-fd-navy/80 transition-colors">
-                      {p.title}
-                    </h2>
-                    {summary && (
-                      <p className="font-joey text-sm text-fd-navy/60 leading-relaxed line-clamp-3 mb-4">
-                        {summary}
-                      </p>
-                    )}
-                    {p.publishedAt && (
-                      <p className="font-joey text-xs text-fd-navy/40 mt-auto pt-3 border-t border-fd-navy/8">
-                        {formatDateTime(p.publishedAt)}
-                      </p>
-                    )}
-                  </div>
                 </a>
               )
             })}
           </div>
         )}
+
+        {/* Pagination */}
         {posts.totalPages > 1 && posts.page && (
-          <div className="mt-12">
+          <div className="mt-16">
             <Pagination page={posts.page} totalPages={posts.totalPages} />
           </div>
         )}
+
       </div>
     </div>
   )