Updates (#8)

* Added subtitle to hero section, deleted description.
Added affiliation of routers on leaderboard page and leaderboard preview.
Changed leaderboard preview text
Principled dataset -> diverse dataset
Larger text on the dataset composition graph
Removed contact us button
Removed blue bars
New color scheme for top 3, and new icons
Two decimal metrics.
Larger text on spider and deferral graph
More specific information on evaluation metrics
Fixed github repo link

* Added affliations for irt router

Author: shenrunzhang

src/data/mockData.ts

@@ -84,7 +84,7 @@ export const routers: Router[] = [
     name: 'MIRT-BERT',
     type: 'academic',
     description: 'Multi-item response theory with BERT embeddings',
-    affiliation: 'Unknown',
+    affiliation: 'USTC',
     metrics: {
       arenaScore: 0.78,
       costRatioScore: 0.75,
@@ -102,7 +102,7 @@ export const routers: Router[] = [
     name: 'NIRT-BERT',
     type: 'academic',
     description: 'Neural item response theory with BERT-based routing',
-    affiliation: 'Unknown',
+    affiliation: 'USTC',
     metrics: {
       arenaScore: 0.76,
       costRatioScore: 0.70,

src/pages/HomePage.tsx

@@ -37,6 +37,9 @@ const HomePage: React.FC = () => {
             <p className="hero-subtitle-short">
               Diverse dataset, extensive metrics, and live leaderboard
             </p>
+            <p className="hero-subtitle-short">
+              Diverse dataset, extensive metrics, and live leaderboard
+            </p>
             <div className="hero-actions">
               <Link to="/leaderboard" className="btn btn-primary">
                 <Trophy className="btn-icon" />
@@ -58,6 +61,7 @@ const HomePage: React.FC = () => {
                         <span className="rank">{index + 1}</span>
                         <span className="name">{router.name}</span>
                         <span className="affiliation">{router.affiliation}</span>
+                        <span className="affiliation">{router.affiliation}</span>
                       </div>
                     ))}
                   </div>
@@ -66,7 +70,7 @@ const HomePage: React.FC = () => {
                 <div className="cta-card">
                   <h3 className="cta-heading">Want to see your router on the leaderboard?</h3>
                   <p className="cta-description">
-                  Open a GitHub issue on our RouterArena platform.
+                  Email us or open a GitHub issue on RouterArena.
                   </p>
                   <a href="#contact" className="btn btn-primary">
                     Get Started →
@@ -91,6 +95,7 @@ const HomePage: React.FC = () => {
             >
               <BookOpen className="tab-icon" />
               Diverse Dataset
+              Diverse Dataset
             </button>
             <button
               className={`tab-button ${activeTab === 'metrics' ? 'active' : ''}`}
@@ -124,6 +129,7 @@ const HomePage: React.FC = () => {
                     <BookOpen />
                   </div>
                   <div>
+                    <h3>Diverse Dataset</h3>
                     <h3>Diverse Dataset</h3>
                     <p className="tab-subtitle">
                       {datasetInfo.totalQueries.toLocaleString()} queries across {datasetInfo.domains} domains
@@ -242,7 +248,7 @@ const HomePage: React.FC = () => {
         <div className="container">
           <h2 className="section-title">Research Team</h2>
           <p className="contact-description">
-            Contact us or open a GitHub issue to evaluate your router with RouterArena
+            Contact us or submit a GitHub issue to evaluate your router with RouterArena
           </p>
 
           {/* Action Buttons */}

src/pages/LeaderboardPage.css

@@ -166,6 +166,10 @@
   --lb-grid: 60px minmax(140px, 1.4fr) minmax(120px, 1fr) 0.8fr repeat(5, minmax(90px, 1fr));
 }
 
+:root {
+  --lb-grid: 60px minmax(140px, 1.4fr) minmax(120px, 1fr) 0.8fr repeat(5, minmax(90px, 1fr));
+}
+
 .leaderboard-header {
   display: grid;
   grid-template-columns: var(--lb-grid);

src/pages/LeaderboardPage.tsx

@@ -295,16 +295,16 @@ const LeaderboardPage: React.FC = () => {
             <div className="metric-card">
               <h3>Cost Ratio Score</h3>
               <p>
-                Evaluates the cost of the router's choices relative to an oracle that always selects the cheapest correct model.
-                Routers with higher scores achieve comparable accuracy at lower inference cost.
+              Measures the performance a router achieves per unit of cost compared to the benchmarked routers.
+              A high score means it maintains strong accuracy while spending less on average across all queries.
               </p>
             </div>
 
             <div className="metric-card">
               <h3>Optimality Score</h3>
               <p>
-                Measures how often a router selects the optimal model (i.e., the model answers the question correctly with the lowest cost).
-                Higher values reflect closer alignment to cost-optimal routing behavior.
+              Captures how the router's ability to select the cheapest model that still produces a correct response.
+              High values indicate decisions that closely match ideal, cost-minimizing routing behavior.
               </p>
             </div>