From b6ca9be2256d379dcf27d0cbfc5f0b79bb23e368 Mon Sep 17 00:00:00 2001 From: MurlerDE Date: Sun, 22 Feb 2026 08:50:45 +0100 Subject: [PATCH] Nav bar basic styles finished, burger menu without function and transition, hero section next to go, --- package-lock.json | 121 +++++++++--------- package.json | 6 +- src/app/app.config.ts | 5 +- src/app/app.routes.ts | 8 +- src/app/app.ts | 5 +- .../features-section.component.html | 1 + .../features-section.component.scss} | 0 .../features-section.component.spec.ts | 23 ++++ .../features-section.component.ts | 11 ++ .../components/footer/footer.component.html | 1 + .../components/footer/footer.component.scss | 0 .../footer/footer.component.spec.ts | 23 ++++ .../components/footer/footer.component.ts | 11 ++ .../components/hero/hero.component.html | 1 + .../components/hero/hero.component.scss | 0 .../components/hero/hero.component.spec.ts | 23 ++++ .../landing/components/hero/hero.component.ts | 11 ++ .../navigation/navigation.component.html | 15 +++ .../navigation/navigation.component.scss | 77 +++++++++++ .../navigation/navigation.component.spec.ts | 23 ++++ .../navigation/navigation.component.ts | 12 ++ .../landing/pages/landingpage.component.html | 6 + .../landing/pages/landingpage.component.scss | 0 .../pages/landingpage.component.spec.ts | 23 ++++ .../landing/pages/landingpage.component.ts | 20 +++ .../shared/ui/button/button.component.html | 1 + .../shared/ui/button/button.component.scss | 0 .../shared/ui/button/button.component.spec.ts | 23 ++++ .../shared/ui/button/button.component.ts | 11 ++ src/styles/base/_boilerplate.scss | 11 ++ src/styles/base/_tokens.scss | 32 ++--- src/styles/layout/_grid.scss | 41 ++++++ 32 files changed, 466 insertions(+), 79 deletions(-) create mode 100644 src/app/features/landing/components/features-section/features-section.component.html rename src/app/features/landing/{index.ts => components/features-section/features-section.component.scss} (100%) create mode 100644 src/app/features/landing/components/features-section/features-section.component.spec.ts create mode 100644 src/app/features/landing/components/features-section/features-section.component.ts create mode 100644 src/app/features/landing/components/footer/footer.component.html create mode 100644 src/app/features/landing/components/footer/footer.component.scss create mode 100644 src/app/features/landing/components/footer/footer.component.spec.ts create mode 100644 src/app/features/landing/components/footer/footer.component.ts create mode 100644 src/app/features/landing/components/hero/hero.component.html create mode 100644 src/app/features/landing/components/hero/hero.component.scss create mode 100644 src/app/features/landing/components/hero/hero.component.spec.ts create mode 100644 src/app/features/landing/components/hero/hero.component.ts create mode 100644 src/app/features/landing/components/navigation/navigation.component.html create mode 100644 src/app/features/landing/components/navigation/navigation.component.scss create mode 100644 src/app/features/landing/components/navigation/navigation.component.spec.ts create mode 100644 src/app/features/landing/components/navigation/navigation.component.ts create mode 100644 src/app/features/landing/pages/landingpage.component.html create mode 100644 src/app/features/landing/pages/landingpage.component.scss create mode 100644 src/app/features/landing/pages/landingpage.component.spec.ts create mode 100644 src/app/features/landing/pages/landingpage.component.ts create mode 100644 src/app/features/shared/ui/button/button.component.html create mode 100644 src/app/features/shared/ui/button/button.component.scss create mode 100644 src/app/features/shared/ui/button/button.component.spec.ts create mode 100644 src/app/features/shared/ui/button/button.component.ts diff --git a/package-lock.json b/package-lock.json index 12cf963..87946ba 100644 --- 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", diff --git a/package.json b/package.json index 8985bda..dbd254b 100644 --- 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", @@ -46,4 +48,4 @@ "typescript": "~5.9.2", "vitest": "^4.0.8" } -} \ No newline at end of file +} diff --git a/src/app/app.config.ts b/src/app/app.config.ts index 797642e..67fb0b7 100644 --- 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({}) ] }; diff --git a/src/app/app.routes.ts b/src/app/app.routes.ts index dc39edb..a18e20a 100644 --- 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 + } +]; diff --git a/src/app/app.ts b/src/app/app.ts index dc894c0..9fea51d 100644 --- 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'); diff --git a/src/app/features/landing/components/features-section/features-section.component.html b/src/app/features/landing/components/features-section/features-section.component.html new file mode 100644 index 0000000..175a36f --- /dev/null +++ b/src/app/features/landing/components/features-section/features-section.component.html @@ -0,0 +1 @@ +

features-section works!

