113 lines
5.2 KiB
Vue
113 lines
5.2 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-gradient-to-br from-[var(--c-purple)]/70 to-[var(--c-deep-navy)]/80"></div>
|
|
</div>
|
|
|
|
<div class="relative z-10 mx-auto max-w-5xl px-4">
|
|
<div
|
|
class="group relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/80 to-[var(--card)]/90 p-8 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/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-[var(--c-purple)]/25 blur-3xl"></div>
|
|
<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
|
|
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>
|
|
|
|
<!-- 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-[var(--c-purple)]/40 px-3 py-1 text-xs font-bold tracking-wider text-[var(--c-white)]/90 ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm"
|
|
>Consultation</span
|
|
>
|
|
|
|
<h2 class="text-4xl font-black text-[var(--c-white)] drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
|
|
<p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--c-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-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/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-[var(--c-purple)] bg-transparent px-8 font-bold text-[var(--c-white)] backdrop-blur-sm transition-all hover:bg-[var(--c-purple)]"
|
|
>
|
|
Découvrir les Lectures
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-6 text-xs text-[var(--c-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);
|
|
}
|
|
|
|
/* Custom color variables */
|
|
:root {
|
|
--c-purple: #4c1d95;
|
|
--c-deep-navy: #1e1b4b;
|
|
--c-white: #ffffff;
|
|
--c-gold: rgba(245, 158, 11, 0.9);
|
|
--card: #1e1b4b;
|
|
}
|
|
</style>
|