156 lines
8.6 KiB
Vue
156 lines
8.6 KiB
Vue
<template>
|
|
<LandingLayout>
|
|
<main class="flex flex-1 justify-center px-4 py-8 sm:px-6 sm:py-12 md:py-16 lg:px-8">
|
|
<div class="layout-content-container flex w-full max-w-5xl flex-col">
|
|
<!-- Header Section -->
|
|
<div class="mb-8 text-center md:mb-12">
|
|
<h1 class="mb-2 text-3xl font-black text-white sm:text-4xl md:text-5xl">Votre Lecture</h1>
|
|
<p class="mx-auto max-w-2xl text-base text-white/70 sm:text-lg">Voici une analyse détaillée de votre lecture choisie.</p>
|
|
</div>
|
|
|
|
<!-- Loading State -->
|
|
<div v-if="loading" class="flex items-center justify-center py-16">
|
|
<div class="h-12 w-12 animate-spin rounded-full border-t-2 border-b-2 border-[var(--subtle-gold)]"></div>
|
|
</div>
|
|
|
|
<!-- Error State -->
|
|
<div v-else-if="error" class="mb-8 rounded-lg bg-red-50 p-6 text-center">
|
|
<div class="mb-2 font-medium text-red-700">Erreur</div>
|
|
<p class="text-red-600">{{ error }}</p>
|
|
</div>
|
|
|
|
<!-- Empty State -->
|
|
<div v-else-if="!hasCard" class="rounded-lg bg-gray-50 p-8 text-center">
|
|
<p class="text-gray-600">Aucune carte n'a été trouvée pour votre session.</p>
|
|
</div>
|
|
|
|
<!-- Single Card Display -->
|
|
<div v-else class="mb-8 md:mb-12">
|
|
<div
|
|
class="relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-2xl ring-1 ring-[var(--c-purple)]/40 md:p-10"
|
|
>
|
|
<!-- Ambient glows -->
|
|
<div class="pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute -right-20 -bottom-20 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
|
|
|
|
<!-- Card Header -->
|
|
<div class="relative z-10 mb-6 text-center">
|
|
<h2 class="text-3xl font-black text-white md:text-4xl">{{ card.name }}</h2>
|
|
<div v-if="card.orientation" class="mt-2 text-sm text-white/70">
|
|
<div v-html="card.orientation === 'reversed' ? 'Inversée' : 'Droite'"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card Content -->
|
|
<div class="relative z-10 p-0 md:p-2">
|
|
<!-- Card Image -->
|
|
<div class="mb-8 flex justify-center">
|
|
<div class="relative h-[420px] w-[280px] overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 shadow-xl">
|
|
<img
|
|
:src="card.image_url || `/cards/${card.id + 1}.png`"
|
|
:alt="card.name"
|
|
class="absolute inset-0 h-full w-full rounded-2xl object-cover"
|
|
/>
|
|
<div class="absolute inset-x-0 bottom-0 rounded-b-2xl bg-gradient-to-t from-black/80 to-transparent p-4 text-center">
|
|
<p class="text-sm font-bold text-white">{{ card.name }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Descriptions -->
|
|
<div v-if="card.description" class="mb-8">
|
|
<h3 class="mb-3 text-lg font-black text-white">Description</h3>
|
|
<div class="prose prose-invert max-w-none text-white/80" v-html="card.description"></div>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<h3 class="mb-3 text-lg font-black text-white">
|
|
{{ card.orientation === 'reversed' ? 'Signification Inversée' : 'Signification Droite' }}
|
|
</h3>
|
|
<div
|
|
class="prose prose-invert max-w-none text-white/80"
|
|
v-html="card.orientation === 'reversed' ? card.description_reversed : card.description_upright"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<h3 class="mb-3 text-lg font-black text-white">
|
|
{{ card.orientation === 'reversed' ? 'Signification Droite' : 'Signification Inversée' }}
|
|
</h3>
|
|
<div
|
|
class="prose prose-invert max-w-none text-white/80"
|
|
v-html="card.orientation === 'reversed' ? card.description_upright : card.description_reversed"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Symbolism -->
|
|
<div v-if="card.symbolism && Object.keys(card.symbolism).length > 0" class="mb-6">
|
|
<h3 class="mb-3 text-lg font-black text-white">Symbolisme</h3>
|
|
<ul class="space-y-2 text-white/80">
|
|
<li v-for="(value, key) in card.symbolism" :key="key" class="pl-0">
|
|
<strong class="text-white">{{ key }}:</strong> {{ value }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Consultation CTA -->
|
|
<div
|
|
v-if="!loading && !error"
|
|
class="relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-8 text-center shadow-xl ring-1 ring-[var(--c-purple)]/40 md:p-12"
|
|
>
|
|
<div class="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
|
|
<div class="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
|
|
|
|
<div class="relative z-10 mx-auto mb-6 h-1 w-16 rounded-full bg-[var(--c-gold)]"></div>
|
|
<p class="relative z-10 mx-auto mb-6 max-w-2xl text-base text-white/80 leading-relaxed md:mb-8 md:text-lg">
|
|
Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
|
|
</p>
|
|
<button
|
|
@click="goToBooking"
|
|
class="relative z-10 inline-flex h-12 min-w-[180px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40"
|
|
>
|
|
<span class="relative z-10">Réserver une Consultation</span>
|
|
<span
|
|
class="absolute inset-0 translate-x-[-100%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 hover:translate-x-[100%]"
|
|
></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</LandingLayout>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
|
import { router } from '@inertiajs/vue3';
|
|
import axios from 'axios';
|
|
import { computed, onMounted, ref } from 'vue';
|
|
|
|
const goToBooking = () => {
|
|
router.visit('/rendez-vous');
|
|
};
|
|
|
|
const card = ref<any>(null);
|
|
const error = ref<string | null>(null);
|
|
const loading = ref(true);
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
const cardId = params.get('id');
|
|
|
|
const hasCard = computed(() => card.value !== null);
|
|
|
|
onMounted(async () => {
|
|
try {
|
|
const response = await axios.get(`/api/get-card/${cardId}`);
|
|
card.value = response.data.cards;
|
|
} catch (err: any) {
|
|
console.error('Card fetch error:', err);
|
|
error.value = err.response?.data?.message || 'Failed to get cards from the server. Please contact support.';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
});
|
|
</script>
|