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

fix design
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Nyavokevin 2025-09-23 15:59:19 +03:00
parent 543da49906
commit 1fdc43efe9
65 changed files with 1054 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

126
resources/css/app.css
View File

@ -10,7 +10,7 @@
@theme inline {
--font-heading: 'Montserrat', sans-serif;
--font-body: 'Montserrat', sans-serif;
--font-accent: 'Citadel Script', cursive;
--font-accent: 'Poppins', cursive;
--font-sans: var(--font-body);
@ -93,10 +93,10 @@
}
}
:root {
/* Brand variables (used by arbitrary values like bg-[var(--c-purple)]) */
/* Brand variables */
--c-black: #000000;
--c-green: #9ACE8A;
--c-purple: #241352;
--c-purple: #7D5BA6; /* softer purple primary */
--c-gold: #F0BA2D;
--c-white: #FFFFFF;
/* Additional accent stops for hero gradient */
@ -105,54 +105,100 @@
--c-orange: #f28c2a;
--c-blue: #2cc5e5;
/* App theme (Tailwind CSS v4 design tokens) */
--background: var(--c-black);
--foreground: var(--c-white);
/* Light (default) theme — softer, not too bright */
--background: #f5effa;
--foreground: #1f1630;
--card: #0b0b0b;
--card-foreground: var(--c-white);
--card: #ffffff;
--card-foreground: #1f1630;
--popover: #0b0b0b;
--popover-foreground: var(--c-white);
--popover: #ffffff;
--popover-foreground: #1f1630;
--primary: var(--c-purple);
--primary-foreground: var(--c-white);
--secondary: #171717;
--secondary-foreground: var(--c-white);
--secondary: #ede7f5;
--secondary-foreground: #1f1630;
--muted: #0a0a0a;
--muted-foreground: #9ca3af;
--muted: #eee7f7;
--muted-foreground: #5b4b72;
--accent: var(--c-gold);
--accent-foreground: var(--c-black);
--accent: #B89BD6;
--accent-foreground: #1f1630;
--destructive: #ef4444;
--destructive-foreground: var(--c-white);
--border: #1f2937;
--input: #2d2d2d;
--border: #e2d7f2;
--input: #ded1ef;
--ring: var(--c-purple);
--chart-1: var(--c-purple);
--chart-2: var(--c-gold);
--chart-2: #B89BD6;
--chart-3: var(--c-green);
--chart-4: #6b7280;
--chart-5: #374151;
--chart-4: #7a6b91;
--chart-5: #523f6a;
--radius: 0.5rem;
/* Sidebar */
--sidebar-background: #0b0b0b;
--sidebar-foreground: var(--c-white);
--sidebar-background: #faf7ff;
--sidebar-foreground: #1f1630;
--sidebar-primary: var(--c-purple);
--sidebar-primary-foreground: var(--c-white);
--sidebar-accent: var(--c-gold);
--sidebar-accent-foreground: var(--c-black);
--sidebar-border: #1f2937;
--sidebar-accent: #B89BD6;
--sidebar-accent-foreground: #1f1630;
--sidebar-border: #e2d7f2;
--sidebar-ring: var(--c-purple);
}
/* Dim dark mode overrides */
.dark {
--background: #221a2b;
--foreground: #ece6f4;
--card: #2b2136;
--card-foreground: #f1ecf7;
--popover: #2b2136;
--popover-foreground: #f1ecf7;
--primary: var(--c-purple);
--primary-foreground: var(--c-white);
--secondary: #2e2439;
--secondary-foreground: #eae4f3;
--muted: #3a2d49;
--muted-foreground: #c8bfe0;
--accent: #B89BD6;
--accent-foreground: #1f1630;
--destructive: #ff7676;
--destructive-foreground: var(--c-white);
--border: #4c3a60;
--input: #4c3a60;
--ring: #9c7ca5;
--chart-1: var(--c-purple);
--chart-2: #B89BD6;
--chart-3: var(--c-green);
--chart-4: #7a6b91;
--chart-5: #523f6a;
--sidebar-background: #2b2136;
--sidebar-foreground: #f1ecf7;
--sidebar-primary: var(--c-purple);
--sidebar-primary-foreground: var(--c-white);
--sidebar-accent: #B89BD6;
--sidebar-accent-foreground: #1f1630;
--sidebar-border: #4c3a60;
--sidebar-ring: #9c7ca5;
}
/* Legacy aliases so existing components using old variables keep working */
:root {
--midnight-blue: var(--c-white); /* legacy text color now maps to white for dark theme */
@ -194,6 +240,22 @@
.text-shadow-custom {
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
/* Gentle hero overlay and background image helper */
.bg-hero {
background-image: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.45)), var(--hero-image, url('/images/hero.jpg'));
background-size: cover;
background-position: center;
}
/* Softer lilac gradient for headings */
.text-accent-gradient {
background: linear-gradient(45deg, #B89BD6, #7D5BA6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
}
@font-face {
@ -224,9 +286,17 @@
}
@font-face {
font-family: 'Montserrat';
src: url('@/fonts/Montserrat/static/Montserrat-Bold.ttf') format('truetype');
font-family: 'Montserrat ExtraBold';
src: url('@/fonts/Montserrat/static/Montserrat-ExtraBold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Poppins';
src: url('@/fonts/Poppins/Poppins-Bold.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

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

@ -1,54 +1,63 @@
<template>
<section
class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-cover bg-center bg-no-repeat px-4 py-24 text-center"
class="relative flex min-h-screen w-full items-center justify-center overflow-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black px-4 py-24"
>
<div class="pointer-events-none absolute inset-0 bg-gradient-to-b from-[var(--c-purple)]/60 via-[var(--c-deep-navy)]/60 to-black/80"></div>
<!-- Gold particles background effect -->
<!-- Background mystical elements -->
<div class="absolute inset-0 overflow-hidden">
<!-- Subtle cosmic pattern -->
<div class="absolute inset-0 opacity-10">
<div class="cosmic-pattern"></div>
</div>
<!-- Mystic glow effects -->
<div class="mystic-glow glow-1"></div>
<div class="mystic-glow glow-2"></div>
<div class="mystic-glow glow-3"></div>
<!-- Gold particles -->
<div
v-for="i in 30"
v-for="i in 25"
:key="i"
class="gold-particle absolute"
:style="{
left: `${Math.random() * 100}%`,
top: `${Math.random() * 100}%`,
width: `${Math.random() * 8 + 2}px`,
height: `${Math.random() * 8 + 2}px`,
width: `${Math.random() * 6 + 2}px`,
height: `${Math.random() * 6 + 2}px`,
animationDelay: `${Math.random() * 5}s`,
animationDuration: `${Math.random() * 10 + 10}s`,
animationDuration: `${Math.random() * 8 + 8}s`,
}"
></div>
</div>
<div class="relative z-10 mx-auto flex max-w-5xl flex-col items-center justify-between lg:flex-row">
<!-- Text Content -->
<div class="mb-10 lg:mb-0 lg:w-1/2">
<div class="relative z-10 mx-auto flex max-w-6xl flex-col items-center lg:flex-row lg:items-center">
<!-- Text Content - Left Side -->
<div class="mb-10 lg:mb-0 lg:w-1/2 lg:pr-10">
<h1
class="mb-4 transform text-4xl font-black text-white transition-all duration-700 md:text-6xl"
class="mb-6 transform text-4xl font-black text-white transition-all duration-700 md:text-5xl lg:text-6xl"
:class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
>
Révélez Votre Voyage Intérieur
<span class="text-accent-gradient">Découvrez Votre Chemin</span> avec les Lectures Mystiques
</h1>
<p
class="mb-8 transform text-lg text-white/80 transition-all delay-200 duration-1000 md:text-xl"
:class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
>
Embrassez la sagesse intemporelle de l'Oracle de Kris Saint Ange, un guide stratégique pour naviguer votre destin avec clarté et
confiance.
Débloquez la sagesse de l'univers grâce à des lectures de cartes oracle personnalisées. Choisissez votre tirage et commencez votre
voyage de découverte de soi.
</p>
<!-- Buttons -->
<div
class="flex transform flex-wrap justify-center gap-6 transition-all delay-500 duration-1000"
class="flex transform flex-wrap gap-4 transition-all delay-500 duration-1000"
:class="isMounted ? 'translate-y-0 opacity-100' : 'translate-y-10 opacity-0'"
>
<button
@click="goToShuffle"
class="gold-trail-btn group relative inline-flex h-14 min-w-[180px] 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:-translate-y-0.5 hover:shadow-[var(--c-gold)]/40"
class="mystic-btn mystic-btn-primary group relative inline-flex h-12 min-w-[160px] items-center justify-center overflow-hidden rounded-full px-6 font-bold tracking-wide text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 md:h-14 md:min-w-[180px] md:px-8"
>
<span class="relative z-10 truncate">Essayez 1 carte gratuite</span>
<span class="relative z-10 truncate">Tirer 1 Carte</span>
<span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span>
@ -56,39 +65,48 @@
<button
@click="goToShuffle"
class="gold-trail-btn inline-flex h-14 min-w-[180px] items-center justify-center rounded-full border-2 border-[var(--c-purple)] bg-transparent px-8 font-bold text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-[var(--c-purple)]"
class="mystic-btn mystic-btn-secondary inline-flex h-12 min-w-[160px] items-center justify-center rounded-full border-2 px-6 font-bold text-white transition-all duration-300 hover:-translate-y-0.5 md:h-14 md:min-w-[180px] md:px-8"
>
<span class="truncate">Découvrir les tirages</span>
<span class="truncate">Tirer 3 Cartes</span>
</button>
</div>
</div>
<!-- Vertical zig-zag with only two larger images -->
<div class="relative flex h-[32rem] items-center justify-center lg:w-1/2">
<div class="relative h-full w-[26rem]">
<!-- First image (top left) -->
<div class="zig-item zig-item-1">
<img class="zig-img" src="/background/IMG_2230.jpg" alt="Oracle Image 1" />
<!-- Oracle Images - Right Side -->
<div class="relative lg:w-1/2">
<div class="oracle-images-container relative h-80 w-full md:h-96 lg:h-[500px]">
<!-- Main oracle image -->
<div class="oracle-image-main absolute inset-0 flex items-center justify-center">
<div class="relative h-full w-full max-w-md">
<img
src="/background/IMG_2230.jpg"
alt="Oracle Card"
class="oracle-img h-full w-full rounded-2xl object-cover shadow-2xl"
/>
<div class="border-gold/50 absolute inset-0 rounded-2xl border-2 shadow-lg"></div>
<div class="gold-frame"></div>
</div>
</div>
<!-- Second image (bottom right) -->
<div class="zig-item zig-item-2">
<img class="zig-img" src="/background/IMG_2245.jpg" alt="Oracle Image 2" />
<!-- Secondary image floating to the side -->
<div class="oracle-image-secondary absolute right-0 bottom-10 z-10 md:right-10">
<div class="relative h-48 w-32 md:h-56 md:w-40">
<img
src="/background/IMG_2245.jpg"
alt="Oracle Card"
class="oracle-img h-full w-full rounded-xl object-cover shadow-xl"
/>
<div class="border-gold/30 absolute inset-0 rounded-xl border-2 shadow-lg"></div>
</div>
</div>
<!-- gold particles -->
<span
v-for="i in 18"
:key="'gp-' + i"
class="gold-particle"
:style="{
left: `${5 + ((i * 11) % 90)}%`,
top: `${10 + ((i * 17) % 80)}%`,
width: `${6 + (i % 5)}px`,
height: `${6 + (i % 5)}px`,
animationDelay: `${(i % 7) * 0.3}s`,
}"
></span>
<!-- Decorative elements -->
<div class="floating-symbols">
<div class="symbol symbol-1">✦</div>
<div class="symbol symbol-2">✧</div>
<div class="symbol symbol-3">☆</div>
<div class="symbol symbol-4">★</div>
</div>
</div>
</div>
</div>
@ -114,15 +132,25 @@ const goToShuffle = () => {
<style scoped>
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@keyframes floatSlow {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
33% {
transform: translateY(-20px) rotate(5deg);
transform: translateY(-8px) rotate(2deg);
}
66% {
transform: translateY(10px) rotate(-5deg);
transform: translateY(4px) rotate(-2deg);
}
}
@ -152,12 +180,83 @@ const goToShuffle = () => {
}
}
.animate-float {
animation: float 10s ease-in-out infinite;
@keyframes mysticGlow {
0%,
100% {
opacity: 0.3;
transform: scale(1);
}
50% {
opacity: 0.6;
transform: scale(1.1);
}
}
.animate-text-shine {
animation: textShine 2s ease-in-out infinite alternate;
@keyframes symbolFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
opacity: 0.7;
}
50% {
transform: translateY(-15px) rotate(180deg);
opacity: 1;
}
}
/* Cosmic pattern background */
.cosmic-pattern {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 215, 0, 0.05) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(125, 91, 166, 0.1) 0%, transparent 50%);
background-size:
50% 50%,
30% 30%,
40% 40%;
background-position:
0 0,
100% 100%,
50% 50%;
}
/* Mystic glow effects */
.mystic-glow {
position: absolute;
border-radius: 50%;
filter: blur(60px);
animation: mysticGlow 8s ease-in-out infinite;
pointer-events: none;
}
.glow-1 {
width: 300px;
height: 300px;
background: radial-gradient(circle, rgba(125, 91, 166, 0.3) 0%, transparent 70%);
top: 10%;
left: 10%;
animation-delay: 0s;
}
.glow-2 {
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, transparent 70%);
bottom: 10%;
right: 10%;
animation-delay: 2s;
}
.glow-3 {
width: 250px;
height: 250px;
background: radial-gradient(circle, rgba(79, 70, 229, 0.2) 0%, transparent 70%);
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
animation-delay: 4s;
}
/* Gold particles */
@ -169,72 +268,143 @@ const goToShuffle = () => {
pointer-events: none;
}
/* Gold trail effect */
.gold-trail-btn {
/* Oracle images styling */
.oracle-images-container {
perspective: 1000px;
}
.oracle-image-main {
animation: floatSlow 8s ease-in-out infinite;
}
.oracle-image-secondary {
animation: float 6s ease-in-out infinite;
animation-delay: 1s;
}
.oracle-img {
transition: transform 0.3s ease;
}
.oracle-image-main:hover .oracle-img,
.oracle-image-secondary:hover .oracle-img {
transform: scale(1.02);
}
.gold-frame {
position: absolute;
top: -5px;
left: -5px;
right: -5px;
bottom: -5px;
border: 2px solid transparent;
border-radius: 24px;
background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.5), transparent) border-box;
mask:
linear-gradient(#fff 0 0) padding-box,
linear-gradient(#fff 0 0);
mask-composite: exclude;
animation: frameGlow 3s ease-in-out infinite alternate;
}
@keyframes frameGlow {
0% {
opacity: 0.5;
}
100% {
opacity: 1;
}
}
/* Floating symbols */
.floating-symbols {
position: absolute;
inset: 0;
pointer-events: none;
}
.symbol {
position: absolute;
color: rgba(255, 215, 0, 0.6);
font-size: 1.5rem;
animation: symbolFloat 10s ease-in-out infinite;
}
.symbol-1 {
top: 10%;
left: 15%;
animation-delay: 0s;
}
.symbol-2 {
top: 70%;
left: 20%;
animation-delay: 2s;
}
.symbol-3 {
top: 30%;
right: 25%;
animation-delay: 4s;
}
.symbol-4 {
top: 80%;
right: 15%;
animation-delay: 6s;
}
/* Buttons */
.mystic-btn {
position: relative;
overflow: hidden;
}
.gold-trail-btn::before {
.mystic-btn-primary {
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
}
.mystic-btn-primary:hover {
box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
}
.mystic-btn-secondary {
border-color: rgba(255, 215, 0, 0.5);
background: rgba(255, 215, 0, 0.1);
backdrop-filter: blur(10px);
}
.mystic-btn-secondary:hover {
background: rgba(255, 215, 0, 0.2);
border-color: rgba(255, 215, 0, 0.8);
}
.mystic-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.2), transparent);
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
z-index: 1;
}
.gold-trail-btn:hover::before {
.mystic-btn:hover::before {
transform: translateX(100%);
}
/* Zig-zag images - Only two larger images */
@keyframes floatSlow {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-12px);
}
}
.zig-item {
position: absolute;
width: 18rem;
height: 24rem;
animation: floatSlow 7s ease-in-out infinite;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.zig-item-1 {
top: 5%;
left: 5%;
transform: rotate(-8deg);
animation-delay: 0s;
}
.zig-item-2 {
bottom: 5%;
right: 5%;
transform: rotate(6deg);
animation-delay: 0.5s;
}
.zig-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 1rem;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
border: 3px solid rgba(255, 215, 0, 0.4);
/* Text gradient */
.text-accent-gradient {
background: linear-gradient(135deg, #ffd700 0%, #f59e0b 50%, #d97706 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: textShine 3s ease-in-out infinite alternate;
}
/* Custom color variables */
@ -244,25 +414,28 @@ const goToShuffle = () => {
--c-gold: rgba(245, 158, 11, 0.7);
}
/* Gold particles (refined) */
@keyframes driftShimmer {
0%,
100% {
opacity: 0.35;
transform: translateY(0) scale(1);
}
50% {
opacity: 0.9;
transform: translateY(-10px) scale(1.1);
.border-gold {
border-color: rgba(255, 215, 0, 0.5);
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.oracle-images-container {
height: 400px;
}
}
.gold-particle {
position: absolute;
border-radius: 9999px;
background: radial-gradient(circle, rgba(255, 215, 128, 0.9) 0%, rgba(255, 215, 128, 0.45) 50%, transparent 70%);
filter: blur(0.5px);
animation: driftShimmer 8s ease-in-out infinite;
z-index: 3;
@media (max-width: 768px) {
.oracle-images-container {
height: 300px;
}
.oracle-image-secondary {
display: none;
}
.floating-symbols {
display: none;
}
}
</style>

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

@ -1,33 +1,35 @@
<template>
<section class="relative overflow-hidden bg-gradient-to-b from-[var(--c-purple)]/10 to-[var(--c-purple)]/5 py-20 sm:py-24">
<!-- Background images with transparency -->
<div class="absolute inset-0 opacity-10">
<div class="absolute top-0 left-0 h-1/3 w-1/3 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
<div class="absolute right-0 bottom-0 h-1/3 w-1/3 bg-[url('/background/IMG_2252.jpg')] bg-cover bg-center mix-blend-soft-light"></div>
<!-- Single elegant background image -->
<div class="absolute inset-0">
<div class="absolute inset-0 bg-[url('/background/IMG_2254.jpg')] bg-cover bg-center opacity-20 mix-blend-soft-light"></div>
<div class="absolute inset-0 bg-gradient-to-b from-black/40 via-transparent to-black/30"></div>
</div>
<!-- Animated floating elements -->
<!-- Subtle floating elements -->
<div class="pointer-events-none absolute inset-0 overflow-hidden">
<div
v-for="i in 8"
v-for="i in 12"
:key="'float-' + i"
class="absolute rounded-full opacity-20"
class="absolute opacity-10"
:class="{
'bg-[var(--c-gold)]': i % 2 === 0,
'bg-[var(--c-purple)]': i % 2 === 1,
'text-[var(--c-gold)]': i % 3 === 0,
'text-[var(--c-purple)]': i % 3 === 1,
'text-white': i % 3 === 2,
}"
:style="{
width: `${15 + i * 3}px`,
height: `${15 + i * 3}px`,
top: `${(i * 12) % 100}%`,
left: `${(i * 15) % 100}%`,
animation: `float ${12 + i}s ease-in-out infinite`,
animationDelay: `${i * 0.5}s`,
fontSize: `${8 + i * 2}px`,
top: `${(i * 15) % 100}%`,
left: `${(i * 12) % 100}%`,
animation: `float ${15 + i * 2}s ease-in-out infinite`,
animationDelay: `${i * 0.3}s`,
}"
></div>
>
{{ i % 3 === 0 ? '✦' : i % 3 === 1 ? '✧' : '☆' }}
</div>
</div>
<h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 hover:scale-105 md:text-5xl">
<h2 class="relative z-10 mb-16 transform text-center text-4xl font-bold text-white transition-all duration-700 md:text-5xl">
<span class="relative inline-block">
Comment cela fonctionne
<span class="absolute -bottom-2 left-1/4 h-1 w-1/2 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></span>
@ -35,21 +37,21 @@
</h2>
<div class="relative mx-auto max-w-4xl">
<!-- Animated connecting line with glow effect -->
<div class="absolute top-0 bottom-0 left-1/2 w-1 -translate-x-1/2">
<div class="relative h-full w-full bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-60">
<div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/30 to-transparent"></div>
<!-- Elegant connecting line -->
<div class="absolute top-0 bottom-0 left-1/2 w-0.5 -translate-x-1/2">
<div class="relative h-full w-full">
<div class="absolute inset-0 bg-gradient-to-b from-[var(--c-gold)] via-[var(--c-purple)] to-[var(--c-gold)] opacity-40"></div>
<div class="animate-pulse-slow absolute inset-0 bg-gradient-to-b from-transparent via-white/10 to-transparent"></div>
</div>
</div>
<!-- Glowing orbs along the line -->
<!-- Minimal orbs along the line -->
<div
v-for="i in 3"
:key="'orb-' + i"
class="animate-orb-pulse absolute left-1/2 h-6 w-6 -translate-x-1/2 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-80 shadow-lg"
class="absolute left-1/2 h-4 w-4 -translate-x-1/2 rounded-full bg-[var(--c-gold)] opacity-80"
:style="{
top: `${i * 33}%`,
animationDelay: `${i * 0.3}s`,
}"
></div>
@ -58,35 +60,27 @@
<div class="group flex items-center gap-8">
<div class="relative flex-shrink-0">
<div
class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
>
<span class="z-10">1</span>
<div
class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
></div>
</div>
<!-- Decorative sparkles -->
<!-- Subtle sparkles -->
<div
v-for="i in 3"
:key="'sparkle1-' + i"
class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
:class="{
'top-0 right-0 text-lg': i === 1,
'bottom-0 left-0 text-sm': i === 2,
'top-1/2 -right-2 text-xs': i === 3,
}"
:style="{ animationDelay: `${i * 0.2}s` }"
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
<span>Choisissez Votre Lecture</span>
<span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
</h3>
<p
class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
>
Sélectionnez le type de lecture qui correspond à vos besoins et aspirations actuelles.
</p>
@ -96,36 +90,28 @@
<!-- Step 2 -->
<div class="group flex items-center justify-end gap-8 text-right">
<div class="transform pr-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-2 flex items-center justify-end gap-2 text-2xl font-bold text-white">
<span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
<h3 class="mb-3 flex items-center justify-end gap-2 text-xl font-bold text-white">
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
<span>Recevez Votre Interprétation</span>
</h3>
<p
class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
>
Obtenez une analyse personnalisée et détaillée de votre tirage directement dans votre boîte mail.
</p>
</div>
<div class="relative flex-shrink-0">
<div
class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
>
<span class="z-10">2</span>
<div
class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
></div>
</div>
<!-- Decorative sparkles -->
<!-- Subtle sparkles -->
<div
v-for="i in 3"
:key="'sparkle2-' + i"
class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
:class="{
'top-0 left-0 text-lg': i === 1,
'right-0 bottom-0 text-sm': i === 2,
'top-1/2 -left-2 text-xs': i === 3,
}"
:style="{ animationDelay: `${i * 0.2}s` }"
class="absolute -top-1 -left-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
@ -136,35 +122,27 @@
<div class="group flex items-center gap-8">
<div class="relative flex-shrink-0">
<div
class="relative flex h-24 w-24 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-3xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30 group-hover:shadow-xl"
class="relative flex h-20 w-20 transform items-center justify-center rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 text-2xl font-bold text-black shadow-lg transition-all duration-500 group-hover:scale-110 group-hover:shadow-[var(--c-gold)]/30"
>
<span class="z-10">3</span>
<div
class="absolute inset-0 animate-ping rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 duration-1000 group-hover:opacity-100"
class="absolute inset-0 rounded-full bg-gradient-to-br from-[var(--c-gold)] to-yellow-400 opacity-0 transition-opacity duration-500 group-hover:opacity-30"
></div>
</div>
<!-- Decorative sparkles -->
<!-- Subtle sparkles -->
<div
v-for="i in 3"
:key="'sparkle3-' + i"
class="absolute text-[var(--c-gold)] opacity-0 transition-opacity duration-700 group-hover:opacity-100"
:class="{
'top-0 right-0 text-lg': i === 1,
'bottom-0 left-0 text-sm': i === 2,
'top-1/2 -right-2 text-xs': i === 3,
}"
:style="{ animationDelay: `${i * 0.2}s` }"
class="absolute -top-1 -right-1 text-lg text-[var(--c-gold)] opacity-0 transition-all duration-500 group-hover:scale-150 group-hover:opacity-100"
>
✦
</div>
</div>
<div class="transform pl-4 transition-all duration-500 group-hover:-translate-y-1">
<h3 class="mb-2 flex items-center gap-2 text-2xl font-bold text-white">
<h3 class="mb-3 flex items-center gap-2 text-xl font-bold text-white">
<span>Appliquez la Sagesse</span>
<span class="text-xl text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
<span class="text-lg text-[var(--c-gold)] opacity-0 transition-opacity duration-500 group-hover:opacity-100">✦</span>
</h3>
<p
class="max-w-md rounded-xl border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/20 group-hover:bg-black/30"
class="max-w-md rounded-lg border border-white/10 bg-black/20 p-4 text-white/80 backdrop-blur-sm transition-all duration-500 group-hover:border-[var(--c-gold)]/30 group-hover:bg-black/40"
>
Mettez en pratique les conseils et perspectives reçues pour transformer votre quotidien.
</p>
@ -172,9 +150,9 @@
</div>
</div>
<!-- Animated decorative elements -->
<div class="absolute -top-10 -left-10 h-24 w-24 animate-pulse rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
<div class="absolute -right-10 -bottom-10 h-32 w-32 animate-pulse rounded-full bg-[var(--c-purple)]/20 blur-xl delay-1000"></div>
<!-- Subtle decorative elements -->
<div class="absolute -top-8 left-10 h-16 w-16 rounded-full bg-[var(--c-gold)]/10 blur-xl"></div>
<div class="absolute right-10 -bottom-8 h-20 w-20 rounded-full bg-[var(--c-purple)]/20 blur-xl"></div>
</div>
</section>
</template>
@ -187,21 +165,27 @@ export default {
const observerOptions = {
root: null,
rootMargin: '0px',
threshold: 0.2,
threshold: 0.1,
};
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in-up');
// Stagger animation for each step
const steps = entry.target.closest('.relative').querySelectorAll('.group');
steps.forEach((step, index) => {
step.style.transitionDelay = `${index * 0.2}s`;
});
}
});
}, observerOptions);
// Observe each step
document.querySelectorAll('.group').forEach((step) => {
observer.observe(step);
});
// Observe the container
const container = document.querySelector('.relative.mx-auto');
if (container) {
observer.observe(container);
}
},
};
</script>
@ -212,12 +196,11 @@ export default {
0%,
100% {
transform: translateY(0) rotate(0deg);
opacity: 0.1;
}
33% {
transform: translateY(-8px) rotate(2deg);
}
66% {
transform: translateY(5px) rotate(-2deg);
50% {
transform: translateY(-10px) rotate(180deg);
opacity: 0.3;
}
}
@ -231,61 +214,95 @@ export default {
}
}
@keyframes orb-pulse {
0%,
100% {
transform: translateX(-50%) scale(1);
box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.7);
}
70% {
transform: translateX(-50%) scale(1.05);
box-shadow: 0 0 0 10px rgba(245, 158, 11, 0);
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
}
/* Scroll animation */
.group {
opacity: 0;
transform: translateY(20px);
transform: translateY(30px);
transition:
opacity 0.6s ease-out,
transform 0.6s ease-out;
}
.group:nth-child(1) {
transition-delay: 0.1s;
}
.group:nth-child(2) {
transition-delay: 0.3s;
}
.group:nth-child(3) {
transition-delay: 0.5s;
}
.animate-fade-in-up {
opacity: 1;
transform: translateY(0);
}
.animate-pulse-slow {
animation: pulse-slow 3s ease-in-out infinite;
/* Button styles */
.mystic-btn {
position: relative;
overflow: hidden;
}
.animate-orb-pulse {
animation: orb-pulse 2s infinite;
.mystic-btn-primary {
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
}
.mystic-btn-primary:hover {
box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
}
.mystic-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
z-index: 1;
}
.mystic-btn:hover::before {
transform: translateX(100%);
}
/* Custom color variables */
:root {
--c-purple: #4c1d95;
--c-gold: rgba(245, 158, 11, 0.9);
--linen: #faf0e6;
}
/* Smooth transitions for all elements */
/* Responsive design */
@media (max-width: 768px) {
.group {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.group:nth-child(2) {
flex-direction: column-reverse;
}
.transform.pl-4,
.transform.pr-4 {
padding-left: 0;
padding-right: 0;
}
.relative.mx-auto {
padding: 0 1rem;
}
.absolute.left-1\/2 {
display: none;
}
}
/* Smooth transitions */
* {
transition-property: color, background-color, transform, opacity, box-shadow, border-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition:
color 0.3s ease,
background-color 0.3s ease,
transform 0.3s ease,
opacity 0.3s ease;
}
</style>

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

@ -162,7 +162,7 @@ defineExpose({ setDrawnCards });
:class="{ spread: isSpread, drawing: isDrawing, restacking: isRestacking, finished: isFinished }"
@click="handleDeckClick"
>
<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="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 v-for="i in remainingDeckSize" :key="i" class="card group/card" :style="getCardStyle(i)" @click="onCardClick(i, $event)">
<div class="card-back">
@ -185,9 +185,6 @@ defineExpose({ setDrawnCards });
</div>
<div class="card-face card-known-back">
<img :src="`/cards/${card.id + 1}.png`" :alt="card.name" class="card-image" />
<div class="card-description-overlay">
<h3>{{ card.name }}</h3>
</div>
</div>
</div>
</div>
@ -229,8 +226,7 @@ defineExpose({ setDrawnCards });
.card {
width: 250px;
height: 400px;
background: radial-gradient(circle at 30% 20%, rgba(240, 186, 45, 0.06), transparent 60%),
linear-gradient(145deg, #111, #1b1b1b);
background: radial-gradient(circle at 30% 20%, rgba(240, 186, 45, 0.06), transparent 60%), linear-gradient(145deg, #111, #1b1b1b);
border-radius: 18px;
border: 1px solid rgba(128, 90, 213, 0.25);
box-shadow:

93
resources/js/fonts/Roboto/OFL.txt Normal file
View File

@ -0,0 +1,93 @@
Copyright 2011 The Roboto Project Authors (https://github.com/googlefonts/roboto-classic)
This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at:
https://openfontlicense.org
-----------------------------------------------------------
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
-----------------------------------------------------------
PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide
development of collaborative font projects, to support the font creation
efforts of academic and linguistic communities, and to provide a free and
open framework in which fonts may be shared and improved in partnership
with others.
The OFL allows the licensed fonts to be used, studied, modified and
redistributed freely as long as they are not sold by themselves. The
fonts, including any derivative works, can be bundled, embedded,
redistributed and/or sold with any software provided that any reserved
names are not used by derivative works. The fonts and derivatives,
however, cannot be released under any other type of license. The
requirement for fonts to remain under this license does not apply
to any document created using the fonts or their derivatives.
DEFINITIONS
"Font Software" refers to the set of files released by the Copyright
Holder(s) under this license and clearly marked as such. This may
include source files, build scripts and documentation.
"Reserved Font Name" refers to any names specified as such after the
copyright statement(s).
"Original Version" refers to the collection of Font Software components as
distributed by the Copyright Holder(s).
"Modified Version" refers to any derivative made by adding to, deleting,
or substituting -- in part or in whole -- any of the components of the
Original Version, by changing formats or by porting the Font Software to a
new environment.
"Author" refers to any designer, engineer, programmer, technical
writer or other person who contributed to the Font Software.
PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining
a copy of the Font Software, to use, study, copy, merge, embed, modify,
redistribute, and sell modified and unmodified copies of the Font
Software, subject to the following conditions:
1) Neither the Font Software nor any of its individual components,
in Original or Modified Versions, may be sold by itself.
2) Original or Modified Versions of the Font Software may be bundled,
redistributed and/or sold with any software, provided that each copy
contains the above copyright notice and this license. These can be
included either as stand-alone text files, human-readable headers or
in the appropriate machine-readable metadata fields within text or
binary files as long as those fields can be easily viewed by the user.
3) No Modified Version of the Font Software may use the Reserved Font
Name(s) unless explicit written permission is granted by the corresponding
Copyright Holder. This restriction only applies to the primary font name as
presented to the users.
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
Software shall not be used to promote, endorse or advertise any
Modified Version, except to acknowledge the contribution(s) of the
Copyright Holder(s) and the Author(s) or with their explicit written
permission.
5) The Font Software, modified or unmodified, in part or in whole,
must be distributed entirely under this license, and must not be
distributed under any other license. The requirement for fonts to
remain under this license does not apply to any document created
using the Font Software.
TERMINATION
This license becomes null and void if any of the above conditions are
not met.
DISCLAIMER
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
OTHER DEALINGS IN THE FONT SOFTWARE.

118
resources/js/fonts/Roboto/README.txt Normal file
View File

@ -0,0 +1,118 @@
Roboto Variable Font
====================
This download contains Roboto as both variable fonts and static fonts.
Roboto is a variable font with these axes:
wdth
wght
This means all the styles are contained in these files:
Roboto-VariableFont_wdth,wght.ttf
Roboto-Italic-VariableFont_wdth,wght.ttf
If your app fully supports variable fonts, you can now pick intermediate styles
that aren’t available as static fonts. Not all apps support variable fonts, and
in those cases you can use the static font files for Roboto:
static/Roboto_Condensed-Thin.ttf
static/Roboto_Condensed-ExtraLight.ttf
static/Roboto_Condensed-Light.ttf
static/Roboto_Condensed-Regular.ttf
static/Roboto_Condensed-Medium.ttf
static/Roboto_Condensed-SemiBold.ttf
static/Roboto_Condensed-Bold.ttf
static/Roboto_Condensed-ExtraBold.ttf
static/Roboto_Condensed-Black.ttf
static/Roboto_SemiCondensed-Thin.ttf
static/Roboto_SemiCondensed-ExtraLight.ttf
static/Roboto_SemiCondensed-Light.ttf
static/Roboto_SemiCondensed-Regular.ttf
static/Roboto_SemiCondensed-Medium.ttf
static/Roboto_SemiCondensed-SemiBold.ttf
static/Roboto_SemiCondensed-Bold.ttf
static/Roboto_SemiCondensed-ExtraBold.ttf
static/Roboto_SemiCondensed-Black.ttf
static/Roboto-Thin.ttf
static/Roboto-ExtraLight.ttf
static/Roboto-Light.ttf
static/Roboto-Regular.ttf
static/Roboto-Medium.ttf
static/Roboto-SemiBold.ttf
static/Roboto-Bold.ttf
static/Roboto-ExtraBold.ttf
static/Roboto-Black.ttf
static/Roboto_Condensed-ThinItalic.ttf
static/Roboto_Condensed-ExtraLightItalic.ttf
static/Roboto_Condensed-LightItalic.ttf
static/Roboto_Condensed-Italic.ttf
static/Roboto_Condensed-MediumItalic.ttf
static/Roboto_Condensed-SemiBoldItalic.ttf
static/Roboto_Condensed-BoldItalic.ttf
static/Roboto_Condensed-ExtraBoldItalic.ttf
static/Roboto_Condensed-BlackItalic.ttf
static/Roboto_SemiCondensed-ThinItalic.ttf
static/Roboto_SemiCondensed-ExtraLightItalic.ttf
static/Roboto_SemiCondensed-LightItalic.ttf
static/Roboto_SemiCondensed-Italic.ttf
static/Roboto_SemiCondensed-MediumItalic.ttf
static/Roboto_SemiCondensed-SemiBoldItalic.ttf
static/Roboto_SemiCondensed-BoldItalic.ttf
static/Roboto_SemiCondensed-ExtraBoldItalic.ttf
static/Roboto_SemiCondensed-BlackItalic.ttf
static/Roboto-ThinItalic.ttf
static/Roboto-ExtraLightItalic.ttf
static/Roboto-LightItalic.ttf
static/Roboto-Italic.ttf
static/Roboto-MediumItalic.ttf
static/Roboto-SemiBoldItalic.ttf
static/Roboto-BoldItalic.ttf
static/Roboto-ExtraBoldItalic.ttf
static/Roboto-BlackItalic.ttf
Get started
-----------
1. Install the font files you want to use
2. Use your app's font picker to view the font family and all the
available styles
Learn more about variable fonts
-------------------------------
https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts
https://variablefonts.typenetwork.com
https://medium.com/variable-fonts
In desktop apps
https://theblog.adobe.com/can-variable-fonts-illustrator-cc
https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts
Online
https://developers.google.com/fonts/docs/getting_started
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide
https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts
Installing fonts
MacOS: https://support.apple.com/en-us/HT201749
Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux
Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows
Android Apps
https://developers.google.com/fonts/docs/android
https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts
License
-------
Please read the full license text (OFL.txt) to understand the permissions,
restrictions and requirements for usage, redistribution, and modification.
You can use them in your products & projects – print or digital,
commercial or otherwise.
This isn't legal advice, please consider consulting a lawyer and see the full
license for all details.

BIN
resources/js/fonts/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Black.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Bold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-ExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-ExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Italic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Light.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Medium.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Regular.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-Thin.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto-ThinItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Black.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Bold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-ExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Italic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Light.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Medium.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Regular.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-Thin.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_Condensed-ThinItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Black.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-BlackItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Bold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-BoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraLight.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ExtraLightItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Italic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Light.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-LightItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Medium.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-MediumItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Regular.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-SemiBold.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-SemiBoldItalic.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-Thin.ttf Normal file
View File

Binary file not shown.

BIN
resources/js/fonts/Roboto/static/Roboto_SemiCondensed-ThinItalic.ttf Normal file
View File

Binary file not shown.

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

@ -1,8 +1,9 @@
<script setup lang="ts">
import { Link, router } from '@inertiajs/vue3';
import { ref } from 'vue';
import { onMounted, ref } from 'vue';
const isMobileMenuOpen = ref(false);
const isScrolled = ref(false);
const toggleMobileMenu = () => {
isMobileMenuOpen.value = !isMobileMenuOpen.value;
@ -11,100 +12,155 @@ const toggleMobileMenu = () => {
const goToBooking = () => {
router.visit('/rendez-vous');
};
// Handle scroll effect for header
onMounted(() => {
window.addEventListener('scroll', () => {
isScrolled.value = window.scrollY > 50;
});
});
</script>
<template>
<div class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden">
<div
class="group/design-root relative flex size-full min-h-screen flex-col overflow-x-hidden bg-gradient-to-br from-[var(--c-deep-navy)] via-[var(--c-purple)] to-black"
>
<div class="layout-container flex h-full grow flex-col">
<header class="sticky top-0 z-50 bg-black/80 backdrop-blur-sm">
<!-- Enhanced Header -->
<header
class="fixed top-0 z-50 w-full transition-all duration-300"
:class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
>
<div class="container mx-auto px-4">
<div class="flex items-center justify-between border-b border-solid border-gray-800 px-6 py-4 whitespace-nowrap">
<div class="flex items-center justify-between px-6 py-2 whitespace-nowrap">
<div class="flex items-center gap-3">
<img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
<img src="/logo-success.webp" alt="Logo" class="h-12 w-30 transition-transform duration-300 hover:scale-105" />
</div>
<nav class="hidden items-center gap-8 md:flex">
<Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link>
<Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/tirage">Tirages</Link>
<Link class="text-sm font-medium text-white transition-colors hover:text-[var(--c-gold)]" href="/">Testimonial</Link>
<Link
class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/"
>
Accueil
<span
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span>
</Link>
<Link
class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/tirage"
>
Tirages
<span
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span>
</Link>
<Link
class="group/nav-link relative text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/"
>
Témoignages
<span
class="absolute bottom-0 left-0 h-0.5 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span>
</Link>
</nav>
<div class="flex items-center gap-4">
<button
class="hover:bg-opacity-90 flex h-10 max-w-[480px] min-w-[84px] cursor-pointer items-center justify-center overflow-hidden rounded-md bg-[var(--c-purple)] px-6 text-sm font-bold text-white shadow-[var(--c-purple)]/20 shadow-lg transition-all focus:ring-2 focus:ring-[var(--c-purple)] focus:ring-offset-2 focus:ring-offset-black focus:outline-none"
class="mystic-btn mystic-btn-primary group relative inline-flex h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5"
@click="goToBooking"
>
<span class="truncate">Réserver une Session</span>
<span class="relative z-10 truncate">Réserver une Session</span>
<span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span>
</button>
<button class="text-white md:hidden">
<span class="material-symbols-outlined"> menu </span>
<button class="text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg>
</button>
</div>
</div>
</div>
</header>
<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"
href="#"
@click="toggleMobileMenu"
>Accueil</Link
<!-- Enhanced Mobile Menu -->
<div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
<div
class="absolute top-0 right-0 h-full w-3/4 bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
@click.stop
>
<div class="mb-8 flex items-center justify-between">
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
<button @click="toggleMobileMenu" class="text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
</button>
</div>
<nav class="flex flex-col gap-6">
<Link
class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
href="/"
@click="toggleMobileMenu"
>Accueil</Link
>
<Link
class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
href="/tirage"
@click="toggleMobileMenu"
>Tirages</Link
>
<Link
class="border-b border-white/10 py-2 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
href="/"
@click="toggleMobileMenu"
>Témoignages</Link
>
<button
class="mystic-btn mystic-btn-primary group relative mt-4 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-sm font-bold text-white shadow-lg transition-all duration-300"
@click="
goToBooking;
toggleMobileMenu();
"
>
<span class="relative z-10 truncate">Réserver une Session</span>
</button>
</nav>
</div>
</div>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>L'Oracle</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>Lectures</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="#"
@click="toggleMobileMenu"
>Témoignages</Link
>
<Link
class="text-midnight-blue hover:text-subtle-gold text-sm font-medium transition-colors duration-300"
href="/rendez-vous"
@click="toggleMobileMenu"
>Booking</Link
>
</nav>
<main class="hero-gradient relative flex min-h-screen w-full flex-col items-center">
<main class="relative flex min-h-screen w-full flex-col items-center pt-20">
<slot />
</main>
<footer class="relative border-t border-gray-800 bg-black text-white">
<!-- Enhanced Footer -->
<footer class="relative border-t border-white/10 bg-gradient-to-t from-black to-[var(--c-deep-navy)] text-white">
<div class="absolute inset-x-0 top-0 h-0.5 bg-gradient-to-r from-transparent via-[var(--c-gold)] to-transparent"></div>
<div class="mx-auto max-w-7xl px-6 py-14">
<div class="grid gap-10 md:grid-cols-3">
<!-- Brand + tagline -->
<div>
<div class="flex items-center gap-3">
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24" />
<img src="/logo-success.webp" alt="Logo" class="h-12 w-30" />
</div>
<p class="mt-4 max-w-sm text-sm text-white/70">
Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
</p>
<div class="mt-4 flex gap-4">
<a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="Instagram">
<div class="mt-6 flex gap-4">
<a class="social-icon group" href="#" aria-label="Instagram">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
<rect x="32" y="32" width="192" height="192" rx="48"></rect>
<circle cx="128" cy="128" r="40" fill="black"></circle>
</svg>
</a>
<a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="Facebook">
<a class="social-icon group" href="#" aria-label="Facebook">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
<path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
</svg>
</a>
<a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#" aria-label="X">
<a class="social-icon group" href="#" aria-label="X">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 256 256">
<path
d="M152.23,116.19l62.51-78.85H184.2l-38.79,49-30.06-49H80.2l43.9,70.44L60.44,218.66H99l42.31-53.56,32.63,53.56h35.09Z"
@ -115,34 +171,32 @@ const goToBooking = () => {
</div>
<!-- Quick links -->
<div class="grid grid-cols-2 gap-8 md:grid-cols-1">
<div class="grid grid-cols-2 gap-8 md:grid-cols-2">
<div>
<h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Navigation</h4>
<ul class="space-y-2 text-sm">
<li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/">Accueil</Link></li>
<h4 class="mb-4 text-lg font-bold tracking-wider text-white">Navigation</h4>
<ul class="space-y-3 text-sm">
<li>
<a class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="#testimonials">Témoignages</a>
<Link class="footer-link group" href="/">Accueil</Link>
</li>
<li><Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/tirage">Lectures</Link></li>
<li>
<Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/rendez-vous"
>Rendez-vous</Link
>
<a class="footer-link group" href="#testimonials">Témoignages</a>
</li>
<li>
<Link class="footer-link group" href="/tirage">Lectures</Link>
</li>
<li>
<Link class="footer-link group" href="/rendez-vous">Rendez-vous</Link>
</li>
</ul>
</div>
<div>
<h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Légal</h4>
<ul class="space-y-2 text-sm">
<h4 class="mb-4 text-lg font-bold tracking-wider text-white">Légal</h4>
<ul class="space-y-3 text-sm">
<li>
<Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/politique-confidalite"
>Politique de Confidentialité</Link
>
<Link class="footer-link group" href="/politique-confidalite">Politique de Confidentialité</Link>
</li>
<li>
<Link class="text-white/70 transition-colors hover:text-[var(--c-gold)]" href="/term-condition"
>Conditions d'Utilisation</Link
>
<Link class="footer-link group" href="/term-condition">Conditions d'Utilisation</Link>
</li>
</ul>
</div>
@ -150,17 +204,17 @@ const goToBooking = () => {
<!-- Newsletter -->
<div>
<h4 class="mb-3 text-sm font-black tracking-wider text-white/90">Newsletter</h4>
<p class="text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
<form class="mt-4 flex max-w-md">
<h4 class="mb-4 text-lg font-bold tracking-wider text-white">Newsletter</h4>
<p class="mb-4 text-sm text-white/70">Recevez des inspirations et offres directement dans votre boîte mail.</p>
<form class="mt-2 flex max-w-md overflow-hidden rounded-full border border-white/20 bg-white/5 backdrop-blur-sm">
<input
type="email"
placeholder="Votre e-mail"
class="w-full rounded-l-md border border-gray-700 bg-gray-900 px-4 text-sm text-white placeholder-gray-500 focus:border-[var(--c-purple)] focus:outline-none"
class="w-full bg-transparent px-4 py-3 text-sm text-white placeholder-white/50 focus:outline-none"
/>
<button
type="button"
class="hover:bg-opacity-90 rounded-r-md bg-[var(--c-purple)] px-4 text-sm font-bold text-white transition-colors"
class="mystic-btn mystic-btn-secondary px-4 text-sm font-bold whitespace-nowrap text-white transition-all"
>
S'abonner
</button>
@ -168,7 +222,7 @@ const goToBooking = () => {
</div>
</div>
<div class="mt-10 border-t border-gray-800 pt-6 text-center text-xs text-white/60 sm:text-sm">
<div class="mt-12 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:text-sm">
© 2024 Kris Saint Ange. Tous droits réservés.
</div>
</div>
@ -178,40 +232,139 @@ const goToBooking = () => {
</template>
<style scoped>
.text-midnight-blue {
color: var(--midnight-blue);
/* Button styles matching the hero section */
.mystic-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.bg-midnight-blue {
background-color: var(--midnight-blue);
.mystic-btn-primary {
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
box-shadow: 0 0 20px rgba(125, 91, 166, 0.7);
}
.text-spiritual-earth {
color: var(--spiritual-earth);
.mystic-btn-primary:hover {
box-shadow: 0 0 30px rgba(125, 91, 166, 0.9);
transform: translateY(-2px);
}
.bg-spiritual-earth {
background-color: var(--spiritual-earth);
.mystic-btn-secondary {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.2) 0%, rgba(245, 158, 11, 0.2) 100%);
border: 1px solid rgba(255, 215, 0, 0.3);
backdrop-filter: blur(10px);
}
.text-subtle-gold {
color: var(--subtle-gold);
.mystic-btn-secondary:hover {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.3) 0%, rgba(245, 158, 11, 0.3) 100%);
border-color: rgba(255, 215, 0, 0.6);
transform: translateY(-1px);
}
.bg-subtle-gold {
background-color: var(--subtle-gold);
.mystic-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
z-index: 1;
}
.text-linen {
color: var(--linen);
.mystic-btn:hover::before {
transform: translateX(100%);
}
.bg-linen {
background-color: var(--linen);
/* Social icons */
.social-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.text-pure-white {
color: var(--pure-white);
.social-icon:hover {
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(125, 91, 166, 0.4);
}
.bg-pure-white {
background-color: var(--pure-white);
/* Footer links */
.footer-link {
position: relative;
color: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.text-light-ivory {
color: var(--light-ivory);
.footer-link:hover {
color: #ffd700;
padding-left: 8px;
}
.bg-light-ivory {
background-color: var(--light-ivory);
.footer-link::before {
content: '';
position: absolute;
left: -8px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 4px;
background: #ffd700;
border-radius: 50%;
opacity: 0;
transition: all 0.3s ease;
}
.footer-link:hover::before {
opacity: 1;
left: 0;
}
/* Custom color variables */
:root {
--c-purple: #4c1d95;
--c-deep-navy: #1e1b4b;
--c-gold: rgba(245, 158, 11, 0.7);
}
/* Smooth transitions for all elements */
* {
transition:
color 0.3s ease,
background-color 0.3s ease,
border-color 0.3s ease;
}
/* Mobile menu animation */
.fixed {
animation: slideIn 0.3s ease-out;
}
@keyframes slideIn {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Header scroll effect */
header {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
/* Newsletter form focus states */
input:focus {
box-shadow: 0 0 0 2px rgba(125, 91, 166, 0.5);
}
</style>

93
resources/js/pages/cards/FreeCardResult.vue
View File

@ -30,7 +30,7 @@
class="relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-6 shadow-2xl ring-1 ring-[var(--c-purple)]/40 md:p-10"
>
<!-- Ambient glows -->
<div class="pointer-events-none absolute -left-20 -top-20 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
<div class="pointer-events-none absolute -top-20 -left-20 h-56 w-56 rounded-full bg-[var(--c-purple)]/25 blur-3xl"></div>
<div class="pointer-events-none absolute -right-20 -bottom-20 h-56 w-56 rounded-full bg-[var(--c-gold)]/20 blur-3xl"></div>
<!-- Card Header -->
@ -51,7 +51,9 @@
:alt="card.name"
class="absolute inset-0 h-full w-full rounded-2xl object-cover"
/>
<div class="absolute inset-x-0 bottom-0 rounded-b-2xl bg-gradient-to-t from-black/80 to-transparent p-4 text-center">
<div
class="absolute inset-x-0 bottom-0 rounded-b-2xl bg-gradient-to-t from-black/80 to-transparent p-4 text-center"
>
<p class="text-sm font-bold text-white">{{ card.name }}</p>
</div>
</div>
@ -99,24 +101,34 @@
<!-- Consultation CTA -->
<div
v-if="!loading && !error"
class="relative overflow-hidden rounded-3xl border border-[var(--c-purple)]/30 bg-gradient-to-br from-[var(--card)] to-[var(--card)]/90 p-8 text-center shadow-xl ring-1 ring-[var(--c-purple)]/40 md:p-12"
class="relative overflow-hidden rounded-3xl border border-white/10 bg-gradient-to-br from-[var(--c-purple)]/20 to-[var(--c-gold)]/10 p-10 text-center shadow-2xl backdrop-blur-lg md:p-12"
>
<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="pointer-events-none absolute -right-16 -bottom-16 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
<!-- Animated background -->
<div
class="animate-pulse-slow absolute inset-0 bg-gradient-to-r from-[var(--c-purple)]/10 via-transparent to-[var(--c-gold)]/10"
></div>
<div class="relative z-10 mx-auto mb-6 h-1 w-16 rounded-full bg-[var(--c-gold)]"></div>
<p class="relative z-10 mx-auto mb-6 max-w-2xl text-base text-white/80 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="relative z-10 inline-flex h-12 min-w-[180px] 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"
>
<span class="relative z-10">Réserver une Consultation</span>
<span
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 hover:translate-x-[100%]"
></span>
</button>
<div class="pointer-events-none absolute -top-20 -left-20 h-40 w-40 rounded-full bg-[var(--c-purple)]/20 blur-3xl"></div>
<div class="pointer-events-none absolute -right-20 -bottom-20 h-40 w-40 rounded-full bg-[var(--c-gold)]/15 blur-3xl"></div>
<div class="relative z-10">
<div class="mb-6 inline-flex items-center gap-2 rounded-full bg-white/10 px-6 py-2 backdrop-blur-sm">
<span class="text-2xl">💫</span>
<span class="text-lg font-bold text-white">Guidance Approfondie</span>
</div>
<p class="relative z-10 mx-auto mb-8 max-w-2xl text-lg leading-relaxed text-white/80 md:text-xl">
Pour une analyse personnalisée et une guidance plus approfondie, réservez une consultation privée avec Kris Saint Ange.
</p>
<button
@click="goToBooking"
class="mystic-btn mystic-btn-primary group relative inline-flex h-14 min-w-[220px] items-center justify-center overflow-hidden rounded-full px-8 text-lg font-bold text-white shadow-2xl transition-all duration-300 hover:-translate-y-1"
>
<span class="relative z-10">Réserver une Consultation</span>
<span
class="pointer-events-none absolute inset-0 translate-x-[-120%] -skew-x-12 bg-gradient-to-r from-transparent via-white/30 to-transparent transition-transform duration-700 group-hover:translate-x-[120%]"
></span>
</button>
</div>
</div>
</div>
</main>
@ -153,3 +165,48 @@ onMounted(async () => {
}
});
</script>
<style scoped>
/* Button styles */
.mystic-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.mystic-btn-primary {
background: linear-gradient(135deg, rgba(125, 91, 166, 0.9) 0%, rgba(79, 70, 229, 0.9) 100%);
box-shadow: 0 0 25px rgba(125, 91, 166, 0.7);
}
.mystic-btn-primary:hover {
box-shadow: 0 0 35px rgba(125, 91, 166, 0.9);
}
.mystic-btn-secondary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
border: 1px solid rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
}
.mystic-btn-secondary:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.08) 100%);
border-color: rgba(255, 255, 255, 0.3);
}
.mystic-btn::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transform: translateX(-100%);
transition: transform 0.6s;
z-index: 1;
}
.mystic-btn:hover::before {
transform: translateX(100%);
}
</style>

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

@ -71,7 +71,7 @@ const clearHover = () => {
};
</script>
<template>
<section class="bg-black px-4 py-16 sm:py-20">
<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">
Explorez Nos <span class="text-[var(--c-gold)]">Lectures</span>
</h2>