root/KSA-ORACLE
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix design

Browse Source
This commit is contained in:
Nyavokevin 2025-09-11 15:06:57 +03:00
parent dd280d3e1e
commit 7d267819ce
9 changed files with 509 additions and 109 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/icon.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

175
resources/js/components/landing/HeroSection.vue
View File

@ -1,5 +1,15 @@
<script lang="ts" setup>
import { router } from '@inertiajs/vue3';
import { onMounted, ref } from 'vue';
const isMounted = ref(false);
const buttonHover = ref(false);
onMounted(() => {
setTimeout(() => {
isMounted.value = true;
}, 100);
});
const goToShuffle = () => {
router.visit('/tirage');
@ -7,7 +17,8 @@ const goToShuffle = () => {
</script>
<template>
<div class="relative flex items-center justify-center py-20 text-center sm:py-32">
<div class="relative flex items-center justify-center overflow-hidden py-20 text-center sm:py-32">
<!-- Animated background elements -->
<div class="absolute inset-0 overflow-hidden">
<div
class="absolute inset-0 bg-cover bg-center"
@ -17,23 +28,171 @@ const goToShuffle = () => {
"
></div>
<div class="absolute inset-0 bg-gradient-to-t from-[var(--light-ivory)] via-transparent to-transparent"></div>
<!-- Smooth gold particles with stable positions -->
<div
v-for="i in 15"
:key="i"
class="gold-particle absolute"
:style="{
left: `${10 + Math.random() * 80}%`,
top: `${10 + Math.random() * 80}%`,
width: `${Math.random() * 8 + 4}px`,
height: `${Math.random() * 8 + 4}px`,
animationDelay: `${Math.random() * 2}s`,
animationDuration: `${Math.random() * 15 + 15}s`,
}"
></div>
<!-- Larger, slower gold elements -->
<div
v-for="i in 5"
:key="'large-' + i"
class="large-gold-particle absolute"
:style="{
left: `${15 + Math.random() * 70}%`,
top: `${15 + Math.random() * 70}%`,
width: `${Math.random() * 20 + 15}px`,
height: `${Math.random() * 20 + 15}px`,
animationDelay: `${Math.random() * 5}s`,
animationDuration: `${Math.random() * 25 + 25}s`,
}"
></div>
</div>
<div class="relative z-10 flex max-w-3xl flex-col items-center gap-6">
<h1 class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl" style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)">
<!-- Main content with animations -->
<div class="relative z-10 flex max-w-3xl flex-col items-center gap-6 px-4">
<!-- Animated title -->
<h1
class="text-5xl font-bold text-[var(--pure-white)] md:text-7xl"
:class="{ 'animate-fade-in-up': isMounted }"
style="text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4)"
>
Révélez Votre
<span class="citadel-script text-6xl text-[var(--subtle-gold)] md:text-8xl">Empire</span>
<span class="citadel-script relative text-6xl text-[var(--subtle-gold)] md:text-8xl">
<span class="gold-glow">Voyage</span>
<!-- Gold underline accent -->
<span
class="absolute right-0 -bottom-2 left-0 h-1 scale-x-0 transform bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent transition-transform duration-1000"
:class="{ 'scale-x-100': isMounted }"
></span>
</span>
Intérieur
</h1>
<p class="max-w-2xl text-lg text-[var(--linen)]">
Embrassez la sagesse intemporelle de l’Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
<!-- Animated description -->
<p
class="max-w-2xl text-lg text-[var(--linen)] transition-all delay-500 duration-1000"
:class="{ 'translate-y-0 opacity-100': isMounted, 'translate-y-4 opacity-0': !isMounted }"
>
Embrassez la sagesse intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
confiance.
</p>
<!-- Animated button with gold effects -->
<button
class="mt-4 flex h-12 max-w-[480px] min-w-[120px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
class="group gold-button relative mt-4 flex h-14 max-w-[480px] min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-b from-[var(--subtle-gold)] to-[#c8a971] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-500"
:class="{ 'shadow-[var(--subtle-gold)]/40 shadow-lg': buttonHover }"
@click="goToShuffle"
@mouseenter="buttonHover = true"
@mouseleave="buttonHover = false"
>
<span class="truncate">Découvrir Votre Oracle</span>
<!-- Gold shine effect -->
<span
class="absolute inset-0 translate-x-[-100%] -skew-x-12 transform bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-1000 group-hover:translate-x-[100%]"
></span>
<span class="relative z-10 truncate">Découvrir Votre Oracle</span>
<!-- Animated arrow icon -->
<svg
class="relative z-10 ml-2 h-5 w-5 transition-transform duration-300"
:class="{ 'translate-x-1': buttonHover }"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</template>
<style scoped>
/* Gold particle animation */
.gold-particle {
background: radial-gradient(circle, var(--subtle-gold) 30%, transparent 70%);
border-radius: 50%;
opacity: 0.6;
animation: gentle-float 20s infinite ease-in-out;
pointer-events: none;
transform-origin: center;
}
.large-gold-particle {
background: radial-gradient(circle, var(--subtle-gold) 20%, transparent 70%);
border-radius: 50%;
opacity: 0.3;
animation: gentle-float 30s infinite ease-in-out;
pointer-events: none;
transform-origin: center;
}
@keyframes gentle-float {
0%,
100% {
transform: translateY(0) translateX(0) rotate(0deg) scale(1);
opacity: 0.6;
}
25% {
transform: translateY(-10px) translateX(5px) rotate(2deg) scale(1.02);
}
50% {
transform: translateY(-5px) translateX(8px) rotate(4deg) scale(1.05);
opacity: 0.7;
}
75% {
transform: translateY(3px) translateX(3px) rotate(2deg) scale(1.02);
}
}
/* Title animation */
.animate-fade-in-up {
animation: fadeInUp 1.2s ease-out forwards;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Gold text glow */
.gold-glow {
text-shadow:
0 0 10px rgba(212, 175, 55, 0.5),
0 0 20px rgba(212, 175, 55, 0.3),
0 0 30px rgba(212, 175, 55, 0.2);
}
/* Button styling without particle interaction */
.gold-button {
box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
transition: all 0.3s ease;
}
.gold-button:hover {
box-shadow: 0 0 25px rgba(212, 175, 55, 0.7);
transform: translateY(-2px);
}
.gold-button:active {
transform: translateY(1px);
}
</style>

2
resources/js/components/landing/HowSection.vue
View File

@ -1,6 +1,6 @@
<template>
<section class="py-20 sm:py-24">
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment Ça Marche</h2>
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Comment cela fonctionne</h2>
<div class="relative mx-auto max-w-2xl">
<div class="absolute left-1/2 h-full w-0.5 -translate-x-1/2 bg-[var(--linen)]"></div>
<div class="relative z-10 flex flex-col gap-16">

24
resources/js/components/organism/ShuffleCard/ShuffleCardPresentation.vue
View File

@ -149,20 +149,20 @@ defineExpose({ setDrawnCards });
</div>
</div>
</div>
<button
@click="goToSelection"
class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
>
<span class="truncate">Retourner à la sélection des cartes</span>
</button>
<button
@click="goToResult"
class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
>
<span class="truncate">Resultat du tirage</span>
</button>
</div>
</transition>
<button
@click="goToSelection"
class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
>
<span class="truncate">Retourner à la sélection des cartes</span>
</button>
<button
@click="goToResult"
class="mt-8 flex h-12 max-w-[480px] min-w-[200px] cursor-pointer items-center justify-center overflow-hidden rounded-full bg-[var(--midnight-blue)] px-8 text-base font-bold tracking-wide text-[var(--pure-white)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:shadow-[var(--spiritual-earth)]/30 hover:shadow-lg disabled:cursor-not-allowed disabled:bg-gray-400 disabled:hover:shadow-none"
>
<span class="truncate">Resultat du tirage</span>
</button>
</div>
</template>
</CardShuffleTemplate>

66
resources/js/components/ui/card/CardResult.vue
View File

@ -1,29 +1,65 @@
<template>
<div class="border-linen flex flex-col items-center gap-8 rounded-lg border bg-white p-8 shadow-sm md:flex-row">
<div
class="h-72 w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat"
:style="{
'background-image': `url('${imageUrl}')`,
'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)'
}"
></div>
<div class="flex flex-col gap-2">
<p class="text-spiritual-earth text-sm tracking-widest uppercase">Carte {{ cardNumber }}</p>
<h3 class="text-midnight-blue text-2xl font-bold">{{ name }}</h3>
<p class="text-midnight-blue/80 leading-relaxed">{{ description }}</p>
</div>
<div
class="border-linen flex flex-col items-center gap-6 md:gap-8 rounded-lg border bg-white p-6 md:p-8 shadow-sm transition-all duration-300 hover:shadow-md md:flex-row"
>
<!-- Card Image -->
<div class="relative">
<div
class="h-56 w-36 sm:h-64 sm:w-40 md:h-72 md:w-48 flex-shrink-0 rounded-md bg-cover bg-center bg-no-repeat transition-transform duration-300 hover:scale-105"
:style="{
'background-image': `url('${imageUrl}')`,
'box-shadow': '0 0 15px 5px rgba(215, 186, 141, 0.3)',
transform: orientation === 'reversed' ? 'rotate(180deg)' : 'none'
}"
></div>
<div
v-if="orientation === 'reversed'"
class="absolute top-2 right-2 bg-red-100 text-red-800 text-xs px-2 py-1 rounded-full"
>
Inversée
</div>
</div>
<!-- Card Content -->
<div class="flex flex-col gap-3 text-center md:text-left">
<p class="text-spiritual-earth text-xs sm:text-sm tracking-widest uppercase font-semibold">
Carte {{ cardNumber }}
</p>
<h3 class="text-midnight-blue text-xl sm:text-2xl font-bold leading-tight">
{{ name }}
</h3>
<p class="text-midnight-blue/80 text-sm sm:text-base leading-relaxed">
{{ description }}
</p>
</div>
</div>
</template>
<script setup lang="ts">
import { defineProps } from 'vue';
interface Props {
cardNumber: number;
name: string;
imageUrl: string;
orientation?: string;
description: string;
}
defineProps<Props>();
</script>
<style scoped>
div {
animation: slideUp 0.5s ease-out;
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

40
resources/js/layouts/app/LandingLayout.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts">
import { Link } from '@inertiajs/vue3';
import { Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';
const isMobileMenuOpen = ref(false);
@ -7,31 +7,20 @@ const isMobileMenuOpen = ref(false);
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value;
};
const goToShuffle = () => {
router.visit('/tirage');
};
</script>
<template>
<div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
<div class="layout-container flex h-full grow flex-col">
<header
class="bg-light-ivory/80 sticky top-0 z-50 flex items-center justify-between px-4 py-4 whitespace-nowrap backdrop-blur-sm md:px-10 lg:px-20"
class="bg-pure-white sticky top-0 z-50 flex items-center justify-between px-4 py-4 whitespace-nowrap backdrop-blur-sm md:px-10 lg:px-20"
>
<div class="text-midnight-blue flex items-center gap-3">
<svg class="text-subtle-gold h-6 w-6" fill="none" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_6_535)">
<path
clip-rule="evenodd"
d="M47.2426 24L24 47.2426L0.757355 24L24 0.757355L47.2426 24ZM12.2426 21H35.7574L24 9.24264L12.2426 21Z"
fill="currentColor"
fill-rule="evenodd"
></path>
</g>
<defs>
<clipPath id="clip0_6_535">
<rect fill="white" height="48" width="48"></rect>
</clipPath>
</defs>
</svg>
<h2 class="text-xl font-bold tracking-wide md:text-2xl">Kris Saint Ange</h2>
<img src="icon.jpg" alt="Logo" class="h-30 w-30" />
</div>
<nav class="hidden flex-1 items-center justify-center gap-10 md:flex">
@ -59,12 +48,16 @@ const toggleMobileMenu = () => {
<button
v-if="$page.url === '/'"
@click="goToShuffle"
class="bg-midnight-blue text-pure-white hover:bg-spiritual-earth flex h-10 min-w-[100px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold tracking-wide transition-all duration-300 md:px-6"
>
<span class="truncate">Commencer</span>
</button>
</div>
</header>
<div class="gradient-bg">
<h1>2</h1>
</div>
<nav v-if="isMobileMenuOpen" class="bg-light-ivory/90 flex flex-col items-center gap-4 py-4 md:hidden">
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
@ -184,4 +177,15 @@ const toggleMobileMenu = () => {
.bg-light-ivory {
background-color: var(--light-ivory);
}
.gradient-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background: linear-gradient(180deg, var(--light-ivory) 0%, var(--pure-white) 100%);
background-size: 100% 100%;
transition: background-color 0.5s ease;
}
</style>

193
resources/js/pages/cards/cardSelection.vue
View File

@ -58,64 +58,213 @@ const redirectToStripeCheckout = async (count: number) => {
// Computed to disable the free draw button if used
const isFreeDrawUsed = computed(() => tarotStore.freeDrawsRemaining <= 0);
// Hover state for cards
const hoveredCard = ref(null);
const setHover = (index) => {
hoveredCard.value = index;
};
const clearHover = () => {
hoveredCard.value = null;
};
</script>
<template>
<section class="py-20 sm:py-24">
<h2 class="mb-16 text-center text-4xl font-bold text-[var(--midnight-blue)] md:text-5xl">Explorez Nos Lectures</h2>
<section class="px-4 py-16 sm:py-20">
<h2 class="mb-12 text-center text-3xl font-bold text-[var(--midnight-blue)] md:text-4xl lg:text-5xl">
Explorez Nos <span class="text-[var(--subtle-gold)]">Lectures</span>
</h2>
<p v-if="isFreeDrawUsed" class="mb-8 text-center text-lg font-semibold text-[var(--spiritual-earth)]">
<p
v-if="isFreeDrawUsed"
class="mx-auto mb-8 max-w-2xl rounded-lg bg-[var(--light-ivory)] p-4 text-center text-lg font-semibold text-[var(--spiritual-earth)]"
>
Vous avez utilisé votre tirage gratuit ! Choisissez une option payante pour continuer.
</p>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-6 md:gap-8 lg:grid-cols-3">
<!-- Free draw -->
<div
class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] 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"
>
<!-- Decorative elements -->
<div class="absolute top-0 left-0 h-1 w-full bg-gradient-to-r from-transparent via-[var(--subtle-gold)] to-transparent"></div>
<div class="text-center">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Lecture Gratuite</h3>
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">Gratuit</p>
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v13m0-13V6a2 2 0 112 2h-2zm0 0V5.5A2.5 2.5 0 109.5 8H12zm-7 4h14M5 12a2 2 0 110-4h14a2 2 0 110 4M5 12v7a2 2 0 002 2h10a2 2 0 002-2v-7"
/>
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Lecture Gratuite</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">Gratuit</p>
<p class="mt-4 text-sm text-gray-600 md:text-base">
Une question simple, une réponse claire. Parfait pour une première expérience avec l'oracle.
</p>
</div>
<button
:disabled="isFreeDrawUsed"
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)] disabled:cursor-not-allowed disabled:opacity-50"
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)] disabled:cursor-not-allowed disabled:opacity-50"
@click="handleSelection(1)"
>
Commencer
<span>Commencer</span>
<svg
v-if="!isFreeDrawUsed"
xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
<!-- Paid options -->
<!-- Premium option -->
<div
class="flex scale-105 flex-col gap-6 rounded-2xl bg-[var(--midnight-blue)] p-8 shadow-lg ring-2 ring-[var(--subtle-gold)] transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
class="relative flex transform flex-col gap-6 rounded-2xl bg-gradient-to-b from-[var(--midnight-blue)] to-[#1a365d] 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"
>
<div class="text-center">
<h3 class="text-2xl font-bold text-[var(--pure-white)]">Profilage</h3>
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">29€</p>
<!-- Premium badge -->
<div class="absolute -top-3 left-1/2 -translate-x-1/2 transform">
<span class="rounded-full bg-[var(--subtle-gold)] px-3 py-1 text-xs font-bold text-[var(--midnight-blue)] uppercase"
>Populaire</span
>
</div>
<!-- Shine effect on hover -->
<div
class="absolute inset-0 rounded-2xl bg-gradient-to-r from-transparent via-[var(--subtle-gold)]/10 to-transparent opacity-0 transition-opacity duration-500"
:class="{ 'opacity-100': hoveredCard === 2 }"
></div>
<div class="relative z-10 text-center">
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--subtle-gold)]/20">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--pure-white)] md:text-2xl">Profilage</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">29€</p>
<p class="mt-4 text-sm text-gray-200 md:text-base">
Une analyse approfondie de votre situation avec des conseils stratégiques personnalisés.
</p>
</div>
<button
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)]"
class="group relative mt-2 flex h-12 w-full items-center justify-center overflow-hidden rounded-full bg-[var(--subtle-gold)] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--pure-white)] hover:shadow-lg"
@click="handleSelection(3)"
>
Découvrir
<!-- Button shine effect -->
<span
class="absolute inset-0 -translate-x-full -skew-x-12 transform bg-gradient-to-r from-transparent via-white/40 to-transparent transition-transform duration-700 group-hover:translate-x-full"
></span>
<span class="relative z-10">Découvrir</span>
<svg
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"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
<!-- Premium plus option -->
<div
class="flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-8 shadow-lg transition-all duration-300 hover:-translate-y-2 hover:shadow-2xl"
class="relative flex flex-col gap-6 rounded-2xl border border-[var(--linen)] bg-[var(--pure-white)] p-6 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-xl md:p-8"
@mouseenter="setHover(3)"
@mouseleave="clearHover"
>
<!-- 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(--subtle-gold)]"></div>
<div class="absolute top-0 right-0 h-6 w-6 rounded-tr-lg border-t-2 border-r-2 border-[var(--subtle-gold)]"></div>
<div class="absolute bottom-0 left-0 h-6 w-6 rounded-bl-lg border-b-2 border-l-2 border-[var(--subtle-gold)]"></div>
<div class="absolute right-0 bottom-0 h-6 w-6 rounded-br-lg border-r-2 border-b-2 border-[var(--subtle-gold)]"></div>
<div class="text-center">
<h3 class="text-2xl font-bold text-[var(--midnight-blue)]">Quadrige Doré</h3>
<p class="mt-2 text-5xl font-bold text-[var(--subtle-gold)]">99€</p>
<div class="mb-4 flex justify-center">
<div class="flex h-12 w-12 items-center justify-center rounded-full bg-[var(--light-ivory)]">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-[var(--subtle-gold)]"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"
/>
</svg>
</div>
</div>
<h3 class="text-xl font-bold text-[var(--midnight-blue)] md:text-2xl">Quadrige Doré</h3>
<p class="mt-2 text-4xl font-bold text-[var(--subtle-gold)] md:text-5xl">99€</p>
<p class="mt-4 text-sm text-gray-600 md:text-base">
Une lecture complète sur tous les aspects de votre vie : amour, carrière, spiritualité et abondance.
</p>
</div>
<button
class="mt-4 flex h-12 w-full items-center justify-center rounded-full bg-[var(--linen)] px-8 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:bg-[var(--spiritual-earth)] hover:text-[var(--pure-white)]"
class="group mt-2 flex h-12 w-full items-center justify-center rounded-full bg-gradient-to-r from-[var(--linen)] to-[#e8e0d5] px-6 font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:from-[var(--spiritual-earth)] hover:to-[#8a7f6d] hover:text-[var(--pure-white)]"
@click="handleSelection(4)"
>
Explorer
<span>Explorer</span>
<svg
xmlns="http://www.w3.org/2000/svg"
class="ml-2 h-5 w-5 transition-transform duration-300 group-hover:translate-x-1"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
</button>
</div>
</div>
</section>
</template>
<style scoped>
/* Custom animations for cards */
.card-hover {
transition: all 0.3s ease;
}
.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);
}
</style>

