Added About and Team components with routing

This commit introduces new "About" and "Team" components, integrating them into the application and updating the routing module.

frontend/src/app/about/about.component.html

@@ -0,0 +1,56 @@
+<ng-container>
+  <app-header [current_page]="'rules'" height="460px" background_image="/public/img/backgrounds/trees.jpg">
+    <div class="title" header-content>
+      <h1>About Us</h1>
+      <h2>We are a simple server born out of nostalgia, and working to maintain a semi-vanilla feel today's Minecraft
+        world.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <section class="columnSection">
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Our Concept</h2>
+            <p>You could say it all started with a bit of nostalgia. Altitude was inspired by a small server back in
+              2012. It was a simple survival and creative server with a community that felt like family, and when the
+              server closed we took that concept and created Altitude.</p>
+            <p>From the very beginning we've been all about our community - adding features suggested by our members,
+              and designing a server that encourages cooperation and playing together. On Altitude, it's about coming
+              together as a community and creating new adventures every day.</p>
+            <p>We want to be the server you call home and always feel welcome to come on and relax for a while.</p>
+          </div>
+          <div class="columnParagraph">
+            <h2>Our Hardware</h2>
+            <p>As the community has grown and evolved so has the server. We started with a little desktop PC running in
+              the basement and have expanded through the years from Minecraft hosting, to a VPS, and finally to
+              dedicated servers hosted by OVH in Canada.</p>
+            <p>Today we run on a VPS and a gaming server from OVH with <span
+              style="font-family: 'opensans-bold', sans-serif;">32GB of DDR4 memory</span>, an <span
+              style="font-family: 'opensans-bold', sans-serif;">Intel i7 6700k</span> processor, <span
+              style="font-family: 'opensans-bold', sans-serif;">2x 500GB SSD drives</span> and <span
+              style="font-family: 'opensans-bold', sans-serif;">500Mbps bandwidth</span>. The VPS serves as our proxy
+              and website, while the gaming server hosts our Minecraft servers and SQL databases.</p>
+          </div>
+        </div>
+        <div class="columnContainer">
+          <div class="columnParagraph">
+            <h2>Our History</h2>
+            <p>Altitude began as a private server to get together with friends and it quickly became tradition to come
+              together every afternoon. Eventually we wanted to share our adventures with others, and went public,
+              inviting people from all around the globe to be a part of the community they had formed.</p>
+            <p>In the beginning, the server was named "The Underground", and was a small hangout spot mostly spread by
+              word of mouth. A few months after going public we renamed ourselves to "Altitude" and have kept the name
+              ever since. Altitude has evolved quite a bit over the years, but the concept has never changed - we are
+              home.</p>
+            <p>Today, Altitude thrives on the community that has formed. Many great people have decided to call Altitude
+              home, and many more people come every day. We are constantly learning more about what makes Altitude
+              great, and what we can do to make it even greater.</p>
+            <p>We hope you will join us on this adventure and learn with us as we embark on this amazing journey!</p>
+          </div>
+        </div>
+      </section>
+    </section>
+  </main>
+</ng-container>

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

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

frontend/src/app/about/about.component.ts

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

frontend/src/app/app.module.ts

@@ -13,11 +13,15 @@ import {CopyIpComponent} from './copy-ip/copy-ip.component';
 import {FooterComponent} from './footer/footer.component';
 import {TermsComponent} from './terms/terms.component';
 import {PrivacyComponent} from './privacy/privacy.component';
+import {TeamComponent} from './team/team.component';
+import {AboutComponent} from './about/about.component';
 
 const routes: Routes = [
   {path: '', component: HomeComponent},
   {path: 'map', component: MapComponent},
   {path: 'rules', component: RulesComponent},
+  {path: 'about', component: AboutComponent},
+  {path: 'team', component: TeamComponent},
   {path: 'terms', component: TermsComponent},
   {path: 'privacy', component: PrivacyComponent},
 ];
