Update public/index.html

public/index.html

@@ -35,61 +35,58 @@
 
         a { text-decoration: none; transition: 0.2s; }
 
+        /* --- WIDTH CONTROLLER (80%) --- */
+        .layout-width { width: 80%; max-width: 1600px; margin: 0 auto; }
+
         /* --- NAVBAR --- */
-        .navbar { padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; position: relative; z-index: 100; }
+        .navbar { 
+            padding: 20px 0; /* Vertical padding only, width handled by layout-width */
+            display: flex; justify-content: space-between; align-items: center; 
+            position: relative; z-index: 100; 
+        }
         .nav-logo { color: white; font-family: 'Rubik', sans-serif; font-weight: 700; font-size: 22px; display: flex; align-items: center; gap: 12px; }
         .nav-logo img { height: 40px; }
         .nav-text { display: flex; flex-direction: column; line-height: 1.1; }
         .nav-text span:first-child { font-size: 14px; color: var(--text-yellow); }
         .nav-links { display: flex; gap: 25px; align-items: center; }
+        .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); }
 
         /* --- HERO --- */
         .hero { 
-            max-width: 1000px; 
-            margin: 60px auto 100px; 
-            padding: 0 40px; 
-            position: relative; 
-            text-align: center;
-        }
-        .hero-content { 
-            z-index: 2; 
-            display: flex; 
-            flex-direction: column; 
-            align-items: center; 
+            display: flex; align-items: center; margin-top: 60px; margin-bottom: 100px; 
+            position: relative; padding: 0; 
         }
+        .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); }
-        
-        /* 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 { display: flex; justify-content: center; width: 100%; margin-top: 40px; }
+        .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); }
+
+        /* Audio Wave Visual */
+        .hero-visual { flex: 1; display: flex; justify-content: flex-end; position: relative; height: 300px; align-items: center; }
         .audio-wave { 
-            height: 150px; 
-            display: flex; 
-            align-items: center; 
-            justify-content: center; 
-            gap: 6px; 
+            height: 150px; display: flex; align-items: center; justify-content: center; gap: 6px; 
             mask-image: linear-gradient(to right, transparent, black 10%, black 90%, 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; }
+        /* Wave Background */
+        .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;
+        }
 
         /* --- MAIN BOARD --- */
         .main-card { background: white; border-radius: 24px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; margin-bottom: 60px; }
@@ -103,6 +100,7 @@
 
         .controls { background: #f8fafc; padding: 20px; border-radius: 12px; display: flex; gap: 20px; align-items: center; margin-bottom: 20px; flex-wrap: wrap; }
         select { padding: 10px; border-radius: 8px; border: 1px solid #cbd5e1; font-size: 14px; min-width: 250px; cursor:pointer; }
+        
         .rank-info { font-size: 13px; color: #64748b; margin-top: 5px; font-style: italic; }
         .score-desc { font-size: 14px; color: #475569; background: #fff7ed; border-left: 4px solid #f97316; padding: 10px 15px; margin-bottom: 20px; border-radius: 4px; }
 
@@ -139,11 +137,14 @@
             <div class="nav-text"><span>Voice of a</span> Continent</div>
         </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/#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>
     </nav>
 
-    <div class="hero">
+    <div class="hero layout-width">
         <div class="wave-bg"></div>
         <div class="hero-content">
             <div class="conf-badge"><i class="fa-solid fa-location-dot"></i> EMNLP 2025 · Suzhou, China</div>
@@ -153,6 +154,8 @@
             <div class="hero-actions">
                 <a href="https://aclanthology.org/2025.emnlp-main.559" target="_blank" class="action-btn bg-red"><i class="fa-regular fa-file-pdf"></i> Read Paper</a>
                 <a href="https://africa.dlnlp.ai/simba" target="_blank" class="action-btn bg-purple"><i class="fa-solid fa-code-branch"></i> Official Website</a>
+                <a href="https://africa.dlnlp.ai/simba/#dataset" target="_blank" class="action-btn bg-orange"><i class="fa-solid fa-database"></i> Dataset</a>
+                <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">
@@ -234,7 +237,7 @@
             </div>
         </div>
 
-        <div class="citation-section" id="citation">
+        <div class="citation-section layout-width" id="citation">
             <h3>Citation</h3>
             <button class="copy-btn" onclick="copyCitation()"><i class="fa-regular fa-copy"></i> Copy</button>
             <p style="color:#94a3b8; margin-bottom:20px;">If you use the Simba benchmark, please cite our paper:</p>