Implemented following stuff

- Basic Material Design
- Default Component to see anything
- theme switching between light and dark
- language change between german and english

src/app/features/welcome/welcome.html

@@ -0,0 +1,28 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>{{ `WELCOME.TITLE` | translate }} </mat-card-title>
+    <mat-card-subtitle>{{ `WELCOME.SUB` | translate }}</mat-card-subtitle>
+  </mat-card-header>
+
+  <mat-card-content>
+    <p>{{ `WELCOME.TEXT` | translate }}</p>
+    <p style="margin-top: 8px;">
+      {{ `WELCOME.COUNTER` | translate }}: <strong data-testid="counter">{{ count() }}</strong>
+    </p>
+  </mat-card-content>
+
+  <mat-card-actions>
+    <button mat-raised-button color="primary"
+            (click)="inc()"
+            data-testid="inc"
+    >
+      <mat-icon>add</mat-icon> {{ `WELCOME.INC` | translate }}
+    </button>
+    <button mat-stroked-button
+            (click)="reset()"
+            data-testid="reset"
+    >
+      <mat-icon>restart_alt</mat-icon>  {{ `WELCOME.RESET` | translate }}
+    </button>
+  </mat-card-actions>
+</mat-card>

src/app/features/welcome/welcome.scss

@@ -0,0 +1,5 @@
+mat-card {
+  margin-top: 2rem;
+  display: block;
+  background-color: var(--app-card-background);
+}

src/app/features/welcome/welcome.ts

@@ -0,0 +1,18 @@
+import { Component, signal } from '@angular/core';
+import { MatCardModule } from '@angular/material/card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import {TranslatePipe} from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-welcome',
+  standalone: true,
+  imports: [MatCardModule, MatButtonModule, MatIconModule, TranslatePipe],
+  templateUrl: './welcome.html',
+  styleUrl: './welcome.scss',
+})
+export class WelcomeComponent {
+  readonly count = signal(0);
+  inc() { this.count.update(v => v + 1); }
+  reset() { this.count.set(0); }
+}