Landingpage Grid-layout erstellt, Navbar implementiert, SEO vorbereitet

src/app/features/landing/components/hero/hero.component.html

@@ -1 +1,16 @@
-<section>hero works!</section>
+<section class="hero-section">
+  <h1 class="hero-section__header">
+    <span>Digitales Handwerk</span>
+    <span>statt Standard-Baukasten</span>
+  </h1>
+  <p class="hero-section__claim">
+    Wir programmieren Blitzschnelle, sichere und maßgeschneiderte Webseiten für kleine,
+    mittelständische Unternehmen und Vereine. Ohne CMS-Ballast, dafür mit maximaler Performance.
+  </p>
+  <div class="hero-section__links">
+    <button href="#" variant="primary" label="Leistungen ansehen">Leistungen ansehen</button>
+    <button href="#" variant="secondary" label="Warum kein WordPress?">
+      Warum kein WordPress?
+    </button>
+  </div>
+</section>

src/app/features/landing/components/hero/hero.component.scss

@@ -0,0 +1,4 @@
+.hero-section {
+    width: 100%;
+    max-width: 1200px;
+}

src/app/features/landing/components/navigation/navigation.component.html

@@ -1,15 +1,15 @@
-<div class="logo-container">
-  <span class="logo-container__logo centered">H</span>
-  <p class="logo-container__company"><span>Hurler</span> Webdesign</p>
-</div>
-
-<nav class="navigation">
-  <ul class="navigation__list">
-    <li class="navigation__list-item"><a href="#">Home</a></li>
-    <li class="navigation__list-item"><a href="#">Features</a></li>
-    <li class="navigation__list-item"><a href="#">Contact</a></li>
-  </ul>
-</nav>
-<div class="burger-menu centered">
-  <ng-icon name="cssMenu" class="burger-menu__icon"></ng-icon>
-</div>
+<section class="header">
+  <div class="logo-container">
+    <span class="logo-container__logo centered">H</span>
+    <p class="logo-container__company"><span>Hurler</span> Webdesign</p>
+  </div>
+  <div class="header__nav-section centered">
+    <div class="theme-toggle-container">
+      <app-toogle-theme></app-toogle-theme>
+    </div>
+    <app-nav-menu [items]="navigationService.landingNavigation()"></app-nav-menu>
+    <div class="burger-menu centered">
+      <ng-icon name="cssMenu" class="burger-menu__icon"></ng-icon>
+    </div>
+  </div>
+</section>

src/app/features/landing/components/navigation/navigation.component.scss

@@ -1,32 +1,19 @@
-@use "../../../../../styles/abstracts";
+@use "abstracts";
 
-.navigation {
-    display: none;
+.header {
+    display: flex;
+    justify-content: space-between;
+    min-height: abstracts.rem(60);
+    border-radius: 0 0 10px 10px;
+    background-color: var(--nav-bg);
+    backdrop-filter: var(--nav-backdrop);
+    box-shadow: var(--nav-shadow);
+    position: sticky;
+    top: 0;
 
-    @include abstracts.breakpoint("md") {
-        display: block;
-        padding-right: var(--space-4);
-    }
-
-    &__list {
+    &__nav-section {
         display: flex;
-        gap: var(--space-4);
-    }
-
-    &__list-item {
-        list-style: none;
-        font-weight: 500;
-        font-size: var(--font-size-base);
-        color: var(--text-main);
-        transition: color 0.3s ease;
-
-        a {
-            color: var(--accent);
-
-            &:hover {
-                color: var(--accent-hover);
-            }
-        }
+        flex-direction: row;
     }
 }
 
@@ -39,14 +26,13 @@
     &__logo {
         font-size: 1.5rem;
         font-weight: bold;
-        color: var(--text-main);
+        color: var(--text-on-accent);
         border: 1px solid var(--accent);
         width: abstracts.rem(30);
         height: abstracts.rem(30);
         display: flex;
         background-color: var(--accent);
         border-radius: 5px;
-        color: white;
     }
 
     &__company {
@@ -60,6 +46,18 @@
     }
 }
 
+.theme-toggle-container {
+    width: abstracts.rem(24);
+    height: abstracts.rem(24);
+    margin: auto;
+    margin-left: var(--space-4);
+
+    @include abstracts.breakpoint("md") {
+        margin: auto;
+        margin-left: var(--space-4);
+    }
+}
+
 .burger-menu {
     padding-right: var(--space-4);
     cursor: pointer;

src/app/features/landing/components/navigation/navigation.component.ts

@@ -1,12 +1,15 @@
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { NgIcon } from '@ng-icons/core';
+import { ToogleThemeComponent } from '@shared/utils/toogle-theme/toogle-theme.component';
+import { NavMenuComponent } from '@shared/ui/nav-menu/nav-menu.component';
+import { NavigationService } from '@core/services/navigation.service';
 
 @Component({
   selector: 'app-navigation',
-  imports: [NgIcon],
+  imports: [NgIcon, ToogleThemeComponent, NavMenuComponent],
   templateUrl: './navigation.component.html',
   styleUrl: './navigation.component.scss',
 })
 export class NavigationComponent {
-
+  protected readonly navigationService = inject(NavigationService);
 }