- @for (project of projects; track project.id) {
-
-
![]()
-
-
{{ project.company }}
-
{{ project.shortDescription }}
+ [opTrackProps]="{ project_id: project.id, company: project.company, slug: project.slug }">
+
+
![]()
+
+
+
+
{{ project.branch }}
+
{{ project.company }}
+
{{ project.shortDescription }}
@for (feature of project.features; track $index) {
{{ feature }}
}
+ @if (project.result) {
+
+
+
{{ project.result }}
+
+ }
+
+ Projekt ansehen
+
+
-
+
}
diff --git a/src/app/features/landing/components/projects/projects.component.scss b/src/app/features/landing/components/projects/projects.component.scss
index b5c9aba..4da8bc9 100644
--- a/src/app/features/landing/components/projects/projects.component.scss
+++ b/src/app/features/landing/components/projects/projects.component.scss
@@ -1,10 +1,19 @@
@use 'abstracts';
+@keyframes card-fade-up {
+ from {
+ opacity: 0;
+ transform: translateY(24px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
.projects {
- min-height: 100vh;
- display: flex;
- align-items: center;
- padding-block: var(--space-4);
+ padding-block: calc(var(--space-4) * 2);
+ background-color: var(--bg-muted);
&__wrapper {
@include abstracts.container-wrapper;
@@ -13,7 +22,7 @@
&__header {
text-align: center;
- margin-bottom: var(--space-4);
+ margin-bottom: calc(var(--space-4) * 1.5);
h2 {
font-size: var(--font-size-xl);
@@ -25,6 +34,16 @@
}
}
+ &__label {
+ display: inline-block;
+ font-size: 0.75rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--accent);
+ margin-bottom: var(--space-2);
+ }
+
&__card-container {
display: grid;
grid-template-columns: 1fr;
@@ -39,12 +58,28 @@
position: relative;
border-radius: var(--border-radius);
overflow: hidden;
- aspect-ratio: 4 / 3;
- background: linear-gradient(
- 135deg,
- oklch(from var(--accent) calc(l + 0.1) calc(c * 0.6) h),
- oklch(from var(--accent) calc(l - 0.1) c h)
- );
+ background-color: var(--bg-surface);
+ border: 1px solid var(--border-color);
+ cursor: pointer;
+ text-decoration: none;
+ color: inherit;
+ display: flex;
+ flex-direction: column;
+ transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
+ box-shadow 0.3s ease;
+
+ animation: card-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) var(--delay, 0ms) both;
+
+ &:hover {
+ transform: translateY(-6px);
+ box-shadow: 0 20px 50px oklch(0% 0 0 / 0.12);
+ }
+ }
+
+ &__card-image {
+ position: relative;
+ aspect-ratio: 16 / 10;
+ overflow: hidden;
img {
width: 100%;
@@ -54,50 +89,94 @@
transition: transform 0.4s ease;
}
- &:hover img {
- transform: scale(1.04);
+ .projects__card:hover & img {
+ transform: scale(1.05);
}
+ }
- &__overlay {
- position: absolute;
- inset: 0;
- display: flex;
- flex-direction: column;
- justify-content: flex-end;
- padding: var(--space-3);
- background: linear-gradient(to top, oklch(0% 0 0 / 0.8) 0%, transparent 60%);
- opacity: 0;
- transition: opacity 0.3s ease-in-out;
- color: var(--color-white);
+ &__card-overlay {
+ position: absolute;
+ inset: 0;
+ background: linear-gradient(
+ to top,
+ oklch(0% 0 0 / 0.4) 0%,
+ transparent 50%
+ );
+ pointer-events: none;
+ }
- h3 {
- font-size: var(--font-size-lg);
- margin-bottom: var(--space-1);
- }
+ &__card-content {
+ padding: var(--space-4);
+ display: flex;
+ flex-direction: column;
+ gap: var(--space-2);
+ }
- p {
- font-size: var(--font-size-base);
- margin-bottom: var(--space-2);
- opacity: 0.85;
- }
- }
+ &__card-branch {
+ font-size: 0.7rem;
+ font-weight: 700;
+ text-transform: uppercase;
+ letter-spacing: 0.1em;
+ color: var(--accent);
+ }
- &:hover &__overlay {
- opacity: 1;
- }
+ &__card-title {
+ font-size: var(--font-size-lg);
+ font-weight: 700;
+ line-height: 1.3;
+ color: var(--text-main);
+ }
+
+ &__card-description {
+ font-size: var(--font-size-base);
+ color: var(--text-muted);
+ line-height: 1.6;
}
&__card-features {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
+ margin-top: var(--space-1);
}
&__tag {
- font-size: 0.75rem;
- padding: 2px 8px;
+ font-size: 0.7rem;
+ font-weight: 600;
+ padding: 4px 10px;
border-radius: 999px;
- border: 1px solid oklch(100% 0 0 / 0.4);
- color: var(--color-white);
+ background: linear-gradient(135deg, oklch(from var(--accent) l c h / 0.12) 0%, oklch(from var(--accent) l c h / 0.08) 100%);
+ color: var(--accent);
+ }
+
+ &__card-result {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ margin-top: var(--space-2);
+ padding-top: var(--space-2);
+ border-top: 1px solid var(--border-color);
+ font-size: 0.875rem;
+ font-weight: 700;
+ color: var(--accent);
+
+ svg {
+ flex-shrink: 0;
+ }
+ }
+
+ &__card-cta {
+ display: flex;
+ align-items: center;
+ gap: var(--space-1);
+ font-size: 0.875rem;
+ font-weight: 600;
+ color: var(--accent);
+ margin-top: var(--space-2);
+ transition: gap 0.2s ease;
+
+ .projects__card:hover & {
+ gap: var(--space-2);
+ }
}
}
diff --git a/src/app/features/landing/components/projects/projects.component.ts b/src/app/features/landing/components/projects/projects.component.ts
index 3a5bce1..a41207f 100644
--- a/src/app/features/landing/components/projects/projects.component.ts
+++ b/src/app/features/landing/components/projects/projects.component.ts
@@ -1,17 +1,21 @@
import { Component } from '@angular/core';
+import { RouterLink } from '@angular/router';
import { OpenPanelTrackDirective } from '@core/directives/openpanel.directive';
interface Project {
id: number;
+ slug: string;
image: string;
company: string;
+ branch: string;
shortDescription: string;
features: string[];
+ result?: string;
}
@Component({
selector: 'app-projects',
- imports: [OpenPanelTrackDirective],
+ imports: [RouterLink, OpenPanelTrackDirective],
templateUrl: './projects.component.html',
styleUrl: './projects.component.scss',
})
@@ -19,24 +23,33 @@ export class ProjectsComponent {
projects: Project[] = [
{
id: 1,
- company: 'Schreiner Müller GmbH',
- image: '/images/schreiner-mueller.jpg',
- shortDescription: 'Handwerkswebsite mit Leistungsübersicht und Kontaktformular',
- features: ['SEO', 'Kontaktformular', 'Dark/Light'],
+ slug: 'metzgerei-schlachthof-qualitaet',
+ company: 'Metzgerei Schlachthof-Qualität',
+ branch: 'Fleischerei & Metzgerei',
+ image: '/images/projekte/metzgerei.jpg',
+ shortDescription: 'Premium-Webauftritt für traditionelle Metzgerei mit Fleischerei in der Region',
+ features: ['SEO-Optimierung', 'Responsive Design', 'DSGVO-konform'],
+ result: '+40% mehr Anfragen über Website',
},
{
id: 2,
- company: 'Schützenverein Nördlingen e.V.',
- image: '/images/schuetzenverein.jpg',
- shortDescription: 'Vereinswebsite mit Terminen und Veranstaltungskalender',
- features: ['SEO', 'Termine', 'Mitglieder'],
+ slug: 'finanzberatung-vermoegenswert',
+ company: 'Finanzberatung Vermögenswert',
+ branch: 'Finanzdienstleistung',
+ image: '/images/projekte/finanzberatung.jpg',
+ shortDescription: 'Vertrauenswürdiger Online-Auftritt für unabhängige Finanzberatung',
+ features: ['Lead-Generierung', 'Terminbuchung', 'Premium-Design'],
+ result: '+60% neue Terminbuchungen',
},
{
id: 3,
- company: 'Bäckerei Huber',
- image: '/images/baeckerei-huber.jpg',
- shortDescription: 'Landingpage mit täglich wechselnden Tagesangeboten',
- features: ['SEO', 'Angebote', 'Responsive'],
+ slug: 'physiotherapie-beweglich',
+ company: 'Physiotherapie Beweglich',
+ branch: 'Gesundheitswesen',
+ image: '/images/projekte/physiotherapie.jpg',
+ shortDescription: 'Moderne Praxis-Website für Physiotherapie und Rehabilitation',
+ features: ['Online-Terminbuchung', 'Leistungen', 'Google-optimiert'],
+ result: 'Top 3 bei Google-Suche',
},
];
}
diff --git a/src/app/features/landing/components/stats/stats.component.html b/src/app/features/landing/components/stats/stats.component.html
new file mode 100644
index 0000000..856c7ce
--- /dev/null
+++ b/src/app/features/landing/components/stats/stats.component.html
@@ -0,0 +1,19 @@
+
+
+
+
+ @for (stat of stats; track stat.id; let i = $index) {
+
+
+ {{ displayedValues()[i] }}{{ stat.suffix }}
+
+
{{ stat.label }}
+
{{ stat.description }}
+
+ }
+
+
diff --git a/src/app/features/landing/components/stats/stats.component.scss b/src/app/features/landing/components/stats/stats.component.scss
new file mode 100644
index 0000000..f177a87
--- /dev/null
+++ b/src/app/features/landing/components/stats/stats.component.scss
@@ -0,0 +1,90 @@
+@use 'abstracts';
+
+@keyframes fade-in-up {
+ from {
+ opacity: 0;
+ transform: translateY(24px);
+ }
+ to {
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.stats {
+ padding-block: calc(var(--space-4) * 2);
+ background: linear-gradient(180deg, var(--bg-surface) 0%, var(--bg-muted) 100%);
+
+ &__wrapper {
+ @include abstracts.container-wrapper;
+ width: 100%;
+ }
+
+ &__header {
+ text-align: center;
+ margin-bottom: calc(var(--space-4) * 1.5);
+
+ h2 {
+ font-size: var(--font-size-xl);
+ margin-bottom: var(--space-2);
+ }
+ }
+
+ &__grid {
+ display: grid;
+ grid-template-columns: repeat(2, 1fr);
+ gap: var(--space-3);
+
+ @include abstracts.breakpoint('md') {
+ grid-template-columns: repeat(4, 1fr);
+ }
+ }
+
+ &__card {
+ text-align: center;
+ padding: var(--space-4) var(--space-3);
+ border-radius: var(--border-radius);
+ background-color: var(--bg-surface);
+ border: 1px solid var(--border-color);
+ opacity: 0;
+
+ &.is-visible {
+ animation: fade-in-up 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
+ }
+
+ &:nth-child(1).is-visible { animation-delay: 0ms; }
+ &:nth-child(2).is-visible { animation-delay: 100ms; }
+ &:nth-child(3).is-visible { animation-delay: 200ms; }
+ &:nth-child(4).is-visible { animation-delay: 300ms; }
+
+ &:hover {
+ border-color: var(--accent);
+ transform: translateY(-2px);
+ transition: transform 0.2s ease, border-color 0.2s ease;
+ }
+ }
+
+ &__value {
+ font-size: clamp(2.5rem, 5vw + 1rem, 4rem);
+ font-weight: 800;
+ line-height: 1;
+ background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ background-clip: text;
+ margin-bottom: var(--space-2);
+ }
+
+ &__label {
+ font-size: var(--font-size-base);
+ font-weight: 700;
+ color: var(--text-main);
+ margin-bottom: var(--space-1);
+ }
+
+ &__description {
+ font-size: 0.8rem;
+ color: var(--text-muted);
+ line-height: 1.4;
+ }
+}
diff --git a/src/app/features/landing/components/stats/stats.component.ts b/src/app/features/landing/components/stats/stats.component.ts
new file mode 100644
index 0000000..a225f2b
--- /dev/null
+++ b/src/app/features/landing/components/stats/stats.component.ts
@@ -0,0 +1,95 @@
+import { Component, AfterViewInit, ElementRef, ViewChildren, QueryList, inject, PLATFORM_ID, signal } from '@angular/core';
+import { isPlatformBrowser } from '@angular/common';
+
+interface Stat {
+ id: number;
+ value: number;
+ suffix: string;
+ label: string;
+ description: string;
+}
+
+@Component({
+ selector: 'app-stats',
+ templateUrl: './stats.component.html',
+ styleUrl: './stats.component.scss',
+})
+export class StatsComponent implements AfterViewInit {
+ @ViewChildren('statRef') statElements!: QueryList
>;
+ private platformId = inject(PLATFORM_ID);
+
+ displayedValues = signal([0, 0, 0, 0]);
+
+ stats: Stat[] = [
+ {
+ id: 1,
+ value: 50,
+ suffix: '+',
+ label: 'Projekte',
+ description: 'Webseiten erfolgreich umgesetzt',
+ },
+ {
+ id: 2,
+ value: 99,
+ suffix: '%',
+ label: 'Kundenzufriedenheit',
+ description: 'Würden uns weiterempfehlen',
+ },
+ {
+ id: 3,
+ value: 7,
+ suffix: '+',
+ label: 'Jahre Erfahrung',
+ description: 'Im Webdesign & Development',
+ },
+ {
+ id: 4,
+ value: 100,
+ suffix: '%',
+ label: 'DSGVO-konform',
+ description: 'European Hosting & Datenschutz',
+ },
+ ];
+
+ ngAfterViewInit(): void {
+ if (!isPlatformBrowser(this.platformId)) return;
+
+ const observer = new IntersectionObserver(
+ (entries) => {
+ entries.forEach((entry) => {
+ if (entry.isIntersecting) {
+ entry.target.classList.add('is-visible');
+ this.animateValues();
+ observer.unobserve(entry.target);
+ }
+ });
+ },
+ { threshold: 0.3 }
+ );
+
+ this.statElements.forEach((el) => observer.observe(el.nativeElement));
+ }
+
+ private animateValues(): void {
+ const duration = 2000;
+ const steps = 60;
+ const stepDuration = duration / steps;
+
+ this.stats.forEach((stat, index) => {
+ let current = 0;
+ const increment = stat.value / steps;
+ const timer = setInterval(() => {
+ current += increment;
+ if (current >= stat.value) {
+ current = stat.value;
+ clearInterval(timer);
+ }
+ this.displayedValues.update((values) => {
+ const newValues = [...values];
+ newValues[index] = Math.floor(current);
+ return newValues;
+ });
+ }, stepDuration);
+ });
+ }
+}
diff --git a/src/app/features/landing/components/testimonials/testimonials.component.html b/src/app/features/landing/components/testimonials/testimonials.component.html
new file mode 100644
index 0000000..1ae928c
--- /dev/null
+++ b/src/app/features/landing/components/testimonials/testimonials.component.html
@@ -0,0 +1,46 @@
+
+
+
+
+ @for (testimonial of testimonials; track testimonial.id; let i = $index) {
+
+
+
+
+
+ @for (star of [1,2,3,4,5]; track star) {
+ ★
+ }
+
+
+
+ "{{ testimonial.quote }}"
+
+
+
+
+ {{ testimonial.initials }}
+
+
+
{{ testimonial.name }}
+
{{ testimonial.role }}, {{ testimonial.company }}
+
+
+
+ }
+
+
+
![]()
+
+
+
+
+ Zurück
+
+
{{ p.branch }}
+
{{ p.company }}
+
{{ p.description }}
+ @if (p.result) {
+
+
+
{{ p.result }}
+
+ }
+
+
Leistungen im Projekt
+
+ @for (feature of p.features; track feature.title; let i = $index) {
+
+
+ @switch (feature.icon) {
+ @case ('search') {
+
+ }
+ @case ('smartphone') {
+
+ }
+ @case ('shield') {
+
+ }
+ @case ('target') {
+
+ }
+ @case ('calendar') {
+
+ }
+ @case ('award') {
+
+ }
+ @case ('calendar-check') {
+
+ }
+ @case ('list') {
+
+ }
+ @case ('google') {
+
+ }
+ }
+
+
+
{{ feature.title }}
+
{{ feature.description }}
+
+
+ }
+
+
+
+
+ "{{ p.testimonial.quote }}"
+
+
+
+
Erfolgreich online – wie Ihr Projekt
+
Lassen Sie uns gemeinsam Ihr nächstes Projekt realisieren.
+
+ Projekt anfragen
+
+
+