mathias/hurler-webdesign-saas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

herosection erstellt

Browse Source
This commit is contained in:
Mathias Hurler
2026-03-04 22:01:49 +01:00
parent ce8cb07834
commit 79c71fcf45
28 changed files with 633 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/app/features/landing/components/features-section/features-section.component.scss
View File

@@ -0,0 +1,3 @@
p {
height: 100vh;
}

4
src/app/features/landing/components/footer/footer.component.html
View File

@@ -1 +1,3 @@
<p>footer works!</p>
<footer>
Hier kommt der Footer
</footer>

3
src/app/features/landing/components/footer/footer.component.scss
View File

@@ -0,0 +1,3 @@
footer {
height: 500px;
}

35
src/app/features/landing/components/hero/hero.component.html
View File

@@ -1,16 +1,23 @@
<section class="hero-section">
<h1 class="hero-section__header">
<span>Digitales Handwerk</span> <br />
<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 class="hero-section__video-container">
<video autoplay muted loop>
<source src="/video/white_mit_black_stripes.webm" type="video/webm">
</video>
</div>
</section>
<div class="hero-section__wrapper">
<h1 class="hero-section__header">
Digitales Handwerk <br />
statt Standard-Baukasten
</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">
<app-button [item]="{ label: 'Über uns', type: 'anchor', target: '#about' }" variant="primary"></app-button>
<app-button (click)="onFeaturesClick()" [item]="{ label: 'Warum kein Wordpress', type: 'anchor', target: 'about'}"
variant="primary"></app-button>
</div>
</div>
</section>

64
src/app/features/landing/components/hero/hero.component.scss
View File

@@ -1,4 +1,66 @@
@use "abstracts";
.hero-section {
position: relative; // WICHTIG: Bezugspunkt für das Video
height: 100vh;
margin-top: -60px;
padding-top: 60px;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center; // Zentriert den Text-Inhalt
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 1200px;
height: 100%;
background-color: var(--overlay);
z-index: -1;
}
&__wrapper {
@include abstracts.container-wrapper;
}
&__video-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2; // Hinter den Text legen
}
h1 {
color: var(--text-main); // Dein Wunsch-Style
font-size: var(--font-size-xxl);
position: relative; // Stellt sicher, dass der Text über dem Video-Layer bleibt
margin-bottom: var(--space-4);
}
&__claim {
color: var(--text-main);
font-size: var(--font-size-xl);
margin-bottom: var(--space-4);
}
&__links {
display: flex;
flex-direction: row;
gap: var(--space-2);
justify-content: center;
}
video {
/* Das hier ist der entscheidende Teil */
width: 100%;
height: 100%;
object-fit: cover; // WICHTIG: Füllt den Container komplett aus, ohne zu verzerren
object-position: center; // Zentriert das Video, falls Ränder abgeschnitten werden
}
}

8
src/app/features/landing/components/hero/hero.component.ts
View File

@@ -1,11 +1,17 @@
import { Component } from '@angular/core';
import { ButtonComponent } from '@shared/ui/button/button.component';
import { UmamiService } from '@core/services/umami.service';
@Component({
selector: 'app-hero',
imports: [],
imports: [ButtonComponent],
templateUrl: './hero.component.html',
styleUrl: './hero.component.scss',
})
export class HeroComponent {
constructor(private umami: UmamiService) {}
onFeaturesClick(): void {
this.umami.trackEvent('features-anchor-click')
}
}

29
src/app/features/landing/components/navigation/navigation.component.html
View File

@@ -1,15 +1,18 @@
<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 class="wrapper">
<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>
<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 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>
</div>
</section>
</section>
</div>

10
src/app/features/landing/components/navigation/navigation.component.scss
View File

@@ -1,5 +1,15 @@
@use "abstracts";
.wrapper {
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;
z-index: var(--z-index-sticky);
}
.header {
max-width: 1200px;
margin: 0 auto;