112 lines
5.7 KiB
Vue
112 lines
5.7 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>
|
|
<section class="relative flex min-h-[60vh] items-center justify-center overflow-hidden px-4 py-20 text-center md:min-h-[80vh]">
|
|
<!-- Animated background elements -->
|
|
<div class="absolute inset-0 bg-black/50"></div>
|
|
<div class="absolute top-0 left-0 h-full w-full">
|
|
<div
|
|
class="absolute top-1/4 left-1/4 h-72 w-72 animate-pulse rounded-full bg-purple-500 opacity-30 mix-blend-soft-light blur-xl filter"
|
|
></div>
|
|
<div
|
|
class="absolute right-1/4 bottom-1/3 h-72 w-72 animate-bounce rounded-full bg-yellow-300 opacity-30 mix-blend-soft-light blur-xl filter delay-1000"
|
|
style="animation-duration: 15s"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 mx-auto max-w-3xl">
|
|
<!-- Animated heading with hover effect -->
|
|
<h1
|
|
class="mb-4 transform text-4xl font-bold text-white transition-all duration-700 md:text-6xl"
|
|
:class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
|
|
>
|
|
<span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">Libérez</span>
|
|
<span class="mx-2 inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">votre</span>
|
|
<span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-yellow-300">potentiel</span>
|
|
<span class="mt-2 block"></span>
|
|
<span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">avec Toutes</span>
|
|
<span class="mx-2 inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-purple-200">les</span>
|
|
<span class="inline-block cursor-default transition-all duration-300 hover:scale-105 hover:text-yellow-300">Clés du Succès</span>
|
|
</h1>
|
|
|
|
<!-- Animated paragraph -->
|
|
<p
|
|
class="mb-8 transform text-lg text-white/80 transition-all delay-200 duration-1000 md:text-xl"
|
|
:class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
|
|
>
|
|
Gagnez en clarté et en direction avec un coaching personnalisé et des tirages d'oracle.
|
|
<span class="mt-2 block md:inline-block">Découvrez votre chemin vers le succès et l'épanouissement.</span>
|
|
</p>
|
|
|
|
<!-- Animated buttons with enhanced hover effects -->
|
|
<div
|
|
class="flex transform flex-wrap justify-center gap-4 transition-all delay-500 duration-1000"
|
|
:class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
|
|
>
|
|
<button
|
|
@mouseenter="buttonHover = true"
|
|
@mouseleave="buttonHover = false"
|
|
@click="goToShuffle"
|
|
class="group relative flex h-14 max-w-[480px] min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-xl bg-gradient-to-r from-purple-600 to-purple-800 px-8 text-base font-bold text-white shadow-lg shadow-purple-500/30 transition-all duration-500 hover:from-purple-700 hover:to-purple-900 hover:shadow-xl hover:shadow-purple-500/50 focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
|
|
>
|
|
<span class="relative z-10 truncate transition-all duration-300 group-hover:scale-105">Essayez 1 carte gratuite</span>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-r from-yellow-400 to-purple-500 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
|
|
></div>
|
|
</button>
|
|
|
|
<button
|
|
@mouseenter="buttonHover = true"
|
|
@mouseleave="buttonHover = false"
|
|
@click="goToShuffle"
|
|
class="group relative flex h-14 max-w-[480px] min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-xl border-2 border-purple-500 bg-transparent px-8 text-base font-bold text-white transition-all duration-500 hover:border-transparent hover:bg-gradient-to-r hover:from-purple-600 hover:to-purple-800 hover:text-white focus:ring-2 focus:ring-purple-400 focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
|
|
>
|
|
<span class="relative z-10 truncate transition-all duration-300 group-hover:scale-105">Découvrir les tirages</span>
|
|
<div class="absolute inset-0 bg-white opacity-0 transition-opacity duration-500 group-hover:opacity-10"></div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.gradient-bg {
|
|
background: linear-gradient(135deg, #1a202c 0%, #2d3748 50%, #4a5568 100%);
|
|
}
|
|
|
|
/* Custom animation for text elements */
|
|
@keyframes textShine {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
100% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
.animate-text-shine {
|
|
background: linear-gradient(to right, #ffffff 20%, #d8b4fe 30%, #fef08a 70%, #ffffff 80%);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-size: 500% auto;
|
|
animation: textShine 5s ease-in-out infinite alternate;
|
|
}
|
|
</style>
|