fix retrun json

app/Http/Middleware/HandleInertiaRequests.php

@@ -17,6 +17,25 @@ class HandleInertiaRequests extends Middleware
      */
     protected $rootView = 'app';
 
+    /**
+     * Handle the incoming request.
+     * 
+     * This override prevents cache issues when users navigate back from external
+     * sites (like Stripe checkout) using the browser's back button.
+     */
+    public function handle(\Illuminate\Http\Request $request, \Closure $next): \Symfony\Component\HttpFoundation\Response
+    {
+        $response = parent::handle($request, $next);
+        
+        // Add headers to prevent browser caching of Inertia responses
+        // This fixes the issue where back-button navigation from Stripe shows raw JSON
+        $response->headers->set('Cache-Control', 'no-store, no-cache, must-revalidate, max-age=0');
+        $response->headers->set('Pragma', 'no-cache');
+        $response->headers->set('Expires', 'Sat, 01 Jan 2000 00:00:00 GMT');
+        
+        return $response;
+    }
+
     /**
      * Determines the current asset version.
      *

resources/js/components/landing/CallBookingSection.vue

@@ -30,7 +30,7 @@
 
                     <div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
                         <button
-                            @click="goToOffers"
+                            @click="goToBooking"
                             class="gold-trail-btn relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[#f59e0b] to-[#eab308] px-8 font-bold tracking-wide text-[#1e1b4b] shadow-lg transition-all duration-300 hover:shadow-[#f59e0b]/40"
                         >
                             <span class="relative z-10">Book a Consultation</span>
@@ -38,14 +38,7 @@
                                 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 group-hover:translate-x-[100%]"
                             ></span>
                         </button>
-                        <button
-                            @click="goToBooking"
-                            class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[#4c1d95] bg-transparent px-8 font-bold text-white backdrop-blur-sm transition-all hover:bg-[#4c1d95]"
-                        >
-                            Book a Consultation
-                        </button>
                     </div>
-
                     <p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Secure payment</p>
                 </div>
             </div>

resources/js/components/landing/HeroSection.vue

@@ -81,7 +81,7 @@
                             class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/20 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
                         ></span>
 
-                        <span class="relative z-10 flex items-center gap-2 truncate"> Reveal my free reading </span>
+                        <span class="relative z-10 flex items-center gap-2 truncate"> Reveal your inner power</span>
 
                         <!-- Animated arrow icon -->
                     </button>

resources/js/components/landing/OfferSection.vue

@@ -92,6 +92,7 @@
 
                 <button
                     class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
+                    @click="goToTirage"
                 >
                     <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">BEGIN</span>
                     <svg
@@ -177,6 +178,7 @@
 
                 <button
                     class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-600 px-8 font-bold tracking-wide text-[var(--c-purple)] transition-all duration-300 group-hover:from-yellow-600 group-hover:to-yellow-400 group-hover:shadow-lg"
+                    @click="goToTirage"
                 >
                     <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">DISCOVER</span>
                     <svg
@@ -257,6 +259,7 @@
 
                 <button
                     class="relative z-10 mt-4 flex h-12 w-full items-center justify-center overflow-hidden rounded-full border border-[var(--c-purple)]/40 bg-[#2d1b69] px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:bg-[#3d2485] group-hover:shadow-lg"
+                    @click="goToTirage"
                 >
                     <span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">EXPLORE</span>
                     <svg
@@ -277,12 +280,19 @@
 </template>
 
 <script setup lang="ts">
+import { router } from '@inertiajs/vue3';
+
 // Define features for each tier
 const freeFeatures = ['Single‑card Reading', 'General Interpretation', 'Quick Tips'];
 
 const featuredFeatures = ['six‑card Reading', 'Personalized Analysis', 'Tailored Recommendations'];
 
 const premiumFeatures = ['Eigtheen‑card reading', 'In‑depth exploration', 'Complete strategy'];
+
+// Navigate to tirage page
+const goToTirage = () => {
+    router.visit('/tirage');
+};
 </script>
 
 <style scoped>

resources/js/components/landing/TestimonialsSection.vue

@@ -21,7 +21,7 @@
                             "
                         ></div>
                         <div>
-                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Sophie Dubois</p>
+                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Sophia Williams</p>
                             <div class="flex text-[#f59e0b]">
                                 <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                     <path
@@ -52,8 +52,7 @@
                         </div>
                     </div>
                     <p class="testimonial-quote relative text-white/80 italic">
-                        "L'Oracle de Kris Saint Ange a été une révélation. Ses conseils m'ont aidée à prendre des décisions importantes avec
+                        "Kris Saint Ange's Oracle was a revelation. Her guidance helped me make important decisions with confidence."
-                        confiance."
                     </p>
                 </div>
             </div>
@@ -74,7 +73,7 @@
                             "
                         ></div>
                         <div>
-                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Jean Martin</p>
+                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">John Martin</p>
                             <div class="flex text-[#f59e0b]">
                                 <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                     <path
@@ -109,7 +108,7 @@
                         </div>
                     </div>
                     <p class="testimonial-quote relative text-white/80 italic">
-                        "Une expérience enrichissante. Les lectures sont précises et offrent une perspective unique sur les défis."
+                        "An enriching experience. The readings are accurate and offer a unique perspective on challenges."
                     </p>
                 </div>
             </div>
@@ -130,7 +129,7 @@
                             "
                         ></div>
                         <div>
-                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Isabelle Lefevre</p>
+                            <p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Isabella Smith</p>
                             <div class="flex text-[#f59e0b]">
                                 <svg class="h-5 w-5 transform transition-all duration-300 hover:scale-125" fill="currentColor" viewBox="0 0 256 256">
                                     <path
@@ -161,7 +160,7 @@
                         </div>
                     </div>
                     <p class="testimonial-quote relative text-white/80 italic">
-                        "Je suis impressionnée par la profondeur des interprétations. L'Oracle est un outil précieux pour la croissance personnelle."
+                        "I'm impressed by the depth of the interpretations. The Oracle is a valuable tool for personal growth."
                     </p>
                 </div>
             </div>

resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue

@@ -27,8 +27,6 @@ const remainingDeckSize = computed(() => Math.max(0, deckSize - revealedCards.va
 const isFinished = computed(() => !!props.drawnCards && revealedCards.value.length >= props.drawnCards.length);
 const shouldAutoDraw = computed(() => props.drawnCards?.length > 15);
 
-console.log(props.drawnCards?.length);
-
 // Auto-draw cards with beautiful animation
 const startAutoDraw = async () => {
     if (!props.drawnCards || isAutoDrawing.value) return;

resources/js/pages/cards/cardSelection.vue

@@ -99,185 +99,214 @@ const clearHover = () => {
 };
 </script>
 <template>
-    <section class="px-4 py-16 sm:py-20">
+    <section class="flex min-h-screen flex-col items-center justify-center px-4 py-16 sm:py-20">
-        <h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl">
+        <div class="mx-auto w-full max-w-7xl">
-            Explore Our <span class="text-[var(--c-gold)]">Readings</span>
+            <h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl">
-        </h2>
+                Explore Our <span class="text-[var(--c-gold)]">Readings</span>
+            </h2>
 
-        <p
+            <p
-            v-if="isFreeDrawUsed"
+                v-if="isFreeDrawUsed"
-            class="mx-auto mb-8 max-w-2xl rounded-lg border border-[var(--c-gold)]/30 bg-gray-900 p-4 text-center text-lg font-semibold text-[var(--c-gold)]"
+                class="mx-auto mb-8 max-w-2xl rounded-lg border border-[var(--c-gold)]/30 bg-gray-900 p-4 text-center text-lg font-semibold text-[var(--c-gold)]"
-        >
-            You've used your free print! Choose a paid option to continue.
-        </p>
-
-        <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
-            <!-- Free draw -->
-            <div
-                class="group relative flex flex-col gap-6 rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900 to-black p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
-                :class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-80': isFreeDrawUsed }"
-                @mouseenter="setHover(1)"
-                @mouseleave="clearHover"
             >
-                <!-- Radiant background effect on hover -->
+                You've used your free print! Choose a paid option to continue.
+            </p>
+
+            <div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3 lg:items-stretch">
+                <!-- Free draw -->
                 <div
-                    class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[var(--c-purple)]/0 via-[var(--c-purple)]/10 to-[var(--c-purple)]/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                    class="group relative flex flex-col rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900 to-black p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
-                ></div>
+                    :class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-80': isFreeDrawUsed }"
-
+                    @mouseenter="setHover(1)"
-                <!-- Decorative elements -->
+                    @mouseleave="clearHover"
-                <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
-
-                <div class="relative z-10 text-center">
-                    <div class="mb-4 flex justify-center">
-                        <div
-                            class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-purple)] to-[var(--c-purple)]/80 transition-transform duration-300 group-hover:scale-110"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="h-8 w-8 text-white"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
-                            >
-                                <path
-                                    d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
-                                ></path>
-                                <polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
-                                <polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
-                                <polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
-                                <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
-                                <line x1="12" y1="22.08" x2="12" y2="12"></line>
-                            </svg>
-                        </div>
-                    </div>
-                    <h3 class="text-xl font-bold text-white md:text-2xl">Free Reading</h3>
-                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Free</p>
-                    <p class="mt-4 text-sm text-gray-300 md:text-base">Single‑card Reading General Interpretation Quick Tips</p>
-                </div>
-                <button
-                    :disabled="isFreeDrawUsed"
-                    class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
-                    @click="handleSelection(1)"
                 >
-                    <span class="relative z-10">Begin</span>
+                    <!-- Radiant background effect on hover -->
                     <div
-                        class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[var(--c-purple)]/0 via-[var(--c-purple)]/10 to-[var(--c-purple)]/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
                     ></div>
-                    <svg
-                        v-if="!isFreeDrawUsed"
-                        xmlns="http://www.w3.org/2000/svg"
-                        class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                    ></svg>
-                </button>
-            </div>
 
-            <!-- Premium option -->
+                    <!-- Decorative elements -->
-            <div
+                    <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
-                class="group relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-b from-[var(--c-purple)] to-[#1a1035] p-6 shadow-xl transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl md:scale-105 md:p-8"
-                @mouseenter="setHover(2)"
-                @mouseleave="clearHover"
-            >
-                <!-- Premium badge -->
-                <div class="absolute -top-3 left-1/2 -translate-x-1/2 transform">
-                    <span class="rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-black uppercase">Populaire</span>
-                </div>
 
-                <!-- Radiant background effect on hover -->
+                    <div class="relative z-10 text-center">
-                <div
+                        <div class="mb-4 flex justify-center">
-                    class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[var(--c-gold)]/0 via-[var(--c-gold)]/10 to-[var(--c-gold)]/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                            <div
-                ></div>
+                                class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-purple)] to-[var(--c-purple)]/80 transition-transform duration-300 group-hover:scale-110"
-
-                <div class="relative z-10 text-center">
-                    <div class="mb-4 flex justify-center">
-                        <div
-                            class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-[var(--c-gold)]/80 transition-transform duration-300 group-hover:scale-110"
-                        >
-                            <svg
-                                xmlns="http://www.w3.org/2000/svg"
-                                class="h-8 w-8 text-black"
-                                viewBox="0 0 24 24"
-                                fill="none"
-                                stroke="currentColor"
-                                stroke-width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
                             >
-                                <line x1="8" y1="12" x2="16" y2="12"></line>
+                                <svg
-                                <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                                    xmlns="http://www.w3.org/2000/svg"
-                            </svg>
+                                    class="h-8 w-8 text-white"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <path
+                                        d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"
+                                    ></path>
+                                    <polyline points="7.5 4.21 12 6.81 16.5 4.21"></polyline>
+                                    <polyline points="7.5 19.79 7.5 14.6 3 12"></polyline>
+                                    <polyline points="21 12 16.5 14.6 16.5 19.79"></polyline>
+                                    <polyline points="3.27 6.96 12 12.01 20.73 6.96"></polyline>
+                                    <line x1="12" y1="22.08" x2="12" y2="12"></line>
+                                </svg>
+                            </div>
                         </div>
+                        <h3 class="text-xl font-bold text-white md:text-2xl">Reveal your inner power</h3>
+                        <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">Free</p>
+                        <p class="mt-4 text-sm text-gray-300 md:text-base">Single‑card Reading General Interpretation Quick Tips</p>
                     </div>
-                    <h3 class="text-xl font-bold text-white md:text-2xl">Insight Profile</h3>
-                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">9.99 €</p>
-                    <p class="mt-4 text-sm text-gray-200 md:text-base">six‑card Reading Personalized Analysis Tailored Recommendations</p>
-                </div>
-                <div class="mt-2 flex gap-2">
                     <button
-                        class="group relative flex h-12 flex-1 items-center justify-center overflow-hidden rounded-full border-2 border-[var(--c-gold)] bg-transparent px-4 font-bold tracking-wide text-[var(--c-gold)] transition-all duration-300 hover:bg-[var(--c-gold)] hover:text-black"
+                        :disabled="isFreeDrawUsed"
-                        @click="handleSelection(6, 'stripe')"
+                        class="group relative mt-auto flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-6 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
-                        title="Pay with Stripe"
+                        @click="handleSelection(1)"
                     >
-                        <span class="relative text-sm">Discover</span>
+                        <span class="relative z-10">Begin</span>
+                        <div
+                            class="absolute inset-0 bg-gradient-to-r from-[var(--c-gold)]/20 to-transparent opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+                        ></div>
+                        <svg
+                            v-if="!isFreeDrawUsed"
+                            xmlns="http://www.w3.org/2000/svg"
+                            class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
+                            fill="none"
+                            viewBox="0 0 24 24"
+                            stroke="currentColor"
+                        ></svg>
                     </button>
                 </div>
-            </div>
 
-            <!-- Premium plus option -->
+                <!-- Premium option -->
-            <div
-                class="group relative flex flex-col gap-6 rounded-2xl border border-gray-800 bg-gradient-to-b from-gray-900 to-black p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
-                @mouseenter="setHover(3)"
-                @mouseleave="clearHover"
-            >
-                <!-- Radiant background effect on hover -->
                 <div
-                    class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[var(--c-gold)]/0 via-[var(--c-gold)]/10 to-[var(--c-gold)]/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                    class="group relative flex transform flex-col rounded-2xl bg-gradient-to-b from-[var(--c-purple)] to-[#1a1035] p-6 shadow-xl transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl md:scale-105 md:p-8"
-                ></div>
+                    @mouseenter="setHover(2)"
+                    @mouseleave="clearHover"
+                >
+                    <!-- Premium badge -->
+                    <div class="absolute -top-3 left-1/2 -translate-x-1/2 transform">
+                        <span class="rounded-full bg-[var(--c-gold)] px-3 py-1 text-xs font-bold text-black uppercase">Populaire</span>
+                    </div>
 
-                <!-- Gold corner accents -->
+                    <!-- Radiant background effect on hover -->
-                <div class="absolute top-0 left-0 h-6 w-6 rounded-tl-lg border-t-2 border-l-2 border-[var(--c-gold)]"></div>
+                    <div
-                <div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--c-gold)]"></div>
+                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[var(--c-gold)]/0 via-[var(--c-gold)]/10 to-[var(--c-gold)]/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
-                <div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--c-gold)]"></div>
+                    ></div>
-                <div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--c-gold)]"></div>
 
-                <div class="relative z-10 text-center">
+                    <div class="relative z-10 text-center">
-                    <div class="mb-4 flex justify-center">
+                        <div class="mb-4 flex justify-center">
-                        <div
+                            <div
-                            class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-purple)] to-[var(--c-purple)]/80 transition-transform duration-300 group-hover:scale-110"
+                                class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-[var(--c-gold)]/80 transition-transform duration-300 group-hover:scale-110"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-8 w-8 text-black"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <line x1="8" y1="12" x2="16" y2="12"></line>
+                                    <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
+                                </svg>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold text-white md:text-2xl">Insight Profile</h3>
+                        <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">9.99 €</p>
+                        <p class="mt-4 text-sm text-gray-200 md:text-base">six‑card Reading Personalized Analysis Tailored Recommendations</p>
+                    </div>
+                    <div class="mt-auto flex gap-2">
+                        <button
+                            :disabled="loading"
+                            class="group relative flex h-12 w-full items-center justify-center overflow-hidden rounded-full border-2 border-[var(--c-gold)] bg-transparent px-4 font-bold tracking-wide text-[var(--c-gold)] transition-all duration-300 hover:bg-[var(--c-gold)] hover:text-black disabled:cursor-not-allowed disabled:opacity-50"
+                            @click="handleSelection(6, 'stripe')"
+                            title="Pay with Stripe"
                         >
                             <svg
+                                v-if="loading"
+                                class="mr-2 h-5 w-5 animate-spin text-[var(--c-gold)]"
                                 xmlns="http://www.w3.org/2000/svg"
-                                class="h-8 w-8 text-white"
-                                viewBox="0 0 24 24"
                                 fill="none"
-                                stroke="currentColor"
+                                viewBox="0 0 24 24"
-                                stroke-width="1.5"
-                                stroke-linecap="round"
-                                stroke-linejoin="round"
                             >
-                                <polygon
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                                    points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+                                <path
-                                ></polygon>
+                                    class="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                ></path>
                             </svg>
-                        </div>
+                            <span class="relative">{{ loading ? 'Processing...' : 'Discover' }}</span>
+                        </button>
                     </div>
-                    <h3 class="text-xl font-bold text-white md:text-2xl">Full card spread</h3>
-                    <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">99€</p>
-                    <p class="mt-4 text-sm text-gray-300 md:text-base">Eigtheen‑card reading In‑depth exploration Complete strategy</p>
                 </div>
-                <div class="mt-2 flex gap-2">
+
-                    <button
+                <!-- Premium plus option -->
-                        class="group relative flex h-12 flex-1 items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-4 font-bold tracking-wide text-white transition-all duration-300 hover:bg-gray-800"
+                <div
-                        @click="handleSelection(18, 'stripe')"
+                    class="group relative flex flex-col rounded-2xl bg-gradient-to-b from-gray-900 to-black p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
-                        title="Pay with Stripe"
+                    @mouseenter="setHover(3)"
-                    >
+                    @mouseleave="clearHover"
-                        <span class="relative text-sm">Explore</span>
+                >
-                    </button>
+                    <!-- Radiant background effect on hover -->
+                    <div
+                        class="absolute inset-0 rounded-2xl bg-gradient-to-r from-[var(--c-gold)]/0 via-[var(--c-gold)]/10 to-[var(--c-gold)]/0 opacity-0 transition-opacity duration-500 group-hover:opacity-100"
+                    ></div>
+
+                    <!-- Decorative elements -->
+                    <div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
+
+                    <div class="relative z-10 text-center">
+                        <div class="mb-4 flex justify-center">
+                            <div
+                                class="flex h-16 w-16 items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-purple)] to-[var(--c-purple)]/80 transition-transform duration-300 group-hover:scale-110"
+                            >
+                                <svg
+                                    xmlns="http://www.w3.org/2000/svg"
+                                    class="h-8 w-8 text-white"
+                                    viewBox="0 0 24 24"
+                                    fill="none"
+                                    stroke="currentColor"
+                                    stroke-width="1.5"
+                                    stroke-linecap="round"
+                                    stroke-linejoin="round"
+                                >
+                                    <polygon
+                                        points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"
+                                    ></polygon>
+                                </svg>
+                            </div>
+                        </div>
+                        <h3 class="text-xl font-bold text-white md:text-2xl">Full card spread</h3>
+                        <p class="mt-2 text-4xl font-bold text-[var(--c-gold)] md:text-5xl">15.90 €</p>
+                        <p class="mt-4 text-sm text-gray-300 md:text-base">Eigtheen‑card reading In‑depth exploration Complete strategy</p>
+                    </div>
+                    <div class="mt-auto flex gap-2">
+                        <button
+                            :disabled="loading"
+                            class="group relative flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-gray-800 to-gray-900 px-4 font-bold tracking-wide text-white transition-all duration-300 hover:from-[var(--c-purple)] hover:to-[var(--c-purple)]/80 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
+                            @click="handleSelection(18, 'stripe')"
+                            title="Pay with Stripe"
+                        >
+                            <svg
+                                v-if="loading"
+                                class="mr-2 h-5 w-5 animate-spin text-white"
+                                xmlns="http://www.w3.org/2000/svg"
+                                fill="none"
+                                viewBox="0 0 24 24"
+                            >
+                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                                <path
+                                    class="opacity-75"
+                                    fill="currentColor"
+                                    d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                                ></path>
+                            </svg>
+                            <span class="relative">{{ loading ? 'Processing...' : 'Explore' }}</span>
+                        </button>
+                    </div>
                 </div>
             </div>
         </div>
@@ -292,9 +321,6 @@ const clearHover = () => {
 
 .card-hover:hover {
     transform: translateY(-5px);
-    box-shadow:
-        0 20px 25px -5px rgba(0, 0, 0, 0.1),
-        0 10px 10px -5px rgba(0, 0, 0, 0.04);
 }
 
 /* Custom glow effect */

