kunden component is done.

Frontend/src/app/components/kunden/kunden.component.html

@@ -0,0 +1,38 @@
+<section class="page-section portfolio" id="unsere-kunden">
+    <div class="container">
+        <!-- Portfolio Section Heading-->
+        <h2 class="page-section-heading text-center text-uppercase text-secondary mb-0">SIE VERTRAUEN UNS</h2>
+        <!-- Icon Divider-->
+        <div class="divider-custom">
+            <div class="divider-custom-line"></div>
+        </div>
+        <!-- Portfolio Grid Items-->
+        <div class="row justify-content-center">
+            <!-- Portfolio Item 1-->
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
+                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
+                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
+                    </div>
+                    <img class="productImage" src="assets/images/Betterzon.svg"/>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
+                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
+                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
+                    </div>
+                    <img class="productImage" src="assets/images/Betterzon.svg"/>
+                </div>
+            </div>
+            <div class="col-md-6 col-lg-4 mb-5">
+                <div class="portfolio-item mx-auto" data-bs-toggle="modal" data-bs-target="#portfolioModal1">
+                    <div class="portfolio-item-caption d-flex align-items-center justify-content-center h-100 w-100">
+                        <div class="portfolio-item-caption-content text-center text-white"><i class="fas fa-plus fa-3x"></i></div>
+                    </div>
+                    <img class="productImage" src="assets/images/Betterzon.svg"/>
+                </div>
+            </div>
+        </div>
+    </div>
+</section>

Frontend/src/app/components/kunden/kunden.component.spec.ts

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

Frontend/src/app/components/kunden/kunden.component.ts

@@ -0,0 +1,67 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {ApiService} from '../../services/api.service';
+import {Product} from '../../models/product';
+import {ActivatedRoute, Router} from '@angular/router';
+
+@Component({
+  selector: 'app-kunden',
+  templateUrl: './kunden.component.html',
+  styleUrls: ['./kunden.component.css']
+})
+export class KundenComponent implements OnInit {
+    products: Product[] = [];
+    @Input() numberOfProducts: number;
+    @Input() showProductPicture: boolean;
+    @Input() searchQuery: string;
+    @Input() type: string;
+
+    constructor(
+        private apiService: ApiService,
+        private router: Router,
+        private route: ActivatedRoute
+    ) {
+    }
+
+    ngOnInit(): void {
+        this.loadParams();
+    }
+
+    loadParams(): void {
+        if (!this.numberOfProducts) {
+            this.numberOfProducts = 10;
+        }
+        if (!this.showProductPicture) {
+            this.showProductPicture = false;
+        }
+        if (!this.searchQuery) {
+            this.searchQuery = '';
+        }
+        if (!this.type) {
+            this.type = '';
+        }
+
+        switch (this.type) {
+            case 'search': {
+                this.getSearchedProducts();
+                break;
+            }
+            default: {
+                this.getProducts();
+                break;
+            }
+        }
+    }
+
+    getProducts(): void {
+        this.apiService.getProducts().subscribe(products => this.products = products);
+    }
+
+    getSearchedProducts(): void {
+        this.apiService.getProductsByQuery(this.searchQuery).subscribe(products => this.products = products);
+    }
+
+    clickedProduct(product: Product): void {
+        this.router.navigate([('/product/' + product.product_id)]);
+    }
+
+}