Update public/index.html

public/index.html

@@ -35,60 +35,61 @@
 
         a { text-decoration: none; transition: 0.2s; }
 
+        /* --- GLOBAL LAYOUT ALIGNMENT --- */
+        /* This ensures Navbar, Hero, and Card are exactly the same width */
+        .layout-grid {
+            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; 
+            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); }
+        .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 --- */
         .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; 
+            margin-top: 60px; 
+            margin-bottom: 100px; 
+            position: relative; 
+            padding: 0; /* Remove padding to respect layout-grid width */
         }
+        .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;
-        }
-        
-        .audio-wave { 
-            height: 150px; 
-            display: flex; 
-            align-items: center; 
-            justify-content: center; 
-            gap: 6px; 
-            margin-top: 60px; /* Space above wave */
-            mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
-        }
+        .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); }
+        .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; }
+        /* --- CONTENT --- */
+        /* Uses layout-grid class */
 
         /* --- MAIN BOARD --- */
         .main-card { background: white; border-radius: 24px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; margin-bottom: 60px; }
@@ -102,6 +103,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; }
 
@@ -132,17 +134,20 @@
 </head>
 <body>
 
-    <nav class="navbar layout-width">
+    <nav class="navbar layout-grid">
         <a href="https://africa.dlnlp.ai/simba" class="nav-logo">
             <img src="https://africa.dlnlp.ai/simba/images/simba_main_logo.png" alt="Logo">
             <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-grid">
         <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>
@@ -152,16 +157,19 @@
             <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">
             <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">
+    <div class="content-container layout-grid">
         <div class="main-card" id="board">
             <div id="loader" style="text-align:center; padding:60px; color:#64748b;">
                 <i class="fa-solid fa-circle-notch fa-spin fa-3x"></i><br><br>Loading Leaderboard Data...