From b954e0aa2ac3e5d1c7e791db5530f869aae898df Mon Sep 17 00:00:00 2001
From: Jason Staack <jason@staack.com>
Date: Mon, 9 Mar 2026 23:18:53 -0500
Subject: [PATCH] fix(docs): restore full quick start steps, fix architecture
 visibility

Restore original 6-step quick start with comments. Increase arch flow
box contrast (bg-deep background, stronger border) and arrow size.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 docs/website/index.html | 29 ++++++++++++++++++++++-------
 docs/website/style.css  | 10 +++++-----
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/docs/website/index.html b/docs/website/index.html
index 347d4b2..1c350b8 100644
--- a/docs/website/index.html
+++ b/docs/website/index.html
@@ -229,15 +229,15 @@
 
       <div class="arch-flow">
         <div class="arch-flow-step">Routers</div>
-        <div class="arch-flow-arrow">&darr;</div>
+        <div class="arch-flow-arrow">↓</div>
         <div class="arch-flow-step">Go Pollers</div>
-        <div class="arch-flow-arrow">&darr;</div>
+        <div class="arch-flow-arrow">↓</div>
         <div class="arch-flow-step">NATS Event Bus</div>
-        <div class="arch-flow-arrow">&darr;</div>
+        <div class="arch-flow-arrow">↓</div>
         <div class="arch-flow-step">FastAPI Backend</div>
-        <div class="arch-flow-arrow">&darr;</div>
+        <div class="arch-flow-arrow">↓</div>
         <div class="arch-flow-step">PostgreSQL + TimescaleDB</div>
-        <div class="arch-flow-arrow">&darr;</div>
+        <div class="arch-flow-arrow">↓</div>
         <div class="arch-flow-step">React Web Interface</div>
       </div>
 
@@ -315,9 +315,24 @@
           <span class="code-dot code-dot--green"></span>
           <span class="code-window-title">Terminal</span>
         </div>
-        <pre class="code-window-body"><code><span class="code-cmd">git clone https://github.com/staack/the-other-dude</span>
+        <pre class="code-window-body"><code><span class="code-comment"># Clone the repo</span>
+<span class="code-cmd">git clone https://github.com/staack/the-other-dude.git</span>
 <span class="code-cmd">cd the-other-dude</span>
-<span class="code-cmd">docker compose up</span></code></pre>
+
+<span class="code-comment"># Configure</span>
+<span class="code-cmd">cp .env.example .env</span>
+
+<span class="code-comment"># Start infrastructure</span>
+<span class="code-cmd">docker compose up -d</span>
+
+<span class="code-comment"># Build app images</span>
+<span class="code-cmd">docker compose build api &amp;&amp; docker compose build poller &amp;&amp; docker compose build frontend</span>
+
+<span class="code-comment"># Launch</span>
+<span class="code-cmd">docker compose up -d</span>
+
+<span class="code-comment"># Open TOD</span>
+<span class="code-cmd">open http://localhost:3000</span></code></pre>
       </div>
     </div>
   </section>
diff --git a/docs/website/style.css b/docs/website/style.css
index 9cf3c77..2eefb84 100644
--- a/docs/website/style.css
+++ b/docs/website/style.css
@@ -563,18 +563,18 @@ ul, ol {
   font-family: "Fira Code", "SF Mono", monospace;
   font-size: 0.95rem;
   color: var(--text-primary);
-  background: var(--bg-elevated);
-  border: 1px solid var(--border-accent);
+  background: var(--bg-deep);
+  border: 1px solid rgba(42, 157, 143, 0.4);
   border-radius: 8px;
-  padding: 10px 28px;
+  padding: 12px 32px;
   letter-spacing: 0.02em;
 }
 
 .arch-flow-arrow {
   color: var(--accent);
-  font-size: 1.2rem;
+  font-size: 1.4rem;
   line-height: 1;
-  padding: 4px 0;
+  padding: 6px 0;
 }
 
 /* CTA closing */