Initial VTuber Awards implementation

frontend/src/views/WinnersView.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+
+import Button from '../components/ui/Button.vue'
+import Card from '../components/ui/Card.vue'
+import { useAwardsStore } from '../stores/awards'
+
+const store = useAwardsStore()
+const years = [2025, 2024, 2023, 2022]
+const activeYear = ref(2025)
+
+onMounted(async () => {
+  await store.loadHomeData()
+  await store.loadArchive(activeYear.value)
+})
+
+async function selectYear(year: number) {
+  activeYear.value = year
+  await store.loadArchive(year)
+}
+</script>
+
+<template>
+  <div class="space-y-10 pb-14">
+    <div class="space-y-4">
+      <p class="text-xs font-semibold uppercase tracking-[0.35em] text-amber-500">Gewinnerarchiv</p>
+      <h1 class="max-w-[12ch] font-[Cormorant_Garamond] text-6xl leading-[0.92] text-violet-800">Seasons, Gewinner und Show-Historie</h1>
+      <p class="max-w-3xl text-lg leading-8 text-slate-600">
+        Das Archiv macht Awards dauerhaft sichtbar und verlinkbar. Kategorien und Banner bleiben pro Jahr nachvollziehbar.
+      </p>
+    </div>
+
+    <div class="flex flex-wrap gap-3">
+      <Button
+        v-for="year in years"
+        :key="year"
+        :variant="activeYear === year ? 'default' : 'ghost'"
+        @click="selectYear(year)"
+      >
+        {{ year }}
+      </Button>
+    </div>
+
+    <div class="grid gap-5 lg:grid-cols-3">
+      <Card
+        v-for="item in store.archive.items"
+        :key="`${store.archive.year}-${item.category}`"
+        class="p-7"
+      >
+        <p class="text-xs font-semibold uppercase tracking-[0.25em] text-violet-500">{{ store.archive.year }}</p>
+        <h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">{{ item.category }}</h2>
+        <p class="mt-4 text-lg font-semibold text-slate-800">{{ item.winnerName }}</p>
+        <p class="mt-1 text-sm text-slate-500">{{ item.winnerSlug }}</p>
+      </Card>
+    </div>
+  </div>
+</template>