<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-light-ivory/80 sticky top-0 z-50 flex items-center justify-between px-10 py-4 whitespace-nowrap backdrop-blur-sm">
                <div class="text-midnight-blue flex items-center gap-3">
                    <svg class="text-subtle-gold h-6 w-6" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
                        <g clip-path="url(#clip0_6_535)">
                            <path
                                clip-rule="evenodd"
                                d="M47.2426 24L24 47.2426L0.757355 24L24 0.757355L47.2426 24ZM12.2426 21H35.7574L24 9.24264L12.2426 21Z"
                                fill="currentColor"
                                fill-rule="evenodd"
                            ></path>
                        </g>
                        <defs>
                            <clipPath id="clip0_6_535">
                                <rect fill="white" height="48" width="48"></rect>
                            </clipPath>
                        </defs>
                    </svg>
                    <h2 class="text-2xl font-bold tracking-wide">Kris Saint Ange</h2>
                </div>
                <nav class="flex flex-1 items-center justify-center gap-10">
                    <a class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#">Accueil</a>
                    <a class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#">L'Oracle</a>
                    <a class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#">Lectures</a>
                    <a class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#">Témoignages</a>
                    <a class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300" href="#">Contact</a>
                </nav>
                <div class="flex items-center gap-4">
                    <button
                        class="bg-midnight-blue text-pure-white hover:bg-spiritual-earth flex h-10 max-w-[480px] min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold tracking-wide transition-all duration-300"
                    >
                        <span class="truncate">Commencer</span>
                    </button>
                </div>
            </header>

            <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-8 gap-y-4">
                            <a class="hover:text-subtle-gold transition-colors" href="#">Accueil</a>
                            <a class="hover:text-subtle-gold transition-colors" href="#">L'Oracle</a>
                            <a class="hover:text-subtle-gold transition-colors" href="#">Lectures</a>
                            <a class="hover:text-subtle-gold transition-colors" href="#">Témoignages</a>
                            <a class="hover:text-subtle-gold transition-colors" href="#">Contact</a>
                            <a class="hover:text-subtle-gold transition-colors" href="#">Politique de Confidentialité</a>
                            <a class="hover:text-subtle-gold transition-colors" href="#">Conditions d'Utilisation</a>
                        </div>
                        <div class="flex justify-center gap-6">
                            <a 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>
                            </a>
                            <a 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>
                            </a>
                            <a 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>
                            </a>
                        </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);
}
</style>
