Updated installation notes

index.html

@@ -171,20 +171,31 @@
                 <h2>Installation</h2>
                 
                 <div class="install-methods">
+                    <div class="install-card primary">
+                        <h3>🎯 Via Reachy Dashboard (Recommended)</h3>
+                        <ol class="install-steps">
+                            <li>Open your Reachy Mini dashboard at <code>http://reachy-mini:8000</code></li>
+                            <li>Navigate to the <strong>Apps</strong> section</li>
+                            <li>Find <strong>Reachy F1 Commentator</strong> in the app store</li>
+                            <li>Click <strong>Install</strong> - all dependencies are handled automatically</li>
+                        </ol>
+                        <p class="method-note">✨ The easiest way to install - one-click installation with automatic dependency management.</p>
+                    </div>
+                    
                     <div class="install-card">
-                        <h3>Via Reachy Mini App Assistant (Recommended)</h3>
+                        <h3>Via Reachy Mini App Assistant</h3>
                         <div class="code-block">
                             <code>reachy-mini-app-assistant install reachy-f1-commentator</code>
                         </div>
-                        <p>The easiest way to install on your Reachy Mini. Handles all dependencies automatically.</p>
+                        <p class="method-note">Command-line installation for users who prefer terminal access.</p>
                     </div>
                     
                     <div class="install-card">
-                        <h3>Manual Installation</h3>
+                        <h3>Manual Installation (Advanced)</h3>
                         <div class="code-block">
                             <code>pip install git+https://huggingface.co/spaces/d10g/reachy-f1-commentator</code>
                         </div>
-                        <p>For advanced users or custom installations.</p>
+                        <p class="method-note">For advanced users or custom installations.</p>
                     </div>
                 </div>
 

style.css

@@ -353,12 +353,66 @@ section h2 {
     box-shadow: var(--shadow);
 }
 
+.install-card.primary {
+    background: linear-gradient(135deg, #fff5f5 0%, #ffe5e5 100%);
+    border: 3px solid var(--primary-color);
+    box-shadow: 0 4px 20px rgba(225, 6, 0, 0.2);
+}
+
 .install-card h3 {
     font-size: 1.3rem;
     margin-bottom: 20px;
     color: var(--secondary-color);
 }
 
+.install-steps {
+    list-style: none;
+    padding-left: 0;
+    margin: 20px 0;
+}
+
+.install-steps li {
+    padding: 12px 0;
+    padding-left: 35px;
+    position: relative;
+    color: var(--text-color);
+    line-height: 1.7;
+}
+
+.install-steps li::before {
+    content: counter(list-item);
+    counter-increment: list-item;
+    position: absolute;
+    left: 0;
+    top: 12px;
+    background: var(--primary-color);
+    color: white;
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: bold;
+    font-size: 0.85rem;
+}
+
+.install-steps code {
+    background: var(--secondary-color);
+    color: #00ff00;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-family: 'Courier New', monospace;
+    font-size: 0.9rem;
+}
+
+.method-note {
+    color: var(--text-light);
+    line-height: 1.7;
+    margin-top: 15px;
+    font-size: 0.95rem;
+}
+
 .code-block {
     background: var(--secondary-color);
     color: #00ff00;