140 lines
8.2 KiB
Vue
140 lines
8.2 KiB
Vue
<template>
|
|
<section class="py-20 sm:py-24">
|
|
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
|
|
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
|
|
<!-- Carte Lecture Gratuite -->
|
|
<div
|
|
class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
|
>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">LECTURE GRATUITE</h3>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
|
|
</div>
|
|
<ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Lecture d'une carte
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Interprétation générale
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Conseils rapides
|
|
</li>
|
|
</ul>
|
|
<button
|
|
@click="goToShuffle"
|
|
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--subtle-gold)] hover:text-[var(--midnight-blue)]"
|
|
>
|
|
Commencer
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Carte Profilage (mise en avant) -->
|
|
<div
|
|
class="flex scale-105 flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--midnight-blue)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
|
>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-[var(--pure-white)]">PROFILAGE</h3>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">9.99€</p>
|
|
</div>
|
|
<ul class="flex-grow space-y-3 text-[var(--linen)]">
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Lecture de 6 cartes
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Analyse personnalisée
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Recommandations ciblées
|
|
</li>
|
|
</ul>
|
|
<button
|
|
@click="goToShuffle"
|
|
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:text-[var(--midnight-blue)]"
|
|
>
|
|
Découvrir
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Carte Quadrige Doré -->
|
|
<div
|
|
class="flex flex-col gap-6 rounded-2xl border-2 border-[var(--subtle-gold)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:border-[var(--linen)] hover:shadow-2xl"
|
|
>
|
|
<div class="text-center">
|
|
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">QUADRIGE DORÉ</h3>
|
|
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">15.90€</p>
|
|
</div>
|
|
<ul class="flex-grow space-y-3 text-[var(--midnight-blue)]/80">
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Lecture de 18 cartes
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Exploration approfondie
|
|
</li>
|
|
<li class="flex items-center gap-3">
|
|
<svg class="h-5 w-5 text-[var(--subtle-gold)]" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
|
|
<path
|
|
d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"
|
|
></path>
|
|
</svg>
|
|
Stratégie complète
|
|
</li>
|
|
</ul>
|
|
<button
|
|
@click="goToShuffle"
|
|
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--subtle-gold)] hover:text-[var(--midnight-blue)]"
|
|
>
|
|
Explorer
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { router } from '@inertiajs/vue3';
|
|
|
|
const goToShuffle = () => {
|
|
router.visit('/tirage');
|
|
};
|
|
</script>
|