Update index with tierlists

frontend/pages/index.vue

@@ -1,4 +1,7 @@
-<script setup>
+<script setup lang="ts">
+import { POSITIONS, LANE_IMAGES, POSITIONS_STR } from '~/utils/cdragon';
+
+const {data: stats}: {data: Ref<{patch: number, count: number}>} = await useFetch("/api/stats")
 </script>
 
 <template>
@@ -8,5 +11,27 @@
 
     <Logo style="margin: auto; margin-top: 64px; margin-bottom: 64px;" />
 
-    <ChampionSelector style="margin-top: 64px;"/>
+    <div style="display: flex; margin-top: 64px;">
+
+    <div style="margin: auto; margin-top: 0px; width: fit-content;">
+        <div style="margin: auto; margin-top: 110px; width: fit-content;">
+        <h2 style="font-size: 55px; margin-bottom: 10px;">Tierlists</h2>
+            <NuxtLink style="margin-top: 5px; margin-bottom: 5px;" v-for="(pos, i) in POSITIONS" :to="'/tierlist/' + pos">
+            <div style="display: flex; align-items: center;">
+                <img width="40" height="40" :src="LANE_IMAGES[i]" />
+                <h3 style="font-size: 34px; font-weight: 200; margin-left: 10px;">{{ POSITIONS_STR[i] }}</h3>
+            </div>
+            </NuxtLink>
+        </div>
+        <div style="margin: auto; margin-left: 50px; margin-top: 50px; width: fit-content; max-width: 300px;">
+            <h3 style="font-size: 30px; font-weight: 200;">
+                BuildPath analyzed {{ stats.count }} games from challenger players on patch {{ stats.patch }}
+            </h3>
+            
+        </div>
+    </div>
+    
+    <ChampionSelector style="width: 80%;"/>
+
+    </div>
 </template>