From 26f9eb996e7d5dd5f01c564ffb472ffef77ff100 Mon Sep 17 00:00:00 2001
From: Ryan Malloy <ryan@supported.systems>
Date: Sat, 21 Feb 2026 11:32:16 -0700
Subject: [PATCH] =?UTF-8?q?Move=20resistor=20color=20guide=20to=20/referen?=
 =?UTF-8?q?ce/resistor-colors,=20add=2050=CE=A9=20button=20on=20homepage?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Promotes the full ResistorColorGuide component to a dedicated reference
page and replaces the homepage section with a compact inline SVG link
showing Green-Black-Black-Gold (50Ω ±5%) band colors.
---
 frontend/src/pages/index.astro                | 34 +++++++++++++++++--
 .../src/pages/reference/resistor-colors.astro | 12 +++++++
 2 files changed, 43 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/pages/reference/resistor-colors.astro

diff --git a/frontend/src/pages/index.astro b/frontend/src/pages/index.astro
index 772a649..37aefa7 100644
--- a/frontend/src/pages/index.astro
+++ b/frontend/src/pages/index.astro
@@ -3,7 +3,6 @@ import { Icon } from 'astro-icon/components';
 import NotebookLayout from '../layouts/NotebookLayout.astro';
 import NotebookGallery from '../components/NotebookGallery';
 import PipelineStrip from '../components/PipelineStrip.astro';
-import ResistorColorGuide from '../components/ResistorColorGuide.astro';
 import FeaturedNotebooks from '../components/FeaturedNotebooks.astro';
 import OscilloscopeDisplay from '../components/OscilloscopeDisplay.astro';
 import { fetchNotebookList } from '../lib/server-api';
@@ -73,9 +72,38 @@ try {
     <PipelineStrip />
   </section>
 
-  <!-- Resistor Color Code Guide -->
+  <!-- Resistor Color Code Reference link -->
   <section class="border-b border-slate-800/60">
-    <ResistorColorGuide />
+    <div class="max-w-6xl mx-auto px-6 py-10 flex flex-col sm:flex-row items-center gap-4 sm:gap-6">
+      <a href="/reference/resistor-colors"
+         class="inline-flex items-center gap-4 px-5 py-3 rounded-lg border border-slate-700
+                hover:border-slate-500 hover:bg-slate-800/40 transition-colors group">
+        <!-- Inline 50-ohm resistor SVG: Green(5)-Black(0)-Black(x1)-Gold(±5%) -->
+        <svg viewBox="0 0 120 32" class="w-24 h-8 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" aria-label="50 ohm resistor color bands">
+          <!-- Left lead wire -->
+          <line x1="0" y1="16" x2="16" y2="16" stroke="#555" stroke-width="1.5"/>
+          <!-- Band 1: Green (digit 5) -->
+          <polyline points="16,16 26,6 36,26" fill="none" stroke="#006400" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Band 2: Black (digit 0) -->
+          <polyline points="36,26 46,6 56,26" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Band 3: Black (multiplier x1) -->
+          <polyline points="56,26 66,6 76,26" fill="none" stroke="#1a1a1a" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Band 4: Gold (tolerance ±5%) -->
+          <polyline points="76,26 86,6 96,16" fill="none" stroke="#B8860B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+          <!-- Right lead wire -->
+          <line x1="96" y1="16" x2="120" y2="16" stroke="#555" stroke-width="1.5"/>
+        </svg>
+        <div>
+          <span class="text-sm font-semibold text-slate-200 group-hover:text-slate-100">
+            Resistor Color Codes
+          </span>
+          <span class="block text-xs text-slate-500">
+            Learn to read 4-band color codes
+          </span>
+        </div>
+        <Icon name="lucide:chevron-right" class="w-4 h-4 text-slate-600 group-hover:text-slate-400 transition-colors" />
+      </a>
+    </div>
   </section>
 
   <!-- Featured Notebooks -->
diff --git a/frontend/src/pages/reference/resistor-colors.astro b/frontend/src/pages/reference/resistor-colors.astro
new file mode 100644
index 0000000..8abc7d5
--- /dev/null
+++ b/frontend/src/pages/reference/resistor-colors.astro
@@ -0,0 +1,12 @@
+---
+import NotebookLayout from '../../layouts/NotebookLayout.astro';
+import ResistorColorGuide from '../../components/ResistorColorGuide.astro';
+---
+
+<NotebookLayout
+  title="Resistor Color Codes — SpiceBook"
+  description="Visual guide to reading 4-band resistor color codes used in SpiceBook circuit schematics."
+  canonicalPath="/reference/resistor-colors"
+>
+  <ResistorColorGuide />
+</NotebookLayout>