229 lines
12 KiB
Vue
229 lines
12 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">
|
|
<svg class="h-8 w-8 text-[var(--c-gold)]" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
|
|
<g clip-path="url(#clip0_footer)">
|
|
<path
|
|
d="M8.57829 8.57829C5.52816 11.6284 3.451 15.5145 2.60947 19.7452C1.76794 23.9758 2.19984 28.361 3.85056 32.3462C5.50128 36.3314 8.29667 39.7376 11.8832 42.134C15.4698 44.5305 19.6865 45.8096 24 45.8096C28.3135 45.8096 32.5302 44.5305 36.1168 42.134C39.7033 39.7375 42.4987 36.3314 44.1494 32.3462C45.8002 28.361 46.2321 23.9758 45.3905 19.7452C44.549 15.5145 42.4718 11.6284 39.4217 8.57829L24 24L8.57829 8.57829Z"
|
|
fill="currentColor"
|
|
></path>
|
|
</g>
|
|
<defs>
|
|
<clipPath id="clip0_footer"><rect width="48" height="48" fill="white"></rect></clipPath>
|
|
</defs>
|
|
</svg>
|
|
<h3 class="text-xl font-black">Toutes les Clés du Succès</h3>
|
|
</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>
|