199 lines
7.2 KiB
Vue
199 lines
7.2 KiB
Vue
<script lang="ts" setup>
|
|
import { router } from '@inertiajs/vue3';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const isMounted = ref(false);
|
|
const buttonHover = ref(false);
|
|
|
|
onMounted(() => {
|
|
setTimeout(() => {
|
|
isMounted.value = true;
|
|
}, 100);
|
|
});
|
|
|
|
const goToShuffle = () => {
|
|
router.visit('/tirage');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative flex items-center justify-center overflow-hidden py-20 text-center sm:py-32">
|
|
<!-- Animated background elements -->
|
|
<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>
|
|
|
|
<!-- Smooth gold particles with stable positions -->
|
|
<div
|
|
v-for="i in 15"
|
|
:key="i"
|
|
class="gold-particle absolute"
|
|
:style="{
|
|
left: `${10 + Math.random() * 80}%`,
|
|
top: `${10 + Math.random() * 80}%`,
|
|
width: `${Math.random() * 8 + 4}px`,
|
|
height: `${Math.random() * 8 + 4}px`,
|
|
animationDelay: `${Math.random() * 2}s`,
|
|
animationDuration: `${Math.random() * 15 + 15}s`,
|
|
}"
|
|
></div>
|
|
|
|
<!-- Larger, slower gold elements -->
|
|
<div
|
|
v-for="i in 5"
|
|
:key="'large-' + i"
|
|
class="large-gold-particle absolute"
|
|
:style="{
|
|
left: `${15 + Math.random() * 70}%`,
|
|
top: `${15 + Math.random() * 70}%`,
|
|
width: `${Math.random() * 20 + 15}px`,
|
|
height: `${Math.random() * 20 + 15}px`,
|
|
animationDelay: `${Math.random() * 5}s`,
|
|
animationDuration: `${Math.random() * 25 + 25}s`,
|
|
}"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Main content with animations -->
|
|
<div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4">
|
|
<!-- Animated title -->
|
|
<h1
|
|
class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl"
|
|
:class="{ 'animate-fade-in-up': isMounted }"
|
|
style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
|
|
>
|
|
Révélez Votre
|
|
<span class="citadel-script relative text-6xl text-[var(--subtle-gold)] md:text-8xl">
|
|
<span class="gold-glow">Voyage</span>
|
|
<!-- Gold underline accent -->
|
|
<span
|
|
class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent transition-transform duration-1000"
|
|
:class="{ 'scale-x-100': isMounted }"
|
|
></span>
|
|
</span>
|
|
Intérieur
|
|
</h1>
|
|
|
|
<!-- Animated description -->
|
|
<p
|
|
class="max-w-2xl text-lg text-[var(--linen)] transition-all delay-500 duration-1000"
|
|
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
|
|
>
|
|
Embrassez la sagesse intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
|
|
confiance.
|
|
</p>
|
|
|
|
<!-- Animated button with gold effects -->
|
|
<button
|
|
class="group gold-button relative mt-4 flex h-14 max-w-[480px] min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-b from-[var(--subtle-gold)] to-[#c8a971] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-500"
|
|
:class="{ 'shadow-[var(--subtle-gold)]/40 shadow-lg': buttonHover }"
|
|
@click="goToShuffle"
|
|
@mouseenter="buttonHover = true"
|
|
@mouseleave="buttonHover = false"
|
|
>
|
|
<!-- Gold shine effect -->
|
|
<span
|
|
class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
|
|
></span>
|
|
|
|
<span class="relative z-10 truncate">Découvrir Votre Oracle</span>
|
|
|
|
<!-- Animated arrow icon -->
|
|
<svg
|
|
class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300"
|
|
:class="{ 'translate-x-1': buttonHover }"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Gold particle animation */
|
|
.gold-particle {
|
|
background: radial-gradient(circle, var(--subtle-gold) 30%, transparent 70%);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
animation: gentle-float 20s infinite ease-in-out;
|
|
pointer-events: none;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.large-gold-particle {
|
|
background: radial-gradient(circle, var(--subtle-gold) 20%, transparent 70%);
|
|
border-radius: 50%;
|
|
opacity: 0.3;
|
|
animation: gentle-float 30s infinite ease-in-out;
|
|
pointer-events: none;
|
|
transform-origin: center;
|
|
}
|
|
|
|
@keyframes gentle-float {
|
|
0%,
|
|
100% {
|
|
transform: translateY(0) translateX(0) rotate(0deg) scale(1);
|
|
opacity: 0.6;
|
|
}
|
|
25% {
|
|
transform: translateY(-10px) translateX(5px) rotate(2deg) scale(1.02);
|
|
}
|
|
50% {
|
|
transform: translateY(-5px) translateX(8px) rotate(4deg) scale(1.05);
|
|
opacity: 0.7;
|
|
}
|
|
75% {
|
|
transform: translateY(3px) translateX(3px) rotate(2deg) scale(1.02);
|
|
}
|
|
}
|
|
|
|
/* Title animation */
|
|
.animate-fade-in-up {
|
|
animation: fadeInUp 1.2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Gold text glow */
|
|
.gold-glow {
|
|
text-shadow:
|
|
0 0 10px rgba(212, 175, 55, 0.5),
|
|
0 0 20px rgba(212, 175, 55, 0.3),
|
|
0 0 30px rgba(212, 175, 55, 0.2);
|
|
}
|
|
|
|
/* Button styling without particle interaction */
|
|
.gold-button {
|
|
box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.gold-button:hover {
|
|
box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.gold-button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
</style>
|