Nav bar basic styles finished, burger menu without function and transition, hero section next to go,

src/app/app.config.ts

@@ -1,5 +1,6 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners } from '@angular/core';
 import { provideRouter } from '@angular/router';
+import { provideNgIconsConfig } from '@ng-icons/core';
 
 import { routes } from './app.routes';
 import { provideClientHydration, withEventReplay } from '@angular/platform-browser';
@@ -7,6 +8,8 @@ import { provideClientHydration, withEventReplay } from '@angular/platform-brows
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideRouter(routes), provideClientHydration(withEventReplay())
+    provideRouter(routes), 
+    provideClientHydration(withEventReplay()),
+    provideNgIconsConfig({})
   ]
 };

src/app/app.routes.ts

@@ -1,3 +1,9 @@
 import { Routes } from '@angular/router';
+import { LandingpageComponent } from './features/landing/pages/landingpage.component';
 
-export const routes: Routes = [];
+export const routes: Routes = [
+    {
+        path: "",
+        component: LandingpageComponent
+    }
+];

src/app/app.ts

@@ -1,11 +1,14 @@
 import { Component, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import {provideIcons} from "@ng-icons/core";
+import {cssMenu} from "@ng-icons/css.gg"
 
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet],
   templateUrl: './app.html',
-  styleUrl: './app.scss'
+  styleUrl: './app.scss',
+  viewProviders: [provideIcons({cssMenu})]
 })
 export class App {
   protected readonly title = signal('hurler-webdesign-saas');

src/app/features/landing/components/features-section/features-section.component.html

@@ -0,0 +1 @@
+<p>features-section works!</p>

src/app/features/landing/components/features-section/features-section.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FeaturesSectionComponent } from './features-section.component';
+
+describe('FeaturesSectionComponent', () => {
+  let component: FeaturesSectionComponent;
+  let fixture: ComponentFixture<FeaturesSectionComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FeaturesSectionComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FeaturesSectionComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/landing/components/features-section/features-section.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-features-section',
+  imports: [],
+  templateUrl: './features-section.component.html',
+  styleUrl: './features-section.component.scss',
+})
+export class FeaturesSectionComponent {
+
+}

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

@@ -0,0 +1 @@
+<p>footer works!</p>

src/app/features/landing/components/footer/footer.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FooterComponent } from './footer.component';
+
+describe('FooterComponent', () => {
+  let component: FooterComponent;
+  let fixture: ComponentFixture<FooterComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FooterComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FooterComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-footer',
+  imports: [],
+  templateUrl: './footer.component.html',
+  styleUrl: './footer.component.scss',
+})
+export class FooterComponent {
+
+}

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

@@ -0,0 +1 @@
+<section>hero works!</section>

