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

2026-02-22 08:50:45 +01:00
parent 5b63771cc3
commit b6ca9be225
32 changed files with 466 additions and 79 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,13 +16,15 @@
        "@angular/platform-server": "^21.0.0",
        "@angular/router": "^21.0.0",
        "@angular/ssr": "^21.0.3",
+        "@ng-icons/core": "^33.1.0",
+        "@ng-icons/css.gg": "^33.1.0",
        "express": "^5.1.0",
        "rxjs": "~7.8.0",
        "tslib": "^2.3.0"
      },
      "devDependencies": {
        "@angular/build": "^21.0.3",
-        "@angular/cli": "^21.0.3",
+        "@angular/cli": "^21.1.4",
        "@angular/compiler-cli": "^21.0.0",
        "@types/express": "^5.0.1",
        "@types/node": "^20.17.19",
@@ -2638,6 +2640,31 @@
        "url": "https://github.com/sponsors/Brooooooklyn"
      }
    },
+    "node_modules/@ng-icons/core": {
+      "version": "33.1.0",
+      "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-33.1.0.tgz",
+      "integrity": "sha512-kNkVt+saULAZp6f84PXmMRbNiiBVdqpM71ajiTAyTqOZCjKxXJe6gnpBfuOd0QvnkxEKSkFuswu4xFYbRPVXUQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "@angular-devkit/schematics": ">=21.0.0",
+        "@angular/common": ">=21.0.0",
+        "@angular/core": ">=21.0.0",
+        "@schematics/angular": ">=21.0.0",
+        "rxjs": "^6.5.3 || ^7.4.0"
+      }
+    },
+    "node_modules/@ng-icons/css.gg": {
+      "version": "33.1.0",
+      "resolved": "https://registry.npmjs.org/@ng-icons/css.gg/-/css.gg-33.1.0.tgz",
+      "integrity": "sha512-jkGWc0ZaHQqFeAA3cgJ0oCDpAME8jmnQcNJeVJwicJEWKFYGjVkoKFUBxH7k1sajTGTCnA4kkTl1fvXtG4VYFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      }
+    },
    "node_modules/@npmcli/agent": {
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/@npmcli/agent/-/agent-4.0.0.tgz",
@@ -2762,9 +2789,9 @@
      }
    },
    "node_modules/@npmcli/package-json": {
-      "version": "7.0.4",
-      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-7.0.4.tgz",
-      "integrity": "sha512-0wInJG3j/K40OJt/33ax47WfWMzZTm6OQxB9cDhTt5huCP2a9g2GnlsxmfN+PulItNPIpPrZ+kfwwUil7eHcZQ==",
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/@npmcli/package-json/-/package-json-7.0.5.tgz",
+      "integrity": "sha512-iVuTlG3ORq2iaVa1IWUxAO/jIp77tUKBhoMjuzYW2kL4MLN1bi/ofqkZ7D7OOwh8coAx1/S2ge0rMdGv8sLSOQ==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
@@ -2774,7 +2801,7 @@
        "json-parse-even-better-errors": "^5.0.0",
        "proc-log": "^6.0.0",
        "semver": "^7.5.3",
-        "validate-npm-package-license": "^3.0.4"
+        "spdx-expression-parse": "^4.0.0"
      },
      "engines": {
        "node": "^20.17.0 || >=22.9.0"
@@ -5534,18 +5561,18 @@
      }
    },
    "node_modules/glob": {
-      "version": "13.0.5",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.5.tgz",
-      "integrity": "sha512-BzXxZg24Ibra1pbQ/zE7Kys4Ua1ks7Bn6pKLkVPZ9FZe4JQS6/Q7ef3LG1H+k7lUf5l4T3PLSyYyYJVYUvfgTw==",
+      "version": "13.0.6",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-13.0.6.tgz",
+      "integrity": "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw==",
      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
-        "minimatch": "^10.2.1",
-        "minipass": "^7.1.2",
-        "path-scurry": "^2.0.0"
+        "minimatch": "^10.2.2",
+        "minipass": "^7.1.3",
+        "path-scurry": "^2.0.2"
      },
      "engines": {
-        "node": "20 || >=22"
+        "node": "18 || 20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
@@ -5602,9 +5629,9 @@
      }
    },
    "node_modules/hono": {
-      "version": "4.11.10",
-      "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.10.tgz",
-      "integrity": "sha512-kyWP5PAiMooEvGrA9jcD3IXF7ATu8+o7B3KCbPXid5se52NPqnOpM/r9qeW2heMnOekF4kqR1fXJqCYeCLKrZg==",
+      "version": "4.12.1",
+      "resolved": "https://registry.npmjs.org/hono/-/hono-4.12.1.tgz",
+      "integrity": "sha512-hi9afu8g0lfJVLolxElAZGANCTTl6bewIdsRNhaywfP9K8BPf++F2z6OLrYGIinUwpRKzbZHMhPwvc0ZEpAwGw==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -6344,27 +6371,27 @@
      }
    },
    "node_modules/minimatch": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.1.tgz",
