Add pagination logic to AppealComponent and update layout structure.

frontend/src/app/pages/footer/footer/footer.component.html

@@ -8,7 +8,7 @@
           suggested by our community!</p>
         <div class="followUs" style="height: 35px; display: flex; align-items: flex-end;">
           <a target="_blank" rel="noopener" href="https://discordapp.com/invite/TGqpzCJ">
-            <img ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
+            <img priority ngSrc="/public/img/logos/discord.png" alt="Discord Button" height="32" width="32">
           </a>
           <a target="_blank" rel="noopener" href="https://twitter.com/alttdmc">
             <img ngSrc="/public/img/logos/twitter.png" alt="Twitter Button" height="32" width="32">

frontend/src/app/pages/forms/appeal/appeal.component.html

@@ -7,13 +7,52 @@
   </app-header>
   <main>
     <section class="darkmodeSection appeal-container">
-      <section class="columnSection">
+      <div class="form-container">
-        <div class="columnContainer">
+        <div class="pages">
-          <div class="columnParagraph">
+          @if (currentPageIndex === 0) {
-            <p>hi</p>
+            <section class="formPage">
-          </div>
+              <img ngSrc="/public/img/logos/logo.png" alt="Discord" height="319" width="550"/>
+              <h1>Punishment Appeal</h1>
+              <p>We aim to respond within 48 hours.</p>
+            </section>
+          }
+
+          <!-- Page 2 -->
+          @if (currentPageIndex === 1) {
+            <section class="formPage">
+              <h1>Page 2</h1>
+              <p>This is the second page of the form.</p>
+            </section>
+          }
+
+          <!-- Page 3 -->
+          @if (currentPageIndex === 2) {
+            <section class="formPage">
+              <h1>Page 3</h1>
+              <p>This is the third page of the form.</p>
+            </section>
+          }
         </div>
-      </section>
+
+        <!-- Navigation dots -->
+        <div class="form-navigation">
+          <button mat-icon-button class="nav-button" (click)="previousPage()" [disabled]="isFirstPage()">
+            <mat-icon>navigate_before</mat-icon>
+          </button>
+
+          @for (i of totalPages; track i) {
+            <div
+              class="nav-dot"
+              [class.active]="i === currentPageIndex"
+              (click)="goToPage(i)">
+            </div>
+          }
+
+          <button mat-icon-button class="nav-button" (click)="nextPage()" [disabled]="isLastPage()">
+            <mat-icon>navigate_next</mat-icon>
+          </button>
+        </div>
+      </div>
     </section>
   </main>
 </div>

frontend/src/app/pages/forms/appeal/appeal.component.scss

@@ -12,5 +12,75 @@ main {
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow-y: auto;
+}
+
+.form-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.formPage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  width: 100%;
+  height: 100%;
+  animation: fadeIn 0.5s ease-in-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.navigation-buttons {
+  display: flex;
+  gap: 16px;
+  margin-top: 20px;
+}
+
+.form-navigation {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+.nav-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.3);
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+  margin-top: auto;
+  margin-bottom: auto;
+
+  &.active {
+    background-color: #fff;
+  }
+}
+
+.nav-button {
+  color: #1f9bde;
+}
+
+.pages {
+  margin-top: auto;
+  margin-bottom: auto;
 }

frontend/src/app/pages/forms/appeal/appeal.component.ts

@@ -2,11 +2,17 @@ import {AfterViewInit, Component, ElementRef, OnInit, Renderer2} from '@angular/
 import {FormControl, FormGroup, Validators} from '@angular/forms';
 import {AppealsService, MinecraftAppeal} from '@api';
 import {HeaderComponent} from '@header/header.component';
+import {NgOptimizedImage} from '@angular/common';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
 
 @Component({
   selector: 'app-appeal',
   imports: [
-    HeaderComponent
+    HeaderComponent,
+    NgOptimizedImage,
+    MatButtonModule,
+    MatIconModule
   ],
   templateUrl: './appeal.component.html',
   styleUrl: './appeal.component.scss'
@@ -120,6 +126,30 @@ export class AppealComponent implements OnInit, AfterViewInit {
     this.appealApi.submitMinecraftAppeal(appeal).subscribe()
   }
 
+  public currentPageIndex: number = 0;
+  public totalPages: number[] = [0, 1, 2];
+
+  public goToPage(pageIndex: number): void {
+    if (pageIndex >= 0 && pageIndex < this.totalPages.length) {
+      this.currentPageIndex = pageIndex;
+    }
+  }
+
+  public previousPage() {
+    this.goToPage(this.currentPageIndex - 1);
+  }
+
+  public nextPage() {
+    this.goToPage(this.currentPageIndex + 1);
+  }
+
+  public isFirstPage(): boolean {
+    return this.currentPageIndex === 0;
+  }
+
+  public isLastPage(): boolean {
+    return this.currentPageIndex === this.totalPages.length - 1;
+  }
 }
 
 interface Appeal {