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

major update angular

Browse Source
This commit is contained in:
Mathias Hurler
2026-03-11 20:58:58 +01:00
parent 79c71fcf45
commit 1294f0f07c
27 changed files with 965 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/features/landing/components/features-section/features-section.component.html
View File

@@ -1 +1,15 @@
<p>features-section works!</p>
<section class="features-section" id="features-section">
<div class="features-section__wrapper">
<div class="features-section__grid centered">
@for (feature of featuresList; track feature.id) {
<div class="features-section__card">
<h3 class="features-section__claim">{{ feature.claim }}</h3>
<p class="features-section__description">{{ feature.description }}</p>
@if (feature.icon) {
<img [src]="feature.icon" [alt]="feature.iconDescription" />
}
</div>
}
</div>
</div>
</section>

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

@@ -1,3 +1,55 @@
p {
height: 100vh;
@use 'abstracts';
.features-section {
min-height: calc(100vh - var(--neg-nav-height));
margin-top: var(--neg-nav-height);
display: flex;
align-items: center;
&__wrapper {
@include abstracts.container-wrapper;
}
&__grid {
width: 100%;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-3);
}
&__card {
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
height: abstracts.rem(300);
display: flex;
flex-direction: column;
padding-inline: var(--space-3);
justify-content: center;
&:nth-child(1) {
grid-column: 1 / span 2;
grid-row: 1;
}
&:nth-child(2) {
grid-column: 3;
grid-row: 1;
}
&:nth-child(3) {
grid-column: 1;
grid-row: 2;
}
&:nth-child(4) {
grid-column: 2 / span 2;
grid-row: 2;
}
}
&__claim {
font-size: var(--font-size-xl);
}
&__description {
font-size: var(--font-size-lg);
}
}

31
src/app/features/landing/components/features-section/features-section.component.ts
View File

@@ -1,5 +1,13 @@
import { Component } from '@angular/core';
interface Features {
id: number,
claim: string,
description: string,
icon?: string,
iconDescription?: string
}
@Component({
selector: 'app-features-section',
imports: [],
@@ -7,5 +15,26 @@ import { Component } from '@angular/core';
styleUrl: './features-section.component.scss',
})
export class FeaturesSectionComponent {
featuresList: Features[] = [
{
id: 1,
claim: "Code statt Baukasten",
description: "Handgefertigte Performance, die Google und Ihre Nutzer lieben werden."
},
{
id: 2,
claim: "Sicher per Design",
description: "Maximale Rechtskonformität durch eRecht24 und hauseigene Server-Infrastruktur."
},
{
id: 3,
claim: "Heimat für Ihre Daten",
description: "Hosting und Services strikt nach europäischem Datenschutzstandard."
},
{
id: 4,
claim: "Alles im Blick",
description: "Ein Portal für alles: Kommunikation, Verwaltung und Erfolgskontrolle"
},
]
}

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

@@ -1,3 +1,8 @@
<footer>
Hier kommt der Footer
<footer class="footer">
<div class="footer__wrapper">
Hurler Webdesign <br/>
Impressum <br/>
Über uns
</div>
</footer>

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

@@ -1,3 +1,11 @@
footer {
height: 500px;
@use 'abstracts';
.footer {
background-color: var(--accent);
color: var(--bg-surface);
padding: 20px 0;
&__wrapper {
@include abstracts.container-wrapper;
}
}

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

@@ -1,4 +1,4 @@
<section class="hero-section">
<section class="hero-section" id="hero">
<div class="hero-section__video-container">
<video autoplay muted loop>
<source src="/video/white_mit_black_stripes.webm" type="video/webm">

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

@@ -2,15 +2,11 @@
.hero-section {
position: relative; // WICHTIG: Bezugspunkt für das Video
height: 100vh;
margin-top: -60px;
padding-top: 60px;
min-height: calc(100vh + var(--nav-height));
margin-top: var(--neg-nav-height);
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center; // Zentriert den Text-Inhalt
&::before {
content: '';
@@ -19,7 +15,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: var(--overlay);
background-color: var(--hero-video-overlay);
z-index: -1;
}
@@ -62,5 +58,10 @@
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
mask-image: linear-gradient(to bottom,
black 0%,
black 70%,
transparent 100%);
-webkit-mask-image: linear-gradient(to bottom, black 0%, black 70%, transparent 100%);
}
}

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

