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) => {