From 4f7e5f78d567a88ac6a21c9847acfb6b3f440888 Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Fri, 3 Oct 2025 11:47:00 +0300
Subject: [PATCH] fix image and blanc

---
 .../js/components/landing/HeroSection.vue     |  3 +-
 resources/js/layouts/app/LandingLayout.vue    | 73 ++++++++++---------
 resources/js/pages/Landing.vue                |  4 +-
 3 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/resources/js/components/landing/HeroSection.vue b/resources/js/components/landing/HeroSection.vue
index 0a574c3..744a9da 100644
--- a/resources/js/components/landing/HeroSection.vue
+++ b/resources/js/components/landing/HeroSection.vue
@@ -5,8 +5,9 @@
         <!-- Background mystical elements -->
         <div class="absolute inset-0 overflow-hidden">
             <!-- 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-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 -->
             <div
diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index 86cf8e9..526cddc 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -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"
     >
         <div class="layout-container flex h-full grow flex-col">
-            <!-- Enhanced Header -->
+            <!-- Enhanced Header with Bigger Font -->
             <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'"
@@ -37,41 +37,41 @@ onMounted(() => {
                             <img
                                 src="/logo-success.webp"
                                 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>
-                        <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
-                                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="/"
                             >
                                 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"
+                                    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>
                             </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"
                             >
                                 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"
+                                    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>
                             </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"
                             >
                                 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"
+                                    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>
                             </Link>
                         </nav>
-                        <div class="flex items-center gap-2 sm:gap-4">
+                        <div class="flex items-center gap-3 sm:gap-4">
                             <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"
                             >
                                 <span class="relative z-10 truncate">Réserver</span>
@@ -80,7 +80,7 @@ onMounted(() => {
                                 ></span>
                             </button>
                             <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>
                                 </svg>
                             </button>
@@ -89,41 +89,41 @@ onMounted(() => {
                 </div>
             </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
                     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
                 >
                     <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">
-                            <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>
                             </svg>
                         </button>
                     </div>
                     <nav class="flex flex-col gap-4">
                         <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="/"
                             @click="toggleMobileMenu"
                             >Accueil</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"
                             @click="toggleMobileMenu"
                             >Tirages</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"
                             @click="toggleMobileMenu"
                             >Témoignages</Link
                         >
                         <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="
                                 goToBooking();
                                 toggleMobileMenu();
@@ -135,7 +135,7 @@ onMounted(() => {
                 </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 />
             </main>
 
@@ -147,25 +147,25 @@ onMounted(() => {
                         <!-- Brand + tagline -->
                         <div class="md:col-span-1">
                             <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>
-                            <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é.
                             </p>
                             <div class="mt-6 flex gap-3">
                                 <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>
                                         <circle cx="128" cy="128" r="40" fill="black"></circle>
                                     </svg>
                                 </a>
                                 <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>
                                     </svg>
                                 </a>
                                 <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
                                             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>
@@ -177,8 +177,8 @@ onMounted(() => {
                         <!-- Quick links -->
                         <div class="grid grid-cols-2 gap-6 sm:gap-8 md:col-span-1 md:grid-cols-2">
                             <div>
-                                <h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Navigation</h4>
-                                <ul class="space-y-2 text-sm sm:space-y-3">
+                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Navigation</h4>
+                                <ul class="space-y-3 text-base sm:space-y-4">
                                     <li>
                                         <Link class="footer-link group" href="/">Accueil</Link>
                                     </li>
@@ -194,8 +194,8 @@ onMounted(() => {
                                 </ul>
                             </div>
                             <div>
-                                <h4 class="mb-4 text-base font-bold tracking-wider text-white sm:text-lg">Légal</h4>
-                                <ul class="space-y-2 text-sm sm:space-y-3">
+                                <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Légal</h4>
+                                <ul class="space-y-3 text-base sm:space-y-4">
                                     <li>
                                         <Link class="footer-link group" href="/politique-confidalite">Confidentialité</Link>
                                     </li>
@@ -208,8 +208,8 @@ onMounted(() => {
 
                         <!-- Newsletter -->
                         <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>
-                            <p class="mb-4 text-sm leading-relaxed text-white/70">
+                            <h4 class="mb-4 text-lg font-bold tracking-wider text-white sm:text-xl">Newsletter</h4>
+                            <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.
                             </p>
                             <form
@@ -218,11 +218,11 @@ onMounted(() => {
                                 <input
                                     type="email"
                                     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
                                     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
                                 </button>
@@ -230,7 +230,7 @@ onMounted(() => {
                         </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.
                     </div>
                 </div>
@@ -291,8 +291,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
@@ -311,6 +311,7 @@ onMounted(() => {
     transition: all 0.3s ease;
     display: inline-block;
     padding: 4px 0;
+    font-size: 1rem;
 }
 
 .footer-link:hover {
diff --git a/resources/js/pages/Landing.vue b/resources/js/pages/Landing.vue
index 7e2c1ba..c35eec7 100644
--- a/resources/js/pages/Landing.vue
+++ b/resources/js/pages/Landing.vue
@@ -2,9 +2,11 @@
     <LandingLayout>
         <div class="relative flex size-full min-h-screen flex-col overflow-x-hidden">
             <!-- Hero -->
+            <HeroSection primaryButtonLink="/tirage" secondaryButtonLink="/tirage" minHeight="70vh" />
+            
+            <!-- Other sections with container -->
             <main class="flex flex-col items-center">
                 <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>
                     <ManuscritSection />
                     <OfferSection />