header & hero texts

frontend/src/lib/components/header/Header.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
     import { onMount } from "svelte"
     import { spaLink } from "../../actions"
+    import { location } from "../../store"
+    import { headerLinks } from "../../../config"
+    import type { HeaderLink } from "../../../config"
 
-    let scrolled: boolean = false,
-        isHomepage: boolean = true
+    let scrolled: boolean = $state(false)
+
+    const links: HeaderLink[] = headerLinks
 
     function checkScroll() {
         scrolled = window.scrollY >= 100
@@ -19,8 +23,13 @@
         }
     })
 
-    $: checkScroll()
-    $: darkBG = scrolled
+    $effect(() => {
+        checkScroll()
+    })
+    let isHomepage = $derived($location?.path === "/")
+    let darkBG = $derived(scrolled || !isHomepage)
+
+    const resolveHref = (link: HeaderLink) => ("sectionId" in link ? `/#${link.sectionId}` : link.href)
 </script>
 
 <header
@@ -44,6 +53,20 @@
                     alt="logo"
                 />
             </a>
+            <ul class="nav-links">
+                {#each links as link}
+                    <li>
+                        <a
+                            href={resolveHref(link)}
+                            use:spaLink
+                            class="nav-link"
+                            class:nav-link-button={link.type === "button"}
+                        >
+                            {link.label}
+                        </a>
+                    </li>
+                {/each}
+            </ul>
         </nav>
     </div>
 </header>
@@ -92,6 +115,80 @@
                         object-fit: contain;
                     }
                 }
+                .nav-links {
+                    display: flex;
+                    align-items: center;
+                    gap: 1.5rem;
+                    list-style: none;
+                    margin: 0;
+                    padding: 0;
+                    li {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                    }
+                    .nav-link {
+                        color: var(--text-100);
+                        text-decoration: none;
+                        font-weight: 500;
+                        font-size: 0.95rem;
+                        transition:
+                            color 0.2s ease,
+                            background-color 0.2s ease,
+                            border-color 0.2s ease;
+                        padding: 0.5rem 0;
+                        position: relative;
+
+                        &:focus-visible {
+                            outline: 2px solid var(--primary-200);
+                            outline-offset: 3px;
+                        }
+
+                        &:after {
+                            content: "";
+                            position: absolute;
+                            left: 0;
+                            bottom: 0;
+                            width: 100%;
+                            height: 2px;
+                            background: currentColor;
+                            transform: scaleX(0);
+                            transform-origin: left;
+                            transition: transform 0.2s ease;
+                        }
+
+                        &:hover,
+                        &:focus-visible {
+                            color: var(--primary-200);
+
+                            &:after {
+                                transform: scaleX(1);
+                            }
+                        }
+                    }
+
+                    .nav-link-button {
+                        border: 1px solid var(--primary-200);
+                        border-radius: 999px;
+                        padding: 0.45rem 1.4rem;
+                        font-weight: 600;
+                        color: var(--neutral-white);
+                        background: linear-gradient(135deg, var(--primary-200), var(--primary-100));
+                        box-shadow: 0 0 12px rgba(116, 30, 32, 0.45);
+
+                        &:after {
+                            display: none;
+                        }
+                        transition:
+                            background 0.3s ease,
+                            color 0.3s ease;
+                        &:hover,
+                        &:focus-visible {
+                            color: var(--neutral-white);
+                            background: linear-gradient(135deg, var(--primary-100), #ff5252);
+                        }
+                    }
+                }
             }
         }
         &.homepageHeader {
@@ -102,4 +199,35 @@
             background-color: var(--bg-100);
         }
     }
+
+    @media @mobile {
+        .headercontainer {
+            .padding {
+                .menu {
+                    flex-direction: column;
+                    height: auto;
+                    padding: 0.8rem 0;
+                    gap: 0.8rem;
+                    .logo-container {
+                        height: 48px;
+                        img {
+                            height: 44px;
+                        }
+                    }
+                    .nav-links {
+                        flex-wrap: wrap;
+                        justify-content: center;
+                        gap: 0.8rem 1.2rem;
+                        .nav-link {
+                            padding: 0.4rem 0;
+                            font-size: 0.9rem;
+                        }
+                        .nav-link-button {
+                            padding: 0.4rem 1rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
 </style>