Not fully styled/finished version of header and home page + all images

frontend/src/app/app.component.ts

@@ -1,12 +1,41 @@
-import { Component } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
+import {Component, OnInit} from '@angular/core';
+import {Meta, Title} from '@angular/platform-browser';
+import {ALTITUDE_VERSION} from './constant';
+import {Router} from '@angular/router';
 
 @Component({
+  standalone: false,
   selector: 'app-root',
-  imports: [RouterOutlet],
   templateUrl: './app.component.html',
-  styleUrl: './app.component.scss'
+  styleUrl: './app.component.scss',
 })
-export class AppComponent {
-  title = 'frontend';
+export class AppComponent implements OnInit{
+  title = 'Survival Minecraft Server on ' + ALTITUDE_VERSION + '! | Altitude Community';
+  title_og = 'Community-centered ' + ALTITUDE_VERSION + ' Survival Minecraft Server';
+  description = 'Start your adventure today! We are a ' +
+    ALTITUDE_VERSION + ' survival community with McMMO, MyPet, Dynmap, & player shop based economy. ' +
+    'Monthly server events. Best community in ' + ALTITUDE_VERSION + '!';
+  description_og = 'Start your adventure today! We host ' +
+    ALTITUDE_VERSION + ' survival with features suggested by our community: McMMO, MyPet, Dynmap, & economy. ' +
+    'Monthly server events...';
+  keywords = 'minecraft,survival,server,servers,community,small,vanilla,semivanilla,dynmap,mcmmo,griefing,' +
+    ALTITUDE_VERSION + ',altitude,alttd,play,join,find,friends,friendly,simple,private,whitelist,whitelisted,creative,' +
+    'worldedit'
+
+  constructor(private titleService: Title, private metaService: Meta, private router: Router) {
+
+  }
+
+  ngOnInit(): void {
+    this.titleService.setTitle(this.title)
+    this.metaService.updateTag({ name: 'description', content: this.description});
+    this.metaService.updateTag({ name: 'twitter:description', content: this.description_og})
+    this.metaService.updateTag({ name: 'og:title', content: this.title_og})
+    this.metaService.updateTag({ name: 'og:description', content: this.description_og})
+    this.metaService.updateTag({ name: 'keywords', content: this.keywords})
+  }
+
+  public isHomePage(): boolean {
+    return this.router.url === '/';
+  }
 }