major update angular

angular.json

@@ -11,7 +11,8 @@
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
-          "style": "scss"
+          "style": "scss",
+          "type": "component"
         }
       },
       "root": "",

package.json

@@ -34,6 +34,7 @@
     "@angular/ssr": "^21.0.3",
     "@ng-icons/core": "^33.1.0",
     "@ng-icons/css.gg": "^33.1.0",
+    "@openpanel/web": "^1.2.0",
     "express": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

src/app/core/services/navigation.service.ts

@@ -10,12 +10,13 @@ export class NavigationService {
     // === STATE ===
     private readonly _navigationItems = signal<NavigationItem[]>([
         // Anchor-Links (Landingpage intern)
-        { label: 'Home', type: 'anchor', target: 'hero', icon: 'home' },
+        { label: 'Home', type: 'anchor', target: 'hero' },
-        { label: 'Features', type: 'anchor', target: 'features-section', icon: 'star' },
+        { label: 'Features', type: 'anchor', target: 'features-section'},
-        { label: 'Pricing', type: 'anchor', target: 'pricing', icon: 'tag' },
+        { label: 'Projekte', type: 'anchor', target: 'projects' },
+        { label: 'Pricing', type: 'anchor', target: 'pricing' },
         
         // Route-Links ( andere Pages)
-        { label: 'Login', type: 'route', target: '/login', icon: 'log-in' },
+        { label: 'Login', type: 'route', target: '/login' },
         { 
             label: 'Dashboard', 
             type: 'route', 

src/app/core/services/openpanel.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { OpenpanelService } from './openpanel.service';
+
+describe('OpenpanelService', () => {
+  let service: OpenpanelService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(OpenpanelService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/openpanel.service.ts

@@ -0,0 +1,27 @@
+import { Injectable } from '@angular/core';
+import { OpenPanel } from '@openpanel/web';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class AnalyticsService {
+
+  constructor() {
+    OpenPanel.init({
+      clientId: 'DEINE_CLIENT_ID', // Aus dem OpenPanel Dashboard
+      trackScreenViews: true,      // Automatisches Tracking von Routenwechseln
+      trackOutgoingLinks: true,
+      url: 'https://api.deine-coolify-domain.de' // WICHTIG: Deine eigene API URL!
+    });
+  }
+
+  // Methode für benutzerdefinierte Events (das "Brett")
+  trackEvent(name: string, properties?: object) {
+    openpanel.track(name, properties);
+  }
+
+  // Für deinen Kunden-Login: User identifizieren
+  identifyUser(userId: string, traits?: object) {
+    openpanel.identify(userId, traits);
+  }
+}

src/app/features/dashboard/dashboard.html

@@ -0,0 +1 @@
+<p>dashboard works!</p>

src/app/features/dashboard/dashboard.spec.ts

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

src/app/features/dashboard/dashboard.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-dashboard',
+  imports: [],
+  templateUrl: './dashboard.html',
+  styleUrl: './dashboard.scss',
+})
+export class Dashboard {
+
+}

src/app/features/landing/components/features-section/features-section.component.html

@@ -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>

src/app/features/landing/components/features-section/features-section.component.scss

@@ -1,3 +1,55 @@
-p {
+@use 'abstracts';
-    height: 100vh;
+
+.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);
+    }
 }

src/app/features/landing/components/features-section/features-section.component.ts

@@ -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"
+    },
+  ]
 }

src/app/features/landing/components/footer/footer.component.html

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

src/app/features/landing/components/footer/footer.component.scss

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

src/app/features/landing/components/hero/hero.component.html

@@ -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">

src/app/features/landing/components/hero/hero.component.scss

@@ -2,15 +2,11 @@
 
 .hero-section {
   position: relative; // WICHTIG: Bezugspunkt für das Video
-  height: 100vh;
+  min-height: calc(100vh + var(--nav-height));
-  margin-top: -60px;
+  margin-top: var(--neg-nav-height);
-  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: '';
@@ -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%);
   }
 }

src/app/features/landing/components/navigation/navigation.component.scss

@@ -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);
     }
 }
 

src/app/features/landing/components/projects/projects.component.html

@@ -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>

src/app/features/landing/components/projects/projects.component.scss

@@ -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);
+    }
+}

src/app/features/landing/components/projects/projects.component.spec.ts

@@ -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();
+  });
+});

src/app/features/landing/components/projects/projects.component.ts

@@ -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"],
+    }
+  ]
+}

src/app/features/landing/pages/landingpage.component.html

@@ -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>

src/app/features/landing/pages/landingpage.component.ts

@@ -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',
 })

src/styles/abstracts/_mixins.scss

@@ -16,6 +16,6 @@ $breakpoints: (
 
 @mixin container-wrapper {
     max-width: 1200px;
-    margin: auto;
+    margin: 0 auto;
     padding-inline: 20px;
 }

src/styles/base/_tokens.scss

@@ -1,4 +1,5 @@
 @use "abstracts";
+@use 'sass:math';
 
 // ==============================
 // Tier 1: Primitives
@@ -24,9 +25,9 @@
     --accent-hover: oklch(55% 0.22 250);
 
     --button-text: oklch(100% 0.01 250);
-    --border: oklch(90% 0.02 250);
+    --border-color: oklch(31.836% 0.00775 250);
+    --border-radius: 10px;
     --shadow-color: oklch(0% 0 250);
-    --overlay: oklch(90% 0.02 250 / 0.9); // Stapelbare Werte
     --z-index-sticky: 100;
 
     // Skalierung (modulare Skala)
@@ -54,7 +55,6 @@
 
     --border: oklch(25% 0.02 250);
     --shadow-color: 0 0% 100%;
-    --overlay: oklch(30% 0.0075 250 / 0.9);
 
 }
 
@@ -68,7 +68,12 @@
     --nav-shadow: 1px 2px 10px oklch(80% 0 250 / 0.1);
     --nav-backdrop: blur(10px);
     --nav-bg: oklch(100% 0.00011 271.152 / 0.05);
-    --nav-height: abstracts.rem(60);
+    --nav-height: 3.75rem;
+    --neg-nav-height: -3.75rem;
+
+    // Hero
+    --hero-video-overlay: oklch(100% 0.01 250 / 0.9);
+
 }
 
 [data-theme="dark"] {
@@ -77,4 +82,8 @@
     // Navigation
     --nav-shadow: 1px 2px 10px oklch(0% 0 250 / 0.5);
     --nav-bg: oklch(20% 0.02 250 / 0.8);
+
+    // Hero
+    --hero-video-overlay: oklch(15% 0.02 250 / 0.9);
+
 }