Spaces:

panny247
/

hello_world

Running

PanGalactic Claude Opus 4.6 commited on Feb 6

Commit

1042f89

1 Parent(s): 7599ab0

Redesign landing page with split hero and fresh screenshots

Split hero layout with conversation screenshot, sticky navbar,
section tags, stats bar, 4 screenshots (status, telemetry,
conversation, settings). Matches top competition quality.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Files changed (6) hide show

index.html +97 -57
screenshots/conversation-active.png +2 -2
screenshots/conversation-settings.png +2 -2
screenshots/status-tab.png +2 -2
screenshots/telemetry-tab.png +2 -2
style.css +233 -134

index.html CHANGED Viewed

@@ -9,61 +9,91 @@
 </head>
 <body>
-<!-- Hero -->
 <section class="hero">
     <div class="hero-bg"></div>
-    <div class="hero-content">
-        <div class="hero-badge">Reachy Mini Community App</div>
-        <h1>Hello World</h1>
-        <p class="hero-tagline">The all-in-one dashboard that turns your Reachy Mini into an AI-powered conversational robot with real-time telemetry, 71 emotions, 19 dances, music playback, and full system monitoring.</p>
-        <div class="hero-stats">
-            <div class="stat">
-                <span class="stat-number">6</span>
-                <span class="stat-label">AI Providers</span>
-            </div>
-            <div class="stat">
-                <span class="stat-number">71</span>
-                <span class="stat-label">Emotions</span>
-            </div>
-            <div class="stat">
-                <span class="stat-number">19</span>
-                <span class="stat-label">Dances</span>
-            </div>
-            <div class="stat">
-                <span class="stat-number">13</span>
-                <span class="stat-label">AI Tools</span>
-            </div>
-            <div class="stat">
-                <span class="stat-number">4</span>
-                <span class="stat-label">WebSockets</span>
             </div>
         </div>
     </div>
 </section>
-<!-- Screenshot Showcase -->
-<section class="showcase">
     <div class="container">
-        <div class="showcase-grid">
-            <div class="showcase-item showcase-large">
-                <img src="screenshots/status-tab.png" alt="System telemetry dashboard showing CPU, RAM, disk, network, WiFi, thermal charts, top processes, and hardware inventory" loading="lazy" />
-                <div class="showcase-label">
                     <strong>System Telemetry</strong>
-                    <span>9 live charts, top processes, hardware inventory</span>
                 </div>
             </div>
-            <div class="showcase-item">
-                <img src="screenshots/telemetry-tab.png" alt="3D MuJoCo robot viewer with head telemetry showing roll, pitch, yaw, translation, and Stewart platform joint angles" loading="lazy" />
-                <div class="showcase-label">
                     <strong>3D Robot View</strong>
-                    <span>MuJoCo simulation + head pose telemetry</span>
                 </div>
             </div>
-            <div class="showcase-item">
-                <img src="screenshots/conversation-active.png" alt="Live AI conversation showing tool calls — system check, dance moves, and clock — with model badges and transcript" loading="lazy" />
-                <div class="showcase-label">
-                    <strong>AI Conversation</strong>
-                    <span>Live tool calls: system check, dance, clock</span>
                 </div>
             </div>
         </div>
@@ -71,49 +101,52 @@
 </section>
 <!-- Features -->
-<section class="features">
     <div class="container">
-        <h2 class="section-title">Everything Your Reachy Mini Needs</h2>
         <div class="feature-grid">
             <div class="feature-card accent-purple">
                 <div class="feature-icon-wrap"><span>&#x1F4AC;</span></div>
                 <h3>AI Conversation</h3>
-                <p>Full voice pipeline: listen through the robot mic, transcribe with Whisper, chat with any LLM, speak the response back through TTS. Supports <strong>OpenAI, Anthropic, Groq, Gemini, DeepSeek</strong>, and <strong>ElevenLabs</strong>.</p>
             </div>
             <div class="feature-card accent-blue">
                 <div class="feature-icon-wrap"><span>&#x1F441;</span></div>
                 <h3>Vision (VLM)</h3>
-                <p>Dedicated vision model selector with auto-detection of capable models per provider. Take a snapshot and the AI automatically describes what it sees. Ask "what do you see?" and Reachy looks and tells you.</p>
             </div>
             <div class="feature-card accent-green">
                 <div class="feature-icon-wrap"><span>&#x1F3AD;</span></div>
                 <h3>71 Emotions + 19 Dances</h3>
-                <p>The AI uses emotions and dances expressively during conversation. Say something funny and Reachy laughs. Ask it to dance and it picks a move. From <em>amazed</em> to <em>thoughtful</em>, <em>chicken_peck</em> to <em>jackson_square</em>.</p>
             </div>
             <div class="feature-card accent-orange">
                 <div class="feature-icon-wrap"><span>&#x1F4CA;</span></div>
                 <h3>System Telemetry</h3>
