improve front page

index.html

@@ -26,13 +26,16 @@
           <div class="tags">
             <span class="tag">vision</span>
             <span class="tag">lite</span>
-            <span class="tag">wireless</span>
             <span class="tag">hands-tracking</span>
             <span class="tag">mediapipe</span>
           </div>
           
           <p class="hero-description">
-            Control Reachy Mini's antennas with your hands using real-time hand tracking powered by MediaPipe.
+            Control <b>Reachy Mini’s head and antennas</b> using natural hand movements, powered by real-time hand tracking with MediaPipe. <br>
+            Reachy Mini follows the position of your hand with its head, while the orientation of your fingers controls the antennas.
+          </p>
+          <p style="color: #b45309; background: #fef3c7; padding: 10px; border-radius: 6px;">
+            ⚠️ This application is available only on <b>Reachy Mini Lite.</b>
           </p>
         </div>
       </div>
@@ -45,17 +48,45 @@
       <div class="technical-grid">
         <div>
           <h2 class="section-title">How it works</h2>
+        
           <p class="section-text">
-            This application uses <strong>MediaPipe Hands</strong> to detect and track your hands in real-time through Reachy Mini's camera.
+            Simply place <strong>one or two hands</strong> in front of Reachy Mini’s camera.
           </p>
+        
           <p class="section-text">
-            The 2D position of your hands is mapped to control Reachy Mini's antennas. Move your hands up, down, left, or right, and watch the antennas follow your movements wirelessly.
+            With <strong>one hand</strong>, Reachy Mini tracks your hand position with its head, and
+            <strong>finger orientation controls both antennas together</strong>.
           </p>
-          
+        
+          <p class="section-text">
+            With <strong>two hands</strong>, each hand controls one antenna independently
+          </p>
+
+          <p class="section-text">
+            For best tracking results, keep your hands at least <strong>50&nbsp;cm</strong> away from the robot’s camera.
+          </p>          
+        
+        
+          <div class="section-text">
+            <span>From the UI, you can:</span>
+            <ul style="padding-left: 1.2rem; margin-top: 0;">
+              <li>Enable or disable tracking features</li>
+              <li>Select the preferred hand to track</li>
+              <li>Change antenna behavior modes</li>
+              <li>View the robot’s live camera feed in real time</li>
+            </ul>
+          </div>
+        
           <h2 class="section-title" style="margin-top: 2rem;">How to install</h2>
+        
           <ol class="install-steps">
             <li>
-              <span>Make sure you already have the <a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest" class="link-tertiary">dashboard</a> installed.</span>
+              <span>
+                Make sure you already have the
+                <a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest"
+                   class="link-tertiary">dashboard</a>
+                installed.
+              </span>
             </li>
             <li>
               <span>Connect to your Reachy Mini using the dashboard.</span>
@@ -72,6 +103,7 @@
           </ol>
         </div>
         
+        
         <div>
           <img src="assets/reachy-mini-demo-dashboard.gif" alt="Dashboard Demo" class="demo-gif">
         </div>