Update index.html

index.html

@@ -46,10 +46,10 @@
                     <img src="assets/Build.png" alt="Build your Reachy Mini" class="section-image">
                 </div>
 
-                <div class="grid-2 build-grid">
-                    <!-- Beta Version -->
-                    <div class="card">
-                        <div class="badge badge-muted">Beta</div>
+                <div class="grid-2">
+                    <!-- Reachy Mini -->
+                    <div class="card card-flex">
+                        <h4 class="card-title">Reachy Mini</h4>
                         <div class="video-wrapper">
                             <iframe 
                                 src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB" 
@@ -68,25 +68,32 @@
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                             </svg>
                         </a>
-                        <p class="card-text-small">
-                            After you build your Reachy Mini, you can download the dashboard to control your Reachy Mini here:
-                        </p>
-                        <a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json" 
-                           target="_blank" 
-                           class="btn btn-outline btn-full">
-                            Download dashboard
-                            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-                            </svg>
-                        </a>
+                        <details class="accordion">
+                            <summary class="accordion-trigger">Connect to your Reachy Mini Wireless</summary>
+                            <div class="accordion-content">
+                                <ol>
+                                    <li>Power on your Reachy Mini.</li>
+                                    <li>Reachy Mini will create its own access point: "reachy-mini-ap". It should appear in the list of available Wi-Fi networks on your computer or smartphone after a few moments.</li>
+                                    <li>Connect your computer to the <code>reachy-mini-ap</code> Wi-Fi network (password: <code>reachy-mini</code>). Or you can directly scan the QR-code below to join the network:</li>
+                                </ol>
+                                <div class="qr-code-wrapper">
+                                    <img src="reachy-mini-ap-qr.png" alt="QR Code to connect to reachy-mini-ap" class="qr-code">
+                                </div>
+                                <ol start="4">
+                                    <li>Open a web browser and go to <a href="http://reachy-mini.local:8000/settings" target="_blank"><code>http://reachy-mini.local:8000/settings</code></a> to access the configuration page.</li>
+                                    <li>Enter your Wi-Fi network credentials (SSID and password) and click "Connect".</li>
+                                    <li>Wait a few moments for Reachy Mini to connect to your Wi-Fi network. The access point will disappear once connected. If the connection fails, Reachy Mini will restart the access point, and you can try again.</li>
+                                </ol>
+                            </div>
+                        </details>
                     </div>
 
-                    <!-- Lite Version -->
-                    <div class="card">
-                        <div class="badge badge-primary">Lite</div>
+                    <!-- Reachy Mini Lite -->
+                    <div class="card card-flex">
+                        <h4 class="card-title">Reachy Mini Lite</h4>
                         <div class="video-wrapper">
                             <iframe 
-                                src="https://www.youtube.com/embed/_r0cHySFbeY?si=TIf791Q4jaXQArjB" 
+                                src="https://www.youtube.com/embed/XGMdd38vHd0?si=fHsqOqlNUNKw930f" 
                                 title="YouTube video player" 
                                 frameborder="0" 
                                 allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
@@ -94,25 +101,32 @@
                                 allowfullscreen>
                             </iframe>
                         </div>
-                        <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_Assembly_Guide" 
+                        <a href="https://huggingface.co/spaces/pollen-robotics/Reachy_Mini_LITE_Assembly_Guide" 
                            target="_blank" 
                            class="btn btn-outline btn-full mb-4">
-                            Open assembly guide
-                            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
-                            </svg>
-                        </a>
-                        <p class="card-text-small">
-                            After you build your Reachy Mini, you can download the dashboard to control your Reachy Mini here:
-                        </p>
-                        <a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json" 
-                           target="_blank" 
-                           class="btn btn-outline btn-full">
-                            Download dashboard
+                            Open Assembly Guide (Lite version)
                             <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                             </svg>
                         </a>
+                        <details class="accordion">
+                            <summary class="accordion-trigger">Connect to your Reachy Mini Lite</summary>
+                            <div class="accordion-content">
+                                <ol>
+                                    <li>Power on Reachy Mini.</li>
+                                    <li>Connect Reachy Mini to your computer using the provided USB cable.</li>
+                                    <li>Download the dashboard to interact with your Reachy Mini.</li>
+                                </ol>
+                                <a href="https://pollen-robotics.github.io/reachy-mini-desktop-app/latest.json" 
+                                   target="_blank" 
+                                   class="link-tertiary link-centered">
+                                    Download dashboard
+                                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                                    </svg>
+                                </a>
+                            </div>
+                        </details>
                     </div>
                 </div>
 
