AltitudeWeb/frontend/src/app/pages/altitude/team/team.component.html

<ng-container>
  <app-header [current_page]="'team'" height="450px" background_image="/public/img/backgrounds/staff.png"
              [overlay_gradient]="0.5">>
    <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 teamContainer">
        <h2 class="sectionTitle">Management</h2>
        <div *ngFor="let member of getTeamMembers('owner') | async" class="member">
          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
               height="160" width="160" style="width: 160px;">
          <h2>{{ member.name }}</h2>
          <p>Owner</p>
        </div>
        <div *ngFor="let member of getTeamMembers('manager') | async" class="member">
          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
               height="160" width="160" style="width: 160px;">
          <h2>{{ member.name }}</h2>
          <p>Manager</p>
        </div>
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Admins</h2>
        <div *ngFor="let member of getTeamMembers('admin') | async" class="member">
          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
               height="160" width="160" style="width: 160px;">
          <h2>{{ member.name }}</h2>
          <p>Admin</p>
        </div>
      </div>
    </section>
    <section class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Head Moderators</h2>
        <div *ngFor="let member of getTeamMembers('headmod') | async" class="member">
          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
               height="160" width="160" style="width: 160px;">
          <h2>{{ member.name }}</h2>
          <p>Head Mod</p>
        </div>
      </div>
    </section>
    <section class="darkmodeSectionThree">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Moderators</h2>
        <div *ngFor="let member of getTeamMembers('moderator') | async" class="member">
          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
               height="160" width="160" style="width: 160px;">
          <h2>{{ member.name }}</h2>
        </div>
      </div>
    </section>
    <section *ngIf="(getTeamMembers('trainee') | async)?.length  ?? 0 > 0" class="darkmodeSection">
      <div class="container teamContainer">
        <h2 class="sectionTitle">Trainees</h2>
        <div *ngFor="let member of getTeamMembers('trainee') | async" class="member">
          <img [ngSrc]="getAvatarUrl(member)" alt="{{member.name}}'s Minecraft skin"
               height="160" width="160" style="width: 160px;">
          <h2>{{ member.name }}</h2>
        </div>
      </div>
    </section>
  </main>
</ng-container>