93 lines
4.1 KiB
Vue
93 lines
4.1 KiB
Vue
<template>
|
|
<section class="relative -mx-[calc((100vw-100%)/2)] w-screen 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-gradient-to-br from-black/80 to-[#1a0b2e] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
|
|
>
|
|
<!-- Soft radial glows -->
|
|
|
|
<!-- 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">
|
|
<h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplify Your Oracle</h2>
|
|
<p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
|
|
For deeper guidance, book a personalized consultation with Kris.
|
|
</p>
|
|
|
|
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
|
|
<button
|
|
@click="goToOffers"
|
|
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">Book a 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="goToBooking"
|
|
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]"
|
|
>
|
|
Book a Consultation
|
|
</button>
|
|
</div>
|
|
|
|
<p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Secure payment</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>
|