Change settings

src/components/Header.vue

@@ -117,4 +117,4 @@ export default {
         height: 17px;
     }
 }
-</style>
+</style>

src/components/HeaderOpen.vue

@@ -0,0 +1,204 @@
+<template>
+  <header class="arena-header">
+    <div class="top-row">
+      <div class="logos-group">
+        <img
+          v-for="(logo, i) in hostingLogos"
+          :key="'host-' + i"
+          :src="logo.src"
+          :alt="logo.name"
+          class="logo-image"
+          @click="navigateTo('/')"
+        />
+      </div>
+      <h1 class="arena-title">Agent Market Arena</h1>
+    </div>
+
+    <nav class="menu-section">
+      <span class="menu-item" @click="navigateTo('/live')">Live Arena</span>
+      <span class="menu-item" @click="navigateTo('/leaderboard')">Leaderboard</span>
+      <span class="menu-item" @click="navigateTo('/add-asset')">Agent Arena</span>
+    </nav>
+
+    <section class="partners">
+      <div class="partners-row">
+        <strong class="section-label">Hosting</strong>
+        <div class="logos-row">
+          <img
+            v-for="(logo, i) in hostingLogos"
+            :key="'hosting-' + i"
+            :src="logo.src"
+            :alt="logo.name"
+            class="partner-logo"
+          />
+        </div>
+      </div>
+
+      <div class="partners-row">
+        <strong class="section-label">Supporting</strong>
+        <div class="logos-row">
+          <img
+            v-for="(logo, i) in supportingLogos"
+            :key="'supporting-' + i"
+            :src="logo.src"
+            :alt="logo.name"
+            class="partner-logo"
+          />
+        </div>
+      </div>
+    </section>
+  </header>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      hostingLogos: [
+        { name: 'DeepKin', src: '../assets/images/companies_images/deepkin_logo.png' },
+        { name: 'The Fin AI', src: '../assets/images/companies_images/logofinai.png' },
+        { name: 'NaCTeM', src: '../assets/images/companies_images/nactemlogo.png' },
+        { name: 'PAAL AI', src: '../assets/images/companies_images/paalai_logo.png' }
+      ],
+      supportingLogos: [
+        { name: 'Georgia Tech', src: '../assets/images/companies_images/gt_logo.png' },
+        { name: 'Columbia University', src: '../assets/images/companies_images/columbia_logo.png' },
+        { name: 'Stevens Institute of Technology', src: '../assets/images/companies_images/stevens_logo.png' },
+        { name: 'University of Florida', src: '../assets/images/companies_images/uf_logo.png' },
+        { name: 'Université de Montréal', src: '../assets/images/companies_images/udem_logo.png' },
+        { name: 'Harvard University', src: '../assets/images/companies_images/harvard_logo.png' }
+      ]
+    };
+  },
+  methods: {
+    navigateTo(path) {
+      this.$router.push(path);
+    }
+  }
+};
+</script>
+
+<style scoped>
+.arena-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.2rem;
+  padding: 1.5rem 1rem 2rem;
+  background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
+  border-bottom: 3px solid #e5e7eb;
+  text-align: center;
+}
+
+.top-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.logos-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+.logo-image {
+  height: 42px;
+  width: auto;
+  object-fit: contain;
+  transition: transform 0.25s ease;
+  cursor: pointer;
+}
+.logo-image:hover {
+  transform: translateY(-3px) scale(1.05);
+}
+
+.arena-title {
+  font-size: 2rem;
+  font-weight: 800;
+  color: #1f1f33;
+}
+
+.menu-section {
+  display: flex;
+  gap: 2rem;
+  flex-wrap: wrap;
+  justify-content: center;
+  margin-top: 0.5rem;
+}
+.menu-item {
+  cursor: pointer;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: #374151;
+  position: relative;
+  padding-bottom: 4px;
+  transition: color 0.25s ease;
+}
+.menu-item:hover {
+  color: #0070f3;
+}
+.menu-item::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 0%;
+  height: 2px;
+  background-color: #0070f3;
+  transition: width 0.3s ease;
+}
+.menu-item:hover::after {
+  width: 100%;
+}
+
+.partners {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  margin-top: 1rem;
+}
+.partners-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+.section-label {
+  font-weight: 700;
+  color: #1f1f33;
+  font-size: 1rem;
+}
+.logos-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  justify-content: center;
+}
+.partner-logo {
+  height: 34px;
+  width: auto;
+  object-fit: contain;
+  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
+  transition: transform 0.25s ease;
+}
+.partner-logo:hover {
+  transform: scale(1.05);
+}
+
+@media (max-width: 768px) {
+  .arena-title {
+    font-size: 1.6rem;
+  }
+  .logo-image,
+  .partner-logo {
+    height: 28px;
+  }
+  .menu-section {
+    gap: 1rem;
+  }
+}
+</style>

src/pages/Main.vue

@@ -7,7 +7,7 @@
 </template>
 
 <script>
-import Header from '../components/Header.vue'
+import Header from '../components/HeaderOpen.vue'
 import Footer from '../components/Footer.vue'
 export default {
   name: 'Main',

src/router/index.js

@@ -11,7 +11,7 @@ const routes = [
     path: '/', 
     name: 'main', 
     component: Main,
-    redirect: '/leadboard',
+    redirect: '/live',
     children: [
       { path: '/leadboard', name: 'leadboard', component: LeadboardView },
       { path: '/live', name: 'live', component: LiveView },