Update public/index.html

public/index.html

@@ -35,15 +35,8 @@
 
         a { text-decoration: none; transition: 0.2s; }
 
-        /* --- WIDTH CONTROLLER (80%) --- */
-        .layout-width { width: 80%; max-width: 1600px; margin: 0 auto; }
-
         /* --- NAVBAR --- */
-        .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; 
-        }
+        .navbar { padding: 20px 40px; 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; }
@@ -52,42 +45,42 @@
         .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 { 
-            display: flex; align-items: center; margin-top: 60px; margin-bottom: 100px; 
-            position: relative; padding: 0; 
+            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; 
         }
-        .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: 650px; margin-bottom: 50px; }
-        .hero-actions { display: flex; gap: 15px; flex-wrap: wrap; }
+        .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; }
         .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-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; 
-            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; } }
-
-        /* Wave Background */
+        /* Wave Background (Subtle Gradient only) */
         .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;
         }
 
+        /* --- WIDTH CONTROLLER --- */
+        .content-container { width: 80%; max-width: 1600px; margin: 0 auto; }
+
         /* --- MAIN BOARD --- */
         .main-card { background: white; border-radius: 24px; padding: 40px; color: #0f172a; min-height: 600px; position: relative; z-index: 10; margin-bottom: 60px; }
         
@@ -100,7 +93,6 @@
 
         .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; }
 
@@ -138,8 +130,6 @@
         </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>
@@ -154,13 +144,6 @@
             <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>
         </div>
     </div>