I had to add something to main component, sry

Introduces a vertical stepper to the main component to visually represent project sprints, including dynamic completion and edit states. Adds project information and team details to the main page, customizes stepper icon styles, and updates module imports to include MatStepperModule.

src/app/app-module.ts

@@ -19,6 +19,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatButtonModule, MatIconButton } from '@angular/material/button';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatDialogClose, MatDialogTitle, MatDialogContent, MatDialogActions } from "@angular/material/dialog";
+import { MatStepperModule } from '@angular/material/stepper';
 
 import { HeaderComponent } from './header/header.component';
 import { HomeComponent } from './home/home.component';
@@ -101,7 +102,8 @@ import { LoginDialog } from './login/login.dialog';
     MatDialogClose,
     MatDialogTitle,
     MatDialogContent,
-    MatDialogActions
+    MatDialogActions,
+    MatStepperModule
 ],
   providers: [
     provideBrowserGlobalErrorListeners(),

src/app/main/main.component.css

@@ -0,0 +1,15 @@
+::ng-deep .mat-step-header .mat-step-icon {
+  background-color: #ccc;
+  color: white;
+}
+
+::ng-deep .mat-step-icon-state-edit {
+  background-color: #fac000 !important;
+  color: white;
+}
+
+
+::ng-deep .mat-step-icon-state-done {
+  background-color: #30d64c !important;
+  color: white;
+}

src/app/main/main.component.html

@@ -1 +1,108 @@
-<p>main works!</p>
+<div class="flex flex-row items-center justify-center gap-8 h-1/1">
+  <div class="max-w-xl m-auto">
+    <section class="felx flex-row">
+      <div class="flex items-center">
+        <h1 class="text-3xl font-bold">
+          Willkommen bei
+        </h1>
+        <div class="bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent text-3xl font-bold">
+          &nbsp;InfiniMotion
+        </div>
+        <h1 class="text-3xl font-bold">! 🎬</h1>
+      </div>
+
+      <p class="mt-4">
+        Diese Website ist eine Praxisarbeit zur Evaluation von Model-Driven Engineering-Tools
+        im Modul Informationsinfrastrukturen Unit 2 der Fachhochschule für die Wirtschaft Hannover.
+      </p>
+
+      <p class="mt-4">
+        <strong>Entwicklungszeitraum: </strong> 28.10.2025 – 24.11.2025
+      </p>
+
+      <p class="mt-2">
+        <strong>Entwicklet von: </strong>
+        Marcel Anker, Lennart Heinrich, Piet Ostendorp, Kevin Szarafin
+      </p>
+
+      <p class="mt-4">
+        Als Betreiber eines kleinen, virtuellen Kinos könnt ihr Kinosäle mit unterschiedlichen Sitzkategorien einrichten und diese für den Verkauf von Eintrittskarten freigeben.
+        Kunden können Filmaufführungen auswählen, Plätze reservieren oder direkt buchen.
+        Das System ermöglicht außerdem, Einnahmen einzelner Aufführungen oder Filme auf Basis der aktuellen Buchungen zu überwachen.
+      </p>
+
+      <p class="mt-4">
+        Viel Spaß beim Erkunden. Hier gehts zur aktuellen <a routerLink="/schedule" class="text-indigo-500">Programm</a>.
+      </p>
+
+      <aside class="disclaimer mt-10 text-xs text-gray-500">
+        <p>
+          <em>
+            Wir haben uns bei Gestaltung und Stil bewusst an bestehenden Kinowebsites orientiert.
+            Dabei handelt es sich um eine rein stilistische Anlehnung; diese Seite verfolgt keinerlei kommerzielle Zwecke und dient ausschließlich universitären Zwecken.
+            Marken, Designs oder Funktionalitäten, die bekannten Anbietern ähneln, sind nicht als Kopie zum Wettbewerb gedacht, sondern als pragmatische Inspirationsquelle im Rahmen der Praxisarbeit.
+            <a href="https://infinimotion.de" target="_blank" class="bg-gradient-to-r from-indigo-500 to-pink-600 bg-clip-text text-transparent">
+              https://infinimotion.de
+            </a>
+            wird zum Projektende offline genommen.
+          </em>
+        </p>
+      </aside>
+
+    </section>
+  </div>
+
+  <div class="max-w-md mr-60 mt-10">
+  <mat-vertical-stepper [linear]="false" [selectedIndex]="5" class="always-open-stepper">
+
+    <mat-step
+      [completed]="isCompleted(0)"
+      [editable]="isEditable(0)">
+      <ng-template matStepLabel>
+        <span>Sprint #0:&nbsp; &nbsp; Planung, Installation und Vorbereitung</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(1)"
+      [editable]="isEditable(1)">
+      <ng-template matStepLabel>
+        <span>Sprint #1:&nbsp; &nbsp; Programmübersicht</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(2)"
+      [editable]="isEditable(2)">
+      <ng-template matStepLabel>
+        <span>Sprint #2:&nbsp; &nbsp; Kinosäle anzeigen</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(3)"
+      [editable]="isEditable(3)">
+      <ng-template matStepLabel>
+        <span>Sprint #3:&nbsp; &nbsp; Verstellungstickets reservieren und buchen</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(4)"
+      [editable]="isEditable(4)">
+      <ng-template matStepLabel>
+        <span>Sprint #4:&nbsp; &nbsp; Statistiken auswerten und anzeigen</span>
+      </ng-template>
+    </mat-step>
+
+    <mat-step
+      [completed]="isCompleted(5)"
+      [editable]="isEditable(5)">
+      <ng-template matStepLabel>
+        <span>Sprint #5:&nbsp; &nbsp; Aufbereitung und Optimierung</span>
+      </ng-template>
+    </mat-step>
+
+  </mat-vertical-stepper>
+
+</div>

src/app/main/main.component.ts

@@ -7,5 +7,13 @@ import { Component } from '@angular/core';
   styleUrl: './main.component.css'
 })
 export class MainComponent {
+  currentSprint = 3;
 
+  isCompleted(index: number): boolean {
+    return index <= this.currentSprint;
+  }
+
+  isEditable(index: number): boolean {
+    return index === this.currentSprint;
+  }
 }