Visual polish: warm RF aesthetic + real VNA screenshots

Landing page enhancements:
- Screenshot gallery showing Smith chart, SWR, LC match, multi-trace
- Hardware section with NanoVNA-H photo
- Example prompts section

Theme changes:
- Warm RF Lab Bench aesthetic (copper/amber accents, warm grays)
- Unified visual family with nanovna-h-docs
- Steel blue for code links
- Spec cards and menu path styling

Assets:
- 9 NanoVNA display screenshots from nanovna-h-docs
- 2 hardware photos (NanoVNA-H device + PCB)

src/content/docs/index.mdx

@@ -16,7 +16,13 @@ hero:
       variant: minimal
 ---
 
-import { Card, CardGrid } from '@astrojs/starlight/components';
+import { Card, CardGrid, Tabs, TabItem } from '@astrojs/starlight/components';
+import { Image } from 'astro:assets';
+import smithChart from '../../assets/screenshots/smith-chart.png';
+import swrTrace from '../../assets/screenshots/swr-trace.png';
+import lcMatch from '../../assets/screenshots/measure-lc-match.png';
+import multiTrace from '../../assets/screenshots/multi-trace.png';
+import nanoVNA from '../../assets/hardware/NanoVNA-H-2.jpg';
 
 ## What is this?
 
@@ -41,6 +47,29 @@ Two MCP servers that let AI assistants control RF test equipment:
   </Card>
 </CardGrid>
 