@@ -1,6 +1,7 @@
@use "abstracts";
.wrapper {
height: var(--nav-height);
border-radius: 0 0 10px 10px;
background-color: var(--nav-bg);
backdrop-filter: var(--nav-backdrop);
@@ -58,11 +59,11 @@
width: abstracts.rem(24);
height: abstracts.rem(24);
margin: auto;
margin-left: var(--space-4);
margin-right: var(--space-4);
@include abstracts.breakpoint("md") {
margin: auto;
margin-left: var(--space-4);
margin-right: var(--space-4);
}
}

20
src/app/features/landing/components/projects/projects.component.html Normal file
View File

@@ -0,0 +1,20 @@
<section class="projects" id="projects">
<div class="projects__wrapper">
<div class="projects__card-container centered">
@for(project of projects; track project.id) {
<div class="projects__card">
<img [src]="project.image" />
<div class="projects__card__description">
<h3>{{ project.company }}</h3>
<p>{{ project.shortDescription }}</p>
<div class="projects__card-features">
@for(feature of project.features; track $index) {
<p>{{ feature }}</p>
}
</div>
</div>
</div>
}
</div>
</div>
</section>

45
src/app/features/landing/components/projects/projects.component.scss Normal file
View File

@@ -0,0 +1,45 @@
@use 'abstracts';
.projects {
display: flex;
min-height: 100vh;
margin-top: var(--neg-nav-height);
align-items: center;
&__wrapper {
@include abstracts.container-wrapper;
}
&__card-container {
display: flex;
gap: var(--space-3);
}
&__card {
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
&__description {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-2);
background: rgba(0, 0, 0, 0.7);
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
&:hover &__description {
opacity: 1;
color: var(--color-white);
}
}
&__card-features {
display: flex;
gap: var(--space-2);
}
}

23
src/app/features/landing/components/projects/projects.component.spec.ts Normal file
View File

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

41
src/app/features/landing/components/projects/projects.component.ts Normal file
View File

@@ -0,0 +1,41 @@
import { Component } from '@angular/core';
interface Project {
id: number,
image: string,
company: string,
shortDescription: string,
features: string[]
}
@Component({
selector: 'app-projects',
imports: [],
templateUrl: './projects.component.html',
styleUrl: './projects.component.scss',
})
export class ProjectsComponent {
projects: Project[] = [
{
id: 1,
company: "Backerei Müller",
image: "/images/bakery.jpg",
shortDescription: "Landingpage mit wechselnden Angeboten",
features: ["SEO", "Angebote", "Dark/Light"],
},
{
id: 2,
company: "Backerei Müller",
image: "/images/bakery.jpg",
shortDescription: "Landingpage mit wechselnden Angeboten",
features: ["SEO", "Angebote", "Dark/Light"],
},
{
id: 3,
company: "Backerei Müller",
image: "/images/bakery.jpg",
shortDescription: "Landingpage mit wechselnden Angeboten",
features: ["SEO", "Angebote", "Dark/Light"],
}
]
}

1
src/app/features/landing/pages/landingpage.component.html
View File

@@ -1,4 +1,5 @@
<app-navigation></app-navigation>
<app-hero></app-hero>
<app-features-section></app-features-section>
<app-projects></app-projects>
<app-footer></app-footer>

6
src/app/features/landing/pages/landingpage.component.ts
View File

@@ -3,6 +3,7 @@ import { NavigationComponent } from '../components/navigation/navigation.compone
import { HeroComponent } from '../components/hero/hero.component';
import { FeaturesSectionComponent } from '../components/features-section/features-section.component';
import { FooterComponent } from '../components/footer/footer.component';
import { ProjectsComponent } from '../components/projects/projects.component';
import { SeoService } from '@core/services/seo.service';
@Component({
@@ -11,8 +12,9 @@ import { SeoService } from '@core/services/seo.service';
NavigationComponent,
HeroComponent,
FeaturesSectionComponent,
FooterComponent
],
ProjectsComponent,
FooterComponent,
],
templateUrl: './landingpage.component.html',
styleUrl: './landingpage.component.scss',
})