Refactor homepage and header components.

Moved header content logic based on `current_page` input for reusability. Updated styling and layout structure to improve maintainability and accommodate dynamic titles and subtitles.

frontend/src/app/header/header.component.html

@@ -1,4 +1,5 @@
 <ng-container>
+  <header id="top">
     <nav id="nav">
       <div class="container">
         <div id="mobile_nav">
@@ -64,7 +65,8 @@
         </div>
         <a href="/"><img ngSrc="/public/img/logos/logo.png" alt="Altitude Server Logo" height="319" width="550"></a>
         <ul id="nav_list">
-        <li class="nav_li"><a [id]="[current_page === 'index' ? 'current-page' : null]" class="nav_link" href="/">Home</a>
+          <li class="nav_li"><a [id]="[current_page === 'index' ? 'current-page' : null]" class="nav_link"
+                                href="/">Home</a>
           </li>
           <li class="nav_li">
           <span [id]="getCurrentPageId(['map', 'customfeatures', 'economy', 'events', 'mypet', 'warps',
@@ -102,12 +104,14 @@
           </li>
           <li class="nav_li"><a class="nav_link" target="_blank" rel="noopener"
                                 href="https://discordapp.com/invite/TGqpzCJ">Discord</a></li>
-        <li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']">Vote</a></li>
+          <li class="nav_li"><a [id]="getCurrentPageId(['vote'])" class="nav_link" [routerLink]="['/vote']">Vote</a>
+          </li>
           <li class="nav_li">
             <a class="nav_link" target="_blank" rel="noopener" href="https://store.alttd.com">Store</a>
           </li>
           <li class="nav_li">
-          <a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])" class="nav_link fake_link">Altitude</a>
+            <a [id]="getCurrentPageId(['about', 'team', 'community', 'birthdays'])"
+               class="nav_link fake_link">Altitude</a>
             <ul class="dropdown">
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/about']">About Us</a></li>
               <li class="nav_li"><a class="nav_link2" [routerLink]="['/socials']">Socials</a></li>
@@ -131,4 +135,24 @@
       </div>
     </nav>
 
+
+    <ng-container *ngIf="current_page === 'home'">
+      <div class="title">
+        <h1 style="display: none;">{{ title }}</h1>
+        <img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
+             width="550">
+        <h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ ALTITUDE_VERSION }}!</h2>
+      </div>
+      <a id="scrollbutton" href="#scrollingpoint">
+        <span></span>
+        <p style="display: none;">Scroll Down</p>
+      </a>
+    </ng-container>
+    <ng-container *ngIf="current_page !== 'home'">
+      <div class="title">
+        <h1>{{ title }}</h1>
+        <h2>{{ sub_title }}</h2>
+      </div>
+    </ng-container>
+  </header>
 </ng-container>

frontend/src/app/header/header.component.scss

@@ -417,3 +417,8 @@ input:checked + .slider:before {
     display: none;
   }
 }
+
+header {
+  background-size: cover;
+  background: url("/public/img/backgrounds/120spawn-min.png") no-repeat fixed center 0;
+}

frontend/src/app/header/header.component.ts

@@ -1,4 +1,5 @@
 import {Component, Input, OnInit} from '@angular/core';
+import {ALTITUDE_VERSION} from '../constant';
 
 @Component({
   standalone: false,
@@ -8,6 +9,7 @@ import {Component, Input, OnInit} from '@angular/core';
 })
 export class HeaderComponent implements OnInit {
   @Input() title: string = '';
+  @Input() sub_title: string = '';
   @Input() current_page: string = ''
 
   public ngOnInit(): void {
@@ -35,4 +37,5 @@ export class HeaderComponent implements OnInit {
     }
   }
 
+  protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
 }

frontend/src/app/home/home.component.html

@@ -1,17 +1,5 @@
 <ng-container>
-  <header id="top">
+  <app-header [title]="'Altitude'" [current_page]="'home'"></app-header>
-    <app-header [title]="'Altitude'"></app-header>
-    <div class="title">
-      <h1 style="display: none;">Altitude Minecraft Server</h1>
-      <img id="headerimg" ngSrc="/public/img/logos/logo.png" alt="The Altitude Minecraft Server" height="319"
-           width="550">
-      <h2 style="font-size: 2.5em;" id="homeh2">Altitude now on {{ALTITUDE_VERSION}}!</h2>
-    </div>
-    <a id="scrollbutton" href="#scrollingpoint">
-      <span></span>
-      <p style="display: none;">Scroll Down</p>
-    </a>
-  </header>
   <main>
     <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
 <!--      TODO load player count from old api or backend?-->