Refactor header structure

Reorganized header component to use content projection for titles and simplified input properties.

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

@@ -1,6 +1,17 @@
 <ng-container>
-  <app-header [title]="'Altitude'" [current_page]="'home'"
-              [background_image]="'/public/img/backgrounds/120spawn-min.png'"></app-header>
+  <app-header [current_page]="'home'"
+              [background_image]="'/public/img/backgrounds/120spawn-min.png'">
+    <div class="title" header-content>
+      <h1 style="display: none;">Altitude</h1>
+      <img id="header-img" 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>
+      <a id="scroll-button" (click)="scrollToSection()">
+        <span></span>
+        <p style="display: none;">Scroll Down</p>
+      </a>
+    </div>
+  </app-header>
   <main>
     <section id="scrollingpoint" style="background: #202020; text-align: center; padding: 80px 0px;">
       <!--      TODO load player count from old api or backend?-->

frontend/src/app/home/home.component.scss

@@ -18,3 +18,103 @@
   background-repeat: no-repeat;
   background-size: cover;
 }
+
+
+#scroll-button {
+  position: absolute;
+  bottom: 50px;
+  left: 50%;
+  z-index: 2;
+  display: inline-block;
+  -webkit-transform: translate(0, -50%);
+  transform: translate(0, -50%);
+  color: #fff;
+  transition: opacity .3s;
+  padding-top: 40px;
+}
+
+#scroll-button:hover {
+  opacity: .5;
+  cursor: pointer;
+}
+
+#scroll-button span {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  width: 46px;
+  height: 46px;
+  margin-left: -23px;
+  border: 2px solid #fff;
+  border-radius: 100%;
+  box-sizing: border-box;
+}
+
+#scroll-button span::after {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  content: '';
+  width: 16px;
+  height: 16px;
+  margin: -12px 0 0 -8px;
+  border-left: 1px solid #fff;
+  border-bottom: 1px solid #fff;
+  -webkit-transform: rotate(-45deg);
+  transform: rotate(-45deg);
+  box-sizing: border-box;
+}
+
+#scroll-button span::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  content: '';
+  width: 44px;
+  height: 44px;
+  box-shadow: 0 0 0 0 rgba(255, 255, 255, .1);
+  border-radius: 100%;
+  opacity: 0;
+  -webkit-animation: sdb03 3s infinite;
+  animation: sdb03 3s infinite;
+  box-sizing: border-box;
+}
+
+@-webkit-keyframes sdb03 {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  60% {
+    box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
+
+@keyframes sdb03 {
+  0% {
+    opacity: 0;
+  }
+
+  30% {
+    opacity: 1;
+  }
+
+  60% {
+    box-shadow: 0 0 0 60px rgba(255, 255, 255, .1);
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}

frontend/src/app/home/home.component.ts

@@ -45,6 +45,14 @@ export class HomeComponent implements OnInit {
     navigator.clipboard.writeText(text);
   }
 
+  scrollToSection(): void {
+    const element = document.getElementById('scrollingpoint');
+    if (element) {
+      element.scrollIntoView({behavior: 'smooth', block: 'start'});
+    } else {
+      console.error('Element with id "scrollingpoint" not found.');
+    }
+  }
 
   protected readonly ALTITUDE_VERSION = ALTITUDE_VERSION;
 }