diff --git a/docs-site/src/pages/index.js b/docs-site/src/pages/index.js
index 9cccdb2..4448a57 100644
--- a/docs-site/src/pages/index.js
+++ b/docs-site/src/pages/index.js
@@ -292,6 +292,55 @@ export default function Home() {
           </div>
         </section>
 
+        {/* ── Before / After ───────────────────────────────────────────────── */}
+        <section className={styles.compareSection}>
+          <div className="container">
+            <div className={styles.sectionHeader} data-reveal>
+              <span className={styles.sectionTag}>Before / After</span>
+              <h2 className={styles.sectionTitle}>Same test.<br />None of the plumbing.</h2>
+              <p className={styles.sectionSubtitle}>
+                Selenium Boot lets your team focus on testing, not framework engineering.
+                The waits, the driver setup, the boilerplate — handled.
+              </p>
+            </div>
+
+            <div className={styles.compareGrid} data-reveal>
+              <div className={styles.compareCol}>
+                <span className={styles.compareLabel} data-kind="before">Plain Selenium</span>
+                <CodeWindow
+                  filename="LoginTest.java"
+                  className={styles.compareWindow}
+                  code={`WebDriverWait wait = new WebDriverWait(
+    driver, Duration.ofSeconds(10));
+
+wait.until(ExpectedConditions
+    .elementToBeClickable(By.id("login")))
+    .click();
+
+wait.until(ExpectedConditions.textToBe(
+    By.cssSelector("h1"), "Welcome"));`}
+                />
+              </div>
+
+              <div className={styles.compareArrow} aria-hidden>
+                <span className={styles.compareArrowIcon}>→</span>
+                <span className={styles.compareArrowLabel}>Selenium Boot</span>
+              </div>
+
+              <div className={styles.compareCol}>
+                <span className={styles.compareLabel} data-kind="after">Selenium Boot</span>
+                <CodeWindow
+                  filename="LoginTest.java"
+                  className={styles.compareWindow}
+                  code={`$("#login").click();   // auto-waits
+
+assertThat($("h1")).hasText("Welcome");`}
+                />
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* ── Features ─────────────────────────────────────────────────────── */}
         <section className={styles.featuresSection}>
           <div className="container">
diff --git a/docs-site/src/pages/index.module.css b/docs-site/src/pages/index.module.css
index 4354af2..693d882 100644
--- a/docs-site/src/pages/index.module.css
+++ b/docs-site/src/pages/index.module.css
@@ -399,6 +399,85 @@
   line-height: 1.3;
 }
 
+/* ═══════════════════════════════════════════════════════════════════════════
+   BEFORE / AFTER
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.compareSection {
+  padding: 5.5rem 0;
+  background: var(--ifm-background-color);
+  position: relative;
+  overflow: hidden;
+}
+
+.compareGrid {
+  display: grid;
+  grid-template-columns: 1fr auto 1fr;
+  align-items: center;
+  gap: 1.5rem;
+  max-width: 1000px;
+  margin: 0 auto;
+}
+
+.compareCol {
+  display: flex;
+  flex-direction: column;
+  gap: 0.85rem;
+  min-width: 0;               /* let code windows scroll instead of overflow */
+}
+
+.compareLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.7px;
+  text-transform: uppercase;
+}
+
+.compareLabel::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+.compareLabel[data-kind="before"] { color: #f87171; }
+.compareLabel[data-kind="after"]  { color: #34d399; }
+
+/* Solid dark code surface so it reads in both light and dark themes */
+.compareWindow {
+  align-self: start;
+  width: 100%;
+  background: #0b0b14;
+  border-color: rgba(255,255,255,0.09);
+}
+
+.compareArrow {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  color: #818cf8;
+  padding-top: 1.6rem;        /* nudge down to align with code, past the label row */
+}
+
+.compareArrowIcon {
+  font-size: 1.7rem;
+  font-weight: 800;
+  line-height: 1;
+}
+
+.compareArrowLabel {
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.7px;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
 /* ═══════════════════════════════════════════════════════════════════════════
    FEATURES
    ═══════════════════════════════════════════════════════════════════════════ */
@@ -1034,6 +1113,22 @@
     grid-template-columns: repeat(2, 1fr);
   }
 
+  .compareGrid {
+    grid-template-columns: 1fr;
+    gap: 1rem;
+  }
+
+  .compareArrow {
+    flex-direction: row;
+    justify-content: center;
+    gap: 10px;
+    padding-top: 0;
+  }
+
+  .compareArrowIcon {
+    transform: rotate(90deg);   /* point down when stacked */
+  }
+
   .bentoGrid {
     grid-template-columns: 1fr;
   }