diff --git a/src/app/features/landing/index.ts b/src/app/features/landing/components/features-section/features-section.component.scss similarity index 100% rename from src/app/features/landing/index.ts rename to src/app/features/landing/components/features-section/features-section.component.scss diff --git 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 new file mode 100644 index 0000000..1b20644 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FeaturesSectionComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FeaturesSectionComponent); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/landing/components/features-section/features-section.component.ts b/src/app/features/landing/components/features-section/features-section.component.ts new file mode 100644 index 0000000..81c564f --- /dev/null +++ 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 { + +} diff --git a/src/app/features/landing/components/footer/footer.component.html b/src/app/features/landing/components/footer/footer.component.html new file mode 100644 index 0000000..28c0d7d --- /dev/null +++ b/src/app/features/landing/components/footer/footer.component.html @@ -0,0 +1 @@ +

footer works!

diff --git a/src/app/features/landing/components/footer/footer.component.scss b/src/app/features/landing/components/footer/footer.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/landing/components/footer/footer.component.spec.ts b/src/app/features/landing/components/footer/footer.component.spec.ts new file mode 100644 index 0000000..6ce11c9 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [FooterComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(FooterComponent); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/landing/components/footer/footer.component.ts b/src/app/features/landing/components/footer/footer.component.ts new file mode 100644 index 0000000..ba1c9c2 --- /dev/null +++ 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 { + +} diff --git a/src/app/features/landing/components/hero/hero.component.html b/src/app/features/landing/components/hero/hero.component.html new file mode 100644 index 0000000..a2d6cef --- /dev/null +++ b/src/app/features/landing/components/hero/hero.component.html @@ -0,0 +1 @@ +
hero works!
diff --git a/src/app/features/landing/components/hero/hero.component.scss b/src/app/features/landing/components/hero/hero.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/landing/components/hero/hero.component.spec.ts b/src/app/features/landing/components/hero/hero.component.spec.ts new file mode 100644 index 0000000..c1cad76 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [HeroComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(HeroComponent); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/landing/components/hero/hero.component.ts b/src/app/features/landing/components/hero/hero.component.ts new file mode 100644 index 0000000..aa60839 --- /dev/null +++ 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 { + +} diff --git a/src/app/features/landing/components/navigation/navigation.component.html b/src/app/features/landing/components/navigation/navigation.component.html new file mode 100644 index 0000000..31382d5 --- /dev/null +++ b/src/app/features/landing/components/navigation/navigation.component.html @@ -0,0 +1,15 @@ +
+ +

Hurler Webdesign

+
+ + +
+ +
diff --git a/src/app/features/landing/components/navigation/navigation.component.scss b/src/app/features/landing/components/navigation/navigation.component.scss new file mode 100644 index 0000000..28103c0 --- /dev/null +++ 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); + } + +} \ No newline at end of file diff --git a/src/app/features/landing/components/navigation/navigation.component.spec.ts b/src/app/features/landing/components/navigation/navigation.component.spec.ts new file mode 100644 index 0000000..05b3615 --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [NavigationComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(NavigationComponent); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/landing/components/navigation/navigation.component.ts b/src/app/features/landing/components/navigation/navigation.component.ts new file mode 100644 index 0000000..a7279f3 --- /dev/null +++ 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 { + +} diff --git a/src/app/features/landing/pages/landingpage.component.html b/src/app/features/landing/pages/landingpage.component.html new file mode 100644 index 0000000..bd6d444 --- /dev/null +++ b/src/app/features/landing/pages/landingpage.component.html @@ -0,0 +1,6 @@ +
+ + + + +
diff --git a/src/app/features/landing/pages/landingpage.component.scss b/src/app/features/landing/pages/landingpage.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/landing/pages/landingpage.component.spec.ts b/src/app/features/landing/pages/landingpage.component.spec.ts new file mode 100644 index 0000000..38de6fb --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [LandingpageComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(LandingpageComponent); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/landing/pages/landingpage.component.ts b/src/app/features/landing/pages/landingpage.component.ts new file mode 100644 index 0000000..bb1ae1e --- /dev/null +++ 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 { + +} diff --git a/src/app/features/shared/ui/button/button.component.html b/src/app/features/shared/ui/button/button.component.html new file mode 100644 index 0000000..9cd155e --- /dev/null +++ b/src/app/features/shared/ui/button/button.component.html @@ -0,0 +1 @@ +

button works!

diff --git a/src/app/features/shared/ui/button/button.component.scss b/src/app/features/shared/ui/button/button.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/features/shared/ui/button/button.component.spec.ts b/src/app/features/shared/ui/button/button.component.spec.ts new file mode 100644 index 0000000..87c2bda --- /dev/null +++ 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; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [ButtonComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(ButtonComponent); + component = fixture.componentInstance; + await fixture.whenStable(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/features/shared/ui/button/button.component.ts b/src/app/features/shared/ui/button/button.component.ts new file mode 100644 index 0000000..1dc1ae8 --- /dev/null +++ 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 { + +} diff --git a/src/styles/base/_boilerplate.scss b/src/styles/base/_boilerplate.scss index 29cefdb..733fa3f 100644 --- a/src/styles/base/_boilerplate.scss +++ b/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; } \ No newline at end of file diff --git a/src/styles/base/_tokens.scss b/src/styles/base/_tokens.scss index 247ca9d..5f7b03b 100644 --- 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%; } \ No newline at end of file diff --git a/src/styles/layout/_grid.scss b/src/styles/layout/_grid.scss index e69de29..511ebb3 100644 --- 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; +} \ No newline at end of file