@@ -128,16 +142,16 @@
                 </div>
 
                 <div class="grid-2">
-                    <!-- No Code -->
-                    <div class="card">
-                        <h4 class="card-title">2.1. No Code</h4>
+                    <!-- Interactive Dashboard -->
+                    <div class="card card-flex">
+                        <h4 class="card-title">Interactive Dashboard</h4>
                         <div class="gif-wrapper">
                             <img src="reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
                         </div>
                         <p class="card-text">
                             Start playing with Reachy Mini using our visual dashboard - no coding required.
                         </p>
-                        <a href="#" target="_blank" class="btn btn-outline btn-full">
+                        <a href="#" target="_blank" class="btn btn-outline btn-full mt-auto">
                             Download dashboard
                             <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
@@ -145,19 +159,19 @@
                         </a>
                     </div>
 
-                    <!-- Code Your Own -->
-                    <div class="card">
-                        <h4 class="card-title">2.2. Code Your Own Applications</h4>
-                        <div class="placeholder">
-                            Documentation GIF preview<br>(coming soon)
+                    <!-- Explore Applications -->
+                    <div class="card card-flex">
+                        <h4 class="card-title">Explore Applications</h4>
+                        <div class="gif-wrapper">
+                            <img src="assets/reachy-mini-hand-tracking.png" alt="Reachy Mini Hand Tracking">
                         </div>
                         <p class="card-text">
-                            Explore the documentation and build custom applications for your Reachy Mini.
+                            Explore the applications already developed for Reachy Mini and install them in one click via the dashboard.
                         </p>
-                        <a href="https://github.com/pollen-robotics/reachy_mini" 
+                        <a href="https://huggingface.co/spaces?q=reachy+mini" 
                            target="_blank" 
-                           class="btn btn-outline btn-full">
-                            View documentation
+                           class="btn btn-outline btn-full mt-auto">
+                            Explore Applications
                             <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                             </svg>
@@ -174,30 +188,54 @@
 
                 <div class="grid-3">
                     <!-- No Code -->
-                    <div class="card">
+                    <div class="card card-flex">
                         <h4 class="card-title">No Code</h4>
                         <div class="dashboard-image-wrapper">
                             <img src="dashboard-discover-apps.png" alt="Reachy Mini Dashboard">
                         </div>
                         <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                         </p>
+                        <a href="https://github.com/iizukak/reachy_mini_turbowarp" 
+                           target="_blank" 
+                           class="link-tertiary link-centered">
+                            Code with Scratch
+                            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                            </svg>
+                        </a>
                     </div>
 
                     <!-- SDK -->
-                    <div class="card">
+                    <div class="card card-flex">
                         <h4 class="card-title">SDK</h4>
                         <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                         </p>
+                        <a href="https://github.com/pollen-robotics/reachy_mini" 
+                           target="_blank" 
+                           class="link-tertiary link-centered">
+                            Develop native apps
+                            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                            </svg>
+                        </a>
                     </div>
 
                     <!-- Web API -->
-                    <div class="card">
+                    <div class="card card-flex">
                         <h4 class="card-title">Web API</h4>
                         <p class="card-text">
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
                         </p>
+                        <a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_template_app" 
+                           target="_blank" 
+                           class="link-tertiary link-centered">
+                            Duplicate Template
+                            <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
+                            </svg>
+                        </a>
                     </div>
                 </div>
             </div>
@@ -209,14 +247,14 @@
                 </div>
 
                 <div class="grid-2">
-                    <!-- Browse Spaces -->
+                    <!-- Share your app -->
                     <div class="card card-flex">
-                        <h4 class="card-title">4.1. Browse Existing Spaces</h4>
+                        <h4 class="card-title">Share your app with the community</h4>
                         <div class="gif-wrapper">
-                            <img src="reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
+                            <img src="assets/reachy-mini-demo-dashboard.gif" alt="Reachy Mini Dashboard Demo">
                         </div>
                         <p class="card-text">
-                            Discover all Spaces already developed for Reachy Mini. You can also duplicate them to customize depending on your needs.
+                            Each app can be shared on Hugging Face by making it public. Each space can receive likes and may appear in our Top Apps.
                         </p>
                         <a href="https://huggingface.co/spaces?q=reachy+mini" 
                            target="_blank" 
@@ -228,11 +266,11 @@
                         </a>
                     </div>
 
-                    <!-- Create Spaces -->
+                    <!-- Co-create -->
                     <div class="card card-flex">
-                        <h4 class="card-title">4.2. Build Your Own Spaces</h4>
+                        <h4 class="card-title">Co-create with Reachy Mini Lovers</h4>
                         <p class="card-text">
