From f86f73b128875fa5fbec01065930c5fb1f7c5eb4 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 7 Jul 2026 19:10:32 +0200
Subject: [PATCH] Add image preview to news listing cards

---
 src/app/news/page.tsx | 29 ++++++++++++++++++++++-------
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 556229ec..79f54558 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -45,13 +45,28 @@ export default async function NewsPage() {
                 className="card hover"
                 style={{ display: "flex", flexDirection: "column" }}
               >
-                <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
-                  <Link href={`/news/${a.slug}`}>{a.title}</Link>
-                </h3>
-                <p className="muted" style={{ margin: "0 0 0.5rem", fontSize: "0.85rem" }}>
-                  {formatDate(a.createdAt)}
-                </p>
-                <p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
+                {a.image ? (
+                  <img
+                    src={a.image}
+                    alt=""
+                    className="w-full rounded-t-lg"
+                    style={{ aspectRatio: "16/9", objectFit: "cover" }}
+                  />
+                ) : (
+                  <div
+                    className="w-full rounded-t-lg"
+                    style={{ aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
+                  />
+                )}
+                <div style={{ padding: "0.75rem" }}>
+                  <h3 style={{ margin: "0 0 0.25rem", fontSize: "1rem" }}>
+                    <Link href={`/news/${a.slug}`}>{a.title}</Link>
+                  </h3>
+                  <p className="muted" style={{ margin: "0 0 0.5rem", fontSize: "0.85rem" }}>
+                    {formatDate(a.createdAt)}
+                  </p>
+                  <p style={{ margin: 0 }}>{excerpt(a.shortStory, 200)}</p>
+                </div>
               </article>
             ))}
           </div>