Update images

Author: math280h

README.md

@@ -18,11 +18,15 @@
 
 <table>
   <tr>
-    <td valign="top" width="50%">
-      <img src="./docs/assets/vscode.png" alt="VSCode Extension example 1" width="100%" />
+    <th align="center" width="50%">Without safe-pkgs</th>
+    <th align="center" width="50%">With safe-pkgs</th>
+  </tr>
+  <tr>
+    <td align="center" valign="top">
+      <img src="./docs/assets/vscode.png" alt="AI agent adding a package without safe-pkgs — no safety check performed" width="100%" />
     </td>
-    <td valign="top" width="50%">
-      <img src="./docs/assets/vscode2.png" alt="VSCode Extension example 2" width="100%" />
+    <td align="center" valign="top">
+      <img src="./docs/assets/vscode2.png" alt="AI agent blocked by safe-pkgs — risk level, CVEs, and reasons surfaced before install" width="100%" />
     </td>
   </tr>
 </table>

docs/assets/vscode.png

@@ -99,9 +99,15 @@ hide:
     <p class="hero-eyebrow">In-editor flow</p>
     <h3>What usage looks like</h3>
   </div>
-  <div class="image-grid">
-    <img src="./assets/vscode.png" alt="safe-pkgs VS Code example result" loading="lazy" />
-    <img src="./assets/vscode2.png" alt="safe-pkgs VS Code example check flow" loading="lazy" />
+  <div class="comparison-grid">
+    <figure>
+      <figcaption>Without safe-pkgs</figcaption>
+      <img src="./assets/vscode.png" alt="AI agent adding a package without safe-pkgs — no safety check performed" loading="lazy" />
+    </figure>
+    <figure>
+      <figcaption>With safe-pkgs</figcaption>
+      <img src="./assets/vscode2.png" alt="AI agent blocked by safe-pkgs — risk level, CVEs, and reasons surfaced before install" loading="lazy" />
+    </figure>
   </div>
 </section>
 

docs/assets/vscode2.png

@@ -526,6 +526,37 @@
   box-shadow: var(--c-shadow);
 }
 
+.comparison-grid {
+  display: grid;
+  gap: 1.25rem;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.comparison-grid figure {
+  margin: 0;
+}
+
+.comparison-grid figcaption {
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-align: center;
+  text-transform: uppercase;
+  color: var(--md-default-fg-color--light);
+  margin-bottom: 0.5rem;
+}
+
+.comparison-grid img {
+  width: 100%;
+  height: 300px;
+  object-fit: contain;
+  object-position: top center;
+  background: var(--md-code-bg-color);
+  border: 1px solid var(--c-border);
+  border-radius: 0.9rem;
+  box-shadow: var(--c-shadow);
+}
+
 .code-grid {
   display: grid;
   gap: 0.85rem;
@@ -593,6 +624,7 @@
   .card-grid.two,
   .step-grid,
   .image-grid,
+  .comparison-grid,
   .metrics,
   .code-grid {
     grid-template-columns: 1fr;