-                <p>9 live-updating charts: CPU (per-core), RAM (used/buffer/cache), disk, network throughput, WiFi signal, system load, fan speed, disk I/O, and temperature. Plus top processes and full hardware inventory.</p>
             </div>
             <div class="feature-card accent-cyan">
                 <div class="feature-icon-wrap"><span>&#x1F579;</span></div>
                 <h3>Head Control + 3D View</h3>
-                <p>Interactive MuJoCo simulation with real-time joint visualization. Drag sliders to control head roll/pitch/yaw, X/Y/Z translation, and antenna positions. See Stewart platform actuator angles live.</p>
             </div>
             <div class="feature-card accent-pink">
                 <div class="feature-icon-wrap"><span>&#x1F3B5;</span></div>
                 <h3>Music + Audio</h3>
-                <p>Upload music, play through the robot speaker via GStreamer, manage your library with metadata and cover art. Selectable audio routing: robot mic or browser mic input, robot speaker or browser output.</p>
             </div>
         </div>
     </div>
 </section>
 <!-- AI Tools -->
-<section class="tools-section">
     <div class="container">
-        <h2 class="section-title">13 AI-Powered Tools</h2>
-        <p class="section-subtitle">The LLM autonomously decides when to use these tools during natural conversation</p>
         <div class="tools-grid">
             <div class="tool-chip"><span class="tool-icon">&#x1F60A;</span> Play emotions</div>
             <div class="tool-chip"><span class="tool-icon">&#x1F57A;</span> Dance moves</div>
@@ -133,11 +166,13 @@
 </section>
 <!-- AI Pipeline -->
-<section class="pipeline-section">
     <div class="container">
-        <h2 class="section-title">AI Pipeline</h2>
         <div class="pipeline-flow">
             <div class="pipeline-stage">
                 <div class="stage-header">STT</div>
                 <div class="stage-body">
                     <div class="provider-tag">OpenAI Whisper</div>
@@ -146,6 +181,7 @@
             </div>
             <div class="pipeline-arrow">&#x2192;</div>
             <div class="pipeline-stage">
                 <div class="stage-header">LLM</div>
                 <div class="stage-body">
                     <div class="provider-tag">OpenAI</div>
@@ -157,6 +193,7 @@
             </div>
             <div class="pipeline-arrow">&#x2192;</div>
             <div class="pipeline-stage">
                 <div class="stage-header">TTS</div>
                 <div class="stage-body">
                     <div class="provider-tag">OpenAI</div>
@@ -167,6 +204,7 @@
             </div>
             <div class="pipeline-arrow">+</div>
             <div class="pipeline-stage">
                 <div class="stage-header">VLM</div>
                 <div class="stage-body">
                     <div class="provider-tag">Auto-detected</div>
@@ -181,7 +219,8 @@
 <!-- WebSocket Architecture -->
 <section class="ws-section">
     <div class="container">
-        <h2 class="section-title">Real-Time WebSocket Architecture</h2>
         <p class="section-subtitle">Zero polling. Everything streams live.</p>
         <div class="ws-grid">
             <div class="ws-card">
@@ -205,9 +244,10 @@
 </section>
 <!-- Getting Started -->
-<section class="getting-started">
     <div class="container">
-        <h2 class="section-title">Get Started in 3 Steps</h2>
         <div class="steps-row">
             <div class="step">
                 <div class="step-number">1</div>

 </head>
 <body>
+<!-- Nav -->
+<nav class="nav">
+    <div class="nav-inner">
+        <div class="nav-brand">
+            <span class="nav-icon">&#x1F916;</span>
+            <span class="nav-title">Hello World</span>
+        </div>
+        <div class="nav-links">
+            <a href="#features">Features</a>
+            <a href="#screenshots">Screenshots</a>
+            <a href="#tools">Tools</a>
+            <a href="#pipeline">Pipeline</a>
+            <a href="#setup">Setup</a>
+        </div>
+    </div>
+</nav>
+<!-- Hero — split layout -->
 <section class="hero">
     <div class="hero-bg"></div>
