feat: add Home Page layout and styles, including header behavior and language support

packages/base/Resources/Public/JavaScript/navigation.js

@@ -1,16 +1,39 @@
 document.addEventListener('DOMContentLoaded', function () {
-    const nav = document.getElementById('mainNav');
+    const nav = document.getElementById('mainNav'); // Keep for mobile toggle
+    const header = document.querySelector('header'); // Get the header element
     const toggle = document.getElementById('navToggle');
 
     // Toggle menu on mobile
     toggle.addEventListener('click', function () {
-        nav.classList.toggle('open');
+        nav.classList.toggle('open'); // Mobile menu still controlled by nav
         toggle.classList.toggle('active');
     });
 
-    // No need to add or remove sticky class here since CSS handles position: sticky
-    // We simply rely on the CSS-based sticky behavior and reserved space via body padding.
-    
+    // Handle transparent header scroll effect for home page on desktop
+    const body = document.body;
+    const scrollThreshold = 50; // Pixels to scroll before changing background
+
+    function handleScroll() {
+        // Check if it's the home page layout and desktop view
+        if (header && body.classList.contains('backendlayout-home_page') && window.innerWidth >= 1024) { // 1024px is Tailwind's default lg breakpoint
+            if (window.scrollY > scrollThreshold) {
+                header.classList.add('scrolled'); // Add class to header
+            } else {
+                header.classList.remove('scrolled'); // Remove class from header
+            }
+        } else if (header) { // Check if header exists before trying to remove class
+             // Ensure scrolled class is removed if not on home page desktop or resized below lg
+             header.classList.remove('scrolled'); // Remove class from header
+        }
+    }
+
+    // Initial check in case the page loads already scrolled
+    handleScroll();
+
+    // Add scroll and resize listeners
+    window.addEventListener('scroll', handleScroll);
+    window.addEventListener('resize', handleScroll); // Re-check on resize
+
     const submenuParents = document.querySelectorAll('.nav-item.has-submenu');
     submenuParents.forEach(parent => {
         parent.addEventListener('click', (e) => {

packages/base/Resources/Public/Scss/layouts/_home-page.scss

@@ -0,0 +1,82 @@
+// Styles specific to the Home Page layout (.backendlayout-home_page)
+
+.backendlayout-home_page {
+
+    // --- Target the header element ---
+    header {
+        // --- Mobile First: Always Primary Background ---
+        @apply bg-primary text-white;
+
+        // Mobile link/icon colors (on primary background)
+        #mainNav .nav-link { // Target links within #mainNav
+            @apply text-white hover:text-gray-200;
+        }
+        #mainNav .nav-toggle-icon,
+        #mainNav .nav-toggle-icon::before,
+        #mainNav .nav-toggle-icon::after {
+             @apply bg-white; // Ensure mobile toggle is visible
+        }
+        // Adjust mobile submenu link colors if needed (depends on dropdown background)
+        #mainNav .sub-menu .nav-link {
+             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
+        }
+
+        // --- Desktop Styles ---
+        @screen lg {
+            // Initial state: Transparent background, fixed position
+            @apply fixed top-0 left-0 right-0 z-50 bg-transparent transition-colors duration-300 ease-in-out;
+
+            // Initial link colors and background for transparent header (desktop)
+            #mainNav .nav-link {
+                @apply bg-white text-primary hover:text-brand px-3 py-1 rounded; // Add bg-white, padding, and rounded corners
+            }
+            // Ensure mobile toggle icon also uses primary color initially on desktop if visible (though usually hidden)
+            #mainNav .nav-toggle-icon,
+            #mainNav .nav-toggle-icon::before,
+            #mainNav .nav-toggle-icon::after {
+                 @apply bg-primary;
+            }
+            // Desktop submenu link colors (assuming light dropdown background)
+            #mainNav .sub-menu .nav-link {
+                 @apply text-gray-700 hover:text-black;
+            }
+
+            // Scrolled state: Primary background (desktop)
+            &.scrolled {
+                @apply bg-primary shadow-md;
+
+                // Link colors for primary background (desktop scrolled)
+                #mainNav .nav-link {
+                    @apply text-white hover:text-gray-200;
+                }
+                 // Submenu link colors likely don't need changing here if dropdown is consistent
+            }
+        }
+    }
+}
+
+// --- Default styles for header on NON-home pages ---
+// Ensures header has a background and correct colors on other pages
+body:not(.backendlayout-home_page) {
+    header {
+        @apply bg-primary text-white; // Or your desired default background/text
+
+        #mainNav .nav-link {
+            @apply text-white hover:text-gray-200;
+        }
+        #mainNav .nav-toggle-icon,
+        #mainNav .nav-toggle-icon::before,
+        #mainNav .nav-toggle-icon::after {
+             @apply bg-white;
+        }
+        #mainNav .sub-menu .nav-link {
+             @apply text-gray-700 hover:text-black; // Assuming light dropdown background
+        }
+    }
+    // On non-home pages, main content doesn't need extra padding-top
+    @screen lg {
+        main {
+            @apply pt-0; // Reset padding if needed
+        }
+    }
+}

packages/base/Resources/Public/Scss/main.scss

@@ -15,3 +15,5 @@
 @import "components/news_detail";
 @import 'components/footer';
 @import 'components/buttons';
+@import 'layouts/home-page';
+