feat: add motivation cards and proposition box to enhance user engagement and clarity

Author: yyyyyt123

docs/src/app/page.module.css

@@ -294,6 +294,70 @@
   margin: 0 0 40px;
 }
 
+.motivationGrid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 18px;
+  margin-bottom: 24px;
+}
+
+.motivationCard {
+  background: #ffffff;
+  border: 1px solid #cfd9ea;
+  border-radius: 14px;
+  padding: 22px 24px;
+  box-shadow: 0 2px 8px rgba(30, 64, 175, 0.04);
+}
+
+.motivationCardTag {
+  display: inline-block;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: #1e3a8a;
+  background: #dbeafe;
+  border: 1px solid #93c5fd;
+  border-radius: 999px;
+  padding: 4px 10px;
+  margin-bottom: 12px;
+}
+
+.motivationCardTitle {
+  font-size: 1rem;
+  font-weight: 700;
+  color: #0f172a;
+  margin: 0 0 8px;
+  line-height: 1.35;
+}
+
+.motivationCardDesc {
+  margin: 0;
+  font-size: 0.92rem;
+  color: #475569;
+  line-height: 1.65;
+}
+
+.propositionBox {
+  background: linear-gradient(135deg, rgba(29, 78, 216, 0.05) 0%, rgba(30, 64, 175, 0.08) 100%);
+  border: 1px solid rgba(29, 78, 216, 0.2);
+  border-left: 4px solid #1d4ed8;
+  border-radius: 10px;
+  padding: 18px 22px;
+  margin-bottom: 40px;
+}
+
+.propositionBox p {
+  margin: 0;
+  font-size: 0.975rem;
+  color: #1e3a8a;
+  line-height: 1.7;
+}
+
+.propositionBox strong {
+  color: #1e3a8a;
+}
+
 .archImgWrap {
   border-radius: 14px;
   overflow: hidden;
@@ -651,6 +715,10 @@
     grid-template-columns: 1fr;
   }
 
+  .motivationGrid {
+    grid-template-columns: 1fr;
+  }
+
   .pipelineGrid {
     grid-template-columns: 1fr;
   }

docs/src/app/page.tsx

@@ -88,6 +88,27 @@ const pipelineStages = [
   },
 ];
 
+const motivationCards = [
+  {
+    tag: 'Env-Grounded Eval',
+    title: 'Static Eval Is Insufficient',
+    description:
+      'Agents must interact with live network state to verify hypotheses — static eval is insufficient.',
+  },
+  {
+    tag: 'Non-Reproducible Faults',
+    title: 'No Controlled Baseline Exists',
+    description:
+      'Real DCN incidents occur once and cannot be re-staged — no controlled baseline exists.',
+  },
+  {
+    tag: 'Long Dev Cycles',
+    title: 'Trial-and-Error Costs Mount',
+    description:
+      'Without a replayable testbed, comparing strategies is slow — trial-and-error costs mount.',
+  },
+];
+
 const benchmarkCards = [
   {
     src: '/assets/benchmark/fig_avg_score.png',
@@ -197,8 +218,25 @@ export default function HomePage() {
           <div className={styles.sectionLabel}>Research-Industry Gap</div>
           <h2 className={styles.sectionTitle}>Agentic RCA lacks production-grade evaluation</h2>
           <p className={styles.sectionDesc}>
-            Despite Agentic RCA progress, 71% of large enterprises hesitate to fully automate network operations [1]. NetOpsBench bridges this gap by providing an evidence-oriented, reproducible benchmark for LLM-driven diagnosis.
+            Despite Agentic RCA progress, 71% of large enterprises hesitate to fully automate
+            network operations [1]. Three structural barriers block principled evaluation:
           </p>
+          <div className={styles.motivationGrid}>
+            {motivationCards.map((card) => (
+              <article key={card.tag} className={styles.motivationCard}>
+                <div className={styles.motivationCardTag}>{card.tag}</div>
+                <h3 className={styles.motivationCardTitle}>{card.title}</h3>
+                <p className={styles.motivationCardDesc}>{card.description}</p>
+              </article>
+            ))}
+          </div>
+          <div className={styles.propositionBox}>
+            <p>
+              <strong>NetOpsBench</strong> provides controlled, reproducible DCN fault environments
+              with <strong>localization-first scoring</strong> accounting for physical equivalences
+              — enabling principled, repeatable agent evaluation.
+            </p>
+          </div>
           <div className={styles.archImgWrap}>
             <img
               className={styles.archImg}