292 lines
8.5 KiB
Vue
292 lines
8.5 KiB
Vue
<template>
|
|
<section
|
|
class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-br from-purple-900 via-violet-900 to-black px-4 py-24"
|
|
>
|
|
<!-- Background mystical elements -->
|
|
<div class="absolute inset-0 overflow-hidden">
|
|
<!-- Background image with softer blur and higher brightness for visibility -->
|
|
|
|
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(2px) brightness(0.7)"></div>
|
|
<div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent"></div>
|
|
|
|
<!-- Smooth purple particles -->
|
|
<div
|
|
v-for="i in 15"
|
|
:key="i"
|
|
class="purple-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 purple elements -->
|
|
<div
|
|
v-for="i in 5"
|
|
:key="'large-' + i"
|
|
class="large-purple-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>
|
|
|
|
<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="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 }"
|
|
style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
|
|
>
|
|
Discover Your
|
|
<span class="relative text-6xl text-purple-300 md:text-8xl">
|
|
<span class="purple-glow">Mystical</span>
|
|
<!-- Purple underline accent -->
|
|
</span>
|
|
Path
|
|
</h1>
|
|
|
|
<p
|
|
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 }"
|
|
>
|
|
Unlock the wisdom of the universe with personalized oracle card readings. Choose your spread and begin your journey of
|
|
self-discovery.
|
|
</p>
|
|
|
|
<!-- Buttons -->
|
|
<div
|
|
class="flex w-full flex-col items-center gap-4 transition-all delay-500 duration-1000"
|
|
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
|
|
>
|
|
<button
|
|
@click="goToShuffle"
|
|
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-[var(--c-gold)] to-yellow-600 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"
|
|
>
|
|
<!-- Purple shine effect -->
|
|
<span
|
|
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"> Reveal your inner power</span>
|
|
|
|
<!-- Animated arrow icon -->
|
|
</button>
|
|
|
|
<!-- Small description -->
|
|
<div
|
|
class="text-center transition-all delay-700 duration-1000"
|
|
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
|
|
>
|
|
<p class="text-sm text-white/80 md:text-base">
|
|
🎴 <span class="font-semibold text-purple-300"> Get your first reading free</span> - No credit card required
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Right Side - Simple Mystic Element -->
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
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>
|
|
|
|
<style scoped>
|
|
/* Purple particle animation */
|
|
.purple-particle {
|
|
background: radial-gradient(circle, #a855f7 30%, transparent 70%);
|
|
border-radius: 50%;
|
|
opacity: 0.6;
|
|
animation: gentle-float 20s infinite ease-in-out;
|
|
pointer-events: none;
|
|
transform-origin: center;
|
|
}
|
|
|
|
.large-purple-particle {
|
|
background: radial-gradient(circle, #8b5cf6 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);
|
|
}
|
|
}
|
|
|
|
/* Purple text glow */
|
|
.purple-glow {
|
|
text-shadow:
|
|
0 0 10px rgba(168, 85, 247, 0.5),
|
|
0 0 20px rgba(168, 85, 247, 0.3),
|
|
0 0 30px rgba(168, 85, 247, 0.2);
|
|
}
|
|
|
|
/* Button styling - Gold theme */
|
|
.gold-button {
|
|
box-shadow: 0 0 15px rgba(245, 158, 11, 0.5);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.gold-button:hover {
|
|
box-shadow: 0 0 25px rgba(245, 158, 11, 0.8);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.gold-button:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
/* Orb styling */
|
|
.orb-glow {
|
|
animation: orb-pulse 8s ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes orb-pulse {
|
|
0%,
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 0.8;
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Floating symbols */
|
|
.floating-symbols {
|
|
position: absolute;
|
|
inset: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.symbol {
|
|
position: absolute;
|
|
color: rgba(168, 85, 247, 0.8);
|
|
font-size: 1.5rem;
|
|
animation: symbol-orbit 15s linear infinite;
|
|
}
|
|
|
|
.symbol-1 {
|
|
top: 10%;
|
|
left: 10%;
|
|
animation-delay: 0s;
|
|
}
|
|
|
|
.symbol-2 {
|
|
top: 80%;
|
|
left: 20%;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.symbol-3 {
|
|
top: 30%;
|
|
right: 10%;
|
|
animation-delay: 6s;
|
|
}
|
|
|
|
.symbol-4 {
|
|
top: 70%;
|
|
right: 20%;
|
|
animation-delay: 9s;
|
|
}
|
|
|
|
@keyframes symbol-orbit {
|
|
0% {
|
|
transform: rotate(0deg) translateX(80px) rotate(0deg);
|
|
}
|
|
100% {
|
|
transform: rotate(360deg) translateX(80px) rotate(-360deg);
|
|
}
|
|
}
|
|
|
|
/* Responsive adjustments */
|
|
@media (max-width: 1024px) {
|
|
.mystic-orb {
|
|
height: 400px;
|
|
}
|
|
|
|
.orb-glow {
|
|
height: 200px;
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.mystic-orb {
|
|
height: 300px;
|
|
}
|
|
|
|
.orb-glow {
|
|
height: 150px;
|
|
width: 150px;
|
|
}
|
|
|
|
.floating-symbols {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|