From e24ab79ffed6f5ed7d4ad23a4de740cdfd2f1218 Mon Sep 17 00:00:00 2001
From: David Montero Crespo <davidmonterocrespo24@gmail.com>
Date: Mon, 16 Mar 2026 14:39:18 -0300
Subject: [PATCH] feat: add board gallery and supported boards sections to
 documentation

---
 frontend/src/pages/DocsPage.css | 33 ++++++++++++++++++++++++++
 frontend/src/pages/DocsPage.tsx | 42 +++++++++++++++++++++++++++++++++
 2 files changed, 75 insertions(+)

diff --git a/frontend/src/pages/DocsPage.css b/frontend/src/pages/DocsPage.css
index cbe5cff..1028c07 100644
--- a/frontend/src/pages/DocsPage.css
+++ b/frontend/src/pages/DocsPage.css
@@ -460,3 +460,36 @@
     font-size: 1.6rem;
   }
 }
+
+/* ── Board gallery ──────────────────────────────────────── */
+.docs-board-gallery {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+  margin: 16px 0 24px;
+}
+
+.docs-board-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  background: var(--bg-secondary, #1e1e2e);
+  border: 1px solid var(--border, #2a2a3a);
+  border-radius: 10px;
+  padding: 16px 20px;
+  min-width: 140px;
+}
+
+.docs-board-card img {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+}
+
+.docs-board-card span {
+  font-size: 12px;
+  color: var(--text-muted, #888);
+  text-align: center;
+  font-family: var(--mono, monospace);
+}
diff --git a/frontend/src/pages/DocsPage.tsx b/frontend/src/pages/DocsPage.tsx
index 4fd4e52..5dc4c3e 100644
--- a/frontend/src/pages/DocsPage.tsx
+++ b/frontend/src/pages/DocsPage.tsx
@@ -1052,6 +1052,20 @@ const RiscVEmulationSection: React.FC = () => (
     </p>
 
     <h2>Supported Boards</h2>
+    <div className="docs-board-gallery">
+      <div className="docs-board-card">
+        <img src="/boards/esp32-c3.svg" alt="ESP32-C3 DevKit" />
+        <span>ESP32-C3 DevKit</span>
+      </div>
+      <div className="docs-board-card">
+        <img src="/boards/xiao-esp32-c3.svg" alt="Seeed XIAO ESP32-C3" />
+        <span>Seeed XIAO ESP32-C3</span>
+      </div>
+      <div className="docs-board-card">
+        <img src="/boards/esp32c3-supermini.svg" alt="ESP32-C3 SuperMini" />
+        <span>ESP32-C3 SuperMini</span>
+      </div>
+    </div>
     <table>
       <thead>
         <tr><th>Board</th><th>CPU</th><th>Flash</th><th>RAM</th></tr>
@@ -1170,6 +1184,28 @@ const Esp32EmulationSection: React.FC = () => (
     </ol>
 
     <h2>Supported Boards</h2>
+    <div className="docs-board-gallery">
+      <div className="docs-board-card">
+        <img src="/boards/esp32-devkit-c-v4.svg" alt="ESP32 DevKit C V4" />
+        <span>ESP32 DevKit C V4</span>
+      </div>
+      <div className="docs-board-card">
+        <img src="/boards/esp32-s3.svg" alt="ESP32-S3" />
+        <span>ESP32-S3</span>
+      </div>
+      <div className="docs-board-card">
+        <img src="/boards/esp32-cam.svg" alt="ESP32-CAM" />
+        <span>ESP32-CAM</span>
+      </div>
+      <div className="docs-board-card">
+        <img src="/boards/xiao-esp32-s3.svg" alt="Seeed XIAO ESP32-S3" />
+        <span>Seeed XIAO ESP32-S3</span>
+      </div>
+      <div className="docs-board-card">
+        <img src="/boards/arduino-nano-esp32.svg" alt="Arduino Nano ESP32" />
+        <span>Arduino Nano ESP32</span>
+      </div>
+    </div>
     <table>
       <thead>
         <tr><th>Board</th><th>CPU</th><th>Emulation</th></tr>
@@ -1309,6 +1345,12 @@ const RaspberryPi3EmulationSection: React.FC = () => (
     </p>
 
     <h2>Supported Boards</h2>
+    <div className="docs-board-gallery">
+      <div className="docs-board-card">
+        <img src="/boards/Raspberry_Pi_3.svg" alt="Raspberry Pi 3B" />
+        <span>Raspberry Pi 3B</span>
+      </div>
+    </div>
     <table>
       <thead><tr><th>Board</th><th>QEMU Machine</th><th>CPU</th></tr></thead>
       <tbody>