100 lines
4.6 KiB
Vue
100 lines
4.6 KiB
Vue
<template>
|
|
<section class="relative overflow-hidden py-20 sm:py-24">
|
|
<!-- Background image with overlay -->
|
|
<div class="absolute inset-0">
|
|
<img src="/image005.jpg" alt="Background" class="h-full w-full object-cover" />
|
|
<div
|
|
class="absolute inset-0 bg-[#1e1b4b]/80"
|
|
style="background: linear-gradient(135deg, rgba(76, 29, 149, 0.7), rgba(30, 27, 75, 0.8))"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 mx-auto max-w-5xl px-4">
|
|
<div
|
|
class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
|
|
>
|
|
<!-- Soft radial glows -->
|
|
<div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[#4c1d95]/25 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[#f59e0b]/20 blur-3xl"></div>
|
|
|
|
<!-- Subtle pattern overlay -->
|
|
<div class="absolute inset-0 opacity-10 mix-blend-soft-light">
|
|
<div
|
|
class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCI+PGNpcmNsZSBjeD0iMzAiIGN5PSIzMCIgcj0iMiIgZmlsbD0iI2ZmZiIgZmlsbC1vcGFjaXR5PSIwLjEiLz48L3N2Zz4=')]"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 flex flex-col items-center">
|
|
<span
|
|
class="mb-4 inline-flex items-center rounded-full bg-[#4c1d95]/40 px-3 py-1 text-xs font-bold tracking-wider text-white/90 ring-1 ring-[#4c1d95]/40 backdrop-blur-sm"
|
|
>Consultation</span
|
|
>
|
|
|
|
<h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
|
|
<p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
|
|
Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
|
|
</p>
|
|
|
|
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
|
<button
|
|
@click="goToBooking"
|
|
class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40"
|
|
>
|
|
<span class="relative z-10">Réserver une Consultation</span>
|
|
<span
|
|
class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[100%]"
|
|
></span>
|
|
</button>
|
|
<button
|
|
@click="goToOffers"
|
|
class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]"
|
|
>
|
|
Découvrir les Lectures
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Paiements sécurisés. Annulation possible 24h avant la session.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { router } from '@inertiajs/vue3';
|
|
|
|
const goToBooking = () => router.visit('/rendez-vous');
|
|
const goToOffers = () => router.visit('/tirage');
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Gold trail effect for the primary button */
|
|
.gold-trail-btn {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.gold-trail-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.gold-trail-btn:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* Smooth transitions for all elements in this section */
|
|
* {
|
|
transition-property: color, background-color, transform, opacity, box-shadow;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
</style>
|