added links in about

frontend/about.html

@@ -32,11 +32,11 @@
 
         <div class="space-y-12 animate-fade-in">
 
+            <!-- What is QIMMA -->
             <section
                 class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
                 <div class="flex items-center gap-3 mb-4">
-                    <div
-                        class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
+                    <div class="p-2 bg-indigo-100 dark:bg-indigo-900/50 rounded-lg text-indigo-600 dark:text-indigo-400">
                         <i data-lucide="info" class="w-6 h-6"></i>
                     </div>
                     <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">What is QIMMA?</h2>
@@ -51,11 +51,11 @@
                 </div>
             </section>
 
+            <!-- How It Works -->
             <section
                 class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
                 <div class="flex items-center gap-3 mb-4">
-                    <div
-                        class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
+                    <div class="p-2 bg-emerald-100 dark:bg-emerald-900/50 rounded-lg text-emerald-600 dark:text-emerald-400">
                         <i data-lucide="cpu" class="w-6 h-6"></i>
                     </div>
                     <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">How It Works</h2>
@@ -68,18 +68,18 @@
                     <h3 class="text-lg font-bold text-slate-800 dark:text-slate-200 mb-3">Evaluation Pipeline</h3>
                     <ul class="space-y-3 list-disc list-inside marker:text-indigo-500">
                         <li><strong>Submission:</strong> Users submit their Hugging Face model ID.</li>
-                        <li><strong>Queue:</strong> Models are added to a processing queue.</li>
+                        <li><strong>Queue:</strong> Models are added to a processing queue. You can track the status of your submission at any time on the <a href="https://huggingface.co/spaces/qimma/leaderboard" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">submission page</a>.</li>
                         <li><strong>Execution:</strong> Our GPU cluster loads the model and runs the benchmark suite across all tracks.</li>
                         <li><strong>Scoring:</strong> Per-subset scores are aggregated by domain and published alongside per-sample model predictions for full transparency.</li>
                     </ul>
                 </div>
             </section>
 
+            <!-- Benchmarks & Metrics -->
             <section
                 class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
                 <div class="flex items-center gap-3 mb-4">
-                    <div
-                        class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
+                    <div class="p-2 bg-purple-100 dark:bg-purple-900/50 rounded-lg text-purple-600 dark:text-purple-400">
                         <i data-lucide="bar-chart-2" class="w-6 h-6"></i>
                     </div>
                     <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Benchmarks & Metrics</h2>
@@ -149,8 +149,55 @@
                     </div>
                 </div>
             </section>
+
+            <!-- Resources -->
+            <section
+                class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
+                <div class="flex items-center gap-3 mb-6">
+                    <div class="p-2 bg-cyan-100 dark:bg-cyan-900/50 rounded-lg text-cyan-600 dark:text-cyan-400">
+                        <i data-lucide="link" class="w-6 h-6"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Resources</h2>
+                </div>
+                <div class="flex flex-wrap gap-3">
+                    <a href="#" target="_blank"
+                        class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 text-slate-700 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all text-sm font-medium">
+                        <i data-lucide="file-text" class="w-4 h-4"></i>
+                        Paper <span class="text-xs text-slate-400 dark:text-slate-500 font-normal ml-1">(coming soon)</span>
+                    </a>
+                    <a href="https://huggingface.co/blog/tiiuae/qimma-arabic-leaderboard" target="_blank"
+                        class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 text-slate-700 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all text-sm font-medium">
+                        <i data-lucide="newspaper" class="w-4 h-4"></i>
+                        Blog Post
+                    </a>
+                    <a href="https://github.com/tiiuae/QIMMA-leaderboard" target="_blank"
+                        class="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-slate-200 dark:border-slate-600 bg-slate-50 dark:bg-slate-700/30 text-slate-700 dark:text-slate-300 hover:border-indigo-400 dark:hover:border-indigo-500 hover:text-indigo-600 dark:hover:text-indigo-400 transition-all text-sm font-medium">
+                        <i data-lucide="github" class="w-4 h-4"></i>
+                        GitHub
+                    </a>
+                </div>
+                <p class="mt-5 text-sm text-slate-600 dark:text-slate-400">
+                    To contact us about the leaderboard, open a discussion <a href="https://huggingface.co/spaces/qimma/leaderboard/discussions" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline">here</a>.
+                </p>
+            </section>
+
+            <!-- Acknowledgements -->
+            <section
+                class="bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-sm border border-slate-200 dark:border-slate-700">
+                <div class="flex items-center gap-3 mb-4">
+                    <div class="p-2 bg-amber-100 dark:bg-amber-900/50 rounded-lg text-amber-600 dark:text-amber-400">
+                        <i data-lucide="sparkles" class="w-6 h-6"></i>
+                    </div>
+                    <h2 class="text-2xl font-bold text-slate-800 dark:text-slate-100">Acknowledgements</h2>
+                </div>
+                <p class="text-slate-600 dark:text-slate-300 leading-relaxed">
+                    QIMMA is sponsored by the <a href="https://www.tii.ae" target="_blank" class="text-indigo-600 dark:text-indigo-400 hover:underline font-medium">Technology Innovation Institute (TII)</a>, which provides the compute resources and institutional support that make this leaderboard possible.
+                </p>
+            </section>
+
         </div>
 
+        <!-- Citation -->
         <div class="mt-12 border-t border-slate-200 dark:border-slate-700 pt-8 pb-8">
             <h3 class="text-xl font-bold text-center text-slate-800 dark:text-slate-100 mb-6">Citation</h3>
             <div class="max-w-4xl mx-auto relative group">
@@ -197,7 +244,6 @@ howpublished = {https://huggingface.co/spaces/qimma/Qimma-Leaderboard}
                 }, 2000);
             });
         }
-
     </script>
 </body>