427 lines
18 KiB
Vue
427 lines
18 KiB
Vue
<script setup lang="ts">
|
|
import { Link, router } from '@inertiajs/vue3';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const isMobileMenuOpen = ref(false);
|
|
const isScrolled = ref(false);
|
|
|
|
const toggleMobileMenu = () => {
|
|
isMobileMenuOpen.value = !isMobileMenuOpen.value;
|
|
};
|
|
|
|
const goToBooking = () => {
|
|
router.visit('/rendez-vous');
|
|
};
|
|
|
|
// Handle scroll effect for header
|
|
onMounted(() => {
|
|
window.addEventListener('scroll', () => {
|
|
isScrolled.value = window.scrollY > 50;
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black"
|
|
style="background: linear-gradient(135deg, #1e1b4b, #4c1d95, #000000)"
|
|
>
|
|
<div class="layout-container flex h-full grow flex-col">
|
|
<!-- Enhanced Header with Bigger Font -->
|
|
<header
|
|
class="fixed top-0 z-50 w-full transition-all duration-300"
|
|
:class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
|
|
>
|
|
<div class="container mx-auto px-4 sm:px-6">
|
|
<div class="flex items-center justify-between px-2 py-2 whitespace-nowrap sm:px-6">
|
|
<div class="flex items-center gap-3">
|
|
<img
|
|
src="/logo-success.webp"
|
|
alt="Logo"
|
|
class="h-12 w-32 transition-transform duration-300 hover:scale-105 sm:h-14 sm:w-36"
|
|
/>
|
|
</div>
|
|
<nav class="hidden items-center gap-6 md:flex lg:gap-10">
|
|
<Link
|
|
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
|
href="/"
|
|
>
|
|
Home
|
|
<span
|
|
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
|
></span>
|
|
</Link>
|
|
<Link
|
|
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
|
href="/tirage"
|
|
>
|
|
Readings
|
|
<span
|
|
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
|
></span>
|
|
</Link>
|
|
<Link
|
|
class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
|
|
href="/#testimonials"
|
|
>
|
|
Testimonials
|
|
<span
|
|
class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
|
|
></span>
|
|
</Link>
|
|
</nav>
|
|
<div class="flex items-center gap-3 sm:gap-4">
|
|
<button
|
|
class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex"
|
|
@click="goToBooking"
|
|
>
|
|
<span class="relative z-10 truncate">Book</span>
|
|
<span
|
|
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
|
|
></span>
|
|
</button>
|
|
<button class="p-2 text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
|
|
<svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Enhanced Mobile Menu with Bigger Font -->
|
|
<div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
|
|
<div
|
|
class="absolute top-0 right-0 h-full w-full max-w-sm bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
|
|
@click.stop
|
|
>
|
|
<div class="mb-8 flex items-center justify-between">
|
|
<img src="/logo-success.webp" alt="Logo" class="h-12 w-32" />
|
|
<button @click="toggleMobileMenu" class="p-2 text-white">
|
|
<svg class="h-7 w-7" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<nav class="flex flex-col gap-4">
|
|
<Link
|
|
class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
|
href="/"
|
|
@click="toggleMobileMenu"
|
|
>Accueil</Link
|
|
>
|
|
<Link
|
|
class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
|
href="/tirage"
|
|
@click="toggleMobileMenu"
|
|
>Tirages</Link
|
|
>
|
|
<Link
|
|
class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
|
|
href="/#testimonials"
|
|
@click="toggleMobileMenu"
|
|
>Témoignages</Link
|
|
>
|
|
<button
|
|
class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-14 w-full items-center justify-center overflow-hidden rounded-full px-6 text-lg font-bold text-white shadow-lg transition-all duration-300"
|
|
@click="
|
|
goToBooking();
|
|
toggleMobileMenu();
|
|
"
|
|
>
|
|
<span class="relative z-10">Réserver une Session</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
|
|
<main class="relative flex min-h-screen w-full flex-col items-center">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- Enhanced Footer -->
|
|
<footer class="relative border-t border-white/10 bg-gradient-to-t from-black to-[var(--c-deep-navy)] text-white">
|
|
<div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
|
|
<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 sm:py-14">
|
|
<div class="grid gap-8 md:grid-cols-3 lg:gap-10">
|
|
<!-- Brand + tagline -->
|
|
<div class="md:col-span-1">
|
|
<div class="flex items-center gap-3">
|
|
<img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
|
|
</div>
|
|
<p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg">
|
|
Guidance and clarity through inspired readings and personalized support.
|
|
</p>
|
|
<div class="mt-6 flex gap-3">
|
|
<a class="social-icon group" href="#" aria-label="Instagram">
|
|
<svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
|
|
<rect x="32" y="32" width="192" height="192" rx="48"></rect>
|
|
<circle cx="128" cy="128" r="40" fill="black"></circle>
|
|
</svg>
|
|
</a>
|
|
<a class="social-icon group" href="#" aria-label="Facebook">
|
|
<svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
|
|
<path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
|
|
</svg>
|
|
</a>
|
|
<a class="social-icon group" href="#" aria-label="X">
|
|
<svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
|
|
<path
|
|
d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
|
|
></path>
|
|
</svg>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick links -->
|
|
<div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
|
|
<div>
|
|
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
|
|
<ul class="space-y-3 text-base sm:space-y-4">
|
|
<li>
|
|
<Link class="footer-link group" href="/">Home</Link>
|
|
</li>
|
|
<li>
|
|
<a class="footer-link group" href="#testimonials">Testimonials</a>
|
|
</li>
|
|
<li>
|
|
<Link class="footer-link group" href="/tirage">Readings</Link>
|
|
</li>
|
|
<li>
|
|
<Link class="footer-link group" href="/rendez-vous">Book</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Legal</h4>
|
|
<ul class="space-y-3 text-base sm:space-y-4">
|
|
<li>
|
|
<Link class="footer-link group" href="/politique-confidalite">Confidentiality</Link>
|
|
</li>
|
|
<li>
|
|
<Link class="footer-link group" href="/term-condition">Terms</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Newsletter -->
|
|
<div class="md:col-span-1 lg:col-span-1">
|
|
<h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
|
|
<p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg">
|
|
Receive inspiration and offers directly in your inbox.
|
|
</p>
|
|
<form
|
|
class="mt-2 flex max-w-md flex-col gap-2 overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm sm:flex-row"
|
|
>
|
|
<input
|
|
type="email"
|
|
placeholder="Your e-mail"
|
|
class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all"
|
|
>
|
|
Subscribe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base">
|
|
© 2025 Kris Saint Ange. All rights reserved.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Button styles matching the hero section */
|
|
.mystic-btn {
|
|
position: relative;
|
|
overflow: hidden;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.mystic-btn-primary {
|
|
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
|
|
box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
|
|
}
|
|
|
|
.mystic-btn-primary:hover {
|
|
box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.mystic-btn-secondary {
|
|
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
|
|
border: 1px solid rgba(255, 215, 0, 0.3);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.mystic-btn-secondary:hover {
|
|
background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
|
|
border-color: rgba(255, 215, 0, 0.6);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.mystic-btn::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
|
transform: translateX(-100%);
|
|
transition: transform 0.6s;
|
|
z-index: 1;
|
|
}
|
|
|
|
.mystic-btn:hover::before {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
/* Social icons */
|
|
.social-icon {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.1);
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 5px 15px rgba(125, 91, 166, 0.4);
|
|
}
|
|
|
|
/* Footer links */
|
|
.footer-link {
|
|
position: relative;
|
|
color: rgba(255, 255, 255, 0.7);
|
|
transition: all 0.3s ease;
|
|
display: inline-block;
|
|
padding: 4px 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.footer-link:hover {
|
|
color: #ffd700;
|
|
padding-left: 12px;
|
|
}
|
|
|
|
.footer-link::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
width: 4px;
|
|
height: 4px;
|
|
background: #ffd700;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.footer-link:hover::before {
|
|
opacity: 1;
|
|
left: 0;
|
|
}
|
|
|
|
/* Custom color variables */
|
|
:root {
|
|
--c-purple: #4c1d95;
|
|
--c-deep-navy: #1e1b4b;
|
|
--c-gold: rgba(245, 158, 11, 0.7);
|
|
}
|
|
|
|
/* Smooth transitions for all elements */
|
|
* {
|
|
transition:
|
|
color 0.3s ease,
|
|
background-color 0.3s ease,
|
|
border-color 0.3s ease;
|
|
}
|
|
|
|
/* Mobile menu animation */
|
|
.fixed {
|
|
animation: slideIn 0.3s ease-out;
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
from {
|
|
transform: translateX(100%);
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
/* Header scroll effect */
|
|
header {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Newsletter form focus states */
|
|
input:focus {
|
|
box-shadow: 0 0 0 2px rgba(125, 91, 166, 0.5);
|
|
}
|
|
|
|
/* Responsive improvements */
|
|
@media (max-width: 768px) {
|
|
.container {
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
}
|
|
|
|
/* Better touch targets for mobile */
|
|
button,
|
|
a {
|
|
min-height: 44px;
|
|
min-width: 44px;
|
|
}
|
|
|
|
/* Improve mobile menu spacing */
|
|
.fixed .absolute {
|
|
width: 85%;
|
|
max-width: 320px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
/* Stack footer columns on very small screens */
|
|
footer .grid {
|
|
grid-template-columns: 1fr;
|
|
gap: 2rem;
|
|
}
|
|
|
|
/* Center align footer content on mobile */
|
|
footer .md\\:col-span-1 {
|
|
text-align: center;
|
|
}
|
|
|
|
footer .flex {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
/* Prevent horizontal scroll */
|
|
html,
|
|
body {
|
|
overflow-x: hidden;
|
|
}
|
|
</style>
|