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

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';
+