@@ -27,12 +31,14 @@ const routes: Routes = [
     AppComponent,
     HeaderComponent,
     FooterComponent,
-    HomeComponent,
     ThemeComponent,
+    HomeComponent,
     MapComponent,
     RulesComponent,
+    AboutComponent,
+    TeamComponent,
     TermsComponent,
-    PrivacyComponent
+    PrivacyComponent,
   ],
   imports: [
     BrowserModule,

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

@@ -0,0 +1,44 @@
+<ng-container>
+  <app-header [current_page]="'rules'" height="460px" background_image="/public/img/backgrounds/staff.png">
+    <div class="title" header-content>
+      <h1>Staffing Team</h1>
+      <h2>The team that makes Altitude happen. Your owners, admins, moderators, and trainees are all working together to
+        create Altitude, to create home. This is where the magic happens.</h2>
+    </div>
+  </app-header>
+
+  <main>
+    <section class="darkmodeSection">
+      <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"
+               alt="akastijn's Minecraft skin">
+          <h2>akastijn</h2>
+          <p>Owner</p>
+        </div>
+        <div class="member">
+          <img src="https://crafatar.com/avatars/0b06c1b9ae5845d5af60731e4c788dc8?overlay"
+               alt="akalexu's Minecraft skin">
+          <h2>akalexu</h2>
+          <p>Manager</p>
+        </div>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Admins</h2>
+      </div>
+    </section>
+    <section class="darkmodeSection">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Head Moderators</h2>
+      </div>
+    </section>
+    <section class="darkmodeSectionThree">
+      <div class="container" style="padding: 50px 0 0 0; justify-content: center;">
+        <h2 class="sectionTitle">Moderators</h2>
+      </div>
+    </section>
+  </main>
+</ng-container>

frontend/src/app/team/team.component.scss

@@ -0,0 +1,21 @@
+.sectionTitle {
+  flex: 0 0 100%;
+  text-align: center;
+  padding-bottom: 20px;
+  font-size: 2em;
+}
+
+.member {
+  width: 33%;
+  min-width: 250px;
+  padding-bottom: 50px;
+  text-align: center;
+}
+
+.member img {
+  padding-bottom: 15px;
+}
+
+.member p {
+  font-family: 'opensans-bold', sans-serif;
+}

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

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

frontend/src/app/team/team.component.ts

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

frontend/src/app/terms/terms.component.html

@@ -12,7 +12,7 @@
           <p>Last updated: April 6th, 2025</p>
           <p>Welcome to Altitude! These Terms of Use (“Terms”) is a binding agreement between you and the Altitude
             Community (a group consisting of server owner and staffing team members) and our subsidiaries (collectively
-            “we” , or "Altitude"). These Terms describe the manner in which you may use our services. Any use of our
+            “we”, or "Altitude"). These Terms describe the manner in which you may use our services. Any use of our
             Services will constitute your acceptance of these Terms as well as our <a [routerLink]="['/privacy']">Privacy
               Policy</a>.
             If you do not agree to our Privacy Policy or Terms of Use, please do not use our Services. Thank you!</p>
@@ -104,7 +104,7 @@
           <p>We also hold the right to put your use of any of our services under limitation without prior notice or
             liability, for any reason. Limitations can be in any form up to complete termination of access. Limitations
             on the Minecraft server include, but are not limited to, being "jailed", muted, or having specific features
-            taken away from your Minecraft account on the server. </p>
+            taken away from your Minecraft account on the server.</p>
         </div>
         <div class="paragraph">
           <h2>External Services</h2>

frontend/src/styles.scss

@@ -212,7 +212,7 @@ ol li {
   line-height: 1.5em;
 }
 
-.paragraph h2, .paragraph h3, .paragraph p, .columnparagraph h2, .columnparagraph p {
+.paragraph h2, .paragraph h3, .paragraph p, .columnParagraph h2, .columnParagraph p {
   padding-bottom: 15px;
 }
 
@@ -256,6 +256,35 @@ main .container {
   font-family: 'minecraft-text', sans-serif;
 }
 
+// Column styling
+.columnSection {
+  width: 80%;
+  padding-top: 60px;
+  max-width: 1020px;
+  margin: 0 auto;
+  display: flex;
+  flex-wrap: wrap;
+  flex: 1 0 auto;
+}
+
+.columnContainer {
+  width: 50%;
+  box-sizing: border-box;
+  padding: 0 15px;
+}
+
+.columnParagraph {
+  line-height: 1.5em;
+  padding-bottom: 30px;
+}
+
+.columnParagraph img {
+  padding: 30px 0;
+  display: block;
+  margin: 0 auto;
+}
+
+// Call to Action button
 .button-outer {
   display: inline-block;
   font-family: 'minecraft-text', sans-serif;