fix gradient safari
Some checks failed
linter / quality (push) Has been cancelled
tests / ci (push) Has been cancelled

This commit is contained in:
Nyavokevin 2025-10-06 13:07:03 +03:00
parent eec6c974c9
commit 90b8137b4d
5 changed files with 39 additions and 55 deletions

View File

@ -3,21 +3,19 @@
<!-- Background image with overlay -->
<div class="absolute inset-0">
<img src="/image005.jpg" alt="Background" class="h-full w-full object-cover" />
<div class="absolute inset-0 bg-gradient-to-br from-[var(--c-purple)]/70 to-[var(--c-deep-navy)]/80" style="background: linear-gradient(135deg, rgba(76, 29, 149, 0.70), rgba(30, 27, 75, 0.80));"></div>
<div
class="absolute inset-0 bg-[#1e1b4b]/80"
style="background: linear-gradient(135deg, rgba(76, 29, 149, 0.7), rgba(30, 27, 75, 0.8))"
></div>
</div>
<div class="relative z-10 mx-auto max-w-5xl px-4">
<div
class="group relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)]/80 to-[var(--card)]/90 p-8 text-center shadow-2xl ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm md:p-12"
class="group relative overflow-hidden rounded-3xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 text-center shadow-2xl ring-1 ring-[#4c1d95]/40 backdrop-blur-sm md:p-12"
>
<!-- Soft radial glows -->
<div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
<div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
<!-- Hover gold sweep -->
<!-- <div
class="pointer-events-none absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/10 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
></div> -->
<div class="pointer-events-none absolute -top-24 -left-24 h-56 w-56 rounded-full bg-[#4c1d95]/25 blur-3xl"></div>
<div class="pointer-events-none absolute -right-24 -bottom-24 h-56 w-56 rounded-full bg-[#f59e0b]/20 blur-3xl"></div>
<!-- Subtle pattern overlay -->
<div class="absolute inset-0 opacity-10 mix-blend-soft-light">
@ -28,19 +26,19 @@
<div class="relative z-10 flex flex-col items-center">
<span
class="mb-4 inline-flex items-center rounded-full bg-[var(--c-purple)]/40 px-3 py-1 text-xs font-bold tracking-wider text-[var(--c-white)]/90 ring-1 ring-[var(--c-purple)]/40 backdrop-blur-sm"
class="mb-4 inline-flex items-center rounded-full bg-[#4c1d95]/40 px-3 py-1 text-xs font-bold tracking-wider text-white/90 ring-1 ring-[#4c1d95]/40 backdrop-blur-sm"
>Consultation</span
>
<h2 class="text-4xl font-black text-[var(--c-white)] drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-[var(--c-white)]/90 drop-shadow-md">
<h2 class="text-4xl font-black text-white drop-shadow-md md:text-5xl">Amplifiez Votre Oracle</h2>
<p class="mx-auto mt-4 max-w-2xl text-lg text-white/90 drop-shadow-md">
Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
</p>
<div class="mt-8 flex flex-col items-center gap-4 sm:flex-row sm:justify-center">
<button
@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-[var(--c-gold)] to-yellow-400 px-8 font-bold tracking-wide text-[var(--c-purple)] shadow-lg transition-all duration-300 hover:shadow-[var(--c-gold)]/40"
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">Réserver une Consultation</span>
<span
@ -49,15 +47,13 @@
</button>
<button
@click="goToOffers"
class="inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-[var(--c-white)] backdrop-blur-sm transition-all hover:bg-[var(--c-purple)]"
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]"
>
Découvrir les Lectures
</button>
</div>
<p class="mt-6 text-xs text-[var(--c-white)]/70 backdrop-blur-sm">
Paiements sécurisés. Annulation possible 24h avant la session.
</p>
<p class="mt-6 text-xs text-white/70 backdrop-blur-sm">Paiements sécurisés. Annulation possible 24h avant la session.</p>
</div>
</div>
</div>
@ -100,13 +96,4 @@ const goToOffers = () => router.visit('/tirage');
transition-property: color, background-color, transform, opacity, box-shadow;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
/* Custom color variables */
:root {
--c-purple: #4c1d95;
--c-deep-navy: #1e1b4b;
--c-white: #ffffff;
--c-gold: rgba(245, 158, 11, 0.9);
--card: #1e1b4b;
}
</style>

View File

