Enhance header and map components with new features

Refactor header background styling to use a method supporting optional gradient overlays. Update map component to include detailed server map links and adjust styling for better layout and clarity.

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

@@ -1,5 +1,6 @@
 <ng-container>
-  <header id="top" [ngStyle]="{ 'background-image': 'url(' + background_image + ')', 'height': height }">
+  <header id="top"
+          [ngStyle]="{ 'background-image': getBackgroundImage(), 'height': height }">
     <nav id="nav" [ngClass]="active">
       <div class="container">
         <div id="mobile_nav">

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

@@ -10,6 +10,7 @@ export class HeaderComponent {
   @Input() current_page: string = '';
   @Input() background_image: string = '';
   @Input() height: string = '';
+  @Input() overlay_gradient: boolean = false;
 
   public active: string = '';
 
@@ -23,6 +24,15 @@ export class HeaderComponent {
     }
   }
 
+  public getBackgroundImage() {
+    if (this.overlay_gradient) {
+      return `linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url(${this.background_image})`;
+    } else {
+      return `url(${this.background_image})`;
+    }
+  }
+
+
   public getCurrentPageId(options: string[]) {
     if (options.includes(this.current_page)) {
       return 'current_page'

frontend/src/app/map/map.component.html

@@ -1,9 +1,23 @@
 <ng-container>
   <app-header [current_page]="'map'"
-              [background_image]="'public/img/backgrounds/map.jpg'">
+              [background_image]="'public/img/backgrounds/map.jpg'"
+              [overlay_gradient]="true">
     <div class="title" header-content>
-      <h1>Dynmap</h1>
-      <h2>some text</h2>
+      <h1>Dynamic Server Maps</h1>
+      <h2>Which server would you like to see?</h2>
+      <div>
+        <a href="https://gmap.alttd.com">
+          <div style="background-color: #f547b2;" class="button-outer map-button">
+            <span class="button-inner">Grove</span>
+          </div>
+        </a>
+        <a href="https://cmap.alttd.com">
+          <div style="background-color: #c46213;" class="button-outer map-button">
+            <span class="button-inner">Creative</span>
+          </div>
+        </a>
+      </div>
     </div>
   </app-header>
+  <app-footer></app-footer>
 </ng-container>

frontend/src/app/map/map.component.scss

@@ -0,0 +1,3 @@
+.map-button {
+  margin: 10px;
+}