302 lines
15 KiB
Vue
302 lines
15 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 border border-red-500/30 bg-red-900/30 p-6 text-center">
|
||
<div class="mb-2 font-medium text-red-300">Error</div>
|
||
<p class="text-red-200">{{ error }}</p>
|
||
</div>
|
||
|
||
<!-- Empty State - No card found, offer to do a new reading -->
|
||
<div
|
||
v-else-if="!hasCard"
|
||
class="rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-8 text-center shadow-2xl backdrop-blur-lg"
|
||
>
|
||
<div class="mb-4 text-6xl">🔮</div>
|
||
<h3 class="mb-4 text-2xl font-bold text-white">No Reading Found</h3>
|
||
<p class="mb-6 text-white/70">Your previous reading could not be retrieved. Would you like to do a new free reading?</p>
|
||
<button
|
||
@click="resetAndNewReading"
|
||
class="mystic-btn mystic-btn-primary group relative inline-flex h-12 min-w-[200px] items-center justify-center overflow-hidden rounded-full px-8 text-base font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
|
||
>
|
||
<span class="relative z-10">Start New Reading</span>
|
||
</button>
|
||
</div>
|
||
|
||
<!-- Single Card Display -->
|
||
<div v-else class="mb-8 md:mb-12">
|
||
<div
|
||
class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-6 shadow-2xl backdrop-blur-lg md:p-10"
|
||
>
|
||
<!-- Ambient glows -->
|
||
<div class="pointer-events-none absolute -top-20 -left-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>
|
||
|
||
<!-- 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>
|
||
</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 v-if="card.description_upright" class="mb-8">
|
||
<h3 class="mb-3 text-lg font-black text-white">Upright Meaning</h3>
|
||
<div class="prose prose-invert max-w-none text-white/80" v-html="card.description_upright"></div>
|
||
</div>
|
||
|
||
<div v-if="card.description_reversed" class="mb-8">
|
||
<h3 class="mb-3 text-lg font-black text-white">Reversed Meaning</h3>
|
||
<div class="prose prose-invert max-w-none text-white/80" v-html="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-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-10 text-center shadow-2xl backdrop-blur-lg md:p-12"
|
||
>
|
||
<!-- Animated background -->
|
||
<div
|
||
class="animate-pulse-slow absolute inset-0 bg-gradient-to-r from-[var(--c-purple)]/10 via-transparent to-[var(--c-gold)]/10"
|
||
></div>
|
||
|
||
<div class="pointer-events-none absolute -top-20 -left-20 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
|
||
<div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
|
||
|
||
<div class="relative z-10">
|
||
<!-- En-tête -->
|
||
<div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
|
||
<span class="text-2xl">🔮</span>
|
||
<span class="text-lg font-bold text-white">Pathfinder Offer</span>
|
||
</div>
|
||
|
||
<!-- Contenu principal -->
|
||
<div class="space-y-6 text-left">
|
||
<!-- Introduction -->
|
||
<div class="text-center">
|
||
<h3 class="mb-4 font-title text-xl font-bold text-white md:text-2xl">Dear Explorer of Symbols,</h3>
|
||
<p class="leading-relaxed text-white/80">
|
||
These revelations are only a prelude to what we could accomplish in a direct consultation. Because the arcana:
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Points clés -->
|
||
<div class="space-y-3">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="mt-1 text-[var(--c-gold)]">•</span>
|
||
<p class="text-white/80"><strong>Adapt</strong> to your voice and micro-expressions</p>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<span class="mt-1 text-[var(--c-gold)]">•</span>
|
||
<p class="text-white/80"><strong>Deepen</strong> through intuitive real-time dialogue</p>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<span class="mt-1 text-[var(--c-gold)]">•</span>
|
||
<p class="text-white/80"><strong>Transmute</strong> into a tailored action plan</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Offre -->
|
||
<div class="space-y-4">
|
||
<div class="flex items-center space-x-3">
|
||
<span class="text-xl text-[var(--c-gold)]">➤</span>
|
||
<h4 class="font-title text-lg font-bold text-white">Pathfinder Offer:</h4>
|
||
</div>
|
||
<p class="text-white/80">Receive an in‑depth analysis where we will:</p>
|
||
<div class="space-y-3 pl-4">
|
||
<div class="flex items-start space-x-3">
|
||
<span class="mt-1 text-[var(--c-gold)]">1.</span>
|
||
<p class="text-white/80">Decode the synchronicities between your reading and the one we'll do together</p>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<span class="mt-1 text-[var(--c-gold)]">2.</span>
|
||
<p class="text-white/80">Activate the hidden bridges between past, present, and future</p>
|
||
</div>
|
||
<div class="flex items-start space-x-3">
|
||
<span class="mt-1 text-[var(--c-gold)]">3.</span>
|
||
<p class="text-white/80">Crystallize a strategic compass for your next choices</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Bouton CTA et informations -->
|
||
<div class="mt-8 space-y-4">
|
||
<button
|
||
@click="goToBooking"
|
||
class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
|
||
>
|
||
<span class="relative z-10">Book my amplified session here</span>
|
||
<span
|
||
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
|
||
></span>
|
||
</button>
|
||
|
||
<!-- Informations tarif et durée -->
|
||
<div class="space-y-2">
|
||
<p class="text-sm font-semibold text-[var(--c-gold)]">Limited to 15 days</p>
|
||
<p class="text-lg font-bold text-white">Special rate for digital reading holders: €390</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</LandingLayout>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import LandingLayout from '@/layouts/app/LandingLayout.vue';
|
||
import { useTarotStore } from '@/stores/tarot';
|
||
import { router } from '@inertiajs/vue3';
|
||
import axios from 'axios';
|
||
import { computed, onMounted, ref } from 'vue';
|
||
|
||
const goToBooking = () => {
|
||
router.visit('/rendez-vous');
|
||
};
|
||
|
||
const tarotStore = useTarotStore();
|
||
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 () => {
|
||
// First, check if we have a persisted free draw card in the store
|
||
if (tarotStore.freeDrawCard) {
|
||
card.value = tarotStore.freeDrawCard;
|
||
loading.value = false;
|
||
return;
|
||
}
|
||
|
||
// Fallback: If no persisted card but we have an ID in the URL, try to fetch from API
|
||
if (cardId) {
|
||
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;
|
||
}
|
||
} else {
|
||
// No card in store and no ID in URL - just stop loading
|
||
loading.value = false;
|
||
}
|
||
});
|
||
|
||
// Reset the store and navigate to do a new reading
|
||
const resetAndNewReading = () => {
|
||
tarotStore.clearFreeDrawCard();
|
||
router.visit('/tirage');
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
/* Button styles */
|
||
.mystic-btn {
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all 0.3s ease;
|
||
}
|
||
|
||
.mystic-btn-primary {
|
||
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
|
||
box-shadow: 0 0 25px rgba(125, 91, 166, 0.7);
|
||
}
|
||
|
||
.mystic-btn-primary:hover {
|
||
box-shadow: 0 0 35px rgba(125, 91, 166, 0.9);
|
||
}
|
||
|
||
.mystic-btn-secondary {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
backdrop-filter: blur(10px);
|
||
}
|
||
|
||
.mystic-btn-secondary:hover {
|
||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
|
||
border-color: rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.mystic-btn::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||
transform: translateX(-100%);
|
||
transition: transform 0.6s;
|
||
z-index: 1;
|
||
}
|
||
|
||
.mystic-btn:hover::before {
|
||
transform: translateX(100%);
|
||
}
|
||
|
||
:deep(strong),
|
||
:deep(b) {
|
||
font-weight: 700 !important; /* Forces bold weight */
|
||
color: white; /* Optional: Makes it fully white vs the 80% opacity body text */
|
||
}
|
||
|
||
/* Optional: If you want to style lists inside description too */
|
||
:deep(ul),
|
||
:deep(ol) {
|
||
padding-left: 1.5rem;
|
||
list-style-type: disc;
|
||
}
|
||
|
||
:deep(li) {
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
</style>
|