+    <div class="hero-split">
+        <div class="hero-text">
+            <div class="hero-badge">Reachy Mini Community App</div>
+            <h1>The all&#8209;in&#8209;one<br>dashboard for<br><span class="hero-accent">Reachy Mini</span></h1>
+            <p class="hero-tagline">AI conversation with 6 providers, 71 emotions, 19 dances, real-time telemetry, MuJoCo 3D viewer, music playback, and full system monitoring.</p>
+            <div class="hero-chips">
+                <span class="chip">&#x26A1; 6 AI Providers</span>
+                <span class="chip">&#x1F3AD; 71 Emotions</span>
+                <span class="chip">&#x1F57A; 19 Dances</span>
+                <span class="chip">&#x1F9E0; 13 AI Tools</span>
+                <span class="chip">&#x1F50C; 4 WebSockets</span>
+                <span class="chip">&#x1F3AE; MuJoCo 3D</span>
+            </div>
+            <div class="hero-tech">
+                <span class="tech-tag">Python</span>
+                <span class="tech-tag">FastAPI</span>
+                <span class="tech-tag">LiteLLM</span>
+                <span class="tech-tag">Vanilla JS</span>
+                <span class="tech-tag">WebSocket</span>
+                <span class="tech-tag">MuJoCo</span>
             </div>
         </div>
+        <div class="hero-image">
+            <img src="screenshots/conversation-active.png" alt="Live AI conversation with tool calls — system check, dance, and clock — showing model badges and real-time transcript" />
+        </div>
+    </div>
+</section>
+<!-- Stats bar -->
+<section class="stats-bar">
+    <div class="container">
+        <div class="stat"><span class="stat-number">6</span><span class="stat-label">AI Providers</span></div>
+        <div class="stat"><span class="stat-number">71</span><span class="stat-label">Emotions</span></div>
+        <div class="stat"><span class="stat-number">19</span><span class="stat-label">Dances</span></div>
+        <div class="stat"><span class="stat-number">13</span><span class="stat-label">AI Tools</span></div>
+        <div class="stat"><span class="stat-number">4</span><span class="stat-label">WebSockets</span></div>
+        <div class="stat"><span class="stat-number">9</span><span class="stat-label">Live Charts</span></div>
     </div>
 </section>
+<!-- Screenshots -->
+<section class="screenshots" id="screenshots">
     <div class="container">
+        <h2 class="section-tag">Screenshots</h2>
+        <h3 class="section-title">See It In Action</h3>
+        <div class="screenshot-grid">
+            <div class="screenshot-card screenshot-wide">
+                <img src="screenshots/status-tab.png" alt="System telemetry dashboard with 9 live charts" loading="lazy" />
+                <div class="screenshot-caption">
                     <strong>System Telemetry</strong>
+                    <span>9 live charts &middot; top processes &middot; hardware inventory</span>
                 </div>
             </div>
+            <div class="screenshot-card">
+                <img src="screenshots/telemetry-tab.png" alt="3D MuJoCo robot viewer with head telemetry" loading="lazy" />
+                <div class="screenshot-caption">
                     <strong>3D Robot View</strong>
+                    <span>MuJoCo simulation &middot; head pose telemetry</span>
                 </div>
             </div>
+            <div class="screenshot-card">
+                <img src="screenshots/conversation-settings.png" alt="AI Provider Settings showing 6 configured providers" loading="lazy" />
+                <div class="screenshot-caption">
+                    <strong>AI Provider Settings</strong>
+                    <span>6 providers &middot; STT/LLM/VLM/TTS &middot; voice selection</span>
                 </div>
             </div>
         </div>
 </section>
 <!-- Features -->
+<section class="features" id="features">
     <div class="container">
+        <h2 class="section-tag">Features</h2>
+        <h3 class="section-title">Everything Your Reachy Mini Needs</h3>
+        <p class="section-subtitle">One app to rule them all — no other community app comes close.</p>
         <div class="feature-grid">
             <div class="feature-card accent-purple">
                 <div class="feature-icon-wrap"><span>&#x1F4AC;</span></div>
                 <h3>AI Conversation</h3>
+                <p>Full voice pipeline: robot mic &#x2192; Whisper STT &#x2192; LLM chat &#x2192; TTS response. Supports <strong>OpenAI, Anthropic, Groq, Gemini, DeepSeek</strong>, and <strong>ElevenLabs</strong>.</p>
             </div>
             <div class="feature-card accent-blue">
                 <div class="feature-icon-wrap"><span>&#x1F441;</span></div>
                 <h3>Vision (VLM)</h3>
+                <p>Dedicated vision model selector with auto-detection per provider. Ask <em>"what do you see?"</em> and Reachy looks through the camera and describes the scene.</p>
             </div>
             <div class="feature-card accent-green">
                 <div class="feature-icon-wrap"><span>&#x1F3AD;</span></div>
                 <h3>71 Emotions + 19 Dances</h3>
+                <p>The AI expresses itself with emotions and dances during conversation. Say something funny and Reachy laughs. Ask it to dance and it picks a move.</p>
             </div>
             <div class="feature-card accent-orange">
                 <div class="feature-icon-wrap"><span>&#x1F4CA;</span></div>
                 <h3>System Telemetry</h3>
