fix color
This commit is contained in:
parent
9a708da8ae
commit
58e26d17f8
@ -15,9 +15,9 @@
|
||||
<div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
|
||||
|
||||
<!-- Hover gold sweep -->
|
||||
<div
|
||||
<!-- <div
|
||||
class="pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
|
||||
></div>
|
||||
></div> -->
|
||||
|
||||
<!-- Subtle pattern overlay -->
|
||||
<div class="absolute inset-0 opacity-10 mix-blend-soft-light">
|
||||
|
||||
@ -41,7 +41,7 @@
|
||||
|
||||
<div class="relative z-10 mx-auto flex max-w-6xl flex-col items-center lg:flex-row lg:items-center">
|
||||
<!-- Text Content - Centered -->
|
||||
<div class="mb-10 lg:mb-0 lg:w-1/2 lg:pr-10 text-center mx-auto">
|
||||
<div class="mx-auto mb-10 text-center lg:mb-0 lg:w-1/2 lg:pr-10">
|
||||
<h1
|
||||
class="mb-6 text-center text-4xl font-black text-white md:text-5xl lg:text-6xl"
|
||||
:class="{ 'animate-fade-in-up': isMounted }"
|
||||
@ -51,16 +51,12 @@
|
||||
<span class="relative text-6xl text-purple-300 md:text-8xl">
|
||||
<span class="purple-glow">Chemin</span>
|
||||
<!-- Purple underline accent -->
|
||||
<span
|
||||
class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-purple-400 to-transparent transition-transform duration-1000"
|
||||
:class="{ 'scale-x-100': isMounted }"
|
||||
></span>
|
||||
</span>
|
||||
Mystique
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="mb-8 max-w-2xl mx-auto text-center text-lg text-white/80 transition-all delay-500 duration-1000 md:text-xl"
|
||||
class="mx-auto mb-8 max-w-2xl text-center text-lg text-white/80 transition-all delay-500 duration-1000 md:text-xl"
|
||||
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
|
||||
>
|
||||
Débloquez la sagesse de l'univers grâce à des lectures de cartes oracle personnalisées. Choisissez votre tirage et commencez votre
|
||||
@ -74,7 +70,7 @@
|
||||
>
|
||||
<button
|
||||
@click="goToShuffle"
|
||||
class="gold-button group relative mt-4 flex h-14 w-full md:w-auto cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-amber-400 to-yellow-500 px-8 text-lg font-bold tracking-wide text-white transition-all duration-500 md:h-16 md:px-10"
|
||||
class="gold-button group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-amber-400 to-yellow-500 px-8 text-lg font-bold tracking-wide text-white transition-all duration-500 md:h-16 md:w-auto md:px-10"
|
||||
:class="{ 'shadow-lg shadow-amber-500/40': buttonHover }"
|
||||
@mouseenter="buttonHover = true"
|
||||
@mouseleave="buttonHover = false"
|
||||
@ -84,18 +80,9 @@
|
||||
class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
|
||||
></span>
|
||||
|
||||
<span class="relative z-10 flex items-center gap-2 truncate"> ✨ Découvrir Mon Tirage Gratuit </span>
|
||||
<span class="relative z-10 flex items-center gap-2 truncate"> Découvrir Mon Tirage Gratuit </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>
|
||||
|
||||
<!-- Small description -->
|
||||
|
||||
@ -176,7 +176,7 @@
|
||||
</ul>
|
||||
|
||||
<button
|
||||
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-300 group-hover:to-yellow-400 group-hover:shadow-lg"
|
||||
class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-600 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-600 group-hover:to-yellow-400 group-hover:shadow-lg"
|
||||
>
|
||||
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Découvrir</span>
|
||||
<svg
|
||||
@ -367,7 +367,7 @@ const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie',
|
||||
:root {
|
||||
--c-purple: #4c1d95;
|
||||
--c-white: #ffffff;
|
||||
--c-gold: rgba(245, 158, 11, 0.9);
|
||||
--c-gold: rgba(245, 158, 11, 0.5);
|
||||
--card: #1e1b4b;
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user