112
resources/js/pages/cards/resultat.vue
View File

@ -3,55 +3,83 @@ 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 { onMounted, ref } from 'vue';
import { computed, onMounted, ref } from 'vue';
const goTobooking = () => {
const goToBooking = () => {
router.visit('/rendez-vous');
};
const cards = ref([]);
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 loading = ref(false);
const hasCards = computed(() => cards.value.length > 0);
onMounted(async () => {
if (clientSessionId) {
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) {
console.error(err);
error.value = 'Failed to get cards from the server. Please contact support.';
} finally {
loading.value = false;
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="flex flex-1 justify-center px-4 py-16 sm:px-6 lg:px-8">
<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-4xl flex-col">
<div class="mb-12 text-center">
<h1 class="text-midnight-blue text-5xl font-bold">Votre Lecture</h1>
<p class="text-spiritual-earth mt-2 text-lg">
<!-- Header Section -->
<div class="mb-8 text-center md:mb-12">
<h1 class="text-midnight-blue mb-2 text-3xl font-bold sm:text-4xl md:text-5xl">Votre Lecture</h1>
<p class="text-spiritual-earth mx-auto max-w-2xl text-base sm:text-lg">
Voici une analyse détaillée de votre lecture choisie. Veuillez vérifier avant de procéder au paiement.
</p>
</div>
<div class="mb-12">
<div class="space-y-12">
<!-- 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>
<button @click="$router.back()" class="mt-4 rounded-md bg-red-600 px-4 py-2 text-white transition-colors hover:bg-red-700">
Retour
</button>
</div>
<!-- Empty State -->
<div v-else-if="!hasCards" 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>
<!-- Cards Results -->
<div v-else class="mb-8 md:mb-12">
<div class="space-y-6 md:space-y-8">
<card-result
v-for="card in cards"
:key="card.id"
:card-number="1"
v-for="(card, index) in cards"
:key="card.id || index"
:card-number="index + 1"
:name="card.name"
:image-url="card.image_url"
:orientation="card.orientation"
@ -59,14 +87,19 @@ onMounted(async () => {
/>
</div>
</div>
<div class="border-linen rounded-lg border bg-white p-8 text-center shadow-sm md:p-12">
<div class="bg-subtle-gold mx-auto mb-6 h-px w-20"></div>
<p class="text-midnight-blue/80 mx-auto mb-8 max-w-2xl text-lg leading-relaxed">
<!-- Consultation CTA -->
<div
v-if="!loading && !error"
class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
>
<div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
<p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base 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="mt-8 inline-flex h-12 max-w-[480px] min-w-[120px] flex-shrink-0 cursor-pointer items-center justify-center rounded-full bg-[var(--subtle-gold)] px-8 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-[var(--subtle-gold)]/30 hover:shadow-lg"
@click="goToBooking"
class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
>
Réserver une Consultation
</button>
@ -75,3 +108,20 @@ onMounted(async () => {
</main>
</LandingLayout>
</template>
<style scoped>
.layout-content-container {
animation: fadeIn 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
</style>

6
resources/views/app.blade.php
View File

@ -32,8 +32,8 @@
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<link rel="icon" href="/favicon.ico" sizes="any">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="icon" href="/icon.jpg" sizes="any">
<link rel="icon" href="/icin.jpg" >
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
@ -47,3 +47,5 @@
@inertia
</body>
</html>