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

packages/base/Configuration/Sets/SitePackage/PageTsConfig/BackendLayouts/HomePage.tsconfig

@@ -0,0 +1,22 @@
+mod.web_layout.BackendLayouts {
+    home_page {
+        title = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.home_page
+        icon = EXT:base/Resources/Public/Images/BackendLayouts/default.png
+        config {
+            backend_layout {
+                colCount = 1
+                rowCount = 1
+                rows {
+                    1 {
+                        columns {
+                            1 {
+                                name = LLL:EXT:base/Resources/Private/Language/locallang_be.xlf:backend_layout.column.content
+                                colPos = 0
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

packages/base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript

@@ -0,0 +1,40 @@
+# PAGE CLASS
+lib.page.class = COA
+lib.page.class {
+    // Page alias or id as fallback
+    10 = TEXT
+    10 {
+        field = alias // uid
+        noTrimWrap = |page-||
+    }
+    // Current level of the page within the tree structure
+    20 = TEXT
+    20 {
+        data = level:1
+        noTrimWrap = | pagelevel-||
+    }
+    // Language
+    30 = TEXT
+    30 {
+        data = siteLanguage:languageId
+        noTrimWrap = | language-||
+    }
+    // Backend layout
+    40 = TEXT
+    40 {
+        data = pagelayout
+        replacement.10 {
+            search = pagets__
+            replace =
+        }
+        ifEmpty = default
+        noTrimWrap = | backendlayout-||
+    }
+    // Layout
+    50 = TEXT
+    50 {
+        field = layout
+        noTrimWrap = | layout-||
+        ifEmpty = default
+    }
+}

packages/base/Configuration/Sets/SitePackage/TypoScript/page.typoscript

@@ -3,10 +3,24 @@
 # Include constants
 #<INCLUDE_TYPOSCRIPT: source="FILE:EXT:base/Configuration/Sets/SitePackage/TypoScript/constants.typoscript">
 
+# HELPER
+@import 'EXT:base/Configuration/Sets/SitePackage/TypoScript/Helper/PageClass.typoscript'
+
 page = PAGE
 page {
   typeNum = 0
   shortcutIcon = EXT:base/Resources/Public/Favicons/favicon-96x96.png
+
+  bodyTagCObject = COA
+  bodyTagCObject {
+      10 = TEXT
+      10.data = TSFE:id
+      10.noTrimWrap = | id="p|"|
+      20 =< lib.page.class
+      20.stdWrap.noTrimWrap = | class="|"|
+      wrap = <body|>
+  }
+
   10 = PAGEVIEW
   10 {
     paths {
@@ -32,6 +46,7 @@ page {
             as = metanavigation
         }
     }
+
   }
 
   meta {
@@ -88,6 +103,7 @@ page {
   }
 
   footerMenuPid = {$footerMenuPid}
+
 }
 
 lib.contentElement {

packages/base/Resources/Private/Language/locallang_be.xlf

@@ -18,6 +18,16 @@
             <trans-unit id="backend_layout.column.right">
                 <source>Right</source>
             </trans-unit>
+            <trans-unit id="backend_layout.home_page">
+                <source>Home Page</source>
+            </trans-unit>
+            <trans-unit id="backend_layout.column.hero">
+                <source>Hero</source>
+            </trans-unit>
+            <trans-unit id="backend_layout.column.content">
+                <source>Content</source>
+            </trans-unit>
+
         </body>
     </file>
 </xliff>

packages/base/Resources/Private/PageView/Pages/Home_page.html

@@ -0,0 +1,6 @@
+<f:layout name="Default" />
+
+<f:section name="Main">
+    <f:comment> Render main content for colPos 0 (Home Page) </f:comment>
+    <f:cObject typoscriptObjectPath="lib.dynamicContent" data="{pageUid: '{data.uid}', colPos: '0'}" />
+</f:section>

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

@@ -1,15 +1,38 @@
 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
+    // Handle transparent header scroll effect for home page on desktop
-    // We simply rely on the CSS-based sticky behavior and reserved space via body padding.
+    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 => {

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