40 lines
2.1 KiB
Vue
40 lines
2.1 KiB
Vue
<script lang="ts" setup>
|
||
import { router } from '@inertiajs/vue3';
|
||
|
||
const goToShuffle = () => {
|
||
router.visit('/tirage');
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="relative flex items-center justify-center py-20 text-center sm:py-32">
|
||
<div class="absolute inset-0 overflow-hidden">
|
||
<div
|
||
class="absolute inset-0 bg-cover bg-center"
|
||
style="
|
||
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
|
||
filter: blur(4px) brightness(0.7);
|
||
"
|
||
></div>
|
||
<div class="absolute inset-0 bg-gradient-to-t from-[var(--light-ivory)] via-transparent to-transparent"></div>
|
||
</div>
|
||
<div class="relative z-10 flex max-w-3xl flex-col items-center gap-6">
|
||
<h1 class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl" style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)">
|
||
Révélez Votre
|
||
<span class="citadel-script text-6xl text-[var(--subtle-gold)] md:text-8xl">Empire</span>
|
||
Intérieur
|
||
</h1>
|
||
<p class="max-w-2xl text-lg text-[var(--linen)]">
|
||
Embrassez la sagesse intemporelle de l’Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
|
||
confiance.
|
||
</p>
|
||
<button
|
||
class="mt-4 flex h-12 max-w-[480px] min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
|
||
@click="goToShuffle"
|
||
>
|
||
<span class="truncate">Découvrir Votre Oracle</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</template>
|