<template>
    <main class="flex flex-1 flex-col items-center justify-center px-4 pt-12 pb-24 sm:px-6 lg:px-8">
        <div class="relative z-10 flex w-full max-w-4xl flex-col items-center justify-center text-center">
            <h1 class="text-5xl font-bold text-[var(--midnight-blue)] md:text-6xl">
                L'Oracle de votre<span class="citadel-script ml-4 text-6xl text-[var(--spiritual-earth)] md:text-7xl">Destinée</span>
            </h1>
            <p class="mt-4 max-w-2xl text-lg text-[var(--midnight-blue)]/80">
                Puisez dans la sagesse ancestrale pour éclairer votre chemin. Tirez une carte et recevez le message qui vous est destiné aujourd'hui.
            </p>

            <!-- Card shuffle slot -->

            <slot name="card-shuffle-slot" />
            <!-- Button tirage -->
        </div>
    </main>
</template>
