345 lines
19 KiB
Vue
345 lines
19 KiB
Vue
<script setup lang="ts">
|
|
import { Link, router } from '@inertiajs/vue3';
|
|
import { onMounted, ref } from 'vue';
|
|
|
|
const isMobileMenuOpen = ref(false);
|
|
const scrolled = ref(false);
|
|
|
|
const toggleMobileMenu = () => {
|
|
isMobileMenuOpen.value = !isMobileMenuOpen.value;
|
|
};
|
|
|
|
const goToShuffle = () => {
|
|
router.visit('/tirage');
|
|
};
|
|
|
|
onMounted(() => {
|
|
const handleScroll = () => {
|
|
scrolled.value = window.scrollY > 20;
|
|
};
|
|
window.addEventListener('scroll', handleScroll);
|
|
return () => window.removeEventListener('scroll', handleScroll);
|
|
});
|
|
</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(--light-ivory)]/30 via-white to-[var(--linen)]/20"
|
|
>
|
|
<!-- Background decorative elements -->
|
|
<div class="fixed inset-0 z-0 overflow-hidden">
|
|
<!-- Subtle gradient orbs -->
|
|
<div class="absolute -top-40 -right-40 h-80 w-80 rounded-full bg-[var(--subtle-gold)]/10 blur-3xl"></div>
|
|
<div class="absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-[var(--midnight-blue)]/5 blur-3xl"></div>
|
|
|
|
<!-- Subtle pattern overlay -->
|
|
<div
|
|
class="absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,_rgba(0,0,0,0.15)_1px,_transparent_0)] bg-[length:40px_40px] opacity-[0.02]"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="layout-container relative z-10 flex h-full grow flex-col">
|
|
<!-- Enhanced Header -->
|
|
<header
|
|
class="sticky top-0 z-50 flex items-center justify-between px-4 py-4 transition-all duration-500 md:px-10 lg:px-20"
|
|
:class="scrolled ? 'bg-white/90 py-3 shadow-sm backdrop-blur-md' : 'bg-transparent py-4'"
|
|
>
|
|
<!-- Logo with natural styling (no rounding, no shadow) -->
|
|
<div class="flex items-center gap-3">
|
|
<img src="logo_or.png" alt="Logo" class="relative h-16 w-16 object-cover md:h-20 md:w-20" />
|
|
<div class="hidden md:block">
|
|
<h1 class="font-audrey text-[var(--midnight-blue)]">KRIS SAINT ANGE</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desktop Navigation -->
|
|
<nav class="hidden flex-1 items-center justify-center gap-8 md:flex">
|
|
<Link
|
|
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
|
|
href="/"
|
|
>
|
|
<span class="relative z-10">Accueil</span>
|
|
<div
|
|
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
|
|
></div>
|
|
</Link>
|
|
<Link
|
|
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
|
|
href="/tirage"
|
|
>
|
|
<span class="relative z-10">L'Oracle</span>
|
|
<div
|
|
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
|
|
></div>
|
|
</Link>
|
|
<a
|
|
v-if="$page.url === '/'"
|
|
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
|
|
href="#testimonials"
|
|
>
|
|
<span class="relative z-10">Témoignages</span>
|
|
<div
|
|
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
|
|
></div>
|
|
</a>
|
|
<Link
|
|
class="group relative rounded-lg px-3 py-2 text-sm font-medium text-[var(--midnight-blue)]/80 transition-all duration-300 hover:bg-white/50 hover:text-[var(--midnight-blue)]"
|
|
href="/rendez-vous"
|
|
>
|
|
<span class="relative z-10">Prendre Rendez-vous</span>
|
|
<div
|
|
class="absolute inset-0 scale-0 rounded-lg bg-[var(--subtle-gold)]/20 transition-transform duration-300 group-hover:scale-100"
|
|
></div>
|
|
</Link>
|
|
</nav>
|
|
|
|
<!-- CTA Button & Mobile Menu -->
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
v-if="$page.url === '/'"
|
|
@click="goToShuffle"
|
|
class="group relative flex h-12 min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] px-6 text-sm font-bold tracking-wide text-white shadow-lg transition-all duration-500 hover:from-[var(--spiritual-earth)] hover:to-[var(--midnight-blue)] hover:shadow-xl"
|
|
>
|
|
<span class="relative z-10 flex items-center gap-2"> Commencer </span>
|
|
<div
|
|
class="absolute inset-0 bg-gradient-to-r from-white/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
|
|
></div>
|
|
</button>
|
|
|
|
<button
|
|
@click="toggleMobileMenu"
|
|
class="relative flex h-10 w-10 items-center justify-center rounded-lg border border-[var(--linen)] bg-white/50 backdrop-blur-sm transition-all duration-300 hover:bg-white hover:shadow-sm md:hidden"
|
|
>
|
|
<svg
|
|
class="h-5 w-5 text-[var(--midnight-blue)] transition-transform duration-300"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
v-if="!isMobileMenuOpen"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M4 6h16M4 12h16M4 18h16"
|
|
></path>
|
|
<path v-else stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Enhanced Mobile Menu -->
|
|
<div
|
|
v-if="isMobileMenuOpen"
|
|
class="fixed inset-0 z-40 bg-white/95 backdrop-blur-md transition-all duration-500 md:hidden"
|
|
:class="isMobileMenuOpen ? 'opacity-100' : 'pointer-events-none opacity-0'"
|
|
>
|
|
<div class="flex min-h-screen flex-col items-center justify-center gap-8 p-8">
|
|
<button
|
|
@click="toggleMobileMenu"
|
|
class="absolute top-6 right-6 flex h-10 w-10 items-center justify-center rounded-full bg-[var(--light-ivory)]"
|
|
>
|
|
<svg class="h-5 w-5 text-[var(--midnight-blue)]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<div class="mb-8 text-center">
|
|
<!-- Mobile logo without rounding or shadow -->
|
|
<img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-20 w-20 object-cover" />
|
|
<h2 class="font-serif text-2xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h2>
|
|
</div>
|
|
|
|
<nav class="flex w-full max-w-sm flex-col items-center gap-6">
|
|
<Link
|
|
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
|
|
href="/"
|
|
@click="toggleMobileMenu"
|
|
>
|
|
Accueil
|
|
</Link>
|
|
<Link
|
|
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
|
|
href="/tirage"
|
|
@click="toggleMobileMenu"
|
|
>
|
|
L'Oracle
|
|
</Link>
|
|
<Link
|
|
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
|
|
href="#testimonials"
|
|
@click="toggleMobileMenu"
|
|
>
|
|
Témoignages
|
|
</Link>
|
|
<Link
|
|
class="w-full rounded-xl border border-[var(--linen)] bg-white/50 py-4 text-center text-lg font-medium text-[var(--midnight-blue)] transition-all duration-300 hover:border-[var(--subtle-gold)]/30 hover:bg-[var(--subtle-gold)]/10 hover:shadow-sm"
|
|
href="/rendez-vous"
|
|
@click="toggleMobileMenu"
|
|
>
|
|
Prendre Rendez-vous
|
|
</Link>
|
|
</nav>
|
|
|
|
<button
|
|
@click="goToShuffle"
|
|
class="mt-8 w-full max-w-sm rounded-xl bg-gradient-to-r from-[var(--midnight-blue)] to-[var(--spiritual-earth)] py-4 text-lg font-bold text-white shadow-lg transition-all duration-300 hover:shadow-xl"
|
|
>
|
|
Commencer la Lecture
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Main Content -->
|
|
<main class="flex flex-1 flex-col items-center">
|
|
<slot />
|
|
</main>
|
|
|
|
<!-- Enhanced Footer -->
|
|
<footer class="mt-16 border-t border-[var(--linen)] bg-gradient-to-b from-white to-[var(--light-ivory)]/30 py-16">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col items-center gap-12">
|
|
<!-- Logo and description - logo without rounding or shadow -->
|
|
<div class="max-w-md text-center">
|
|
<img src="logo_or.png" alt="Logo" class="mx-auto mb-4 h-16 w-16 object-cover" />
|
|
<h3 class="mb-2 font-serif text-xl font-bold text-[var(--midnight-blue)]">Kris Saint Ange</h3>
|
|
</div>
|
|
|
|
<!-- Links -->
|
|
<div class="flex flex-wrap justify-center gap-x-8 gap-y-4">
|
|
<Link
|
|
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
|
|
href="/"
|
|
>
|
|
Accueil
|
|
<span
|
|
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
|
|
></span>
|
|
</Link>
|
|
<a
|
|
v-if="$page.url === '/'"
|
|
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
|
|
href="#testimonials"
|
|
>
|
|
Témoignages
|
|
<span
|
|
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
|
|
></span>
|
|
</a>
|
|
<Link
|
|
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
|
|
href="/politique-confidalite"
|
|
>
|
|
Politique de Confidentialité
|
|
<span
|
|
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
|
|
></span>
|
|
</Link>
|
|
<Link
|
|
class="group relative text-[var(--midnight-blue)]/70 transition-all duration-300 hover:text-[var(--midnight-blue)]"
|
|
href="/term-condition"
|
|
>
|
|
Conditions d'Utilisation
|
|
<span
|
|
class="absolute -bottom-1 left-0 h-0.5 w-0 bg-[var(--subtle-gold)] transition-all duration-300 group-hover:w-full"
|
|
></span>
|
|
</Link>
|
|
</div>
|
|
|
|
<!-- Social Links - Modified without circles -->
|
|
<div class="flex flex-col items-center gap-4">
|
|
<p class="text-sm font-medium text-[var(--midnight-blue)]/60">Suivez-moi</p>
|
|
<div class="flex justify-center gap-8">
|
|
<Link
|
|
class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
|
|
href="#"
|
|
>
|
|
<svg
|
|
class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M128,80a48,48,0,1,0,48,48A48.05,48.05,0,0,0,128,80Zm0,80a32,32,0,1,1,32-32A32,32,0,0,1,128,160ZM176,24H80A56.06,56.06,0,0,0,24,80v96a56.06,56.06,0,0,0,56,56h96a56.06,56.06,0,0,0,56-56V80A56.06,56.06,0,0,0,176,24Zm40,152a40,40,0,0,1-40,40H80a40,40,0,0,1-40-40V80A40,40,0,0,1,80,40h96a40,40,0,0,1,40,40ZM192,76a12,12,0,1,1-12-12A12,12,0,0,1,192,76Z"
|
|
></path>
|
|
</svg>
|
|
<span class="text-xs">Instagram</span>
|
|
</Link>
|
|
<Link
|
|
class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
|
|
href="#"
|
|
>
|
|
<svg
|
|
class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M128,24A104,104,0,1,0,232,128,104.11,104.11,0,0,0,128,24Zm8,191.63V152h24a8,8,0,0,0,0-16H136V112a16,16,0,0,1,16-16h16a8,8,0,0,0,0-16H152a32,32,0,0,0-32,32v24H96a8,8,0,0,0,0,16h24v63.63a88,88,0,1,1,16,0Z"
|
|
></path>
|
|
</svg>
|
|
<span class="text-xs">Facebook</span>
|
|
</Link>
|
|
<Link
|
|
class="group flex flex-col items-center gap-2 text-[var(--midnight-blue)]/60 transition-all duration-300 hover:text-[var(--spiritual-earth)]"
|
|
href="#"
|
|
>
|
|
<svg
|
|
class="h-6 w-6 transition-transform duration-300 group-hover:scale-110"
|
|
fill="currentColor"
|
|
viewBox="0 0 256 256"
|
|
>
|
|
<path
|
|
d="M247.39,68.94A8,8,0,0,0,240,64H209.57A48.66,48.66,0,0,0,168.1,40a46.91,46.91,0,0,0-33.75,13.7A47.9,47.9,0,0,0,120,88v6.09C79.74,83.47,46.81,50.72,46.46,50.37a8,8,0,0,0-13.65,4.92c-4.31,47.79,9.57,79.77,22,98.18a110.93,110.93,0,0,0,21.88,24.2c-15.23,17.53-39.21,26.74-39.47,26.84a8,8,0,0,0-3.85,11.93c.75,1.12,3.75,5.05,11.08,8.72C53.51,229.7,65.48,232,80,232c70.67,0,129.72-54.42,135.75-124.44l29.91-29.9A8,8,0,0,0,247.39,68.94Zm-45,29.41a8,8,0,0,0-2.32,5.14C196,166.58,143.28,216,80,216c-10.56,0-18-1.4-23.22-3.08,11.51-6.25,27.56-17,37.88-32.48A8,8,0,0,0,92,169.08c-.47-.27-43.91-26.34-44-96,16,13,45.25,33.17,78.67,38.79A8,8,0,0,0,136,104V88a32,32,0,0,1,9.6-22.92A30.94,30.94,0,0,1,167.9,56c12.66.16,24.49,7.88,29.44,19.21A8,8,0,0,0,204.67,80h16Z"
|
|
></path>
|
|
</svg>
|
|
<span class="text-xs">WhatsApp</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Copyright -->
|
|
<div class="w-full max-w-md border-t border-[var(--linen)] pt-8 text-center">
|
|
<p class="text-sm text-[var(--midnight-blue)]/60">© 2024 Kris Saint Ange. Tous droits réservés.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Smooth transitions for all interactive elements */
|
|
* {
|
|
transition-property: color, background-color, border-color, transform, box-shadow;
|
|
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
transition-duration: 300ms;
|
|
}
|
|
|
|
.logo-container {
|
|
background: linear-gradient(to bottom right, white, #f9f7f2);
|
|
padding: 8px;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
::-webkit-scrollbar {
|
|
width: 6px;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background: var(--light-ivory);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background: var(--subtle-gold);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb:hover {
|
|
background: var(--spiritual-earth);
|
|
}
|
|
</style>
|