@ -71,7 +71,7 @@
>
<button
@click="goToShuffle"
class="gold-button group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-amber-400 to-yellow-500 px-8 text-lg font-bold tracking-wide text-white transition-all duration-500 md:h-16 md:w-auto md:px-10"
class="gold-button group relative mt-4 flex h-14 w-full cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gradient-to-r from-[var(--c-gold)] to-yellow-600 px-8 text-lg font-bold tracking-wide text-white transition-all duration-500 md:h-16 md:w-auto md:px-10"
:class="{ 'shadow-lg shadow-amber-500/40': buttonHover }"
@mouseenter="buttonHover = true"
@mouseleave="buttonHover = false"

View File

@ -13,9 +13,9 @@
Plus Quun Guide,
</span>
<span class="citadel-script mt-2 block from-yellow-400 to-purple-500 text-5xl md:mt-0 md:ml-2 md:inline-block md:text-6xl">
<span class="inline-block cursor-default transition-all duration-500 hover:scale-110 hover:rotate-2">Un</span>
<span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110 hover:-rotate-2">Manuscrit</span>
<span class="inline-block cursor-default transition-all duration-500 hover:scale-110 hover:rotate-2">Stratégique</span>
<span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Un</span>
<span class="mx-2 inline-block cursor-default transition-all duration-500 hover:scale-110">Manuscrit</span>
<span class="inline-block cursor-default transition-all duration-500 hover:scale-110">Stratégique</span>
</span>
</h2>

View File

@ -34,7 +34,7 @@
<div class="relative z-10 mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
<!-- Free Tier -->
<div
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
>
<!-- Animated border effect -->
<div class="absolute inset-0 rounded-2xl opacity-0 transition-opacity duration-700 group-hover:opacity-100">
@ -91,7 +91,7 @@
</ul>
<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-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
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"
>
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Commencer</span>
<svg
@ -110,7 +110,7 @@
<!-- Featured Tier -->
<div
class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[var(--c-purple)] to-purple-900 p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
class="group relative flex scale-105 flex-col gap-6 overflow-hidden rounded-2xl bg-gradient-to-br from-[#4c1d95] to-[#371a70] p-8 shadow-lg ring-2 ring-[var(--c-gold)] transition-all duration-500 hover:-translate-y-3 hover:scale-[1.03] hover:shadow-2xl"
>
<!-- Popular badge with animation -->
<div class="absolute top-4 right-4 z-10">
@ -195,7 +195,7 @@
<!-- Premium Tier -->
<div
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
class="group relative flex flex-col gap-6 overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-3 hover:shadow-2xl"
>
<!-- Golden particles -->
<div
@ -256,7 +256,7 @@
</ul>
<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-gradient-to-r from-[var(--c-purple)]/20 to-[var(--c-purple)]/30 px-8 font-bold tracking-wide text-[var(--c-white)] transition-all duration-300 group-hover:from-[var(--c-purple)]/40 group-hover:to-[var(--c-purple)]/50 group-hover:shadow-lg"
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"
>
<span class="relative z-10 transition-transform duration-300 group-hover:translate-x-1">Explorer</span>
<svg
@ -276,7 +276,7 @@
</section>
</template>
<script setup>
<script setup lang="ts">
// Define features for each tier
const freeFeatures = ["Lecture d'une carte", 'Interprétation générale', 'Conseils rapides'];
@ -368,7 +368,6 @@ const premiumFeatures = ['Lecture de quatre cartes', 'Exploration approfondie',
--c-purple: #4c1d95;
--c-white: #ffffff;
--c-gold: rgba(245, 158, 11, 0.5);
--card: #1e1b4b;
}
/* Smooth transitions for all elements */

View File

