diff --git a/public/images/hero-banner-2x.webp b/public/images/hero-banner-2x.webp
new file mode 100644
index 0000000..c2d4bbe
Binary files /dev/null and b/public/images/hero-banner-2x.webp differ
diff --git a/public/images/hero-banner.jpg b/public/images/hero-banner.jpg
new file mode 100644
index 0000000..75a28a0
Binary files /dev/null and b/public/images/hero-banner.jpg differ
diff --git a/public/images/hero-banner.png b/public/images/hero-banner.png
new file mode 100644
index 0000000..8c83a90
Binary files /dev/null and b/public/images/hero-banner.png differ
diff --git a/public/images/hero-banner.webp b/public/images/hero-banner.webp
new file mode 100644
index 0000000..cf33fda
Binary files /dev/null and b/public/images/hero-banner.webp differ
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 1c0a537..9783524 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -60,6 +60,21 @@ const featuredMetrics: Record<string, string> = {
     <p class="hero-note">
       {posts.length} posts in English and 中文 · <a href="/rss.xml">RSS</a>
     </p>
+    <div class="hero-banner-card">
+      <picture>
+        <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 1120px) 100vw, 1120px" type="image/webp" />
+        <img
+          class="hero-banner-img"
+          src="/images/hero-banner.jpg"
+          alt="From Code to Production — Systems Architecture & DevOps Infrastructure Ecosystem"
+          width="1024"
+          height="572"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+        />
+      </picture>
+    </div>
   </section>
 
   <section id="featured">
diff --git a/src/pages/zh/index.astro b/src/pages/zh/index.astro
index 7b0af18..aea1940 100644
--- a/src/pages/zh/index.astro
+++ b/src/pages/zh/index.astro
@@ -61,6 +61,21 @@ const featuredMetrics: Record<string, string> = {
     <p class="hero-note">
       共 {posts.length} 篇中文文章 · <a href="/">English</a> · <a href="/rss.xml">RSS</a>
     </p>
+    <div class="hero-banner-card">
+      <picture>
+        <source srcset="/images/hero-banner-2x.webp 2048w, /images/hero-banner.webp 1024w" sizes="(max-width: 1120px) 100vw, 1120px" type="image/webp" />
+        <img
+          class="hero-banner-img"
+          src="/images/hero-banner.jpg"
+          alt="从代码到生产环境 —— 系统架构与 DevOps 运维生态图"
+          width="1024"
+          height="572"
+          loading="eager"
+          fetchpriority="high"
+          decoding="async"
+        />
+      </picture>
+    </div>
   </section>
 
   <section id="featured">
diff --git a/src/styles/global.css b/src/styles/global.css
index b0084fe..ed01ac7 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -537,6 +537,26 @@ pre code {
 .btn:hover { border-color: var(--brand); color: var(--brand); }
 .btn-primary { border-color: var(--brand); color: var(--brand); }
 .hero-note { font-size: 0.82rem; color: var(--faint); margin: 0; }
+.hero-banner-card {
+  margin: 1.75rem 0 0.5rem;
+  border-radius: var(--radius);
+  overflow: hidden;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+.hero-banner-card:hover {
+  border-color: color-mix(in srgb, var(--brand) 40%, var(--border));
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+}
+.hero-banner-img {
+  width: 100%;
+  height: auto;
+  aspect-ratio: 16 / 9;
+  display: block;
+  object-fit: cover;
+}
 
 /* ---------- Featured 2x2 Cyber-Bento Grid ---------- */
 .featured-bento-grid {