Added leaderboard preview

index.html

@@ -160,7 +160,7 @@
                     <div class="feature-card">
                         <div class="feature-icon">🔊</div>
                         <h3>Professional Audio Synthesis</h3>
-                        <p>ElevenLabs text-to-speech integration with streaming audio for natural, expressive commentary that plays through Reachy's speakers.</p>
+                        <p>ElevenLabs v3 API with emotional variation support creates natural, expressive commentary. Includes a professional "British Sports Broadcaster" voice out of the box - perfect for authentic F1 commentary that adapts to race excitement.</p>
                     </div>
                     
                     <div class="feature-card">
@@ -254,6 +254,55 @@
             </div>
         </section>
 
+        <section class="audio-features">
+            <div class="container">
+                <h2>🎙️ Professional Broadcasting Quality</h2>
+                <p class="section-intro">Powered by ElevenLabs v3 API with emotional variation for authentic F1 commentary</p>
+                
+                <div class="audio-showcase">
+                    <div class="audio-highlight">
+                        <div class="audio-icon">🎭</div>
+                        <h3>Emotional Variation</h3>
+                        <p>Using the latest ElevenLabs v3 API, commentary dynamically adjusts tone and emotion based on race excitement. From calm strategic analysis to thrilling overtake moments, the voice naturally adapts to match the action.</p>
+                    </div>
+                    
+                    <div class="audio-highlight">
+                        <div class="audio-icon">🇬🇧</div>
+                        <h3>British Sports Broadcaster Voice</h3>
+                        <p>Includes a professional "British Sports Broadcaster" voice out of the box - no configuration needed. The authentic accent and delivery style creates an immersive F1 experience that feels like watching live coverage.</p>
+                    </div>
+                    
+                    <div class="audio-highlight">
+                        <div class="audio-icon">⚡</div>
+                        <h3>Streaming Audio</h3>
+                        <p>Low-latency streaming ensures commentary stays synchronized with race events. Audio begins playing within milliseconds of generation, creating a seamless real-time experience.</p>
+                    </div>
+                </div>
+                
+                <div class="audio-examples">
+                    <h3>Emotional Range Examples</h3>
+                    <div class="emotion-grid">
+                        <div class="emotion-example">
+                            <span class="emotion-level">😐 Calm</span>
+                            <p>"Hamilton maintains position in P2, managing the gap to Verstappen ahead."</p>
+                        </div>
+                        <div class="emotion-example">
+                            <span class="emotion-level">😊 Interested</span>
+                            <p>"Leclerc is closing in on Perez - this could get interesting!"</p>
+                        </div>
+                        <div class="emotion-example">
+                            <span class="emotion-level">😃 Excited</span>
+                            <p>"Hamilton is right on Verstappen's gearbox - DRS enabled!"</p>
+                        </div>
+                        <div class="emotion-example">
+                            <span class="emotion-level">🤩 Thrilled</span>
+                            <p>"THERE IT IS! Hamilton takes the lead! What a move!"</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </section>
+
         <section id="installation" class="installation">
             <div class="container">
                 <h2>Installation</h2>
@@ -292,7 +341,7 @@
                     <ul>
                         <li><strong>Reachy Mini</strong> robot (or simulation mode for development)</li>
                         <li><strong>Python 3.9+</strong></li>
-                        <li><strong>ElevenLabs API Key</strong> for audio synthesis (<a href="https://elevenlabs.io/" target="_blank">sign up here</a>)</li>
+                        <li><strong>ElevenLabs API Key</strong> for audio synthesis (<a href="https://elevenlabs.io/" target="_blank">sign up here</a>) - British Sports Broadcaster voice included</li>
                         <li><strong>Internet Connection</strong> for Full Historical Race mode</li>
                     </ul>
                     <p class="note"><em>💡 Tip: Start with <strong>China 2025</strong> for the best historical race experience - it has complete overtake, pit stop, and race control data.</em></p>

style.css

@@ -952,3 +952,117 @@ html {
         grid-template-columns: 1fr;
     }
 }
+
+/* Audio Features Section */
+.audio-features {
+    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+}
+
+.audio-features h2 {
+    color: var(--secondary-color);
+}
+
+.audio-showcase {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 30px;
+    margin-bottom: 50px;
+}
+
+.audio-highlight {
+    background: var(--bg-white);
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    border-top: 4px solid var(--primary-color);
+    text-align: center;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.audio-highlight:hover {
+    transform: translateY(-5px);
+    box-shadow: var(--shadow-lg);
+}
+
+.audio-icon {
+    font-size: 3.5rem;
+    margin-bottom: 20px;
+    display: block;
+}
+
+.audio-highlight h3 {
+    font-size: 1.4rem;
+    margin-bottom: 15px;
+    color: var(--secondary-color);
+}
+
+.audio-highlight p {
+    color: var(--text-light);
+    line-height: 1.8;
+    text-align: left;
+}
+
+.audio-examples {
+    background: var(--bg-white);
+    padding: 40px;
+    border-radius: 12px;
+    box-shadow: var(--shadow);
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.audio-examples h3 {
+    font-size: 1.8rem;
+    text-align: center;
+    margin-bottom: 30px;
+    color: var(--secondary-color);
+}
+
+.emotion-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 20px;
+}
+
+.emotion-example {
+    background: linear-gradient(135deg, var(--bg-light) 0%, var(--bg-white) 100%);
+    padding: 20px;
+    border-radius: 8px;
+    border-left: 4px solid var(--primary-color);
+    transition: all 0.3s ease;
+}
+
+.emotion-example:hover {
+    transform: translateX(5px);
+    box-shadow: var(--shadow);
+}
+
+.emotion-level {
+    display: block;
+    font-size: 1.1rem;
+    font-weight: 700;
+    margin-bottom: 10px;
+    color: var(--secondary-color);
+}
+
+.emotion-example p {
+    color: var(--text-color);
+    font-style: italic;
+    line-height: 1.6;
+    margin: 0;
+}
+
+/* Responsive Design for Audio Features */
+@media (max-width: 768px) {
+    .audio-showcase {
+        grid-template-columns: 1fr;
+    }
+    
+    .emotion-grid {
+        grid-template-columns: 1fr;
+    }
+    
+    .audio-examples {
+        padding: 25px;
+    }
+}