+                <p>9 live charts: CPU per-core, RAM breakdown, disk, network, WiFi, load, fan speed, disk I/O, temperature. Plus top processes and hardware inventory.</p>
             </div>
             <div class="feature-card accent-cyan">
                 <div class="feature-icon-wrap"><span>&#x1F579;</span></div>
                 <h3>Head Control + 3D View</h3>
+                <p>Interactive MuJoCo simulation with real-time joints. Drag sliders for roll/pitch/yaw, X/Y/Z, and antennas. Stewart platform actuator angles live.</p>
             </div>
             <div class="feature-card accent-pink">
                 <div class="feature-icon-wrap"><span>&#x1F3B5;</span></div>
                 <h3>Music + Audio</h3>
+                <p>Upload music, play via GStreamer on the robot speaker, manage your library. Selectable audio routing: robot mic or browser mic, robot or browser speaker.</p>
             </div>
         </div>
     </div>
 </section>
 <!-- AI Tools -->
+<section class="tools-section" id="tools">
     <div class="container">
+        <h2 class="section-tag">AI Tools</h2>
+        <h3 class="section-title">13 Tools the LLM Calls Autonomously</h3>
+        <p class="section-subtitle">Natural conversation triggers actions — no buttons needed.</p>
         <div class="tools-grid">
             <div class="tool-chip"><span class="tool-icon">&#x1F60A;</span> Play emotions</div>
             <div class="tool-chip"><span class="tool-icon">&#x1F57A;</span> Dance moves</div>
 </section>
 <!-- AI Pipeline -->
+<section class="pipeline-section" id="pipeline">
     <div class="container">
+        <h2 class="section-tag">Architecture</h2>
+        <h3 class="section-title">AI Pipeline</h3>
         <div class="pipeline-flow">
             <div class="pipeline-stage">
+                <div class="stage-icon">&#x1F3A4;</div>
                 <div class="stage-header">STT</div>
                 <div class="stage-body">
                     <div class="provider-tag">OpenAI Whisper</div>
             </div>
             <div class="pipeline-arrow">&#x2192;</div>
             <div class="pipeline-stage">
+                <div class="stage-icon">&#x1F9E0;</div>
                 <div class="stage-header">LLM</div>
                 <div class="stage-body">
                     <div class="provider-tag">OpenAI</div>
             </div>
             <div class="pipeline-arrow">&#x2192;</div>
             <div class="pipeline-stage">
+                <div class="stage-icon">&#x1F50A;</div>
                 <div class="stage-header">TTS</div>
                 <div class="stage-body">
                     <div class="provider-tag">OpenAI</div>
             </div>
             <div class="pipeline-arrow">+</div>
             <div class="pipeline-stage">
+                <div class="stage-icon">&#x1F441;</div>
                 <div class="stage-header">VLM</div>
                 <div class="stage-body">
                     <div class="provider-tag">Auto-detected</div>
 <!-- WebSocket Architecture -->
 <section class="ws-section">
     <div class="container">
+        <h2 class="section-tag">Real-Time</h2>
+        <h3 class="section-title">WebSocket Architecture</h3>
         <p class="section-subtitle">Zero polling. Everything streams live.</p>
         <div class="ws-grid">
             <div class="ws-card">
 </section>
 <!-- Getting Started -->
+<section class="getting-started" id="setup">
     <div class="container">
+        <h2 class="section-tag">Get Started</h2>
+        <h3 class="section-title">Up and Running in 3 Steps</h3>
         <div class="steps-row">
             <div class="step">
                 <div class="step-number">1</div>

screenshots/conversation-active.png CHANGED Viewed

Git LFS Details

SHA256: a0bd5668679e6a4eac35215f90af6dec270f2fe63da328ef2a57f4d190327e09
Pointer size: 131 Bytes
Size of remote file: 124 kB

Git LFS Details

SHA256: 9735e5e40fa3ed3a50970c6bdef992076d8e4e3dd34590ecad1c4621687548b5
Pointer size: 131 Bytes
Size of remote file: 129 kB

screenshots/conversation-settings.png CHANGED Viewed

Git LFS Details

SHA256: 334841ae2b648e32e141e22b8d5b507de313c64e3989d9ee084c166ed784c6d2
Pointer size: 131 Bytes
Size of remote file: 154 kB

Git LFS Details

SHA256: 4af126611f73afff3cce72b8484e093469eeaf81a789844ac559bafacc41c4c6
Pointer size: 130 Bytes
Size of remote file: 79.7 kB

screenshots/status-tab.png CHANGED Viewed

Git LFS Details

