Update index.html

index.html

@@ -22,6 +22,16 @@ h1{font-family:'Playfair Display',serif;font-size:clamp(2rem,5vw,3.2rem);font-we
 .header-stats{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:24px}
 .header-stat-value{font-family:'JetBrains Mono',monospace;font-size:1.5rem;font-weight:700;color:var(--accent-cyan)}
 .header-stat-label{font-size:.75rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:1px}
+.nav-badges{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:28px}
+.nav-badge{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:10px;font-size:.85rem;font-weight:700;text-decoration:none;transition:all .3s;letter-spacing:.3px}
+.nav-badge:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,0.3)}
+.nav-badge-icon{font-size:1.1rem}
+.nav-badge.dataset{background:linear-gradient(135deg,rgba(245,158,11,0.15),rgba(245,158,11,0.05));border:1px solid rgba(245,158,11,0.35);color:#fbbf24}
+.nav-badge.dataset:hover{background:linear-gradient(135deg,rgba(245,158,11,0.25),rgba(245,158,11,0.1));border-color:rgba(245,158,11,0.6)}
+.nav-badge.article{background:linear-gradient(135deg,rgba(139,92,246,0.15),rgba(139,92,246,0.05));border:1px solid rgba(139,92,246,0.35);color:#a78bfa}
+.nav-badge.article:hover{background:linear-gradient(135deg,rgba(139,92,246,0.25),rgba(139,92,246,0.1));border-color:rgba(139,92,246,0.6)}
+.nav-badge.leaderboard{background:linear-gradient(135deg,rgba(6,182,212,0.15),rgba(6,182,212,0.05));border:1px solid rgba(6,182,212,0.35);color:#22d3ee}
+.nav-badge.leaderboard:hover{background:linear-gradient(135deg,rgba(6,182,212,0.25),rgba(6,182,212,0.1));border-color:rgba(6,182,212,0.6)}
 .main-nav{display:flex;gap:0;background:var(--bg-secondary);border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10}
 .main-nav-btn{padding:16px 28px;border:none;background:transparent;color:var(--text-muted);font-family:'DM Sans',sans-serif;font-size:.92rem;font-weight:600;cursor:pointer;transition:all .2s;border-bottom:3px solid transparent;white-space:nowrap}
 .main-nav-btn:hover{color:var(--text-secondary);background:rgba(255,255,255,0.02)}
@@ -180,6 +190,11 @@ footer{padding:40px 0;border-top:1px solid var(--border);text-align:center}
     <div class="header-stat"><div class="header-stat-value">8</div><div class="header-stat-label">TICOS Types</div></div>
     <div class="header-stat"><div class="header-stat-value">1,800</div><div class="header-stat-label">Evaluations</div></div>
   </div>
+  <div class="nav-badges">
+    <a href="https://huggingface.co/datasets/FINAL-Bench/Metacognitive" target="_blank" class="nav-badge dataset"><span class="nav-badge-icon">&#x1F4BE;</span> Dataset</a>
+    <a href="https://huggingface.co/blog/FINAL-Bench/metacognitive" target="_blank" class="nav-badge article"><span class="nav-badge-icon">&#x1F4DD;</span> Article</a>
+    <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank" class="nav-badge leaderboard"><span class="nav-badge-icon">&#x1F3C6;</span> Leaderboard</a>
+  </div>
 </header>
 
 <nav class="main-nav">
@@ -317,8 +332,9 @@ footer{padding:40px 0;border-top:1px solid var(--border);text-align:center}
 
 <footer>
   <div class="footer-links">
-    <a href="https://huggingface.co/datasets/FINAL-Bench/Metacognitive" target="_blank">Dataset on Hugging Face</a>
-    <a href="#">Paper (under review)</a>
+    <a href="https://huggingface.co/datasets/FINAL-Bench/Metacognitive" target="_blank">Dataset</a>
+    <a href="https://huggingface.co/blog/FINAL-Bench/metacognitive" target="_blank">Article</a>
+    <a href="https://huggingface.co/spaces/FINAL-Bench/Leaderboard" target="_blank">Leaderboard</a>
     <a href="mailto:arxivgpt@gmail.com">Contact</a>
   </div>
   <div class="footer-copy">FINAL Bench v3.0 — Kim, Kim, Choi, Jang — VIDRAFT / Ginigen AI, Seoul</div>