From ea5fd9146956e4b2f20e0a7bce1bda8c3bafcd72 Mon Sep 17 00:00:00 2001
From: Mohammad Saddam Hossain <sddmhossain786@gmail.com>
Date: Tue, 14 Jul 2026 12:24:18 +0530
Subject: [PATCH] feat(site): add before/after code comparison to the homepage

Closes #13

New "Before / After" section between the stats strip and features: plain
Selenium (WebDriverWait + ExpectedConditions + findElement) vs Selenium
Boot ($("#login").click() // auto-waits + assertThat(...).hasText(...)),
same LoginTest.java filename to drive the contrast home. Center arrow
labelled "Selenium Boot" that rotates to point down when the layout
stacks on mobile.

Reinforces the North Star ("focus on testing, not framework engineering")
in the section subtitle. Theme-aware (labels read in both themes; code
windows use a solid dark surface so they stay legible in light mode) and
responsive (3-col grid collapses to a single column at <=768px). Reuses
the existing CodeWindow component and design tokens. Build passes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 docs-site/src/pages/index.js         | 49 ++++++++++++++
 docs-site/src/pages/index.module.css | 95 ++++++++++++++++++++++++++++
 2 files changed, 144 insertions(+)

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;
   }