192 lines
9.4 KiB
Vue
192 lines
9.4 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 goToShuffle = () => {
|
|
router.visit('/tirage');
|
|
};
|
|
</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="bg-pure-white sticky top-0 z-50 flex items-center justify-between px-4 py-4 whitespace-nowrap backdrop-blur-sm md:px-10 lg:px-20"
|
|
>
|
|
<div class="text-midnight-blue flex items-center gap-3">
|
|
<img src="icon.jpg" alt="Logo" class="h-30 w-30" />
|
|
</div>
|
|
|
|
<nav class="hidden flex-1 items-center justify-center gap-10 md:flex">
|
|
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/">Accueil</Link>
|
|
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#"
|
|
>L'Oracle</Link
|
|
>
|
|
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#"
|
|
>Lectures</Link
|
|
>
|
|
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#"
|
|
>Témoignages</Link
|
|
>
|
|
<Link class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="/rendez-vous"
|
|
>Booking</Link
|
|
>
|
|
</nav>
|
|
|
|
<div class="flex items-center gap-4">
|
|
<button @click="toggleMobileMenu" class="md:hidden">
|
|
<svg class="text-midnight-blue h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16m-7 6h7"></path>
|
|
</svg>
|
|
</button>
|
|
|
|
<button
|
|
v-if="$page.url === '/'"
|
|
@click="goToShuffle"
|
|
class="bg-midnight-blue text-pure-white hover:bg-spiritual-earth flex h-10 min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold tracking-wide transition-all duration-300 md:px-6"
|
|
>
|
|
<span class="truncate">Commencer</span>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
<div class="gradient-bg">
|
|
<h1>2</h1>
|
|
</div>
|
|
<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="flex flex-col items-center">
|
|
<slot />
|
|
</main>
|
|
|
|
<footer class="bg-pure-white text-midnight-blue/80 py-12">
|
|
<div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div class="flex flex-col items-center gap-8">
|
|
<div class="flex flex-wrap justify-center gap-x-4 gap-y-2 md:gap-x-8 md:gap-y-4">
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">Accueil</Link>
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">L'Oracle</Link>
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">Lectures</Link>
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">Témoignages</Link>
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">Contact</Link>
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">Politique de Confidentialité</Link>
|
|
<Link class="hover:text-subtle-gold transition-colors" href="#">Conditions d'Utilisation</Link>
|
|
</div>
|
|
<div class="flex justify-center gap-4 md:gap-6">
|
|
<Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
|
|
<svg class="h-6 w-6" 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>
|
|
</Link>
|
|
<Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
|
|
<svg class="h-6 w-6" 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>
|
|
</Link>
|
|
<Link class="text-midnight-blue/60 hover:text-spiritual-earth transition-colors" href="#">
|
|
<svg class="h-6 w-6" 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>
|
|
</Link>
|
|
</div>
|
|
<p class="text-sm">© 2024 Kris Saint Ange. Tous droits réservés.</p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
/* Utility classes for colors */
|
|
.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);
|
|
}
|
|
.gradient-bg {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: -1;
|
|
background: linear-gradient(180deg, var(--light-ivory) 0%, var(--pure-white) 100%);
|
|
background-size: 100% 100%;
|
|
transition: background-color 0.5s ease;
|
|
}
|
|
</style>
|