Add Paper & Citation section to Join Arena page with copy functionality

src/views/RequestView.vue

@@ -157,6 +157,42 @@
         </a>
       </div>
     </section>
+
+    <!-- ============== PAPER & CITATION ============== -->
+    <section class="section paper-section">
+      <header class="section-head">
+        <h2 class="section-title">
+          <span class="ama-gradient">Paper & Citation</span>
+        </h2>
+      </header>
+      
+      <div class="paper-card">
+        <div class="paper-content">
+          <h3 class="paper-title">When Agents Trade: Live Multi-Market Trading Benchmark for LLM Agents</h3>
+          <div class="paper-links">
+            <a href="https://arxiv.org/pdf/2510.11695" target="_blank" rel="noopener" class="paper-link">
+              <i class="pi pi-file-pdf"></i> Read Paper
+            </a>
+          </div>
+          
+          <div class="citation-box">
+            <div class="citation-header">
+              <span class="citation-label">BibTeX Citation</span>
+              <button @click="copyCitation" class="copy-btn" :class="{ 'copied': citationCopied }">
+                <i :class="citationCopied ? 'pi pi-check' : 'pi pi-copy'"></i>
+                {{ citationCopied ? 'Copied!' : 'Copy' }}
+              </button>
+            </div>
+            <pre class="citation-text">@article{qian2025agents,
+  title={When Agents Trade: Live Multi-Market Trading Benchmark for LLM Agents},
+  author={Qian, Lingfei and Peng, Xueqing and Wang, Yan and Zhang, Vincent Jim and He, Huan and Smith, Hanley and Han, Yi and He, Yueru and Li, Haohang and Cao, Yupeng and others},
+  journal={arXiv preprint arXiv:2510.11695},
+  year={2025}
+}</pre>
+          </div>
+        </div>
+      </div>
+    </section>
   </div>
 </template>
 
@@ -235,7 +271,10 @@ export default {
         MSFT: new URL('../assets/images/assets_images/MSFT.png', import.meta.url).href,
         BMRN: new URL('../assets/images/assets_images/BMRN.png', import.meta.url).href,
         TSLA: new URL('../assets/images/assets_images/TSLA.png', import.meta.url).href
-      }
+      },
+      
+      // Paper & Citation
+      citationCopied: false
     }
   },
 
@@ -401,6 +440,24 @@ export default {
       const order = ['BTC','ETH','MSFT','BMRN','TSLA']
       cards.sort((a,b) => (order.indexOf(a.code) - order.indexOf(b.code)))
       this.assets = cards
+    },
+    
+    async copyCitation() {
+      const citation = `@article{qian2025agents,
+  title={When Agents Trade: Live Multi-Market Trading Benchmark for LLM Agents},
+  author={Qian, Lingfei and Peng, Xueqing and Wang, Yan and Zhang, Vincent Jim and He, Huan and Smith, Hanley and Han, Yi and He, Yueru and Li, Haohang and Cao, Yupeng and others},
+  journal={arXiv preprint arXiv:2510.11695},
+  year={2025}
+}`
+      try {
+        await navigator.clipboard.writeText(citation)
+        this.citationCopied = true
+        setTimeout(() => {
+          this.citationCopied = false
+        }, 2000)
+      } catch (err) {
+        console.error('Failed to copy citation:', err)
+      }
     }
   },
   
@@ -520,4 +577,66 @@ export default {
 .btn-cta{ background:linear-gradient(90deg, rgb(0,0,185), #7b2cbf, #d946ef, rgb(240,0,15)); border:none; color:#fff; font-weight:800; letter-spacing:.02em; padding:10px 16px; border-radius:12px; cursor:pointer; }
 .mr-2{ margin-right:.5rem; }
 .pos{ color:#0e7a3a; } .neg{ color:#B91C1C; }
+
+/* ===== Paper & Citation ===== */
+.paper-section{ margin-top:40px; margin-bottom:40px; }
+.paper-card{
+  background:#ffffff; border:1px solid #E7ECF3; border-radius:14px;
+  box-shadow:0 1px 2px rgba(16,24,40,.03), 0 4px 12px rgba(16,24,40,.04);
+  padding:24px;
+}
+.paper-content{ display:flex; flex-direction:column; gap:20px; }
+.paper-title{
+  font-size:1.4rem; font-weight:800; color:#0f172a;
+  letter-spacing:-0.02em; line-height:1.3; margin:0;
+}
+.paper-links{ display:flex; gap:12px; align-items:center; }
+.paper-link{
+  display:inline-flex; align-items:center; gap:8px;
+  padding:10px 18px; background:#f3f4f6; border:1px solid #E7ECF3;
+  border-radius:10px; text-decoration:none; color:#0f172a;
+  font-weight:700; font-size:14px; transition:all .2s ease;
+}
+.paper-link:hover{
+  background:#e5e7eb; border-color:#cbd5e1; transform:translateY(-1px);
+  box-shadow:0 4px 12px rgba(16,24,40,.08);
+}
+.paper-link i{ font-size:16px; }
+
+.citation-box{
+  background:#f8fafc; border:1px solid #e2e8f0;
+  border-radius:12px; padding:16px;
+}
+.citation-header{
+  display:flex; justify-content:space-between; align-items:center;
+  margin-bottom:12px;
+}
+.citation-label{
+  font-weight:700; font-size:14px; color:#0f172a;
+}
+.copy-btn{
+  display:inline-flex; align-items:center; gap:6px;
+  padding:6px 12px; background:#ffffff; border:1px solid #cbd5e1;
+  border-radius:8px; cursor:pointer; font-weight:600;
+  font-size:13px; color:#334155; transition:all .2s ease;
+}
+.copy-btn:hover{
+  background:#f1f5f9; border-color:#94a3b8;
+}
+.copy-btn.copied{
+  background:#dcfce7; border-color:#86efac; color:#166534;
+}
+.copy-btn i{ font-size:12px; }
+
+.citation-text{
+  background:#0b1020; color:#E6EDF3; border-radius:8px;
+  padding:14px; overflow:auto; font-family: ui-monospace, monospace;
+  font-size:13px; line-height:1.6; margin:0; white-space:pre;
+}
+
+@media (max-width: 620px){
+  .paper-card{ padding:16px; }
+  .paper-title{ font-size:1.2rem; }
+  .citation-header{ flex-direction:column; align-items:flex-start; gap:8px; }
+}
 </style>