feat: many design changes

packages/base/Resources/Public/Scss/components/_navigation.scss

@@ -2,11 +2,15 @@
 // so that when it becomes sticky, the content doesn't jump.
 $nav-height: 60px; // Adjust as needed
 
+// Use an absolute path to the extension’s public folder to avoid rewriting of URLs by the build process.
+// Ensure this path is correct for your TYPO3 installation.
+// Typically: /typo3conf/ext/<extension_key>/Resources/Public/Images/...
+
 header {
   width: 100%;
   height: $nav-height;
   line-height: $nav-height;
-  background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
+  background: url('../Images/background.jpg') repeat;
   position: sticky;
   top: 0;
   z-index: 1000;
@@ -17,7 +21,6 @@ header {
   .container {
     display: flex;
     align-items: center;
-    justify-content: space-between;
     margin: 0 auto;
     height: 100%;
     padding: 0 1rem;
@@ -86,22 +89,30 @@ header {
     display: flex;
     list-style: none;
     align-items: center;
+    margin: auto;
 
-    .nav-item {
-      margin: 0 1rem;
+    font-family: 'Hajime Sans', sans-serif;
+    font-size: 1.75rem;
 
-      .nav-link {
-        text-decoration: none;
-        color: $primary-color;
-        font-weight: 700;
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-size: 1rem;
-        @include transition(color);
+    a {
+        font-weight: 400;
+    }
+  }
 
-        &:hover {
-          color: $brand-color;
-        }
+  .nav-item {
+    margin: 0 1rem;
+
+    .nav-link {
+      text-decoration: none;
+      color: $primary-color;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.05em;
+      font-size: 1rem;
+      @include transition(color);
+
+      &:hover {
+        color: $brand-color;
       }
     }
   }
@@ -117,7 +128,6 @@ header {
       left: 0;
       right: 0;
       flex-direction: column;
-      background: $secondary-color url('EXT:my_sitepackage/Resources/Public/Images/linen-texture.png') repeat;
       max-height: 0;
       overflow: hidden;
       @include transition(max-height, 0.4s);