Update public/index.html

public/index.html

@@ -45,39 +45,26 @@
         .nav-link { color: #e2e8f0; font-size: 15px; font-weight: 500; }
         .nav-link:hover { color: var(--text-yellow); }
         .btn-submit { background: var(--grad-blue); color: white !important; padding: 10px 24px; border-radius: 30px; font-weight: 600; font-size: 14px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4); }
-        
+        .btn-login { background: var(--text-yellow); color: var(--bg-deep) !important; padding: 10px 24px; border-radius: 30px; font-weight: 700; font-size: 14px; box-shadow: 0 4px 12px rgba(251, 191, 36, 0.4); }
+
         /* --- HERO --- */
-        /* Updated to center content since visual was removed */
-        .hero { 
-            display: flex; 
-            justify-content: center; 
-            text-align: center;
-            max-width: 1000px; 
-            margin: 60px auto 100px; 
-            padding: 0 40px; 
-            position: relative; 
-        }
-        .hero-content { z-index: 2; width: 100%; display: flex; flex-direction: column; align-items: center; }
-        
+        .hero { display: flex; align-items: center; max-width: 1400px; margin: 60px auto 100px; padding: 0 40px; position: relative; }
+        .hero-content { flex: 1; z-index: 2; }
         .conf-badge { background: white; color: black; display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px; border-radius: 8px; margin-bottom: 30px; font-weight: 700; font-size: 14px; }
         .conf-badge i { color: #cc0000; font-size: 18px; }
-        
         .hero h1 { font-family: 'Rubik', sans-serif; font-size: 64px; font-weight: 800; margin: 0; line-height: 1.1; }
         .hero h2 { font-family: 'Rubik', sans-serif; font-size: 32px; color: var(--text-yellow); margin: 15px 0 30px; font-weight: 700; }
-        .hero p { color: #cbd5e1; font-size: 18px; line-height: 1.6; max-width: 700px; margin-bottom: 50px; }
-        
-        .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; justify-content: center; }
+        .hero p { color: #cbd5e1; font-size: 18px; line-height: 1.6; max-width: 650px; margin-bottom: 50px; }
+        .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
         .action-btn { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-radius: 30px; color: white; font-weight: 600; font-size: 15px; transition: transform 0.2s; }
         .action-btn:hover { transform: translateY(-3px); color: white; }
-        
         .bg-red { background: var(--grad-red); } .bg-purple { background: var(--grad-purple); } .bg-orange { background: var(--grad-orange); } .bg-blue { background: var(--grad-blue); } .bg-green { background: var(--grad-green); }
-
-        /* Wave Animation */
-        .wave-bg {
-            position: absolute; top: -50px; left: -50%; width: 200%; height: 100%;
-            background: radial-gradient(circle, rgba(255,255,255,0.03) 0%, rgba(255,255,255,0) 70%);
-            z-index: 0; pointer-events: none;
-        }
+        .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; height: 400px; align-items: center; }
+        .hero-visual img { max-width: 100%; height: auto; z-index: 2; position: relative; }
+        .audio-wave { position: absolute; bottom: 50px; left: 0; right: 0; height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; z-index: 0; opacity: 0.3; mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent); }
+        .bar { width: 6px; background: #ffffff; border-radius: 99px; animation: bounce 1.2s ease-in-out infinite; }
+        .bar:nth-child(odd) { animation-duration: 1.5s; } .bar:nth-child(2n) { animation-duration: 1.1s; }
+        @keyframes bounce { 0%, 100% { height: 20px; } 50% { height: 120px; } }
 
         /* --- WIDTH CONTROLLER --- */
         .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
@@ -132,7 +119,7 @@
         </a>
         <div class="nav-links">
             <a href="https://aclanthology.org/2025.emnlp-main.559" target="_blank" class="nav-link">Paper</a>
-            <a href="https://huggingface.co/datasets/UBC-NLP/simba/#datasets" target="_blank" class="nav-link">Dataset</a>
+            <a href="https://africa.dlnlp.ai/simba/#dataset" target="_blank" class="nav-link">Dataset</a>
             <a href="https://africa.dlnlp.ai/simba/#models" target="_blank" class="nav-link">Models</a>
             <a href="https://africa.dlnlp.ai/simba/" target="_blank" class="btn-submit">Submit New Results</a>
         </div>
@@ -152,6 +139,12 @@
                 <a href="https://africa.dlnlp.ai/simba/#models" target="_blank" class="action-btn bg-blue"><i class="fa-solid fa-bolt"></i> Simba Models</a>
             </div>
         </div>
+        <div class="hero-visual">
+            <div class="audio-wave">
+                <div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div><div class="bar"></div>
+            </div>
+            <img src="https://africa.dlnlp.ai/simba/images/simbabench_header.png" alt="Map">
+        </div>
     </div>
 
     <div class="content-container">