-      "integrity": "sha512-MClCe8IL5nRRmawL6ib/eT4oLyeKMGCghibcDWK+J0hh0Q8kqSdia6BvbRMVk6mPa6WqUa5uR2oxt6C5jd533A==",
+      "version": "10.2.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-10.2.2.tgz",
+      "integrity": "sha512-+G4CpNBxa5MprY+04MbgOw1v7So6n5JY166pFi9KfYwT78fxScCeSNQSNzp6dpPSW2rONOps6Ocam1wFhCgoVw==",
      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
        "brace-expansion": "^5.0.2"
      },
      "engines": {
-        "node": "20 || >=22"
+        "node": "18 || 20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/minipass": {
-      "version": "7.1.2",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz",
-      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-7.1.3.tgz",
+      "integrity": "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A==",
      "dev": true,
-      "license": "ISC",
+      "license": "BlueOak-1.0.0",
      "engines": {
        "node": ">=16 || 14 >=14.17"
      }
@@ -6731,9 +6758,9 @@
      }
    },
    "node_modules/npm-packlist": {
-      "version": "10.0.3",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-10.0.3.tgz",
-      "integrity": "sha512-zPukTwJMOu5X5uvm0fztwS5Zxyvmk38H/LfidkOMt3gbZVCyro2cD/ETzwzVPcWZA3JOyPznfUN/nkyFiyUbxg==",
+      "version": "10.0.4",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-10.0.4.tgz",
+      "integrity": "sha512-uMW73iajD8hiH4ZBxEV3HC+eTnppIqwakjOYuvgddnalIw2lJguKviK1pcUJDlIWm1wSJkchpDZDSVVsZEYRng==",
      "dev": true,
      "license": "ISC",
      "dependencies": {
@@ -7034,9 +7061,9 @@
      "license": "MIT"
    },
    "node_modules/path-scurry": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.1.tgz",
-      "integrity": "sha512-oWyT4gICAu+kaA7QWk/jvCHWarMKNs6pXOGWKDTr7cw4IGcUbW+PeTfbaQiLGheFRpjo6O9J0PmyMfQPjH71oA==",
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.2.tgz",
+      "integrity": "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg==",
      "dev": true,
      "license": "BlueOak-1.0.0",
      "dependencies": {
@@ -7044,7 +7071,7 @@
        "minipass": "^7.1.2"
      },
      "engines": {
-        "node": "20 || >=22"
+        "node": "18 || 20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
@@ -7796,17 +7823,6 @@
        "node": ">=0.10.0"
      }
    },
-    "node_modules/spdx-correct": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
-      "integrity": "sha512-kN9dJbvnySHULIluDHy32WHRUu3Og7B9sbY7tsFLctQkIqnMh3hErYgdMjTYuqmcXX+lK5T1lnUt3G7zNswmZA==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "spdx-expression-parse": "^3.0.0",
-        "spdx-license-ids": "^3.0.0"
-      }
-    },
    "node_modules/spdx-exceptions": {
      "version": "2.5.0",
      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.5.0.tgz",
@@ -7815,9 +7831,9 @@
      "license": "CC-BY-3.0"
    },
    "node_modules/spdx-expression-parse": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
-      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-4.0.0.tgz",
+      "integrity": "sha512-Clya5JIij/7C6bRR22+tnGXbc4VKlibKSVj2iHvVeX5iMW7s1SIQlqu699JkODJJIhh/pUu8L0/VLh8xflD+LQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
@@ -7826,9 +7842,9 @@
      }
    },
    "node_modules/spdx-license-ids": {
-      "version": "3.0.22",
-      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.22.tgz",
-      "integrity": "sha512-4PRT4nh1EImPbt2jASOKHX7PB7I+e4IWNLvkKFDxNhJlfjbYlleYQh285Z/3mPTHSAK/AvdMmw5BNNuYH8ShgQ==",
+      "version": "3.0.23",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.23.tgz",
+      "integrity": "sha512-CWLcCCH7VLu13TgOH+r8p1O/Znwhqv/dbb6lqWy67G+pT1kHmeD/+V36AVb/vq8QMIQwVShJ6Ssl5FPh0fuSdw==",
      "dev": true,
      "license": "CC0-1.0"
    },