@ -1,5 +1,5 @@
<template>
<section class="bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24" id="testimonials" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.10), rgba(76, 29, 149, 0.05));">
<section class="py-20 sm:py-24" id="testimonials" style="background: linear-gradient(to bottom, rgba(76, 29, 149, 0.1), rgba(76, 29, 149, 0.05))">
<h2 class="mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
Ce Que Nos Initiés Disent
</h2>
@ -7,7 +7,7 @@
<div class="mx-auto grid max-w-6xl grid-cols-1 gap-8 px-4 md:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 -->
<div
class="group relative overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
>
<div
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@ -15,14 +15,14 @@
<div class="relative z-10">
<div class="mb-4 flex items-center gap-4">
<div
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[var(--c-gold)]/50 transition-all duration-300 group-hover:ring-[var(--c-gold)]"
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
style="
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
"
></div>
<div>
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[var(--c-gold)]">Sophie Dubois</p>
<div class="flex text-[var(--c-gold)]">
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Sophie Dubois</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
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
@ -60,22 +60,22 @@
<!-- Testimonial 2 -->
<div
class="group relative overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
>
<div
class="absolute inset-0 bg-gradient-to-br from-transparent via-[var(--c-gold)]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
class="absolute inset-0 bg-gradient-to-br from-transparent via-[#f59e0b]/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
></div>
<div class="relative z-10">
<div class="mb-4 flex items-center gap-4">
<div
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[var(--c-gold)]/50 transition-all duration-300 group-hover:ring-[var(--c-gold)]"
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
style="
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuCYwDtbzamxSUEWCWG7j3saRw40YQI6KQIVhrw_IrJI8FZXKKHOYej_hGrkM6B5S_MiY-vZ3sWqQDJdPEiYnuH81hSwoHOwfuZWZqY_QoW2UvbtvqCVIiFzd0wk-P63V9j-AgIYgqtonlEzqX1FvYGPZrsocOKx6sArVQACeo6MrVYkm2IVwDGWFyFL0L5U9bzRD8-Zo7hRvn_1hmJxOPS72z61S3jZnDTZPQe6tX9_jJk8ei7qludF6Gs-Qb92jXbRR68FpIoxPHg');
"
></div>
<div>
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[var(--c-gold)]">Jean Martin</p>
<div class="flex text-[var(--c-gold)]">
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Jean 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
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
@ -97,7 +97,7 @@
></path>
</svg>
<svg
class="h-5 w-5 transform text-[var(--c-purple)]/30 transition-all duration-300"
class="h-5 w-5 transform text-[#4c1d95]/30 transition-all duration-300"
fill="currentColor"
viewBox="0 0 256 256"
>
@ -116,7 +116,7 @@
<!-- Testimonial 3 -->
<div
class="group relative overflow-hidden rounded-2xl border border-[var(--c-purple)]/30 bg-gradient-to-b from-[var(--card)] to-[var(--card)]/90 p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
class="group relative overflow-hidden rounded-2xl border border-[#4c1d95]/30 bg-[#1e1b4b] p-8 shadow-lg transition-all duration-500 hover:-translate-y-2 hover:shadow-xl"
>
<div
class="absolute inset-0 bg-gradient-to-br from-transparent via-purple-400/5 to-transparent opacity-0 transition-opacity duration-700 group-hover:opacity-100"
@ -124,16 +124,14 @@
<div class="relative z-10">
<div class="mb-4 flex items-center gap-4">
<div
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[var(--c-gold)]/50 transition-all duration-300 group-hover:ring-[var(--c-gold)]"
class="h-14 w-14 rounded-full bg-cover bg-center ring-2 ring-[#f59e0b]/50 transition-all duration-300 group-hover:ring-[#f59e0b]"
style="
background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuDFCMVcWHXeHbptxH6HmDJlSpMyAhuoQv_qO0rkUx2EAWltD1WisKuZBoojbWd6-4cnE_K2LXTnhhzlULi5nUeWKQAvci7rM2rDsO4-uvHW8Oe7Jl9TLi1m0-oTJg1X5wdyrxunLWT6CZuD5MQiKC0pxYbq34-HFvBJ2iQKbOgmdlkAwV7xYwWNBeEePBjlAsZ7_MSLMqCAFskClsAEFkJU2YBzQflFeD1fmpK0iXqaXYhQS_kABCFx49W9bb73ShytrweHfDUJkJg');
"
></div>
<div>
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[var(--c-gold)]">
Isabelle Lefevre
</p>
<div class="flex text-[var(--c-gold)]">
<p class="text-lg font-bold text-white transition-colors duration-300 group-hover:text-[#f59e0b]">Isabelle Lefevre</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
d="M234.5,114.38l-45.1,39.36,13.51,58.6a16,16,0,0,1-23.84,17.34l-51.11-31-51,31a16,16,0,0,1-23.84-17.34L66.61,153.8,21.5,114.38a16,16,0,0,1,9.11-28.06l59.46-5.15,23.21-55.36a15.95,15.95,0,0,1,29.44,0h0L166,81.17l59.44,5.15a16,16,0,0,1,9.11,28.06Z"
@ -202,7 +200,7 @@ export default {
.testimonial-quote::before {
content: '"';
font-size: 2rem;
color: var(--c-gold);
color: #f59e0b;
position: absolute;
left: -0.5rem;
top: -1rem;