Fix logo URL (absolute CDN path) + polish design: typography, cards, team avatars

index.html

@@ -6,19 +6,16 @@
   <title>Haakkim — Arabic LLM Arena</title>
   <style>
     :root {
-      --bg: #0f1117;
-      --surface: #1a1d27;
-      --surface2: #222536;
-      --border: #2e3149;
-      --accent: #6366f1;
-      --accent2: #8b5cf6;
+      --bg: #0b0e14;
+      --surface: #131720;
+      --surface2: #1c2132;
+      --border: #252c42;
       --brand: #4ade80;
-      --brand-dark: #22c55e;
-      --gold: #f59e0b;
+      --brand-dark: #16a34a;
+      --brand-glow: rgba(74,222,128,0.15);
       --text: #e2e8f0;
-      --muted: #94a3b8;
-      --green: #10b981;
-      --radius: 12px;
+      --muted: #8492b0;
+      --radius: 14px;
     }
 
     * { box-sizing: border-box; margin: 0; padding: 0; }
@@ -27,336 +24,449 @@
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
       background: var(--bg);
       color: var(--text);
-      line-height: 1.6;
-      min-height: 100vh;
+      line-height: 1.65;
     }
 
-    /* ── Hero ────────────────────────────────── */
+    /* ── Hero ──────────────────────────────────────── */
     .hero {
-      background: linear-gradient(160deg, #0a0f0a 0%, #0d1a10 40%, #0f1117 100%);
+      background: linear-gradient(175deg, #081008 0%, #0a160c 50%, #0b0e14 100%);
       border-bottom: 1px solid var(--border);
-      padding: 72px 24px 56px;
+      padding: 80px 24px 64px;
       text-align: center;
       position: relative;
       overflow: hidden;
     }
     .hero::before {
+      content: '';
+      position: absolute;
+      top: -80px; left: 50%; transform: translateX(-50%);
+      width: 600px; height: 400px;
+      background: radial-gradient(ellipse, rgba(74,222,128,0.18) 0%, transparent 70%);
+      pointer-events: none;
+    }
+    .hero::after {
       content: '';
       position: absolute;
       inset: 0;
-      background: radial-gradient(ellipse 70% 60% at 50% -10%, rgba(74,222,128,0.12) 0%, transparent 65%);
+      background: repeating-linear-gradient(
+        0deg, transparent, transparent 39px,
+        rgba(74,222,128,0.025) 40px
+      );
       pointer-events: none;
     }
 
+    .hero-logo-wrap {
+      position: relative;
+      z-index: 1;
+      margin-bottom: 24px;
+    }
     .hero-logo {
-      height: 90px;
+      height: 80px;
       display: block;
-      margin: 0 auto 28px;
+      margin: 0 auto;
       object-fit: contain;
+      filter: drop-shadow(0 0 24px rgba(74,222,128,0.35));
+    }
+    .hero-logo-fallback {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+    }
+    .hero-logo-fallback .wordmark {
+      font-size: 3rem;
+      font-weight: 900;
+      letter-spacing: -0.03em;
+      color: var(--brand);
+      line-height: 1;
+    }
+    .hero-logo-fallback .ar {
+      font-size: 1.4rem;
+      color: rgba(74,222,128,0.6);
+      direction: rtl;
     }
 
-    .hero p {
-      font-size: 1.1rem;
+    .hero-tagline {
+      position: relative;
+      z-index: 1;
+      font-size: 1.05rem;
       color: var(--muted);
-      max-width: 580px;
-      margin: 0 auto 32px;
+      max-width: 520px;
+      margin: 0 auto 36px;
     }
-    .hero-links {
+
+    .hero-badges {
+      position: relative;
+      z-index: 1;
       display: flex;
-      gap: 12px;
+      gap: 10px;
       justify-content: center;
       flex-wrap: wrap;
     }
-    .btn {
+    .badge {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
-      padding: 10px 22px;
-      border-radius: 8px;
-      font-size: 0.95rem;
+      gap: 7px;
+      padding: 9px 20px;
+      border-radius: 999px;
+      font-size: 0.88rem;
       font-weight: 600;
       text-decoration: none;
-      transition: all 0.2s;
-      cursor: pointer;
+      transition: transform 0.18s, box-shadow 0.18s;
     }
-    .btn-primary {
+    .badge:hover { transform: translateY(-2px); }
+    .badge-primary {
       background: var(--brand);
-      color: #0a0f0a;
-      font-weight: 700;
+      color: #07130a;
+      box-shadow: 0 0 20px rgba(74,222,128,0.3);
     }
-    .btn-primary:hover { background: #22c55e; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(74,222,128,0.3); }
-    .btn-outline {
-      background: transparent;
+    .badge-primary:hover { box-shadow: 0 4px 30px rgba(74,222,128,0.5); }
+    .badge-outline {
+      background: rgba(255,255,255,0.04);
       color: var(--text);
       border: 1px solid var(--border);
     }
-    .btn-outline:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
-    .btn-dataset {
-      background: rgba(74,222,128,0.12);
+    .badge-outline:hover { border-color: var(--brand); color: var(--brand); }
+    .badge-dataset {
+      background: rgba(74,222,128,0.1);
       color: var(--brand);
-      border: 1px solid rgba(74,222,128,0.3);
+      border: 1px solid rgba(74,222,128,0.25);
     }
-    .btn-dataset:hover { background: rgba(74,222,128,0.2); transform: translateY(-1px); }
+    .badge-dataset:hover { background: rgba(74,222,128,0.18); }
 
-    /* ── Container ───────────────────────────── */
-    .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
-    section { padding: 56px 0; }
-    section + section { border-top: 1px solid var(--border); }
+    /* ── Layout ────────────────────────────────────── */
+    .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }
 
-    .section-title {
-      font-size: 1.5rem;
+    section {
+      padding: 64px 0;
+      border-bottom: 1px solid var(--border);
+    }
+    section:last-child { border-bottom: none; }
+
+    .s-label {
+      font-size: 0.7rem;
       font-weight: 700;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--brand);
       margin-bottom: 8px;
+    }
+    .s-title {
+      font-size: 1.6rem;
+      font-weight: 800;
       color: var(--text);
+      margin-bottom: 6px;
+      letter-spacing: -0.02em;
     }
-    .section-sub {
-      font-size: 0.95rem;
+    .s-sub {
+      font-size: 0.9rem;
       color: var(--muted);
-      margin-bottom: 32px;
+      margin-bottom: 36px;
+      max-width: 600px;
     }
 
-    /* ── Cards ───────────────────────────────── */
-    .cards-grid {
+    /* ── Evaluation mode cards ─────────────────────── */
+    .mode-grid {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-      gap: 20px;
+      grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
+      gap: 16px;
     }
-    .card {
+    .mode-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      padding: 24px;
-      transition: border-color 0.2s, transform 0.2s;
+      padding: 28px 24px;
+      transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
+      position: relative;
+      overflow: hidden;
     }
-    .card:hover { border-color: var(--brand); transform: translateY(-2px); }
-    .card-icon { font-size: 1.8rem; margin-bottom: 12px; }
-    .card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
-    .card p { font-size: 0.88rem; color: var(--muted); }
-    .card-tag {
-      display: inline-block;
-      margin-top: 10px;
-      padding: 3px 10px;
-      border-radius: 99px;
-      font-size: 0.75rem;
-      font-weight: 600;
-      background: rgba(74,222,128,0.12);
-      color: var(--brand);
+    .mode-card::before {
+      content: '';
+      position: absolute;
+      top: 0; left: 0; right: 0;
+      height: 2px;
+      background: linear-gradient(90deg, transparent, var(--brand), transparent);
+      opacity: 0;
+      transition: opacity 0.2s;
     }
-    .card-tag-no {
-      background: rgba(100,116,139,0.15);
-      color: var(--muted);
+    .mode-card:hover { border-color: rgba(74,222,128,0.4); transform: translateY(-3px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
+    .mode-card:hover::before { opacity: 1; }
+    .mode-icon { font-size: 1.6rem; margin-bottom: 14px; }
+    .mode-card h3 { font-size: 1rem; font-weight: 700; margin-bottom: 8px; }
+    .mode-card p { font-size: 0.85rem; color: var(--muted); margin-bottom: 16px; line-height: 1.6; }
+    .tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 4px 12px;
+      border-radius: 999px;
+      font-size: 0.73rem;
+      font-weight: 700;
     }
+    .tag-yes { background: rgba(74,222,128,0.12); color: var(--brand); border: 1px solid rgba(74,222,128,0.25); }
+    .tag-no  { background: rgba(100,116,139,0.1);  color: var(--muted);  border: 1px solid var(--border); }
 
-    /* ── Dataset callout ─────────────────────── */
-    .dataset-callout {
-      background: linear-gradient(135deg, rgba(74,222,128,0.06), rgba(99,102,241,0.06));
-      border: 1px solid rgba(74,222,128,0.25);
+    /* ── Dataset callout ───────────────────────────── */
+    .ds-callout {
+      background: linear-gradient(135deg, rgba(74,222,128,0.07), rgba(74,222,128,0.02));
+      border: 1px solid rgba(74,222,128,0.22);
       border-radius: var(--radius);
-      padding: 28px 32px;
+      padding: 32px 36px;
       display: flex;
       align-items: center;
-      gap: 24px;
+      gap: 28px;
+      flex-wrap: wrap;
+    }
+    .ds-icon { font-size: 2.8rem; flex-shrink: 0; }
+    .ds-body { flex: 1; min-width: 200px; }
+    .ds-body h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 5px; }
+    .ds-body p { font-size: 0.85rem; color: var(--muted); }
+    .ds-meta {
+      display: flex;
+      gap: 10px;
       flex-wrap: wrap;
+      margin-top: 12px;
+    }
+    .ds-pill {
+      background: var(--surface2);
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 3px 12px;
+      font-size: 0.75rem;
+      color: var(--muted);
     }
-    .dataset-callout .ds-icon { font-size: 2.5rem; }
-    .dataset-callout h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 4px; }
-    .dataset-callout p { font-size: 0.88rem; color: var(--muted); }
 
-    /* ── Team ────────────────────────────────── */
+    /* ── Team ──────────────────────────────────────── */
     .team-grid {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-      gap: 20px;
+      gap: 16px;
     }
     .team-card {
       background: var(--surface);
       border: 1px solid var(--border);
       border-radius: var(--radius);
-      padding: 24px;
+      padding: 32px 24px 24px;
       text-align: center;
-      transition: border-color 0.2s;
+      transition: border-color 0.2s, transform 0.2s;
       display: flex;
       flex-direction: column;
       align-items: center;
+      gap: 4px;
     }
-    .team-card:hover { border-color: var(--brand); }
-    .team-avatar {
-      width: 72px;
-      height: 72px;
+    .team-card:hover { border-color: rgba(74,222,128,0.35); transform: translateY(-2px); }
+
+    .avatar {
+      width: 64px;
+      height: 64px;
       border-radius: 50%;
-      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
+      background: linear-gradient(135deg, #1a3a25, #0f2018);
+      border: 2px solid rgba(74,222,128,0.3);
       display: flex;
       align-items: center;
       justify-content: center;
-      font-size: 1.3rem;
+      font-size: 1.1rem;
       font-weight: 800;
-      color: #0a0f0a;
-      margin: 0 auto 14px;
-      flex-shrink: 0;
-    }
-    .team-name { font-weight: 700; font-size: 1rem; margin-bottom: 3px; }
-    .team-role { font-size: 0.78rem; color: var(--brand); font-weight: 600; margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
-    .team-affil { font-size: 0.76rem; color: var(--muted); margin-bottom: 10px; }
-    .team-links { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
+      color: var(--brand);
+      margin-bottom: 14px;
+      letter-spacing: 0.02em;
+    }
+    .team-name { font-size: 1rem; font-weight: 700; }
+    .team-role {
+      font-size: 0.7rem;
+      font-weight: 700;
+      letter-spacing: 0.1em;
+      text-transform: uppercase;
+      color: var(--brand);
+      margin-top: 2px;
+    }
+    .team-affil { font-size: 0.78rem; color: var(--muted); margin-top: 2px; margin-bottom: 14px; }
     .team-email {
       display: inline-flex;
       align-items: center;
-      gap: 4px;
+      gap: 5px;
       font-size: 0.76rem;
       color: var(--muted);
       text-decoration: none;
+      border: 1px solid var(--border);
+      border-radius: 999px;
+      padding: 5px 14px;
+      transition: border-color 0.15s, color 0.15s;
     }
-    .team-email:hover { color: var(--brand); text-decoration: underline; }
+    .team-email:hover { border-color: var(--brand); color: var(--brand); }
 
-    /* ── Footer ──────────────────────────────── */
+    /* ── Citation ──────────────────────────────────── */
+    .cite-block {
+      background: var(--surface);
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 24px 28px;
+      font-family: 'SFMono-Regular', 'Fira Code', Consolas, monospace;
+      font-size: 0.8rem;
+      line-height: 1.8;
+      color: var(--muted);
+      overflow-x: auto;
+    }
+    .cite-block .k { color: #c084fc; }
+    .cite-block .v { color: #86efac; }
+    .cite-block .p { color: var(--muted); }
+
+    /* ── Footer ────────────────────────────────────── */
     footer {
-      border-top: 1px solid var(--border);
       padding: 32px 24px;
       text-align: center;
-      font-size: 0.82rem;
+      font-size: 0.8rem;
       color: var(--muted);
+      border-top: 1px solid var(--border);
     }
     footer a { color: var(--brand); text-decoration: none; }
     footer a:hover { text-decoration: underline; }
 
     @media (max-width: 600px) {
-      .hero { padding: 48px 16px 36px; }
-      .dataset-callout { flex-direction: column; gap: 12px; }
+      .hero { padding: 56px 16px 48px; }
+      .ds-callout { padding: 22px 20px; }
     }
   </style>
 </head>
 <body>
 
-<!-- ═══════════════════════════════════════════════════
-     HERO
-════════════════════════════════════════════════════ -->
+<!-- HERO -->
 <div class="hero">
-  <img
-    src="haakkim-logo-withname.png"
-    alt="Haakkim"
-    class="hero-logo"
-    onerror="this.style.display='none'; document.getElementById('hero-fallback').style.display='block';"
-  />
-  <div id="hero-fallback" style="display:none; font-size:2.8rem; font-weight:900; color:var(--brand); margin-bottom:20px;">Haakkim &nbsp; حَكِّم</div>
+  <div class="hero-logo-wrap">
+    <img
+      src="https://huggingface.co/spaces/Haakkim/README/resolve/main/haakkim-logo-withname.png"
+      alt="Haakkim"
+      class="hero-logo"
+      onerror="this.style.display='none'; document.querySelector('.hero-logo-fallback').style.display='flex';"
+    />
+    <div class="hero-logo-fallback">
+      <div class="wordmark">Haakkim</div>
+      <div class="ar">حَكِّم</div>
+    </div>
+  </div>
 
-  <p>An open arena-style human preference evaluation platform for Arabic large language models — built from the ground up for Arabic.</p>
+  <p class="hero-tagline">
+    An open arena-style human preference evaluation platform for Arabic large language models,
+    covering 11 dialect varieties and ranked by a statistically rigorous Bradley–Terry model.
+  </p>
 
-  <div class="hero-links">
-    <a href="https://haakkim.tech" class="btn btn-primary">🌐 Live Platform</a>
-    <a href="https://haakkim.tech/#leaderboard" class="btn btn-outline">🏆 Leaderboard</a>
-    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v" class="btn btn-dataset">📦 Dataset v1.0</a>
+  <div class="hero-badges">
+    <a href="https://haakkim.tech" class="badge badge-primary">🌐 Live Platform</a>
+    <a href="https://haakkim.tech/#leaderboard" class="badge badge-outline">🏆 Leaderboard</a>
+    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v" class="badge badge-dataset">📦 Dataset v1.0</a>
   </div>
 </div>
 
-<div class="container">
+<div class="wrap">
 
-<!-- ═══════════════════════════════════════════════════
-     EVALUATION MODES
-════════════════════════════════════════════════════ -->
+<!-- EVALUATION MODES -->
 <section>
-  <div class="section-title">Evaluation Modes</div>
-  <div class="section-sub">Three ways to compare Arabic LLMs — only Ranked Arena feeds the official leaderboard</div>
-  <div class="cards-grid">
-    <div class="card">
-      <div class="card-icon">⚔️</div>
+  <div class="s-label">How It Works</div>
+  <div class="s-title">Evaluation Modes</div>
+  <div class="s-sub">Three ways to compare Arabic LLMs — only Ranked Arena feeds the official leaderboard.</div>
+  <div class="mode-grid">
+    <div class="mode-card">
+      <div class="mode-icon">⚔️</div>
       <h3>Ranked Arena</h3>
-      <p>Random model pairing, single-turn MSA, matched system instruction. Results feed the official Bradley–Terry leaderboard.</p>
-      <span class="card-tag">✓ BT Leaderboard</span>
+      <p>Random model pairing, single-turn MSA, matched system instruction. The only mode that feeds the official Bradley–Terry leaderboard.</p>
+      <span class="tag tag-yes">✓ BT Leaderboard</span>
     </div>
-    <div class="card">
-      <div class="card-icon">↔️</div>
+    <div class="mode-card">
+      <div class="mode-icon">↔️</div>
       <h3>Side-by-Side</h3>
-      <p>User-selected model pair, any dialect. Useful for targeted comparisons but excluded from ranked scoring to prevent selection bias.</p>
-      <span class="card-tag card-tag-no">Win-rate only</span>
+      <p>User-selected model pair, any dialect. Useful for targeted comparisons — excluded from ranked scoring to prevent selection bias.</p>
+      <span class="tag tag-no">Win-rate only</span>
     </div>
-    <div class="card">
-      <div class="card-icon">❓</div>
+    <div class="mode-card">
+      <div class="mode-icon">❓</div>
       <h3>10 Questions</h3>
-      <p>Fixed Arabic prompt pool, any dialect. Provides consistent benchmarking within a curated set of questions.</p>
-      <span class="card-tag card-tag-no">Win-rate only</span>
+      <p>Fixed Arabic prompt pool, any dialect. Provides consistent benchmarking within a curated question set.</p>
+      <span class="tag tag-no">Win-rate only</span>
     </div>
   </div>
 </section>
 
-<!-- ═══════════════════════════════════════════════════
-     DATASET CALLOUT
-════════════════════════════════════════════════════ -->
+<!-- DATASET -->
 <section>
-  <div class="dataset-callout">
+  <div class="s-label">Open Data</div>
+  <div class="s-title">Battle Dataset</div>
+  <div class="s-sub">First public release of Haakkim battle data — fully open, PII-scrubbed, ready to use.</div>
+  <div class="ds-callout">
     <div class="ds-icon">📦</div>
-    <div style="flex:1">
-      <h3>Haakkim/Haakkim-1.0v — Battle Dataset</h3>
-      <p>1,273 battle records (Parquet, PII-scrubbed). Includes voted comparisons and skipped battles across all 11 dialects and 3 evaluation modes. Full conversation transcripts, sampling weights, category annotations.</p>
+    <div class="ds-body">
+      <h3>Haakkim / Haakkim-1.0v</h3>
+      <p>
+        Battle records covering all 11 dialect varieties and all 3 evaluation modes.
+        Includes full conversation transcripts, sampling weights, and category annotations.
+      </p>
+      <div class="ds-meta">
+        <span class="ds-pill">1,273 battles</span>
+        <span class="ds-pill">67 models</span>
+        <span class="ds-pill">11 dialects</span>
+        <span class="ds-pill">CC BY 4.0</span>
+        <span class="ds-pill">Parquet · PII-scrubbed</span>
+      </div>
     </div>
-    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v" class="btn btn-dataset">View Dataset →</a>
+    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v" class="badge badge-dataset" style="white-space:nowrap;">View Dataset →</a>
   </div>
 </section>
 
-<!-- ═══════════════════════════════════════════════════
-     TEAM
-════════════════════════════════════════════════════ -->
+<!-- TEAM -->
 <section>
-  <div class="section-title">Team</div>
-  <div class="section-sub">College of Computing, Umm Al-Qura University — Mecca, Saudi Arabia</div>
+  <div class="s-label">People</div>
+  <div class="s-title">Team</div>
+  <div class="s-sub">College of Computing, Umm Al-Qura University — Mecca, Saudi Arabia</div>
   <div class="team-grid">
 
     <div class="team-card">
-      <div class="team-avatar">MM</div>
+      <div class="avatar">MM</div>
       <div class="team-name">Dr. Mourad Mars</div>
       <div class="team-role">Principal Investigator</div>
       <div class="team-affil">Umm Al-Qura University</div>
-      <div class="team-links">
-        <a href="mailto:msmars@uqu.edu.sa" class="team-email">✉ msmars@uqu.edu.sa</a>
-      </div>
+      <a href="mailto:msmars@uqu.edu.sa" class="team-email">✉ msmars@uqu.edu.sa</a>
     </div>
 
     <div class="team-card">
-      <div class="team-avatar">HB</div>
+      <div class="avatar">HB</div>
       <div class="team-name">Hassan Barmandah</div>
       <div class="team-role">AI Researcher</div>
       <div class="team-affil">Umm Al-Qura University</div>
-      <div class="team-links">
-        <a href="mailto:hassanhbarmandah@gmail.com" class="team-email">✉ hassanhbarmandah@gmail.com</a>
-      </div>
+      <a href="mailto:hassanhbarmandah@gmail.com" class="team-email">✉ hassanhbarmandah@gmail.com</a>
     </div>
 
     <div class="team-card">
-      <div class="team-avatar">AA</div>
+      <div class="avatar">AA</div>
       <div class="team-name">Abdulrhman Alassaf</div>
       <div class="team-role">Software Engineer</div>
       <div class="team-affil">Umm Al-Qura University</div>
-      <div class="team-links">
-        <a href="mailto:aaalassaf@outlook.com" class="team-email">✉ aaalassaf@outlook.com</a>
-      </div>
+      <a href="mailto:aaalassaf@outlook.com" class="team-email">✉ aaalassaf@outlook.com</a>
     </div>
 
   </div>
 </section>
 
-<!-- ═══════════════════════════════════════════════════
-     CITATION
-════════════════════════════════════════════════════ -->
+<!-- CITATION -->
 <section>
-  <div class="section-title">Citation</div>
-  <div class="section-sub">If you use Haakkim or this dataset in your research, please cite:</div>
-  <pre style="background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;font-size:0.82rem;line-height:1.7;overflow-x:auto;color:var(--muted)"><code>@misc{mars2026haakkim,
-  title        = {Haakkim: An Arena-Style Human Preference Evaluation Platform for Arabic {LLMs}},
-  author       = {Mars, Mourad and Barmandah, Hassan and Alassaf, Abdulrhman},
-  year         = {2026},
-  howpublished = {\url{https://huggingface.co/datasets/Haakkim/Haakkim-1.0v}},
-  note         = {College of Computing, Umm Al-Qura University, Mecca, Saudi Arabia}
-}</code></pre>
+  <div class="s-label">Research</div>
+  <div class="s-title">Citation</div>
+  <div class="s-sub">If you use Haakkim or this dataset in your research, please cite:</div>
+  <div class="cite-block"><span class="k">@misc</span><span class="p">{</span>mars2026haakkim<span class="p">,</span>
+  <span class="k">title</span>        <span class="p">=</span> <span class="v">{Haakkim: An Arena-Style Human Preference Evaluation Platform for Arabic {LLMs}}</span><span class="p">,</span>
+  <span class="k">author</span>       <span class="p">=</span> <span class="v">{Mars, Mourad and Barmandah, Hassan and Alassaf, Abdulrhman}</span><span class="p">,</span>
+  <span class="k">year</span>         <span class="p">=</span> <span class="v">{2026}</span><span class="p">,</span>
+  <span class="k">howpublished</span> <span class="p">=</span> <span class="v">{\url{https://huggingface.co/datasets/Haakkim/Haakkim-1.0v}}</span><span class="p">,</span>
+  <span class="k">note</span>         <span class="p">=</span> <span class="v">{College of Computing, Umm Al-Qura University, Mecca, Saudi Arabia}</span>
+<span class="p">}</span></div>
 </section>
 
-</div><!-- /container -->
+</div>
 
 <footer>
-  <div>
-    <a href="https://haakkim.tech">haakkim.tech</a> &nbsp;·&nbsp;
-    <a href="https://haakkim.tech/#leaderboard">Leaderboard</a> &nbsp;·&nbsp;
-    <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v">Dataset</a>
-  </div>
-  <div style="margin-top:8px">College of Computing, Umm Al-Qura University · Mecca, Saudi Arabia · CC BY 4.0</div>
+  <a href="https://haakkim.tech">haakkim.tech</a> &nbsp;·&nbsp;
+  <a href="https://haakkim.tech/#leaderboard">Leaderboard</a> &nbsp;·&nbsp;
+  <a href="https://huggingface.co/datasets/Haakkim/Haakkim-1.0v">Dataset</a>
+  <br><br>
+  College of Computing, Umm Al-Qura University · Mecca, Saudi Arabia · CC BY 4.0
 </footer>
 
 </body>