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

fix image and blanc
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-10-03 11:47:00 +03:00
parent 58e26d17f8
commit 4f7e5f78d5
3 changed files with 42 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -5,8 +5,9 @@
<!-- Background mystical elements --> <!-- Background mystical elements -->
<div class="absolute inset-0 overflow-hidden"> <div class="absolute inset-0 overflow-hidden">
<!-- Background image with softer blur and higher brightness for visibility --> <!-- Background image with softer blur and higher brightness for visibility -->
<div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(2px) brightness(0.7)"></div> <div class="absolute inset-0 bg-cover bg-center" style="background-image: url('/hero-back.jpg'); filter: blur(2px) brightness(0.7)"></div>
<div class="absolute inset-0 bg-gradient-to-t from-purple-900/20 via-transparent to-transparent"></div> <div class="absolute inset-0 bg-gradient-to-t from-purple-900 via-transparent to-transparent"></div>
<!-- Smooth purple particles --> <!-- Smooth purple particles -->
<div <div

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

@ -26,7 +26,7 @@ onMounted(() => {
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" 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"> <div class="layout-container flex h-full grow flex-col">
<!-- Enhanced Header --> <!-- Enhanced Header with Bigger Font -->
<header <header
class="fixed top-0 z-50 w-full transition-all duration-300" 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'" :class="isScrolled ? 'bg-black/90 py-2 shadow-xl backdrop-blur-md' : 'bg-transparent py-4'"
@ -37,41 +37,41 @@ onMounted(() => {
<img <img
src="/logo-success.webp" src="/logo-success.webp"
alt="Logo" alt="Logo"
class="h-10 w-24 transition-transform duration-300 hover:scale-105 sm:h-12 sm:w-30" class="h-12 w-32 transition-transform duration-300 hover:scale-105 sm:h-14 sm:w-36"
/> />
</div> </div>
<nav class="hidden items-center gap-4 md:flex lg:gap-8"> <nav class="hidden items-center gap-6 md:flex lg:gap-10">
<Link <Link
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]" class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/" href="/"
> >
Accueil Accueil
<span <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" class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span> ></span>
</Link> </Link>
<Link <Link
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]" class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/tirage" href="/tirage"
> >
Tirages Tirages
<span <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" class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span> ></span>
</Link> </Link>
<Link <Link
class="group/nav-link relative px-2 py-1 text-sm font-medium text-white transition-all duration-300 hover:text-[var(--c-gold)]" class="group/nav-link relative px-3 py-2 text-lg font-semibold text-white transition-all duration-300 hover:text-[var(--c-gold)]"
href="/#testimonials" href="/#testimonials"
> >
Témoignages Témoignages
<span <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" class="absolute bottom-0 left-0 h-1 w-0 bg-[var(--c-gold)] transition-all duration-300 group-hover/nav-link:w-full"
></span> ></span>
</Link> </Link>
</nav> </nav>
<div class="flex items-center gap-2 sm:gap-4"> <div class="flex items-center gap-3 sm:gap-4">
<button <button
class="mystic-btn mystic-btn-primary group relative hidden h-10 min-w-[160px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-4 text-sm font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex sm:px-6" class="mystic-btn mystic-btn-primary group relative hidden h-12 min-w-[180px] cursor-pointer items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300 hover:-translate-y-0.5 sm:inline-flex"
@click="goToBooking" @click="goToBooking"
> >
<span class="relative z-10 truncate">Réserver</span> <span class="relative z-10 truncate">Réserver</span>
@ -80,7 +80,7 @@ onMounted(() => {
></span> ></span>
</button> </button>
<button class="p-2 text-white transition-colors hover:text-[var(--c-gold)] md:hidden" @click="toggleMobileMenu"> <button class="p-2 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"> <svg class="h-7 w-7" 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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
</svg> </svg>
</button> </button>
@ -89,41 +89,41 @@ onMounted(() => {
</div> </div>
</header> </header>
<!-- Enhanced Mobile Menu --> <!-- Enhanced Mobile Menu with Bigger Font -->
<div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu"> <div v-if="isMobileMenuOpen" class="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden" @click="toggleMobileMenu">
<div <div
class="absolute top-0 right-0 h-full w-full max-w-sm bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl" class="absolute top-0 right-0 h-full w-full max-w-sm bg-gradient-to-b from-[var(--c-purple)] to-[var(--c-deep-navy)] p-6 shadow-2xl"
@click.stop @click.stop
> >
<div class="mb-8 flex items-center justify-between"> <div class="mb-8 flex items-center justify-between">
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24" /> <img src="/logo-success.webp" alt="Logo" class="h-12 w-32" />
<button @click="toggleMobileMenu" class="p-2 text-white"> <button @click="toggleMobileMenu" class="p-2 text-white">
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"> <svg class="h-7 w-7" 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> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg> </svg>
</button> </button>
</div> </div>
<nav class="flex flex-col gap-4"> <nav class="flex flex-col gap-4">
<Link <Link
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]" class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
href="/" href="/"
@click="toggleMobileMenu" @click="toggleMobileMenu"
>Accueil</Link >Accueil</Link
> >
<Link <Link
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]" class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
href="/tirage" href="/tirage"
@click="toggleMobileMenu" @click="toggleMobileMenu"
>Tirages</Link >Tirages</Link
> >
<Link <Link
class="border-b border-white/10 py-4 text-lg font-medium text-white transition-colors duration-300 hover:text-[var(--c-gold)]" class="border-b border-white/10 py-5 text-xl font-semibold text-white transition-colors duration-300 hover:text-[var(--c-gold)]"
href="/#testimonials" href="/#testimonials"
@click="toggleMobileMenu" @click="toggleMobileMenu"
>Témoignages</Link >Témoignages</Link
> >
<button <button
class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-12 w-full items-center justify-center overflow-hidden rounded-full px-6 text-base font-bold text-white shadow-lg transition-all duration-300" class="mystic-btn mystic-btn-primary group relative mt-8 inline-flex h-14 w-full items-center justify-center overflow-hidden rounded-full px-6 text-lg font-bold text-white shadow-lg transition-all duration-300"
@click=" @click="
goToBooking(); goToBooking();
toggleMobileMenu(); toggleMobileMenu();
@ -135,7 +135,7 @@ onMounted(() => {
</div> </div>
</div> </div>
<main class="relative flex min-h-screen w-full flex-col items-center pt-16 sm:pt-20"> <main class="relative flex min-h-screen w-full flex-col items-center">
<slot /> <slot />
</main> </main>
@ -147,25 +147,25 @@ onMounted(() => {
<!-- Brand + tagline --> <!-- Brand + tagline -->
<div class="md:col-span-1"> <div class="md:col-span-1">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
<img src="/logo-success.webp" alt="Logo" class="h-10 w-24 sm:h-12 sm:w-30" /> <img src="/logo-success.webp" alt="Logo" class="h-12 w-32 sm:h-14 sm:w-36" />
</div> </div>
<p class="mt-4 max-w-sm text-sm leading-relaxed text-white/70"> <p class="mt-4 max-w-sm text-base leading-relaxed text-white/70 sm:text-lg">
Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé. Guidance et clarté à travers des tirages inspirés et un accompagnement personnalisé.
</p> </p>
<div class="mt-6 flex gap-3"> <div class="mt-6 flex gap-3">
<a class="social-icon group" href="#" aria-label="Instagram"> <a class="social-icon group" href="#" aria-label="Instagram">
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256"> <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
<rect x="32" y="32" width="192" height="192" rx="48"></rect> <rect x="32" y="32" width="192" height="192" rx="48"></rect>
<circle cx="128" cy="128" r="40" fill="black"></circle> <circle cx="128" cy="128" r="40" fill="black"></circle>
</svg> </svg>
</a> </a>
<a class="social-icon group" href="#" aria-label="Facebook"> <a class="social-icon group" href="#" aria-label="Facebook">
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256"> <svg class="h-6 w-6 sm:h-7 sm:w-7" 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> <path d="M176 24h-32a56 56 0 0 0-56 56v24H64v32h24v96h32v-96h32l8-32h-40V80a16 16 0 0 1 16-16h32Z"></path>
</svg> </svg>
</a> </a>
<a class="social-icon group" href="#" aria-label="X"> <a class="social-icon group" href="#" aria-label="X">
<svg class="h-5 w-5 sm:h-6 sm:w-6" fill="currentColor" viewBox="0 0 256 256"> <svg class="h-6 w-6 sm:h-7 sm:w-7" fill="currentColor" viewBox="0 0 256 256">
<path <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" 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"
></path> ></path>
@ -177,8 +177,8 @@ onMounted(() => {
<!-- Quick links --> <!-- Quick links -->
<div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2"> <div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
<div> <div>
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Navigation</h4> <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
<ul class="space-y-2 text-sm sm:space-y-3"> <ul class="space-y-3 text-base sm:space-y-4">
<li> <li>
<Link class="footer-link group" href="/">Accueil</Link> <Link class="footer-link group" href="/">Accueil</Link>
</li> </li>
@ -194,8 +194,8 @@ onMounted(() => {
</ul> </ul>
</div> </div>
<div> <div>
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Légal</h4> <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Légal</h4>
<ul class="space-y-2 text-sm sm:space-y-3"> <ul class="space-y-3 text-base sm:space-y-4">
<li> <li>
<Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link> <Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
</li> </li>
@ -208,8 +208,8 @@ onMounted(() => {
<!-- Newsletter --> <!-- Newsletter -->
<div class="md:col-span-1 lg:col-span-1"> <div class="md:col-span-1 lg:col-span-1">
<h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Newsletter</h4> <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
<p class="mb-4 text-sm leading-relaxed text-white/70"> <p class="mb-4 text-base leading-relaxed text-white/70 sm:text-lg">
Recevez des inspirations et offres directement dans votre boîte mail. Recevez des inspirations et offres directement dans votre boîte mail.
</p> </p>
<form <form
@ -218,11 +218,11 @@ onMounted(() => {
<input <input
type="email" type="email"
placeholder="Votre e-mail" placeholder="Votre e-mail"
class="w-full bg-transparent px-4 py-3 text-sm text-white placeholder-white/50 focus:outline-none" class="w-full bg-transparent px-4 py-3 text-base text-white placeholder-white/50 focus:outline-none"
/> />
<button <button
type="button" type="button"
class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-sm font-bold whitespace-nowrap text-white transition-all" class="mystic-btn mystic-btn-secondary min-w-[120px] px-4 py-3 text-base font-bold whitespace-nowrap text-white transition-all"
> >
S'abonner S'abonner
</button> </button>
@ -230,7 +230,7 @@ onMounted(() => {
</div> </div>
</div> </div>
<div class="mt-8 border-t border-white/10 pt-6 text-center text-xs text-white/60 sm:mt-12 sm:text-sm"> <div class="mt-8 border-t border-white/10 pt-6 text-center text-sm text-white/60 sm:mt-12 sm:text-base">
© 2024 Kris Saint Ange. Tous droits réservés. © 2024 Kris Saint Ange. Tous droits réservés.
</div> </div>
</div> </div>
@ -291,8 +291,8 @@ onMounted(() => {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 36px; width: 40px;
height: 36px; height: 40px;
border-radius: 50%; border-radius: 50%;
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease; transition: all 0.3s ease;
@ -311,6 +311,7 @@ onMounted(() => {
transition: all 0.3s ease; transition: all 0.3s ease;
display: inline-block; display: inline-block;
padding: 4px 0; padding: 4px 0;
font-size: 1rem;
} }
.footer-link:hover { .footer-link:hover {

4
resources/js/pages/Landing.vue
View File

@ -2,9 +2,11 @@
<LandingLayout> <LandingLayout>
<div class="relative flex size-full min-h-screen flex-col overflow-x-hidden"> <div class="relative flex size-full min-h-screen flex-col overflow-x-hidden">
<!-- Hero --> <!-- Hero -->
<HeroSection primaryButtonLink="/tirage" secondaryButtonLink="/tirage" minHeight="70vh" />
<!-- Other sections with container -->
<main class="flex flex-col items-center"> <main class="flex flex-col items-center">
<div class="w-full max-w-7xl px-4 sm:px-6 lg:px-8"> <div class="w-full max-w-7xl px-4 sm:px-6 lg:px-8">
<HeroSection primaryButtonLink="/tirage" secondaryButtonLink="/tirage" minHeight="70vh" />
<div id="after-hero-sentinel" class="h-px w-full"></div> <div id="after-hero-sentinel" class="h-px w-full"></div>
<ManuscritSection /> <ManuscritSection />
<OfferSection /> <OfferSection />