From ce894505dc71405d8da7422d49d1f83d84f56f53 Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Sat, 21 Mar 2026 15:27:00 -0500
Subject: [PATCH] fix(website): show both light and dark mode screenshots side
 by side

---
 docs/website/index.html | 36 ++++++++++++++++++++++++++++--------
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/docs/website/index.html b/docs/website/index.html
index bed4609..e3fc597 100644
--- a/docs/website/index.html
+++ b/docs/website/index.html
@@ -458,23 +458,43 @@
         <div class="wp-screenshot-grid">
 
           <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/01-overview-dark.png" alt="Fleet overview showing device list, status, and health metrics" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Fleet overview</figcaption>
+            <img src="assets/01-overview-light.png" alt="Fleet overview — light mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Fleet overview — light</figcaption>
           </figure>
 
           <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/02-device-detail-dark.png" alt="Device detail view with interfaces, system info, and actions" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Device detail</figcaption>
+            <img src="assets/01-overview-dark.png" alt="Fleet overview — dark mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Fleet overview — dark</figcaption>
           </figure>
 
           <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/03-interfaces-dark.png" alt="Interface utilization showing per-interface traffic" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Interface traffic</figcaption>
+            <img src="assets/02-device-detail-light.png" alt="Device management — light mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Device management — light</figcaption>
           </figure>
 
           <figure class="wp-screenshot-card screenshot-card">
-            <img src="assets/04-firmware-dark.png" alt="Firmware management showing version groups and upgrade tracking" loading="lazy" width="1440" height="900">
-            <figcaption class="wp-screenshot-caption">Firmware management</figcaption>
+            <img src="assets/02-device-detail-dark.png" alt="Device management — dark mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Device management — dark</figcaption>
+          </figure>
+
+          <figure class="wp-screenshot-card screenshot-card">
+            <img src="assets/03-interfaces-light.png" alt="Interface configuration — light mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Interface configuration — light</figcaption>
+          </figure>
+
+          <figure class="wp-screenshot-card screenshot-card">
+            <img src="assets/03-interfaces-dark.png" alt="Interface configuration — dark mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Interface configuration — dark</figcaption>
+          </figure>
+
+          <figure class="wp-screenshot-card screenshot-card">
+            <img src="assets/04-firmware-light.png" alt="Firmware management — light mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Firmware management — light</figcaption>
+          </figure>
+
+          <figure class="wp-screenshot-card screenshot-card">
+            <img src="assets/04-firmware-dark.png" alt="Firmware management — dark mode" loading="lazy" width="1440" height="900">
+            <figcaption class="wp-screenshot-caption">Firmware management — dark</figcaption>
           </figure>
 
         </div>