@@ -8192,17 +8208,6 @@
        "browserslist": ">= 4.21.0"
      }
    },
-    "node_modules/validate-npm-package-license": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
-      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
-      "dev": true,
-      "license": "Apache-2.0",
-      "dependencies": {
-        "spdx-correct": "^3.0.0",
-        "spdx-expression-parse": "^3.0.0"
-      }
-    },
    "node_modules/validate-npm-package-name": {
      "version": "7.0.2",
      "resolved": "https://registry.npmjs.org/validate-npm-package-name/-/validate-npm-package-name-7.0.2.tgz",
--- a/package.json
+++ b/package.json
@@ -32,13 +32,15 @@
    "@angular/platform-server": "^21.0.0",
    "@angular/router": "^21.0.0",
    "@angular/ssr": "^21.0.3",
+    "@ng-icons/core": "^33.1.0",
+    "@ng-icons/css.gg": "^33.1.0",
    "express": "^5.1.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0"
  },
  "devDependencies": {
    "@angular/build": "^21.0.3",
-    "@angular/cli": "^21.0.3",
+    "@angular/cli": "^21.1.4",
    "@angular/compiler-cli": "^21.0.0",
    "@types/express": "^5.0.1",
    "@types/node": "^20.17.19",
--- a/src/app/app.config.ts
+++ b/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({})
  ]
 };
--- a/src/app/app.routes.ts
+++ b/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
+    }
+];
--- a/src/app/app.ts
+++ b/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');
--- a/src/app/features/landing/components/features-section/features-section.component.html
+++ b/src/app/features/landing/components/features-section/features-section.component.html
@@ -0,0 +1 @@
+<p>features-section works!</p>
--- a/src/app/features/landing/components/features-section/features-section.component.scss
+++ b/src/app/features/landing/components/features-section/features-section.component.scss
--- a/src/app/features/landing/components/features-section/features-section.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/features/landing/components/features-section/features-section.component.ts
+++ b/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 {
+
+}
--- a/src/app/features/landing/components/footer/footer.component.html
+++ b/src/app/features/landing/components/footer/footer.component.html
@@ -0,0 +1 @@
+<p>footer works!</p>
--- a/src/app/features/landing/components/footer/footer.component.scss
+++ b/src/app/features/landing/components/footer/footer.component.scss
--- a/src/app/features/landing/components/footer/footer.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/features/landing/components/footer/footer.component.ts
+++ b/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 {
+
+}
--- a/src/app/features/landing/components/hero/hero.component.html
+++ b/src/app/features/landing/components/hero/hero.component.html
@@ -0,0 +1 @@
+<section>hero works!</section>
--- a/src/app/features/landing/components/hero/hero.component.scss
+++ b/src/app/features/landing/components/hero/hero.component.scss
--- a/src/app/features/landing/components/hero/hero.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/features/landing/components/hero/hero.component.ts
+++ b/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 {
+
+}
--- a/src/app/features/landing/components/navigation/navigation.component.html
+++ b/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>
--- a/src/app/features/landing/components/navigation/navigation.component.scss
+++ b/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);
+    }
+
+}
--- a/src/app/features/landing/components/navigation/navigation.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/features/landing/components/navigation/navigation.component.ts
+++ b/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 {
+
+}
--- a/src/app/features/landing/pages/landingpage.component.html
+++ b/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>
--- a/src/app/features/landing/pages/landingpage.component.scss
+++ b/src/app/features/landing/pages/landingpage.component.scss
--- a/src/app/features/landing/pages/landingpage.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/features/landing/pages/landingpage.component.ts
+++ b/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 {
+
+}
--- a/src/app/features/shared/ui/button/button.component.html
+++ b/src/app/features/shared/ui/button/button.component.html
@@ -0,0 +1 @@
+<p>button works!</p>
--- a/src/app/features/shared/ui/button/button.component.scss
+++ b/src/app/features/shared/ui/button/button.component.scss
--- a/src/app/features/shared/ui/button/button.component.spec.ts
+++ b/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();
+  });
+});
--- a/src/app/features/shared/ui/button/button.component.ts
+++ b/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 {
+
+}
--- a/src/styles/base/_boilerplate.scss
+++ b/src/styles/base/_boilerplate.scss
@@ -22,3 +22,14 @@ img {
    display: block;
    max-width: 100%;
 }
+
+a {
+    text-decoration: none;
+    color: inherit;
+}
+
+.centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
--- a/src/styles/base/_tokens.scss
+++ b/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%;
 }
--- a/src/styles/layout/_grid.scss
+++ b/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;
+}