From 9d7e9669b36c495b6612cbf5e351f689b11362db Mon Sep 17 00:00:00 2001
From: Gabriel Bo <gabrielkmbo@gmail.com>
Date: Tue, 3 Mar 2026 18:44:39 -0800
Subject: [PATCH] redesign w/ designated boxes

---
 docs/index.md              |  16 ++++++
 docs/stylesheets/extra.css | 114 +++++++++++++++++++++++++++++++++----
 2 files changed, 118 insertions(+), 12 deletions(-)

diff --git a/docs/index.md b/docs/index.md
index eba7265c..291dbf5d 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -85,6 +85,8 @@ Everything runs on your hardware. Cloud APIs are optional.
 
 ## Quick Start
 
+<div class="quick-start-section" markdown>
+
 ### Browser App
 
 Run the full chat UI locally with one script:
@@ -98,6 +100,10 @@ cd OpenJarvis
 This installs dependencies, starts Ollama + a local model, launches the backend
 and frontend, and opens `http://localhost:5173` in your browser.
 
+</div>
+
+<div class="quick-start-section" markdown>
+
 ### Desktop App
 
 Download the native desktop app — it bundles Ollama and the Python backend
@@ -107,6 +113,10 @@ so everything works out of the box.
 
 Also available for [macOS (Intel)](https://github.com/HazyResearch/OpenJarvis/releases/latest/download/OpenJarvis_x64.dmg), [Windows](https://github.com/HazyResearch/OpenJarvis/releases/latest/download/OpenJarvis_x64-setup.exe), [Linux (DEB)](https://github.com/HazyResearch/OpenJarvis/releases/latest/download/OpenJarvis_amd64.deb), and [Linux (RPM)](https://github.com/HazyResearch/OpenJarvis/releases/latest/download/OpenJarvis_amd64.rpm). See the [Downloads](downloads.md) page for details.
 
+</div>
+
+<div class="quick-start-section" markdown>
+
 ### Python SDK
 
 ```python
@@ -130,6 +140,10 @@ print(result["content"])       # "4"
 print(result["tool_results"])  # [{tool_name: "calculator", ...}]
 ```
 
+</div>
+
+<div class="quick-start-section" markdown>
+
 ### CLI
 
 ```bash
@@ -150,6 +164,8 @@ jarvis memory search "configuration options"
 jarvis bench run --json
 ```
 
+</div>
+
 ---
 
 ## Project Status
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index cacf382c..2c94a5a3 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -113,6 +113,11 @@
 }
 
 /* ── Feature Cards ────────────────────────────────────────────────── */
+.md-typeset .grid.cards > ol,
+.md-typeset .grid.cards > ul {
+  gap: 1rem;
+}
+
 .md-typeset .grid.cards > ol > li,
 .md-typeset .grid.cards > ul > li {
   border: 1px solid rgba(0, 0, 0, 0.08);
@@ -188,12 +193,26 @@
 /* ── Section Headers ──────────────────────────────────────────────── */
 .md-typeset h2 {
   font-weight: 700;
+  font-size: 1.6rem;
   letter-spacing: -0.02em;
-  margin-top: 2.5rem;
+  margin-top: 3rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+.md-typeset h2:first-child,
+.md-typeset hr + h2 {
+  border-top: none;
+  padding-top: 0;
+}
+
+[data-md-color-scheme="slate"] .md-typeset h2 {
+  border-top-color: rgba(255, 255, 255, 0.06);
 }
 
 .md-typeset h3 {
   font-weight: 600;
+  font-size: 1.15rem;
 }
 
 /* ── Footer ───────────────────────────────────────────────────────── */
@@ -238,19 +257,90 @@
   }
 }
 
-/* ── Quick-start section ──────────────────────────────────────────── */
-.quick-start {
-  max-width: 800px;
-  margin: 0 auto;
+/* ── Inline Code ─────────────────────────────────────────────────── */
+.md-typeset :not(pre) > code {
+  transition: background 0.15s ease;
 }
 
-.quick-start h2 {
-  text-align: center;
-  margin-bottom: 0.5rem;
+.md-typeset :not(pre) > code:hover {
+  background: var(--md-accent-fg-color--transparent);
 }
 
-.quick-start > p:first-of-type {
-  text-align: center;
-  color: var(--md-default-fg-color--light);
-  margin-bottom: 2rem;
+/* ── Links ───────────────────────────────────────────────────────── */
+.md-typeset a {
+  transition: color 0.15s ease;
+}
+
+/* ── Content Width ───────────────────────────────────────────────── */
+.md-content__inner {
+  max-width: 52rem;
+}
+
+/* ── Tables ──────────────────────────────────────────────────────── */
+.md-typeset table:not([class]) {
+  border-radius: 8px;
+  overflow: hidden;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  font-size: 0.85rem;
+}
+
+[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
+  border-color: rgba(255, 255, 255, 0.08);
+}
+
+.md-typeset table:not([class]) th {
+  font-weight: 600;
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+/* ── Quick-start section cards ────────────────────────────────────── */
+.quick-start-section {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-left: 4px solid var(--md-accent-fg-color);
+  border-radius: 10px;
+  padding: 1.5rem 2rem 1.25rem;
+  margin-bottom: 1.5rem;
+  background: var(--md-default-bg-color);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.quick-start-section:hover {
+  border-color: rgba(0, 0, 0, 0.12);
+  border-left-color: var(--md-accent-fg-color);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
+}
+
+[data-md-color-scheme="slate"] .quick-start-section {
+  border-color: rgba(255, 255, 255, 0.08);
+  border-left-color: var(--md-accent-fg-color);
+  background: #1e293b;
+}
+
+[data-md-color-scheme="slate"] .quick-start-section:hover {
+  border-color: rgba(255, 255, 255, 0.14);
+  border-left-color: var(--md-accent-fg-color);
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
+}
+
+.quick-start-section h3 {
+  font-size: 1.3rem !important;
+  font-weight: 700 !important;
+  margin-top: 0 !important;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
+}
+
+[data-md-color-scheme="slate"] .quick-start-section h3 {
+  border-bottom-color: rgba(255, 255, 255, 0.06);
+}
+
+.quick-start-section p:last-child {
+  margin-bottom: 0;
+}
+
+.quick-start-section pre:last-child {
+  margin-bottom: 0;
 }