Added Socials page component

Created a new SocialsComponent with corresponding HTML, SCSS, and tests. Updated `app.module.ts` to include the Socials route and modified the Team page to use `ngSrc` for image optimization.

frontend/src/app/app.module.ts

@@ -15,12 +15,14 @@ import {TermsComponent} from './terms/terms.component';
 import {PrivacyComponent} from './privacy/privacy.component';
 import {TeamComponent} from './team/team.component';
 import {AboutComponent} from './about/about.component';
+import {SocialsComponent} from './socials/socials.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
   {path: 'map', component: MapComponent},
   {path: 'rules', component: RulesComponent},
   {path: 'about', component: AboutComponent},
+  {path: 'socials', component: SocialsComponent},
   {path: 'team', component: TeamComponent},
   {path: 'terms', component: TermsComponent},
   {path: 'privacy', component: PrivacyComponent},
@@ -36,6 +38,7 @@ const routes: Routes = [
     MapComponent,
     RulesComponent,
     AboutComponent,
+    SocialsComponent,
     TeamComponent,
     TermsComponent,
     PrivacyComponent,

frontend/src/app/socials/socials.component.html

@@ -0,0 +1,34 @@
+<ng-container>
+  <app-header [current_page]="'privacy'" height="250px" background_image="/public/img/backgrounds/trees.jpg">
+    <div class="title" header-content>
+      <h1 class="titleColor">Altitude Socials</h1>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <div class="socialContainer" style="padding-top: 50px;">
+        <a href="https://discord.com/invite/alttd"><img class="socialIcon" ngSrc="/public/img/logos/discordsocial.png"
+                                                        title="discord.gg/alttd" alt="Altitude Discord" height="150"
+                                                        width="150" style="width: 150px;"></a>
+        <a href="https://www.tiktok.com/@alttdmc"><img class="socialIcon" ngSrc="/public/img/logos/tiktoksocial.png"
+                                                       title="alttdmc" alt="Altitude Discord" height="150" width="150"
+                                                       style="width: 150px;"></a>
+      </div>
+      <div class="socialContainer">
+        <a href="https://www.instagram.com/alttdmc/"><img class="socialIcon"
+                                                          ngSrc="/public/img/logos/instagramsocial.png"
+                                                          title="alttdmc" alt="Altitude Discord" height="150"
+                                                          width="150" style="width: 150px;"></a>
+        <a href="https://twitter.com/alttdmc"><img class="socialIcon" ngSrc="/public/img/logos/twittersocial.png"
+                                                   title="alttdmc" alt="Altitude Discord" height="150" width="150"
+                                                   style="width: 150px;"></a>
+      </div>
+      <div class="socialContainer" style="padding-bottom: 50px;">
+        <a href="https://www.youtube.com/c/alttd"><img class="socialIcon" ngSrc="/public/img/logos/youtubesocial.png"
+                                                       title="Altitude Community" alt="Altitude Discord" height="150"
+                                                       width="150" style="width: 150px;"></a>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/socials/socials.component.scss

@@ -0,0 +1,32 @@
+main .socialContainer {
+  padding: 20px 0;
+}
+
+.socialContainer {
+  width: 80%;
+  max-width: 1020px;
+  display: flex;
+  align-items: center;
+  margin: auto;
+  justify-content: center;
+}
+
+.socialIcon {
+  max-width: 150px;
+  width: 100%;
+  padding: 0 50px 0 50px;
+  transition: transform 0.2s ease-in-out;
+}
+
+.socialIcon:hover {
+  transform: scale(1.1);
+}
+
+//Different resolution changes
+@media (max-width: 500px) {
+  .socialIcon {
+    max-width: 120px;
+    width: 100%;
+    padding: 0 20px 0 20px;
+  }
+}

frontend/src/app/socials/socials.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SocialsComponent } from './socials.component';
+
+describe('SocialsComponent', () => {
+  let component: SocialsComponent;
+  let fixture: ComponentFixture<SocialsComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [SocialsComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SocialsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/src/app/socials/socials.component.ts

@@ -0,0 +1,11 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'app-socials',
+  standalone: false,
+  templateUrl: './socials.component.html',
+  styleUrl: './socials.component.scss'
+})
+export class SocialsComponent {
+  scrollService: any;
+}

frontend/src/app/team/team.component.html

@@ -12,14 +12,14 @@
       <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
         <h2 class="sectionTitle">Management</h2>
         <div class="member">
-          <img src="https://crafatar.com/avatars/55e46bc32a294c53850fdbd944dc5c5f?overlay"
+          <img ngSrc="https://crafatar.com/avatars/55e46bc32a294c53850fdbd944dc5c5f?overlay"
-               alt="akastijn's Minecraft skin">
+               alt="akastijn's Minecraft skin" height="160" width="160" style="width: 160px;">
           <h2>akastijn</h2>
           <p>Owner</p>
         </div>
         <div class="member">
-          <img src="https://crafatar.com/avatars/0b06c1b9ae5845d5af60731e4c788dc8?overlay"
+          <img ngSrc="https://crafatar.com/avatars/0b06c1b9ae5845d5af60731e4c788dc8?overlay"
-               alt="akalexu's Minecraft skin">
+               alt="akalexu's Minecraft skin" height="160" width="160" style="width: 160px;">
           <h2>akalexu</h2>
           <p>Manager</p>
         </div>