Reworked the home page

resources/js/Layouts/Layout.vue

@@ -17,7 +17,7 @@ const toggleMenu = () => {
 
 <template>
     <nav class="sticky z-20 w-full top-0 right-0 left-0">
-        <div class="w-full h-16 z-40 flex desktop:px-[17.5%] laptop:px-[12.5%] px-2  justify-between border-b border-gray-300 bg-gray-50 text-gray-900">
+        <div class="w-full h-16 z-40 flex desktop:px-[12.5%] laptop:px-[7.5%] px-2  justify-between border-b border-gray-300 bg-gray-50 text-gray-900">
             <div :class="{ 'w-full': !user }" class="flex h-full justify-between">
                 <Link :href="user ? route('photo.index') : route('home')" :class="'h-full mr-5 z-40 w-fit'">
                     <img src="/img/logo.png" class="h-full laptop:py-1.5 py-3">

resources/js/Pages/Home.vue

@@ -10,7 +10,7 @@ import Layout from '@/Layouts/Layout.vue';
         <template #content>
             <div class="relative w-full laptop:max-h-[50rem] flex items-center overflow-hidden max-h-96">
                 <div class="flex justify-center items-center absolute top-0 bottom-0 right-0 left-0 bg-gradient-to-t from-gray-200/25 via-[25%] via-white/20 to-[50%] to-white/5">
-                    <p class="text-center text-white/65 laptop:text-[220px] text-8xl laptop:leading-[180px] font-bold">Scout Baslac</p>
+                    <p class="text-center text-white/65 laptop:text-6xl text-3xl font-bold">Scout Baslac</p>
                 </div>
                 <img src="/img/sarasin.png" class="w-full laptop:pb-96 ">
             </div>

resources/js/Pages/Homea.vue

@@ -10,21 +10,21 @@ import Layout from '@/Layouts/Layout.vue';
         <template #content>
             <div class=" text-gray-900">
 
-    <div class="relative w-full max-h-[calc(100vh+1rem)] flex items-center overflow-hidden">
+    <div class="relative w-full max-h-[50vh] flex items-center overflow-hidden">
         <img src="/img/sarasin.png" class="h-full laptop:pb-96 object-cover" alt="Image de présentation du groupe scout" />
-        <!-- Gradient doux : du transparent en haut vers un noir très léger en bas -->
-        <div class="absolute top-0 bottom-0 right-0 left-0 inset-0 flex items-center justify-center bg-gradient-to-b from-transparent via-gray-200 via-[90%] to-gray-200">
-        <h1 class="text-center text-white laptop:text-[260px] text-7xl laptop:leading-[180px] font-extrabold drop-shadow-lg transition duration-500 hover:scale-105">
+        <!-- Gradient doux : du transparent en haut vers un noir très léger en bas bg-gradient-to-b from-transparent via-gray-200 via-[90%] to-gray-200 -->
+        <div class="absolute top-0 bottom-0 right-0 left-0 inset-0 flex items-center justify-center">
+        <h1 class="text-center text-white/50 laptop:text-[200px] text-7xl font-extrabold drop-shadow-lg transition duration-500">
             Scout Baslac
         </h1>
         </div>
     </div>
 
     <!-- Contenu principal avec animation et grilles -->
-    <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-4 pb-12 space-y-12">
+    <div class="w-full desktop:px-[17.5%] laptop:px-[12.5%] px-4 mt-10 pb-12 space-y-12">
       <!-- Carte "Qui sommes-nous ?" -->
       <transition name="fade" mode="out-in">
-        <div class="bg-gray-100 shadow-xl rounded-lg overflow-hidden transform transition duration-200 hover:scale-105">
+        <div class="bg-gray-100 shadow-xl rounded-lg overflow-hidden transform transition duration-200">
           <div class="flex flex-col lg:flex-row">
             <!-- Partie Image -->
             <div class="lg:w-1/2 relative max-h-56 hover:p-trans-in p-trans-out duration-200 overflow-hidden">