landing: add MPCP vs traditional payments diagram after hero

Made-with: Cursor

Author: NAOR YUVAL

.github/workflows/deploy.yml

@@ -60,6 +60,7 @@ jobs:
         run: |
           mkdir -p site
           cp index.html site/
+          cp -r assets site/
           cp -r _site_spec site/spec
           cp -r _site_reference site/reference
           touch site/.nojekyll

assets/mpcp-vs-traditional-payments.svg

@@ -108,6 +108,19 @@
       letter-spacing: -0.01em;
     }
 
+    .diagram {
+      max-width: 720px;
+      margin: 0 auto;
+      padding: 0 1.5rem 3rem;
+      text-align: center;
+    }
+    .diagram img {
+      max-width: 100%;
+      height: auto;
+      border-radius: 8px;
+      border: 1px solid var(--border);
+    }
+
     /* Story sections */
     main {
       max-width: 720px;
@@ -244,6 +257,10 @@ <h1>Machine Payment Control Protocol (MPCP)</h1>
     <p class="tagline">The authorization layer for machine commerce.</p>
   </header>
 
+  <div class="diagram">
+    <img src="/assets/mpcp-vs-traditional-payments.svg" alt="MPCP vs traditional payments" width="700" height="350">
+  </div>
+
   <main>
     <section>
       <h2>The problem</h2>