314 lines
14 KiB
Vue
314 lines
14 KiB
Vue
<script setup lang="ts">
|
||
import CardResult from '@/components/ui/card/CardResult.vue';
|
||
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 cards = ref<Array<any>>([]);
|
||
const error = ref<string | null>(null);
|
||
const loading = ref(true);
|
||
|
||
const params = new URLSearchParams(window.location.search);
|
||
const clientSessionId = params.get('client_session_id');
|
||
|
||
const hasCards = computed(() => cards.value.length > 0);
|
||
|
||
onMounted(async () => {
|
||
if (!clientSessionId) {
|
||
error.value = 'No session ID provided. Please return to the payment page.';
|
||
loading.value = false;
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await axios.get(`/api/get-cards?client_session_id=${clientSessionId}`);
|
||
|
||
if (response.data.success) {
|
||
cards.value = response.data.cards;
|
||
} else {
|
||
error.value = response.data.message || 'An error occurred while validating payment.';
|
||
}
|
||
} 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>
|
||
|
||
<template>
|
||
<LandingLayout>
|
||
<main class="min-h-screen bg-gradient-to-br py-8">
|
||
<div class="container mx-auto max-w-6xl px-4 sm:px-6 lg:px-8">
|
||
<!-- Header Section -->
|
||
<div class="mt-10 mb-12 text-center md:mb-16">
|
||
<h1
|
||
class="mb-4 bg-gradient-to-r from-purple-300 via-purple-200 to-purple-100 bg-clip-text text-4xl font-black text-transparent md:text-5xl lg:text-6xl"
|
||
>
|
||
Votre Lecture Spirituelle
|
||
</h1>
|
||
<p class="mx-auto max-w-3xl text-lg leading-relaxed text-purple-300/80 md:text-xl">
|
||
Découvrez les messages que l'univers a préparés pour vous. Cette analyse détaillée vous guidera sur votre chemin.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Loading State -->
|
||
<div v-if="loading" class="flex flex-col items-center justify-center py-20">
|
||
<div class="relative">
|
||
<div class="h-16 w-16 animate-spin rounded-full border-4 border-purple-700/30"></div>
|
||
<div
|
||
class="absolute top-1/2 left-1/2 h-8 w-8 -translate-x-1/2 -translate-y-1/2 transform animate-pulse rounded-full bg-gradient-to-r from-purple-400 to-purple-300"
|
||
></div>
|
||
</div>
|
||
<p class="mt-6 font-medium text-purple-300/80">Chargement de votre lecture...</p>
|
||
</div>
|
||
|
||
<!-- Error State -->
|
||
<div v-else-if="error" class="mx-auto mb-12 max-w-2xl">
|
||
<div
|
||
class="rounded-2xl border border-red-700/30 bg-gradient-to-br from-red-900/30 to-purple-900/40 p-8 text-center shadow-2xl backdrop-blur-sm"
|
||
>
|
||
<div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full border border-red-700/20 bg-red-900/40">
|
||
<div class="text-2xl text-red-300">⚠️</div>
|
||
</div>
|
||
<h3 class="mb-2 text-xl font-bold text-red-200">Une erreur est survenue</h3>
|
||
<p class="mb-6 text-red-300/90">{{ error }}</p>
|
||
<button
|
||
@click="$router.back()"
|
||
class="transform rounded-full border border-red-500/20 bg-gradient-to-r from-red-600 to-purple-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:-translate-y-0.5 hover:shadow-lg"
|
||
>
|
||
Retour à la page précédente
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Empty State -->
|
||
<div v-else-if="!hasCards" class="mx-auto max-w-2xl">
|
||
<div
|
||
class="rounded-2xl border border-purple-700/30 bg-gradient-to-br from-purple-900/40 to-indigo-900/30 p-12 text-center shadow-2xl backdrop-blur-sm"
|
||
>
|
||
<div
|
||
class="mx-auto mb-6 flex h-20 w-20 items-center justify-center rounded-full border border-purple-600/20 bg-purple-800/30"
|
||
>
|
||
<div class="text-3xl text-purple-300">🔮</div>
|
||
</div>
|
||
<h3 class="mb-3 text-2xl font-bold text-purple-200">Aucune carte trouvée</h3>
|
||
<p class="mb-6 text-purple-300/80">Votre session n'a pas généré de lecture. Veuillez réessayer ou contacter le support.</p>
|
||
<button
|
||
@click="$router.back()"
|
||
class="rounded-full border border-purple-500/20 bg-gradient-to-r from-purple-600 to-indigo-700 px-6 py-3 font-semibold text-white transition-all duration-300 hover:shadow-lg"
|
||
>
|
||
Nouvelle tentative
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Cards Results -->
|
||
<div v-else class="mb-12 md:mb-16">
|
||
<div class="grid gap-8 md:gap-10">
|
||
<div
|
||
v-for="(card, index) in cards"
|
||
:key="card.id || index"
|
||
class="transform transition-all duration-500 hover:scale-[1.02]"
|
||
:style="{ animationDelay: `${index * 100}ms` }"
|
||
>
|
||
<card-result
|
||
:card-number="card.id"
|
||
:name="card.name"
|
||
:image-url="card.image_url"
|
||
:orientation="card.orientation"
|
||
:description="card.description"
|
||
/>
|
||
</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>
|
||
|
||
<!-- Success Message -->
|
||
<div
|
||
v-if="!loading && !error && hasCards"
|
||
class="mx-auto mt-8 max-w-2xl rounded-2xl border border-green-700/30 bg-gradient-to-r from-green-900/30 to-emerald-900/20 p-6 text-center backdrop-blur-sm"
|
||
>
|
||
<div class="flex items-center justify-center space-x-3">
|
||
<div class="flex h-8 w-8 items-center justify-center rounded-full border border-green-600/20 bg-green-800/40">
|
||
<div class="text-green-300">✓</div>
|
||
</div>
|
||
<p class="font-medium text-green-200">Votre lecture a été générée avec succès !</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
</LandingLayout>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
animation: fadeInUp 0.8s ease-out;
|
||
}
|
||
|
||
@keyframes fadeInUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* Staggered animation for cards */
|
||
.grid > * {
|
||
animation: slideInLeft 0.6s ease-out both;
|
||
}
|
||
|
||
@keyframes slideInLeft {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-30px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* Custom scrollbar for dark theme */
|
||
::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: var(--muted);
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: var(--primary);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: var(--accent);
|
||
}
|
||
|
||
/* Glow effects for interactive elements */
|
||
button {
|
||
box-shadow: 0 4px 15px rgba(128, 90, 213, 0.3);
|
||
}
|
||
|
||
button:hover {
|
||
box-shadow: 0 8px 25px rgba(128, 90, 213, 0.5);
|
||
}
|
||
|
||
/* Subtle background pattern */
|
||
main::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-image:
|
||
radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
|
||
radial-gradient(circle at 80% 20%, rgba(199, 120, 221, 0.1) 0%, transparent 50%),
|
||
radial-gradient(circle at 40% 40%, rgba(128, 90, 213, 0.05) 0%, transparent 50%);
|
||
pointer-events: none;
|
||
}
|
||
</style>
|