44 lines
2.2 KiB
Vue
44 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
import { Link } from '@inertiajs/vue3';
|
|
</script>
|
|
|
|
<template>
|
|
<section class="relative z-10 py-12 px-6">
|
|
<div class="container mx-auto max-w-6xl">
|
|
<div
|
|
class="relative overflow-hidden rounded-3xl border border-white/10 bg-[#0f172a]/50 p-8 shadow-2xl backdrop-blur-sm sm:p-12"
|
|
>
|
|
<div
|
|
class="absolute -top-24 -right-24 h-48 w-48 rounded-full bg-purple-500/20 blur-[80px]"
|
|
></div>
|
|
<div
|
|
class="absolute -bottom-24 -left-24 h-48 w-48 rounded-full bg-blue-500/20 blur-[80px]"
|
|
></div>
|
|
|
|
<div class="relative flex flex-col items-center justify-between gap-8 text-center md:flex-row md:text-left">
|
|
<div class="max-w-2xl">
|
|
<h2 class="mb-4 text-3xl font-black italic tracking-tight text-white md:text-4xl">
|
|
<span class="bg-gradient-to-r from-purple-400 to-blue-400 bg-clip-text text-transparent">NEU:</span> DAS LEADERBOARD
|
|
</h2>
|
|
<p class="text-lg text-gray-300">
|
|
Miss dich mit der Community, sammle Punkte und klettere an die Spitze.
|
|
Wer wird der ultimative Bratan?
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex-shrink-0">
|
|
<Link
|
|
href="/leaderboard"
|
|
class="group relative inline-flex items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-purple-500 to-blue-500 p-1 font-bold text-white transition-all duration-300 hover:scale-105 hover:shadow-[0_0_2rem_-0.5rem_#a855f7]"
|
|
>
|
|
<span class="relative rounded-full bg-[#0f172a] px-8 py-4 transition-all duration-300 group-hover:bg-transparent">
|
|
Zum Leaderboard <i class="fa-solid fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
|
|
</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|