diff --git a/website/pages/index.tsx b/website/pages/index.tsx
index 5991cdc..7340f31 100644
--- a/website/pages/index.tsx
+++ b/website/pages/index.tsx
@@ -136,16 +136,77 @@ export default function Home() {
           </div>
         </section>
 
-        {/* Second Screenshot */}
-        <section className={styles.screenshotSection}>
-          <div className={styles.screenshotWrap}>
-            <Image
-              src="/screenshots/screens_page.png"
-              alt="SpecWright — Specification viewer with screen definitions"
-              width={1200}
-              height={750}
-              className={styles.screenshot}
-            />
+        {/* Product Showcase */}
+        <section className={styles.showcase}>
+          <div className={styles.showcaseRow}>
+            <div className={styles.showcaseImage}>
+              <Image
+                src="/screenshots/project_page.png"
+                alt="SpecWright — Project dashboard"
+                width={1200}
+                height={750}
+              />
+            </div>
+            <div className={styles.showcaseText}>
+              <h3>All your projects at a glance</h3>
+              <p>
+                Track every project from a single dashboard. See progress, status, and jump into any
+                spec instantly.
+              </p>
+            </div>
+          </div>
+
+          <div className={styles.showcaseRowReverse}>
+            <div className={styles.showcaseImage}>
+              <Image
+                src="/screenshots/screens_page.png"
+                alt="SpecWright — Screen specifications"
+                width={1200}
+                height={750}
+              />
+            </div>
+            <div className={styles.showcaseText}>
+              <h3>Detailed screen specifications</h3>
+              <p>
+                Every screen defined with wireframes, interactions, and edge cases — before a single
+                line of code is written.
+              </p>
+            </div>
+          </div>
+
+          <div className={styles.showcaseRow}>
+            <div className={styles.showcaseImage}>
+              <Image
+                src="/screenshots/technology_choices.png"
+                alt="SpecWright — Technology choices with rationale"
+                width={1200}
+                height={750}
+              />
+            </div>
+            <div className={styles.showcaseText}>
+              <h3>Informed technology decisions</h3>
+              <p>
+                Compare libraries and frameworks with pros, cons, and rationale. Every choice
+                documented and justified.
+              </p>
+            </div>
+          </div>
+
+          <div className={styles.showcaseRowReverse}>
+            <div className={styles.showcaseImage}>
+              <Image
+                src="/screenshots/acceptance_criteria.png"
+                alt="SpecWright — Acceptance criteria with job stories"
+                width={1200}
+                height={750}
+              />
+            </div>
+            <div className={styles.showcaseText}>
+              <h3>Clear acceptance criteria</h3>
+              <p>
+                Job stories with testable conditions so every feature has a clear definition of done.
+              </p>
+            </div>
           </div>
         </section>
 
diff --git a/website/styles/home.module.css b/website/styles/home.module.css
index 8aee0f9..5db3d50 100644
--- a/website/styles/home.module.css
+++ b/website/styles/home.module.css
@@ -258,6 +258,64 @@
   margin: 0;
 }
 
+/* ── Showcase ── */
+.showcase {
+  max-width: 1000px;
+  margin: 0 auto;
+  padding: 2rem 2rem 4rem;
+  display: flex;
+  flex-direction: column;
+  gap: 4rem;
+}
+
+.showcaseRow {
+  display: flex;
+  align-items: center;
+  gap: 3rem;
+}
+
+.showcaseRowReverse {
+  composes: showcaseRow;
+  flex-direction: row-reverse;
+}
+
+.showcaseImage {
+  flex: 3;
+  min-width: 0;
+  border-radius: 16px;
+  overflow: hidden;
+  box-shadow:
+    0 0 0 1px rgba(255, 255, 255, 0.06),
+    0 25px 80px -12px rgba(99, 102, 241, 0.15),
+    0 8px 32px -8px rgba(0, 0, 0, 0.5);
+}
+
+.showcaseImage img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.showcaseText {
+  flex: 2;
+  min-width: 0;
+}
+
+.showcaseText h3 {
+  font-size: 1.25rem;
+  font-weight: 800;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.5rem;
+  color: #fafafa;
+}
+
+.showcaseText p {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #71717a;
+  margin: 0;
+}
+
 /* ── Workflow ── */
 .workflow {
   max-width: 640px;
@@ -407,6 +465,21 @@
     padding: 2rem 1.5rem 3rem;
   }
 
+  .showcase {
+    padding: 1.5rem 1.5rem 3rem;
+    gap: 3rem;
+  }
+
+  .showcaseRow,
+  .showcaseRowReverse {
+    flex-direction: column;
+    gap: 1.5rem;
+  }
+
+  .showcaseText {
+    text-align: center;
+  }
+
   .workflow {
     padding: 3rem 1.5rem;
   }