From 63e1e6a44e1ded1db79df52f72126a263a9e6c26 Mon Sep 17 00:00:00 2001
From: openhands <openhands@all-hands.dev>
Date: Tue, 7 Jul 2026 19:17:22 +0200
Subject: [PATCH] Add themed header bar and image preview to news article cards

---
 src/app/news/page.tsx | 33 ++++++++++++++++++++-------------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/app/news/page.tsx b/src/app/news/page.tsx
index 79f545587d..f9d01ebb8d 100644
--- a/src/app/news/page.tsx
+++ b/src/app/news/page.tsx
@@ -40,34 +40,41 @@ export default async function NewsPage() {
         ) : (
           <div className="card-grid sm-2 lg-3" style={{ padding: "1rem" }}>
             {articles.map((a) => (
-              <article
+              <Link
                 key={a.slug}
+                href={`/news/${a.slug}`}
                 className="card hover"
-                style={{ display: "flex", flexDirection: "column" }}
+                style={{ display: "flex", flexDirection: "column", textDecoration: "none" }}
               >
+                <div
+                  style={{
+                    background: "linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 5%, var(--color-surface)))",
+                    borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 8%, transparent)",
+                    padding: "0.6rem 0.75rem",
+                    fontSize: "0.78rem",
+                    color: "var(--color-text-muted)",
+                  }}
+                >
+                  📰 {t("title")} &middot; {formatDate(a.createdAt)}
+                </div>
                 {a.image ? (
                   <img
                     src={a.image}
                     alt=""
-                    className="w-full rounded-t-lg"
-                    style={{ aspectRatio: "16/9", objectFit: "cover" }}
+                    style={{ width: "100%", aspectRatio: "16/9", objectFit: "cover" }}
                   />
                 ) : (
                   <div
-                    className="w-full rounded-t-lg"
-                    style={{ aspectRatio: "16/9", backgroundColor: "var(--color-surface)" }}
+                    style={{ width: "100%", 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 style={{ margin: "0 0 0.25rem", fontSize: "1rem", color: "var(--color-text)" }}>
+                    {a.title}
                   </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>
+                  <p style={{ margin: 0, color: "var(--color-text)" }}>{excerpt(a.shortStory, 200)}</p>
                 </div>
-              </article>
+              </Link>
             ))}
           </div>
         )}