ux: add explainer section to pipeline demo page

Author: jimmdd

client/src/App.css

@@ -181,6 +181,73 @@ body::before {
   font-size: 0.85rem;
 }
 
+/* ---- Demo Explainer ---- */
+.demo-explainer {
+  background: var(--bg-glass);
+  backdrop-filter: blur(20px);
+  border: 1px solid var(--border-dim);
+  border-radius: 16px;
+  padding: 1.2rem 1.5rem;
+  margin-bottom: 1.2rem;
+}
+
+.demo-explainer h2 {
+  font-size: 1rem;
+  color: var(--text);
+  margin-bottom: 0.5rem;
+}
+
+.demo-explainer>p {
+  font-size: 0.85rem;
+  color: var(--text-secondary);
+  line-height: 1.5;
+  margin-bottom: 0.8rem;
+}
+
+.explainer-steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+  margin-bottom: 0.8rem;
+}
+
+.explainer-step {
+  display: flex;
+  align-items: center;
+  gap: 0.6rem;
+  font-size: 0.82rem;
+  color: var(--text);
+}
+
+.explainer-num {
+  width: 22px;
+  height: 22px;
+  border-radius: 50%;
+  background: rgba(52, 211, 153, 0.12);
+  color: var(--accent);
+  font-size: 0.7rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.explainer-cta {
+  font-size: 0.8rem;
+  color: var(--text-secondary);
+}
+
+.explainer-cta a {
+  color: var(--accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.explainer-cta a:hover {
+  text-decoration: underline;
+}
+
 /* ---- Pipeline Visualization ---- */
 .pipeline-section {
   margin-bottom: 1.2rem;

client/src/App.tsx

@@ -784,6 +784,41 @@ function App() {
         </p>
       </header>
 
+      {/* Intro Explainer */}
+      <section className="demo-explainer">
+        <h2>🎯 What is this?</h2>
+        <p>
+          This demo runs the <strong>full lifecycle</strong> of a TaskForest bounty in one click:
+          a poster creates a job with real SOL escrowed, workers bid gaslessly on an Ephemeral Rollup,
+          the winner locks stake, submits proof, and gets paid on-chain.
+        </p>
+        <div className="explainer-steps">
+          <div className="explainer-step">
+            <span className="explainer-num">1</span>
+            <span><strong>Create</strong> — Post job + escrow 0.05 SOL reward into PDA</span>
+          </div>
+          <div className="explainer-step">
+            <span className="explainer-num">2</span>
+            <span><strong>Delegate</strong> — Push job to MagicBlock ER for fast bidding</span>
+          </div>
+          <div className="explainer-step">
+            <span className="explainer-num">3</span>
+            <span><strong>Bid</strong> — Worker bids gaslessly on ER (&lt;50ms, 0 gas)</span>
+          </div>
+          <div className="explainer-step">
+            <span className="explainer-num">4</span>
+            <span><strong>Close</strong> — Select winner, commit result back to L1</span>
+          </div>
+          <div className="explainer-step">
+            <span className="explainer-num">5</span>
+            <span><strong>Stake → Prove → Settle</strong> — Lock deposit, submit proof, get paid</span>
+          </div>
+        </div>
+        <p className="explainer-cta">
+          Want to try it with two wallets? <a href="/board">Go to the Job Board →</a>
+        </p>
+      </section>
+
       {/* Pipeline Visualization */}
       <section className="pipeline-section">
         <div className="pipeline-container">