fix retrun json
This commit is contained in:
kevin
parent
69b7a22d11
commit
d0bbcfca7c
@ -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.
|
||||
*
|
||||
|
||||
BIN
public/build.zip
BIN
public/build.zip
Binary file not shown.
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
confiance."
|
||||
"Kris Saint Ange's Oracle was a revelation. Her guidance helped me make important decisions with confidence."
|
||||
</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>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -99,185 +99,214 @@ const clearHover = () => {
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<section class="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">
|
||||
Explore Our <span class="text-[var(--c-gold)]">Readings</span>
|
||||
</h2>
|
||||
<section class="flex min-h-screen flex-col items-center justify-center px-4 py-16 sm:py-20">
|
||||
<div class="mx-auto w-full max-w-7xl">
|
||||
<h2 class="mb-12 text-center text-3xl font-bold text-white md:text-4xl lg:text-5xl">
|
||||
Explore Our <span class="text-[var(--c-gold)]">Readings</span>
|
||||
</h2>
|
||||
|
||||
<p
|
||||
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)]"
|
||||
>
|
||||
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"
|
||||
<p
|
||||
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)]"
|
||||
>
|
||||
<!-- 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"
|
||||
></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"
|
||||
>
|
||||
<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)"
|
||||
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"
|
||||
:class="{ 'opacity-100': !isFreeDrawUsed, 'opacity-80': isFreeDrawUsed }"
|
||||
@mouseenter="setHover(1)"
|
||||
@mouseleave="clearHover"
|
||||
>
|
||||
<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 -->
|
||||
<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>
|
||||
<!-- 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>
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<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"
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
<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">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"
|
||||
@click="handleSelection(6, 'stripe')"
|
||||
title="Pay with Stripe"
|
||||
:disabled="isFreeDrawUsed"
|
||||
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"
|
||||
@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 -->
|
||||
<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 -->
|
||||
<!-- Premium option -->
|
||||
<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="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"
|
||||
@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 -->
|
||||
<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 class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--c-gold)]"></div>
|
||||
<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 class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--c-gold)]"></div>
|
||||
<!-- 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>
|
||||
|
||||
<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"
|
||||
<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>
|
||||
<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"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<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>
|
||||
<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>
|
||||
</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
|
||||
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"
|
||||
@click="handleSelection(18, 'stripe')"
|
||||
title="Pay with Stripe"
|
||||
>
|
||||
<span class="relative text-sm">Explore</span>
|
||||
</button>
|
||||
|
||||
<!-- Premium plus option -->
|
||||
<div
|
||||
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"
|
||||
@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"
|
||||
></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 */
|
||||
|
||||
@ -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 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="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
|
||||
class="h-10 w-10 text-white"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 256 256"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<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">
|
||||
Veuillez réessayer ou contactez le support si le problème persiste.
|
||||
</p>
|
||||
<p class="mt-10 text-lg font-medium text-white/90">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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user