resources/js/pages/payments/Error.vue

@@ -2,16 +2,13 @@
     <LandingLayout>
         <main class="flex flex-grow items-center justify-center">
             <div class="w-full max-w-2xl px-4 py-20 sm:px-6 lg:px-8">
-                <div class="relative flex flex-col items-center overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-12 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40">
+                <div
-                    <div class="pointer-events-none absolute -left-16 -top-16 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
+                    class="relative flex flex-col items-center overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-6 p-12 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-lg"
+                >
+                    <div class="pointer-events-none absolute -top-16 -left-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 mb-8 flex h-20 w-20 items-center justify-center rounded-full bg-red-500/80 shadow-lg">
-                        <svg
+                        <svg class="h-10 w-10 text-white" fill="currentColor" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
-                            class="h-10 w-10 text-white"
-                            fill="currentColor"
-                            viewBox="0 0 256 256"
-                            xmlns="http://www.w3.org/2000/svg"
-                        >
                             <path
                                 d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"
                             ></path>
@@ -22,9 +19,7 @@
                         Une erreur est survenue lors du traitement de votre paiement, ou vous avez annulé la transaction.
                     </p>
                     <div class="mt-10 w-full border-t border-[var(--linen)]"></div>
-                    <p class="mt-10 text-lg font-medium text-white/90">
+                    <p class="mt-10 text-lg font-medium text-white/90">Veuillez réessayer ou contactez le support si le problème persiste.</p>
-                        Veuillez réessayer ou contactez le support si le problème persiste.
-                    </p>
                     <button
                         @click="tryAgain"
                         class="group relative mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full border border-white/30 bg-transparent px-8 text-base font-bold tracking-wide text-white transition-all hover:bg-white/10"