+## What Can It Do?
+
+Your AI assistant gains direct access to professional RF measurement capabilities:
+
+<div class="screenshot-gallery">
+  <figure>
+    <Image src={smithChart} alt="Smith chart display showing impedance plot" width={320} />
+    <figcaption>Impedance analysis on Smith chart</figcaption>
+  </figure>
+  <figure>
+    <Image src={swrTrace} alt="SWR measurement trace" width={320} />
+    <figcaption>SWR sweep across frequency</figcaption>
+  </figure>
+  <figure>
+    <Image src={lcMatch} alt="LC matching network calculation" width={320} />
+    <figcaption>Automatic LC match calculation</figcaption>
+  </figure>
+  <figure>
+    <Image src={multiTrace} alt="Multiple trace display" width={320} />
+    <figcaption>Multi-trace S-parameter display</figcaption>
+  </figure>
+</div>
+
 ## Quick Install
 
 ```bash
@@ -53,7 +82,98 @@ Then ask Claude to analyze your antenna, measure a filter, or run a 3D pattern s
 
 ## Hardware
 
-- **NanoVNA-H** or H4 (USB serial, auto-detected)
+<div class="hardware-section">
-- **ESP32 positioner** (optional, for automated pattern measurement)
+  <div class="hardware-text">
-  - 2x NEMA 17 steppers + TMC2209 drivers
+    <h3>NanoVNA-H</h3>
-  - Firmware and KiCad schematics included
+    <p>The NanoVNA-H (or H4) connects via USB serial and is auto-detected. No drivers needed on Linux — just plug in and go.</p>
+
+    <h3>ESP32 Positioner</h3>
+    <p>Optional dual-axis antenna positioner for automated 3D pattern measurement:</p>
+    <ul>
+      <li>2x NEMA 17 steppers + TMC2209 drivers</li>
+      <li>StallGuard sensorless homing</li>
+      <li>WiFi HTTP API for remote control</li>
+      <li>Firmware and KiCad schematics included</li>
+    </ul>
+  </div>
+  <figure class="hardware-image">
+    <Image src={nanoVNA} alt="NanoVNA-H vector network analyzer" width={400} />
+    <figcaption>NanoVNA-H — 50kHz to 1.5GHz VNA</figcaption>
+  </figure>
+</div>
+
+## Example Prompts
+
+Once installed, try asking your AI:
+
+- *"Connect to my NanoVNA and sweep 7.0-7.3 MHz to check my 40m dipole"*
+- *"Measure the insertion loss of this BPF from 144-148 MHz"*
+- *"What's the impedance at the resonant frequency? Suggest an LC match."*
+- *"Run a 3D radiation pattern sweep at 15° resolution"*
+- *"Export the S11 data as a Touchstone file"*
+
+<style>{`
+  .screenshot-gallery {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin: 2rem 0;
+  }
+
+  .screenshot-gallery figure {
+    margin: 0;
+    text-align: center;
+  }
+
+  .screenshot-gallery img {
+    border-radius: 8px;
+    border: 1px solid var(--sl-color-gray-5);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    transition: transform 0.2s ease;
+  }
+
+  .screenshot-gallery img:hover {
+    transform: scale(1.02);
+  }
+
+  .screenshot-gallery figcaption {
+    margin-top: 0.5rem;
+    font-size: 0.9rem;
+    color: var(--sl-color-gray-2);
+  }
+
+  .hardware-section {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    align-items: start;
+    margin: 1.5rem 0;
+  }
+
+  @media (max-width: 768px) {
+    .hardware-section {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .hardware-section h3 {
+    margin-top: 0;
+    color: var(--sl-color-accent-high);
+  }
+
+  .hardware-image {
+    margin: 0;
+    text-align: center;
+  }
+
+  .hardware-image img {
+    border-radius: 8px;
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  }
+
+  .hardware-image figcaption {
+    margin-top: 0.75rem;
+    font-size: 0.9rem;
+    color: var(--sl-color-gray-2);
+  }
+`}</style>

src/styles/custom.css

@@ -1,57 +1,78 @@
-/* Custom styles for mcnanovna docs */
+/* mcnanovna docs — RF Lab Bench Aesthetic
+ * Warm copper/amber accent, steel blue secondary, warm grays
+ * Unified visual family with nanovna-h-docs
+ */
 
 /* Dark mode is the default in Starlight - use :root */
 :root {
-  /* Accent colors (blue theme) */
+  /* Accent colors (copper/amber for dark mode) */
-  --sl-color-accent-low: hsl(210, 50%, 15%);
+  --sl-color-accent-low: hsl(25, 50%, 12%);
-  --sl-color-accent: hsl(210, 70%, 45%);
+  --sl-color-accent: hsl(28, 55%, 58%);
-  --sl-color-accent-high: hsl(210, 80%, 65%);
+  --sl-color-accent-high: hsl(30, 70%, 82%);
 
-  /* Gray scale for dark mode - darker values */
+  /* Gray scale for dark mode - warm undertones */
-  --sl-color-gray-1: hsl(220, 14%, 71%);
+  --sl-color-gray-1: hsl(30, 10%, 78%);
-  --sl-color-gray-2: hsl(220, 13%, 58%);
+  --sl-color-gray-2: hsl(28, 8%, 65%);
-  --sl-color-gray-3: hsl(220, 12%, 45%);
+  --sl-color-gray-3: hsl(26, 7%, 50%);
-  --sl-color-gray-4: hsl(220, 11%, 32%);
+  --sl-color-gray-4: hsl(24, 8%, 36%);
-  --sl-color-gray-5: hsl(220, 10%, 22%);
+  --sl-color-gray-5: hsl(22, 10%, 24%);
-  --sl-color-gray-6: hsl(220, 12%, 14%);
+  --sl-color-gray-6: hsl(20, 12%, 16%);
-  --sl-color-gray-7: hsl(220, 14%, 10%);
+  --sl-color-gray-7: hsl(18, 14%, 10%);
 
   /* Semantic colors for dark mode */
-  --sl-color-white: hsl(0, 0%, 95%);
+  --sl-color-white: hsl(30, 15%, 95%);
-  --sl-color-black: hsl(220, 15%, 8%);
+  --sl-color-black: hsl(20, 20%, 7%);
 
   /* Backgrounds */
   --sl-color-bg: var(--sl-color-black);
   --sl-color-bg-nav: var(--sl-color-gray-6);
   --sl-color-bg-sidebar: var(--sl-color-gray-6);
-  --sl-color-bg-inline-code: var(--sl-color-gray-5);
+  --sl-color-bg-inline-code: hsl(22, 12%, 18%);
+
+  /* Steel blue for code links */
+  --sl-color-text-accent: hsl(205, 45%, 65%);
 }
 
 /* Light mode override */
 [data-theme='light'] {
-  /* Accent colors (blue theme - slightly darker for light bg) */
+  /* Accent colors (copper for light mode - darker for contrast) */
-  --sl-color-accent-low: hsl(210, 60%, 90%);
+  --sl-color-accent-low: hsl(30, 40%, 92%);
-  --sl-color-accent: hsl(210, 70%, 40%);
+  --sl-color-accent: hsl(25, 65%, 42%);
-  --sl-color-accent-high: hsl(210, 80%, 30%);
+  --sl-color-accent-high: hsl(22, 70%, 28%);
 
-  /* Gray scale for light mode - inverted (higher numbers = darker) */
+  /* Gray scale for light mode - warm undertones */
-  --sl-color-gray-1: hsl(220, 14%, 20%);
+  --sl-color-gray-1: hsl(20, 12%, 22%);
-  --sl-color-gray-2: hsl(220, 13%, 30%);
+  --sl-color-gray-2: hsl(22, 10%, 35%);
-  --sl-color-gray-3: hsl(220, 12%, 45%);
+  --sl-color-gray-3: hsl(24, 8%, 50%);
-  --sl-color-gray-4: hsl(220, 11%, 60%);
+  --sl-color-gray-4: hsl(26, 8%, 68%);
-  --sl-color-gray-5: hsl(220, 10%, 75%);
+  --sl-color-gray-5: hsl(28, 10%, 82%);
-  --sl-color-gray-6: hsl(220, 15%, 92%);
+  --sl-color-gray-6: hsl(30, 15%, 92%);
-  --sl-color-gray-7: hsl(220, 20%, 97%);
+  --sl-color-gray-7: hsl(32, 20%, 97%);
 
   /* Semantic colors for light mode (inverted) */
-  --sl-color-white: hsl(220, 15%, 8%);
+  --sl-color-white: hsl(20, 15%, 12%);
-  --sl-color-black: hsl(0, 0%, 100%);
+  --sl-color-black: hsl(35, 25%, 98%);
 
   /* Backgrounds */
   --sl-color-bg: var(--sl-color-black);
   --sl-color-bg-nav: var(--sl-color-gray-7);
   --sl-color-bg-sidebar: var(--sl-color-bg);
-  --sl-color-bg-inline-code: var(--sl-color-gray-6);
+  --sl-color-bg-inline-code: hsl(30, 20%, 93%);
+
+  /* Steel blue for code links (darker for light bg) */
+  --sl-color-text-accent: hsl(205, 55%, 40%);
+}
+
+/* Slightly tighter sidebar for lab-manual density */
+nav.sidebar .top-level > li + li {
+  margin-top: 0.25rem;
+}
+
+/* Badge styling — make badges look subdued */
+.sl-badge {
+  font-size: 0.7em;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
 }
 
 /* Tool reference tables */
@@ -67,6 +88,11 @@
   border-bottom: 1px solid var(--sl-color-gray-5);
 }
 
+.tool-table th {
+  background: var(--sl-color-gray-6);
+  font-weight: 600;
+}
+
 .tool-table code {
   font-size: 0.875rem;
   background: var(--sl-color-bg-inline-code);
@@ -81,3 +107,42 @@
   border-radius: 0.5rem;
   border: 1px solid var(--sl-color-gray-5);
 }
+
+/* Menu path breadcrumbs (for firmware navigation docs) */
+.menu-path {
+  font-family: var(--sl-font-mono);
+  font-size: 0.85em;
+  background: var(--sl-color-bg-inline-code);
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  white-space: nowrap;
+}
+
+/* Spec cards for hardware specs */
+.spec-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
+  gap: 1rem;
+  margin: 1.5rem 0;
+}
+
+.spec-card {
+  background: var(--sl-color-gray-7);
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 8px;
+  padding: 1rem;
+  text-align: center;
+}
+
+.spec-card .spec-value {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--sl-color-accent);
+  display: block;
+}
+
+.spec-card .spec-label {
+  font-size: 0.85rem;
+  color: var(--sl-color-gray-2);
+  margin-top: 0.25rem;
+}