218 lines
11 KiB
Vue
218 lines
11 KiB
Vue
<script setup lang="ts">
|
|
import { Link, router } from '@inertiajs/vue3';
|
|
import { ref } from 'vue';
|
|
|
|
const isMobileMenuOpen = ref(false);
|
|
|
|
const toggleMobileMenu = () => {
|
|
isMobileMenuOpen.value = !isMobileMenuOpen.value;
|
|
};
|
|
|
|
const goToBooking = () => {
|
|
router.visit('/rendez-vous');
|
|
};
|
|
</script>
|
|
|
|
<template>
|
|
<div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
|
|
<div class="layout-container flex h-full grow flex-col">
|
|
<header class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm">
|
|
<div class="container mx-auto px-4">
|
|
<div class="flex items-center justify-between border-b border-solid border-gray-800 px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center gap-3">
|
|
<img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
|
|
</div>
|
|
<nav class="hidden items-center gap-8 md:flex">
|
|
<Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link>
|
|
<Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/tirage">Tirages</Link>
|
|
<Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Testimonial</Link>
|
|
</nav>
|
|
<div class="flex items-center gap-4">
|
|
<button
|
|
class="hover:bg-opacity-90 flex h-10 max-w-[480px] min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md bg-[var(--c-purple)] px-6 text-sm font-bold text-white shadow-[var(--c-purple)]/20 shadow-lg transition-all focus:ring-2 focus:ring-[var(--c-purple)] focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
|
|
@click="goToBooking"
|
|
>
|
|
<span class="truncate">Réserver une Session</span>
|
|
</button>
|
|
<button class="text-white md:hidden">
|
|
<span class="material-symbols-outlined"> menu </span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav v-if="isMobileMenuOpen" class="bg-light-ivory/90 flex flex-col items-center gap-4 py-4 md:hidden">
|
|
<Link
|
|
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
|
|
href="#"
|
|
@click="toggleMobileMenu"
|
|
>Accueil</Link
|
|
>
|
|
|
|
<Link
|
|
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
|
|
href="#"
|
|
@click="toggleMobileMenu"
|
|
>L'Oracle</Link
|
|
>
|
|
<Link
|
|
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
|
|
href="#"
|
|
@click="toggleMobileMenu"
|
|
>Lectures</Link
|
|
>
|
|
<Link
|
|
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
|
|
href="#"
|
|
@click="toggleMobileMenu"
|
|
>Témoignages</Link
|
|
>
|
|
<Link
|
|
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
|
|
href="/rendez-vous"
|
|
@click="toggleMobileMenu"
|
|
>Booking</Link
|
|
>
|
|
</nav>
|
|
|
|
<main class="hero-gradient relative flex min-h-screen w-full flex-col items-center">
|
|
<slot />
|
|
</main>
|
|
|
|
<footer class="relative border-t border-gray-800 bg-black 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-6 py-14">
|
|
<div class="grid gap-10 md:grid-cols-3">
|
|
<!-- Brand + tagline -->
|
|
<div>
|
|
<div class="flex items-center gap-3">
|
|
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
|
|
</div>
|
|
<p class="mt-4 max-w-sm text-sm text-white/70">
|
|
Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
|
|
</p>
|
|
<div class="mt-4 flex gap-4">
|
|
<a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="Instagram">
|
|
<svg class="h-6 w-6" 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="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="Facebook">
|
|
<svg class="h-6 w-6" 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="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="X">
|
|
<svg class="h-6 w-6" 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-8 md:grid-cols-1">
|
|
<div>
|
|
<h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Navigation</h4>
|
|
<ul class="space-y-2 text-sm">
|
|
<li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link></li>
|
|
<li>
|
|
<a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#testimonials">Témoignages</a>
|
|
</li>
|
|
<li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/tirage">Lectures</Link></li>
|
|
<li>
|
|
<Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/rendez-vous"
|
|
>Rendez-vous</Link
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Légal</h4>
|
|
<ul class="space-y-2 text-sm">
|
|
<li>
|
|
<Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/politique-confidalite"
|
|
>Politique de Confidentialité</Link
|
|
>
|
|
</li>
|
|
<li>
|
|
<Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/term-condition"
|
|
>Conditions d'Utilisation</Link
|
|
>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Newsletter -->
|
|
<div>
|
|
<h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Newsletter</h4>
|
|
<p class="text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
|
|
<form class="mt-4 flex max-w-md">
|
|
<input
|
|
type="email"
|
|
placeholder="Votre e-mail"
|
|
class="w-full rounded-l-md border border-gray-700 bg-gray-900 px-4 text-sm text-white placeholder-gray-500 focus:border-[var(--c-purple)] focus:outline-none"
|
|
/>
|
|
<button
|
|
type="button"
|
|
class="hover:bg-opacity-90 rounded-r-md bg-[var(--c-purple)] px-4 text-sm font-bold text-white transition-colors"
|
|
>
|
|
S'abonner
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-10 border-t border-gray-800 pt-6 text-center text-xs text-white/60 sm:text-sm">
|
|
© 2024 Kris Saint Ange. Tous droits réservés.
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.text-midnight-blue {
|
|
color: var(--midnight-blue);
|
|
}
|
|
.bg-midnight-blue {
|
|
background-color: var(--midnight-blue);
|
|
}
|
|
.text-spiritual-earth {
|
|
color: var(--spiritual-earth);
|
|
}
|
|
.bg-spiritual-earth {
|
|
background-color: var(--spiritual-earth);
|
|
}
|
|
.text-subtle-gold {
|
|
color: var(--subtle-gold);
|
|
}
|
|
.bg-subtle-gold {
|
|
background-color: var(--subtle-gold);
|
|
}
|
|
.text-linen {
|
|
color: var(--linen);
|
|
}
|
|
.bg-linen {
|
|
background-color: var(--linen);
|
|
}
|
|
.text-pure-white {
|
|
color: var(--pure-white);
|
|
}
|
|
.bg-pure-white {
|
|
background-color: var(--pure-white);
|
|
}
|
|
.text-light-ivory {
|
|
color: var(--light-ivory);
|
|
}
|
|
.bg-light-ivory {
|
|
background-color: var(--light-ivory);
|
|
}
|
|
</style>
|