From cdf15f8988cf242a6d08197feb9eb6f39fc641de Mon Sep 17 00:00:00 2001
From: Kunthawat Greethong <kunthawat@gmailcom>
Date: Thu, 30 Apr 2026 13:51:52 +0700
Subject: [PATCH] feat: add hero_image display with Image component

Show actual hero image when available, fallback to code window otherwise.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/pages/index.astro | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index ba68fca..bdd3cb4 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -1,6 +1,7 @@
 ---
 import { getEmDashEntry } from "emdash";
 import { PortableText } from "emdash/ui";
+import { Image } from "emdash/ui";
 import Base from "../layouts/Base.astro";
 
 const { entry: homepage } = await getEmDashEntry("homepage", "main");
@@ -36,8 +37,11 @@ const d = homepage.data;
           </a>
         </div>
       </div>
-      <div class="hero-visual">
-        <div class="code-window">
+      <div class="hero-visual" {...homepage.edit.hero_image}>
+        {d.hero_image?.src ? (
+          <Image image={d.hero_image} />
+        ) : (
+          <div class="code-window">
           <div class="code-header">
             <span class="dot red"></span>
             <span class="dot yellow"></span>
@@ -57,6 +61,7 @@ const d = homepage.data;
   ],
 &#125;);</code></pre>
         </div>
+        )}
       </div>
     </section>