bao/vtuber-awards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refresh home view with updated hero and steps

Browse Source
This commit is contained in:
AzuTear
2026-06-22 18:06:47 +02:00
parent d015fcbe6f
commit 30fb931bd3
25 changed files with 262 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/HomeView.vue
+61 -42
View File
@@ -35,7 +35,10 @@ import Card from '../components/ui/Card.vue'
import { useAwardsStore } from '../stores/awards'
import { useAuthStore } from '../stores/auth'
import { usePhases, type ActionKey, type PhaseState } from '../composables/usePhases'
import heroKeyvisual from '../assets/hero-keyvisual.svg'
import landingHeroCharacter from '../assets/landing-hero-character.png'
import stepNominate from '../assets/step-nominate.svg'
import stepVote from '../assets/step-vote.svg'
import stepWinners from '../assets/step-winners.svg'
const store = useAwardsStore()
const authStore = useAuthStore()
@@ -132,22 +135,19 @@ const trustItems = [
const steps = [
{
icon: Sparkles,
image: stepNominate,
title: 'Nominieren',
text: 'Trag deine Lieblings-Creator ein – bis zu 3 Favoriten pro Kategorie.',
accent: 'from-violet-200 to-fuchsia-100 text-violet-600',
text: 'Nominiere deine Favoriten in jeder Kategorie. Pro Kategorie 3 Nominierungen.',
},
{
icon: Heart,
image: stepVote,
title: 'Voten',
text: 'Die Community stimmt ab. Eine Stimme pro Kategorie, mit ganz viel Herz.',
accent: 'from-rose-200 to-amber-100 text-rose-500',
text: 'Die Community stimmt über ihre Top-Favoriten ab. Nur 1 Stimme pro Kategorie.',
},
{
icon: Trophy,
title: 'Feiern',
image: stepWinners,
title: 'Die Besten',
text: 'Die Stimmen werden gezählt und die Gewinner live in der Show gekürt!',
accent: 'from-amber-200 to-emerald-100 text-amber-600',
},
]
@@ -286,28 +286,36 @@ const winnersScopeYear = computed(() => heroYear.value - 1)
</div>
<!-- Hero Keyvisual -->
<Card class="relative overflow-hidden p-0">
<div class="relative min-h-[640px]">
<img :src="heroKeyvisual" alt="VTuber Star Awards Keyvisual (Platzhalter)" class="absolute inset-0 h-full w-full object-cover object-top" />
<div class="absolute inset-0 bg-[radial-gradient(circle_at_70%_18%,rgba(255,255,255,0.55),transparent_45%)]" />
<Card class="relative h-full overflow-hidden p-0">
<div class="relative h-full min-h-[560px] overflow-hidden bg-[linear-gradient(145deg,#f6efff_0%,#d9c9f2_48%,#7b61aa_100%)] sm:min-h-[640px]">
<div class="absolute inset-0 bg-[radial-gradient(circle_at_76%_16%,rgba(255,255,255,0.58),transparent_34%),radial-gradient(circle_at_18%_72%,rgba(250,204,21,0.2),transparent_32%),linear-gradient(135deg,rgba(64,34,112,0.28),rgba(64,34,112,0.02)_46%,rgba(255,255,255,0.22))]" />
<div class="absolute -bottom-16 -left-16 h-64 w-64 rounded-full bg-amber-200/25 blur-3xl" />
<div class="absolute right-16 top-20 h-44 w-44 rounded-full bg-white/30 blur-3xl" />
<!-- Host Badge -->
<div class="absolute bottom-7 right-7 w-[230px] rounded-[24px] border border-white/70 bg-white/80 p-5 shadow-lg backdrop-blur">
<p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-slate-400">Host</p>
<p class="mt-1 flex items-center gap-2 font-[Cormorant_Garamond] text-3xl text-violet-800">
Jayuhime <Sparkles class="h-5 w-5 text-amber-400" />
</p>
<p class="text-sm text-slate-500">VTuber &amp; Award Host</p>
<div class="mt-3 flex items-center gap-2 text-violet-500">
<span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
<Video class="h-4 w-4" />
</span>
<span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
<PartyPopper class="h-4 w-4" />
</span>
<span class="grid h-8 w-8 place-items-center rounded-full bg-violet-50">
<svg class="h-3.5 w-3.5" viewBox="0 0 19 19"><use href="/icons.svg#x-icon" /></svg>
</span>
<img
:src="landingHeroCharacter"
alt="VTuber Award Host mit Trophäe"
class="absolute right-[-18px] top-8 z-10 h-[470px] max-w-none object-contain drop-shadow-[0_30px_50px_rgba(32,13,77,0.38)] sm:right-6 sm:top-4 sm:h-[600px] lg:right-8 xl:right-12 xl:h-[640px]"
/>
<div class="absolute bottom-0 left-0 right-0 z-20 bg-gradient-to-t from-[#241049]/92 via-[#241049]/48 to-transparent px-6 pb-6 pt-28 sm:px-8 sm:pb-8">
<div class="max-w-[330px] rounded-[24px] border border-white/25 bg-white/82 p-5 shadow-[0_24px_70px_rgba(32,13,77,0.28)] backdrop-blur">
<p class="text-[10px] font-semibold uppercase tracking-[0.3em] text-violet-500">Host</p>
<p class="mt-1 flex items-center gap-2 font-[Cormorant_Garamond] text-3xl text-violet-800">
Jayuhime <Sparkles class="h-5 w-5 text-amber-400" />
</p>
<p class="text-sm text-slate-600">VTuber &amp; Award Host</p>
<div class="mt-4 grid grid-cols-3 gap-2 text-violet-600">
<span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
<Video class="h-4 w-4" />
</span>
<span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
<PartyPopper class="h-4 w-4" />
</span>
<span class="inline-flex items-center justify-center rounded-full bg-violet-50 px-3 py-2">
<Trophy class="h-4 w-4" />
</span>
</div>
</div>
</div>
</div>
@@ -328,21 +336,32 @@ const winnersScopeYear = computed(() => heroYear.value - 1)
</section>
<!-- ============ SO FUNKTIONIERT'S ============ -->
<section class="space-y-10">
<section class="space-y-7 rounded-[32px] border border-violet-100/80 bg-white/72 px-6 py-8 shadow-[0_28px_90px_rgba(124,92,255,0.09)] sm:px-8">
<div class="text-center">
<p class="text-xs font-semibold uppercase tracking-[0.4em] text-amber-500">So funktioniert's</p>
<h2 class="mt-2 font-[Cormorant_Garamond] text-4xl text-violet-800">In drei Schritten zur großen Bühne</h2>
</div>
<div class="grid gap-6 md:grid-cols-3">
<div v-for="(step, index) in steps" :key="step.title" class="relative text-center">
<div :class="['mx-auto grid h-20 w-20 place-items-center rounded-3xl bg-gradient-to-br shadow-[0_18px_40px_rgba(124,92,255,0.18)]', step.accent]">
<component :is="step.icon" class="h-8 w-8" />
<div class="grid gap-8 md:grid-cols-3">
<div v-for="(step, index) in steps" :key="step.title" class="relative">
<img :src="step.image" alt="" aria-hidden="true" class="mx-auto h-40 w-full max-w-[292px] object-contain" />
<div
v-if="index < steps.length - 1"
class="pointer-events-none absolute right-[-48px] top-16 hidden h-14 w-24 text-violet-300 md:block"
aria-hidden="true"
>
<svg viewBox="0 0 110 54" class="h-full w-full fill-none">
<path d="M8 36C38 10 69 8 97 31" stroke="currentColor" stroke-width="6" stroke-linecap="round" opacity=".58" />
<path d="M96 31l-17-3 8 16 9-13z" fill="currentColor" opacity=".68" />
</svg>
</div>
<div class="mt-4 flex items-start gap-4">
<span class="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-full border-2 border-violet-200 bg-white font-[Cormorant_Garamond] text-2xl font-semibold text-violet-700">
{{ index + 1 }}
</span>
<div>
<h3 class="font-[Cormorant_Garamond] text-3xl font-semibold uppercase tracking-[0.02em] text-violet-800">{{ step.title }}</h3>
<p class="mt-2 max-w-xs text-base leading-8 text-slate-600">{{ step.text }}</p>
</div>
</div>
<span class="mt-5 inline-flex h-8 w-8 items-center justify-center rounded-full border border-violet-200 bg-white text-sm font-semibold text-violet-600">
{{ index + 1 }}
</span>
<h3 class="mt-3 font-[Cormorant_Garamond] text-3xl text-violet-800">{{ step.title }}</h3>
<p class="mx-auto mt-2 max-w-xs text-sm leading-7 text-slate-600">{{ step.text }}</p>
</div>
</div>
</section>