-                            Build, customize existing apps, or create your own from scratch using our template.
+                            Lorem ipsum
                         </p>
                         <a href="https://huggingface.co/spaces/pollen-robotics/reachy_mini_app_example" 
                            target="_blank" 
@@ -274,25 +312,31 @@
             </p>
 
             <div class="grid-2 pricing-grid">
-                <!-- Lite Version -->
+                <!-- Wireless Version -->
                 <div class="card pricing-card">
                     <div class="pricing-header">
-                        <div class="badge badge-primary">Lite</div>
-                        <h3 class="pricing-title">Reachy Mini Lite</h3>
-                        <p class="pricing-price">$299</p>
+                        <div class="badge badge-muted">Wireless</div>
+                        <h3 class="pricing-title">Reachy Mini</h3>
+                        <p class="pricing-price">$499</p>
                     </div>
                     <ul class="feature-list">
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                             </svg>
-                            External compute (Mac & Linux, Windows soon)
+                            On-board compute (Raspberry Pi 4)
                         </li>
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                             </svg>
-                            No Wi-Fi (wired power only)
+                            Works both wired and wireless
+                        </li>
+                        <li>
+                            <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+                            </svg>
+                            Wi-Fi enabled
                         </li>
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -310,7 +354,7 @@
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                             </svg>
-                            No accelerometer
+                            Integrated accelerometer
                         </li>
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -331,41 +375,35 @@
                             2 animated antennas
                         </li>
                     </ul>
-                    <a href="https://buy.stripe.com/6oUfZj78P1a5e6b0FS73G02" 
+                    <a href="https://buy.stripe.com/9B65kFfFlaKFbY34W873G03" 
                        target="_blank" 
-                       class="btn btn-primary btn-full">
-                        Buy Lite version
+                       class="btn btn-primary btn-full mt-auto">
+                        Buy Wireless version
                         <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                         </svg>
                     </a>
                 </div>
 
-                <!-- Wireless Version -->
+                <!-- Lite Version -->
                 <div class="card pricing-card">
                     <div class="pricing-header">
-                        <div class="badge badge-success">Wireless</div>
-                        <h3 class="pricing-title">Reachy Mini Wireless</h3>
-                        <p class="pricing-price">$449</p>
+                        <div class="badge badge-primary">Lite</div>
+                        <h3 class="pricing-title">Reachy Mini Lite</h3>
+                        <p class="pricing-price">$299</p>
                     </div>
                     <ul class="feature-list">
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                             </svg>
-                            On-board compute (Raspberry Pi 4)
-                        </li>
-                        <li>
-                            <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
-                            </svg>
-                            Works both wired and wireless, for power and communication
+                            External compute (Mac & Linux, Windows soon)
                         </li>
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                             </svg>
-                            Wi-Fi enabled, or Ethernet via a USB-C adapter (not included)
+                            No Wi-Fi (wired power only)
                         </li>
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -383,7 +421,7 @@
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
                             </svg>
-                            Integrated accelerometer
+                            No accelerometer
                         </li>
                         <li>
                             <svg class="check-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -404,10 +442,10 @@
                             2 animated antennas
                         </li>
                     </ul>
-                    <a href="https://buy.stripe.com/9B65kFfFlaKFbY34W873G03" 
+                    <a href="https://buy.stripe.com/6oUfZj78P1a5e6b0FS73G02" 
                        target="_blank" 
-                       class="btn btn-primary btn-full">
-                        Buy Wireless version
+                       class="btn btn-primary btn-full mt-auto">
+                        Buy Lite version
                         <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                         </svg>
@@ -420,18 +458,23 @@
     <!-- Footer -->
     <footer class="footer">
         <div class="container">
-            <p>&copy;Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co/" target="_blank">Hugging Face</a></p>
+            <div class="footer-content-centered">
+                <p>Need help? Contact us on <a href="https://discord.gg/2bAhWfXme9" target="_blank" rel="noopener noreferrer">Discord</a> and join the community.</p>
+                <p class="footer-credits">Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank" rel="noopener noreferrer">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co/" target="_blank" rel="noopener noreferrer">Hugging Face</a></p>
+            </div>
         </div>
     </footer>
 
     <!-- Documentation Button -->
-    <a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" class="doc-button" id="docButton">
+    <a href="https://github.com/pollen-robotics/reachy_mini" 
+       target="_blank" 
+       class="doc-button">
         <svg class="doc-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
         </svg>
         <span class="doc-text">Documentation</span>
     </a>
 
     <script src="script.js"></script>
 </body>
-</html>
+</html>