src/app/features/landing/components/hero/hero.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HeroComponent } from './hero.component';
+
+describe('HeroComponent', () => {
+  let component: HeroComponent;
+  let fixture: ComponentFixture<HeroComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HeroComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(HeroComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-hero',
+  imports: [],
+  templateUrl: './hero.component.html',
+  styleUrl: './hero.component.scss',
+})
+export class HeroComponent {
+
+}

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

@@ -0,0 +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>

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

@@ -0,0 +1,77 @@
+@use "../../../../../styles/abstracts";
+
+.navigation {
+    display: none;
+
+    @include abstracts.breakpoint("md") {
+        display: block;
+        padding-right: var(--space-4);
+    }
+
+    &__list {
+        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);
+            }
+        }
+    }
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding-left: var(--space-4);
+
+    &__logo {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: var(--text-main);
+        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 {
+        font-size: var(--font-size-base);
+        font-weight: 700;
+        color: var(--text-main);
+
+        span {
+            color: var(--accent);
+        }
+    }
+}
+
+.burger-menu {
+    padding-right: var(--space-4);
+    cursor: pointer;
+
+    @include abstracts.breakpoint("md") {
+        display: none;
+    }
+
+    &__icon {
+        width: abstracts.rem(32);
+        height: abstracts.rem(32);
+        color: var(--text-main);
+    }
+
+}

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

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NavigationComponent } from './navigation.component';
+
+describe('NavigationComponent', () => {
+  let component: NavigationComponent;
+  let fixture: ComponentFixture<NavigationComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NavigationComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(NavigationComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { NgIcon } from '@ng-icons/core';
+
+@Component({
+  selector: 'app-navigation',
+  imports: [NgIcon],
+  templateUrl: './navigation.component.html',
+  styleUrl: './navigation.component.scss',
+})
+export class NavigationComponent {
+
+}

src/app/features/landing/pages/landingpage.component.html

@@ -0,0 +1,6 @@
+<div class="landing-grid">
+  <app-navigation class="navigation__component"></app-navigation>
+  <app-hero class="hero__component"></app-hero>
+  <app-features-section class="features-section__component"></app-features-section>
+  <app-footer class="footer__component"></app-footer>
+</div>

src/app/features/landing/pages/landingpage.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LandingpageComponent } from './landingpage.component';
+
+describe('LandingpageComponent', () => {
+  let component: LandingpageComponent;
+  let fixture: ComponentFixture<LandingpageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [LandingpageComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(LandingpageComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/landing/pages/landingpage.component.ts

@@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NavigationComponent } from '../components/navigation/navigation.component';
+import { HeroComponent } from '../components/hero/hero.component';
+import { FeaturesSectionComponent } from '../components/features-section/features-section.component';
+import { FooterComponent } from '../components/footer/footer.component';
+
+@Component({
+  selector: 'app-landingpage',
+  imports: [
+    NavigationComponent,
+    HeroComponent,
+    FeaturesSectionComponent,
+    FooterComponent
+  ],
+  templateUrl: './landingpage.component.html',
+  styleUrl: './landingpage.component.scss',
+})
+export class LandingpageComponent {
+
+}

src/app/features/shared/ui/button/button.component.html

@@ -0,0 +1 @@
+<p>button works!</p>

src/app/features/shared/ui/button/button.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ButtonComponent } from './button.component';
+
+describe('ButtonComponent', () => {
+  let component: ButtonComponent;
+  let fixture: ComponentFixture<ButtonComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [ButtonComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ButtonComponent);
+    component = fixture.componentInstance;
+    await fixture.whenStable();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/features/shared/ui/button/button.component.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-button',
+  imports: [],
+  templateUrl: './button.component.html',
+  styleUrl: './button.component.scss',
+})
+export class ButtonComponent {
+
+}

src/styles/base/_boilerplate.scss

@@ -21,4 +21,15 @@ body {
 img {
     display: block;
     max-width: 100%;
+}
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }

src/styles/base/_tokens.scss

@@ -1,17 +1,17 @@
 :root {
     // Farben
     --brand-vue: 250;
-    --bg-surface: oklch(99% 0.01 var(--brand-vue));
-    --bg-muted: oklch(99% 0.02 var(--brand-vue));
-    --text-main: oklch(20% 0.01 var(--brand-vue));
-    --text-muted: oklch(45% 0.02 var(--brand-vue));
+    --bg-surface: oklch(88% 0.01 250);
+    --bg-muted: oklch(99% 0.02 250);
+    --text-main: oklch(20% 0.01 250);
+    --text-muted: oklch(45% 0.02 250);
 
-    --accent: oklch(60% 0.18 var(--brand-vue));
-    --accent-hover: oklch(55% 0.22 var(--brand-vue));
+    --accent: oklch(45% 0.22 250);
+    --accent-hover: oklch(55% 0.22 250);
 
-    --button-text: oklch(100% 0.01 var(--brand-vue));
-    --border: oklch(90% 0.02 var(--brand-vue));
-    --shadow-color: 0 0% 0%;
+    --button-text: oklch(100% 0.01 250);
+    --border: oklch(90% 0.02 250);
+    --shadow-color: oklch(0% 0 250);
 
     // Skalierung (modulare Skala)
     --space-unit: 0.25rem;
@@ -27,14 +27,14 @@
 }
 
 [data-theme="dark"] {
-    --bg-surface: oklch(15% 0.02 var(--brand-vue));
-    --bg-muted: oklch(20% 0.02 var(--brand-vue));
-    --text-main: oklch(95% 0.01 var(--brand-vue));
-    --text-muted: oklch(75% 0.02 var(--brand-vue));
+    --bg-surface: oklch(15% 0.02 250);
+    --bg-muted: oklch(20% 0.02 250);
+    --text-main: oklch(95% 0.01 250);
+    --text-muted: oklch(75% 0.02 250);
 
-    --accent: oklch(70% 0.15 var(--brand-vue));
-    --accent-hover: oklch(75% 0.18 var(--brand-vue));
+    --accent: oklch(70% 0.15 250);
+    --accent-hover: oklch(75% 0.18 250);
 
-    --border: oklch(25% 0.02 var(--brand-vue));
+    --border: oklch(25% 0.02 250);
     --shadow-color: 0 0% 100%;
 }

src/styles/layout/_grid.scss

@@ -0,0 +1,41 @@
+@use "../abstracts";
+
+.landing-grid {
+    display: grid;
+    grid-template-columns: 1fr minmax(auto, 1200px) 1fr;
+    grid-template-areas:
+        "navigation     navigation          navigation"
+        ".              hero                ."
+        ".              features-section    ."
+        "footer         footer              footer";
+}
+
+.navigation__component {
+    grid-area: navigation;
+    display: flex;
+    justify-content: space-between;
+    border-radius: 0 0 10px 10px;
+    backdrop-filter: blur(10px);
+    box-shadow: 1px 2px 10px rgba(197, 197, 197, 0.824);
+    position: sticky;
+    top: 0;
+}
+
+.hero__component {
+    grid-area: hero;
+    height: 80vh;
+    padding: var(--space-4);
+
+    @include abstracts.breakpoint("md") {
+        padding: 0;
+    }
+}
+
+.features-section__component {
+    grid-area: features-section;
+    height: 80vh;
+}
+
+.footer__component {
+    grid-area: footer;
+}