SHA256: 16b7f478ea3e9015a56f3ae6d9bc170660a84fd565d03ef60574ff0bf124d7d3
Pointer size: 131 Bytes
Size of remote file: 138 kB

Git LFS Details

SHA256: 704adc2b1a7d549f501608f54d35c9eebcc14629be382f17cb82455f7e59f16f
Pointer size: 131 Bytes
Size of remote file: 107 kB

screenshots/telemetry-tab.png CHANGED Viewed

Git LFS Details

SHA256: 8394a91e78a2fe9d21d5bcdb445ce96a30f7d6b3443218c02f3acce1129b1a0c
Pointer size: 131 Bytes
Size of remote file: 165 kB

Git LFS Details

SHA256: 927877e6c23334bf3c498598c337a76624e07333ec69b07b75ae1766ac0c9598
Pointer size: 131 Bytes
Size of remote file: 141 kB

style.css CHANGED Viewed

@@ -3,12 +3,13 @@
 * { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
-    --bg-dark: #0f0d1a;
-    --bg-card: #1a1726;
-    --bg-card-hover: #221e30;
     --accent: #7c5cfc;
     --accent-light: #a78bfa;
-    --accent-glow: rgba(124, 92, 252, 0.3);
     --text: #e2e0ea;
     --text-muted: #9490a6;
     --text-dim: #6b6681;
@@ -30,16 +31,61 @@ body {
     min-height: 100vh;
 }
-.container { max-width: 1140px; margin: 0 auto; padding: 0 1.5rem; }
-/* ── Hero ──────────────────────────────── */
 .hero {
     position: relative;
-    padding: 5rem 1.5rem 3rem;
-    text-align: center;
     overflow: hidden;
-    background: radial-gradient(ellipse at 50% 0%, rgba(124, 92, 252, 0.25) 0%, transparent 60%),
                 var(--bg-dark);
 }
@@ -47,71 +93,139 @@ body {
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(
-        0deg,
-        transparent,
-        transparent 60px,
-        rgba(124, 92, 252, 0.04) 60px,
-        rgba(124, 92, 252, 0.04) 61px
     ),
     repeating-linear-gradient(
-        90deg,
-        transparent,
-        transparent 60px,
-        rgba(124, 92, 252, 0.04) 60px,
-        rgba(124, 92, 252, 0.04) 61px
     );
 }
-.hero-content { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; }
 .hero-badge {
     display: inline-block;
     background: rgba(124, 92, 252, 0.15);
     border: 1px solid rgba(124, 92, 252, 0.3);
     color: var(--accent-light);
-    padding: 0.35rem 1rem;
     border-radius: 50px;
-    font-size: 0.8rem;
     font-weight: 600;
-    letter-spacing: 0.03em;
-    margin-bottom: 1.5rem;
     text-transform: uppercase;
 }
 .hero h1 {
-    font-size: 3.5rem;
     font-weight: 800;
-    line-height: 1.1;
     margin-bottom: 1rem;
-    background: linear-gradient(135deg, #fff 0%, var(--accent-light) 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 .hero-tagline {
-    font-size: 1.15rem;
     color: var(--text-muted);
-    max-width: 650px;
-    margin: 0 auto 2.5rem;
     line-height: 1.7;
 }
-.hero-stats {
     display: flex;
-    justify-content: center;
-    gap: 2rem;
     flex-wrap: wrap;
 }
-.stat {
-    text-align: center;
-    min-width: 80px;
 }
 .stat-number {
     display: block;
-    font-size: 2.2rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.2;
@@ -119,90 +233,97 @@ body {
 .stat-label {
     display: block;
-    font-size: 0.75rem;
     color: var(--text-dim);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-weight: 600;
 }
-/* ── Screenshot Showcase ──────────────── */
-.showcase {
-    padding: 3rem 0;
 }
-.showcase-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
-    gap: 1rem;
 }
-.showcase-item {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid rgba(124, 92, 252, 0.15);
-    transition: transform 0.3s, border-color 0.3s;
 }
-.showcase-item:hover {
-    transform: translateY(-3px);
     border-color: rgba(124, 92, 252, 0.4);
 }
-.showcase-large {
-    grid-column: 1 / -1;
-}
-.showcase-item img {
     width: 100%;
     height: auto;
     display: block;
 }
-.showcase-label {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-    padding: 1rem 1.25rem;
-    background: linear-gradient(transparent, rgba(15, 13, 26, 0.95));
 }
-.showcase-label strong {
     display: block;
     font-size: 0.95rem;
     color: #fff;
 }
-.showcase-label span {
     font-size: 0.8rem;
     color: var(--text-muted);
 }
-/* ── Section Titles ───────────────────── */
-.section-title {
-    font-size: 1.8rem;
-    font-weight: 700;
-    text-align: center;
-    margin-bottom: 0.5rem;
-    color: #fff;
-}
-.section-subtitle {
-    text-align: center;
-    color: var(--text-muted);
-    font-size: 0.95rem;
-    margin-bottom: 2rem;
-}
 /* ── Features ─────────────────────────── */
-.features { padding: 3rem 0; }
-.features .section-title { margin-bottom: 2rem; }
 .feature-grid {
     display: grid;
@@ -239,7 +360,6 @@ body {
     justify-content: center;
     font-size: 1.5rem;
     margin-bottom: 1rem;
-    background: rgba(124, 92, 252, 0.1);
 }
 .accent-purple .feature-icon-wrap { background: rgba(168, 85, 247, 0.12); }
@@ -261,20 +381,12 @@ body {
     line-height: 1.6;
 }
-.feature-card p strong {
-    color: var(--text);
-}
-.feature-card p em {
-    color: var(--accent-light);
-    font-style: normal;
-}
-/* ── Tools Section ────────────────────── */
-.tools-section {
-    padding: 3rem 0;
-}
 .tools-grid {
     display: flex;
@@ -303,11 +415,9 @@ body {
 .tool-icon { font-size: 1rem; }
-/* ── Pipeline Section ─────────────────── */
-.pipeline-section {
-    padding: 3rem 0;
-}
 .pipeline-flow {
     display: flex;
@@ -315,7 +425,7 @@ body {
     justify-content: center;
     gap: 0.75rem;
     flex-wrap: wrap;
-    margin-bottom: 1.5rem;
 }
 .pipeline-stage {
@@ -326,6 +436,12 @@ body {
     min-width: 150px;
     flex: 1;
     max-width: 220px;
 }
 .stage-header {
@@ -363,15 +479,11 @@ body {
     color: var(--text-dim);
 }
-.pipeline-note strong {
-    color: var(--accent-light);
-}
-/* ── WebSocket Section ────────────────── */
-.ws-section {
-    padding: 3rem 0;
-}
 .ws-grid {
     display: grid;
@@ -404,14 +516,13 @@ body {
 /* ── Getting Started ──────────────────── */
-.getting-started {
-    padding: 3rem 0 4rem;
-}
 .steps-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
 }
 .step {
@@ -466,46 +577,34 @@ body {
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
-.footer p {
-    color: var(--text-dim);
-    font-size: 0.85rem;
-}
 .footer strong { color: var(--text); }
-.footer a {
-    color: var(--accent-light);
-    text-decoration: none;
-}
 .footer a:hover { text-decoration: underline; }
-.footer-sub {
-    margin-top: 0.5rem;
-    font-size: 0.75rem;
-    color: var(--text-dim);
-    opacity: 0.6;
-}
 /* ── Responsive ───────────────────────── */
-@media (max-width: 768px) {
-    .hero { padding: 3rem 1rem 2rem; }
     .hero h1 { font-size: 2.2rem; }
-    .hero-stats { gap: 1rem; }
-    .stat-number { font-size: 1.6rem; }
-    .showcase-grid { grid-template-columns: 1fr; }
-    .showcase-large { grid-column: auto; }
-    .feature-grid { grid-template-columns: 1fr; }
     .ws-grid { grid-template-columns: repeat(2, 1fr); }
     .steps-row { grid-template-columns: 1fr; }
-    .pipeline-flow { flex-direction: column; align-items: center; }
-    .pipeline-arrow { transform: rotate(90deg); }
-    .pipeline-stage { max-width: 100%; }
 }
-@media (max-width: 480px) {
     .hero h1 { font-size: 1.8rem; }
-    .hero-tagline { font-size: 1rem; }
     .ws-grid { grid-template-columns: 1fr; }
 }

 * { margin: 0; padding: 0; box-sizing: border-box; }
 :root {
+    --bg-dark: #0a0a0f;
+    --bg-card: #14141f;
+    --bg-card-hover: #1c1c2e;
+    --bg-surface: #111118;
     --accent: #7c5cfc;
     --accent-light: #a78bfa;
+    --accent-glow: rgba(124, 92, 252, 0.25);
     --text: #e2e0ea;
     --text-muted: #9490a6;
     --text-dim: #6b6681;
     min-height: 100vh;
 }
+.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
+/* ── Nav ─────────────────────────────── */
+.nav {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    background: rgba(10, 10, 15, 0.85);
+    backdrop-filter: blur(12px);
+    border-bottom: 1px solid rgba(124, 92, 252, 0.1);
+    padding: 0.75rem 1.5rem;
+}
+.nav-inner {
+    max-width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+.nav-brand {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 700;
+    font-size: 1.1rem;
+}
+.nav-icon { font-size: 1.4rem; }
+.nav-links {
+    display: flex;
+    gap: 1.5rem;
+}
+.nav-links a {
+    color: var(--text-muted);
+    text-decoration: none;
+    font-size: 0.88rem;
+    font-weight: 500;
+    transition: color 0.2s;
+}
+.nav-links a:hover { color: var(--accent-light); }
+/* ── Hero (split layout) ────────────── */
 .hero {
     position: relative;
+    padding: 4rem 1.5rem 2rem;
     overflow: hidden;
+    background: radial-gradient(ellipse at 30% 20%, rgba(124, 92, 252, 0.2) 0%, transparent 50%),
+                radial-gradient(ellipse at 70% 80%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
                 var(--bg-dark);
 }
     position: absolute;
     inset: 0;
     background: repeating-linear-gradient(
+        0deg, transparent, transparent 60px,
+        rgba(124, 92, 252, 0.03) 60px, rgba(124, 92, 252, 0.03) 61px
     ),
     repeating-linear-gradient(
+        90deg, transparent, transparent 60px,
+        rgba(124, 92, 252, 0.03) 60px, rgba(124, 92, 252, 0.03) 61px
     );
 }
+.hero-split {
+    position: relative;
+    z-index: 1;
+    max-width: 1200px;
+    margin: 0 auto;
+    display: grid;
+    grid-template-columns: 1fr 1.1fr;
+    gap: 3rem;
+    align-items: center;
+}
 .hero-badge {
     display: inline-block;
     background: rgba(124, 92, 252, 0.15);
     border: 1px solid rgba(124, 92, 252, 0.3);
     color: var(--accent-light);
+    padding: 0.3rem 0.9rem;
     border-radius: 50px;
+    font-size: 0.75rem;
     font-weight: 600;
+    letter-spacing: 0.04em;
+    margin-bottom: 1.25rem;
     text-transform: uppercase;
 }
 .hero h1 {
+    font-size: 2.8rem;
     font-weight: 800;
+    line-height: 1.15;
     margin-bottom: 1rem;
+    color: #fff;
+}
+.hero-accent {
+    background: linear-gradient(135deg, var(--accent-light) 0%, var(--cyan) 100%);
     background-clip: text;
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
 }
 .hero-tagline {
+    font-size: 1.05rem;
     color: var(--text-muted);
+    max-width: 520px;
+    margin-bottom: 1.5rem;
     line-height: 1.7;
 }
+.hero-chips {
     display: flex;
     flex-wrap: wrap;
+    gap: 0.5rem;
+    margin-bottom: 1.25rem;
 }
+.chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 50px;
+    padding: 0.3rem 0.75rem;
+    font-size: 0.78rem;
+    color: var(--text);
+    white-space: nowrap;
+}
+.hero-tech {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.4rem;
+}
+.tech-tag {
+    background: rgba(124, 92, 252, 0.12);
+    border: 1px solid rgba(124, 92, 252, 0.25);
+    color: var(--accent-light);
+    padding: 0.2rem 0.6rem;
+    border-radius: 4px;
+    font-size: 0.72rem;
+    font-weight: 600;
+    font-family: "SF Mono", "Fira Code", "Consolas", monospace;
+}
+.hero-image {
+    position: relative;
 }
+.hero-image img {
+    width: 100%;
+    border-radius: var(--radius);
+    border: 1px solid rgba(124, 92, 252, 0.2);
+    box-shadow:
+        0 4px 30px rgba(124, 92, 252, 0.15),
+        0 0 80px rgba(124, 92, 252, 0.08);
+    transition: transform 0.3s;
+}
+.hero-image img:hover {
+    transform: scale(1.02);
+}
+/* ── Stats bar ───────────────────────── */
+.stats-bar {
+    background: var(--bg-surface);
+    border-top: 1px solid rgba(124, 92, 252, 0.1);
+    border-bottom: 1px solid rgba(124, 92, 252, 0.1);
+    padding: 1.5rem 0;
+}
+.stats-bar .container {
+    display: flex;
+    justify-content: center;
+    gap: 3rem;
+    flex-wrap: wrap;
+}
+.stat { text-align: center; min-width: 70px; }
 .stat-number {
     display: block;
+    font-size: 2rem;
     font-weight: 800;
     color: #fff;
     line-height: 1.2;
 .stat-label {
     display: block;
+    font-size: 0.7rem;
     color: var(--text-dim);
     text-transform: uppercase;
     letter-spacing: 0.08em;
     font-weight: 600;
 }
+/* ── Section headings ────────────────── */
+.section-tag {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    color: var(--accent-light);
+    text-align: center;
+    margin-bottom: 0.4rem;
+}
+.section-title {
+    font-size: 2rem;
+    font-weight: 700;
+    text-align: center;
+    margin-bottom: 0.5rem;
+    color: #fff;
 }
+.section-subtitle {
+    text-align: center;
+    color: var(--text-muted);
+    font-size: 0.95rem;
+    margin-bottom: 2.5rem;
+}
+/* ── Screenshots ─────────────────────── */
+.screenshots { padding: 4rem 0; }
+.screenshot-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
+    gap: 1.25rem;
+    margin-top: 1.5rem;
 }
+.screenshot-card {
     position: relative;
     border-radius: var(--radius);
     overflow: hidden;
     border: 1px solid rgba(124, 92, 252, 0.15);
+    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
+    background: var(--bg-card);
 }
+.screenshot-card:hover {
+    transform: translateY(-4px);
     border-color: rgba(124, 92, 252, 0.4);
+    box-shadow: 0 8px 40px rgba(124, 92, 252, 0.12);
 }
+.screenshot-wide { grid-column: 1 / -1; }
+.screenshot-card img {
     width: 100%;
     height: auto;
     display: block;
 }
+.screenshot-caption {
+    padding: 1rem 1.25rem;
+    background: linear-gradient(transparent, rgba(10, 10, 15, 0.95));
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
 }
+.screenshot-caption strong {
     display: block;
     font-size: 0.95rem;
     color: #fff;
 }
+.screenshot-caption span {
     font-size: 0.8rem;
     color: var(--text-muted);
 }
 /* ── Features ─────────────────────────── */
+.features { padding: 4rem 0; }
 .feature-grid {
     display: grid;
     justify-content: center;
     font-size: 1.5rem;
     margin-bottom: 1rem;
 }
 .accent-purple .feature-icon-wrap { background: rgba(168, 85, 247, 0.12); }
     line-height: 1.6;
 }
+.feature-card p strong { color: var(--text); }
+.feature-card p em { color: var(--accent-light); font-style: normal; }
+/* ── Tools ────────────────────────────── */
+.tools-section { padding: 4rem 0; }
 .tools-grid {
     display: flex;
 .tool-icon { font-size: 1rem; }
+/* ── Pipeline ─────────────────────────── */
+.pipeline-section { padding: 4rem 0; }
 .pipeline-flow {
     display: flex;
     justify-content: center;
     gap: 0.75rem;
     flex-wrap: wrap;
+    margin: 1.5rem 0;
 }
 .pipeline-stage {
     min-width: 150px;
     flex: 1;
     max-width: 220px;
+    text-align: center;
+}
+.stage-icon {
+    font-size: 1.5rem;
+    margin-bottom: 0.4rem;
 }
 .stage-header {
     color: var(--text-dim);
 }
+.pipeline-note strong { color: var(--accent-light); }
+/* ── WebSocket ────────────────────────── */
+.ws-section { padding: 4rem 0; }
 .ws-grid {
     display: grid;
 /* ── Getting Started ──────────────────── */
+.getting-started { padding: 4rem 0 5rem; }
 .steps-row {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
+    margin-top: 1rem;
 }
 .step {
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 }
+.footer p { color: var(--text-dim); font-size: 0.85rem; }
 .footer strong { color: var(--text); }
+.footer a { color: var(--accent-light); text-decoration: none; }
 .footer a:hover { text-decoration: underline; }
+.footer-sub { margin-top: 0.5rem; font-size: 0.75rem; opacity: 0.6; }
 /* ── Responsive ───────────────────────── */
+@media (max-width: 900px) {
+    .hero-split { grid-template-columns: 1fr; gap: 2rem; }
     .hero h1 { font-size: 2.2rem; }
+    .hero-image { order: -1; }
+    .feature-grid { grid-template-columns: 1fr 1fr; }
     .ws-grid { grid-template-columns: repeat(2, 1fr); }
     .steps-row { grid-template-columns: 1fr; }
+    .nav-links { display: none; }
 }
+@media (max-width: 600px) {
+    .hero { padding: 2rem 1rem 1.5rem; }
     .hero h1 { font-size: 1.8rem; }
+    .stats-bar .container { gap: 1.5rem; }
+    .stat-number { font-size: 1.5rem; }
+    .screenshot-grid { grid-template-columns: 1fr; }
+    .screenshot-wide { grid-column: auto; }
+    .feature-grid { grid-template-columns: 1fr; }
     .ws-grid { grid-template-columns: 1fr; }
+    .pipeline-flow { flex-direction: column; align-items: center; }
+    .pipeline-arrow { transform: rotate(90deg); }
+    .pipeline-stage { max-width: 100%; }
 }