Builds out About Us section

src/app/about-us/about-us.component.html

@@ -1,45 +1,30 @@
-<div
+<div class="about-us" fxLayout="row" [@scrollAnimation]="state" fxLayoutAlign="center start">
-  class="about-us"
+  <div fxFlex="33.33%" class="title">
-  fxLayout="column"
+    <h1 class="mat-display-1">About Us</h1>
-  fxLayoutGap="2%"
+    <h2 class="mat-display-3">What We Do</h2>
->
-  <div>
-    <h1>Meet Sartography</h1>
-    <mat-tab-group mat-stretch-tabs>
-      <mat-tab label="Who We Are">
-        <div class="tab-content">
-          <h3>We are Software Developers.</h3>
-          <p>We create engaging web applications using modern web development tools. </p>
-          <p>Here are a few areas where we are particularly effective:</p>
-          <ul class="aboutList">
-            <li><b>Beautiful Information:</b> We create beautiful interfaces that help people navigate complex information to find critical knowledge.  Through thoughtful design, architecture, and animations we find novel approaches that make information come alive. </li>
-            <li><b>Mobile Friendly:</b> Even our most complex applications work well on phones and tablets, as well as desktops using the Angular Framework.</li>
-            <li><b>Secure and Discrete:</b>  We build applications that allow scientists to safely collect, monitor and study medical information.</li>
-            <li><b>Scientific:</b> As a small tightly focused team, we can dig very deeply into complex domains where larger organizations would fail to adapt.  And as Python becomes the predominant programming language of science, we build applications that our clients can understand and extend.</li>
-            <li><b>Big Data:</b>  We know how to manage exceedingly large data sets with tools such as Cassandra, and Elastic Search.  Most importantly, we know when not to use these tools, and we strive to keep our systems as simple, clean, and extensible as possible.</li>
-          </ul>
-          <p>Be sure and look at our Case Studies to see these skills in action.</p>
-
-          <h3>We are Makers.</h3>
-          <p> We are also some of the founders and leaders of the <a href="http://stauntonmakerspace.com" target="new">Staunton Makerspace</a>,
-            Where we spend some of our spare time teaching others to delight in technology, learn new tools, and build great things. We live to inspire, teach, and above all to learn.</p>
-        </div>
-      </mat-tab>
-      <mat-tab label="Mission and Vision">
-        <div class="tab-content">
-          <h3>Our Mission:</h3>
-          <p>To partner with scientists and innovators to create engaging software that improves the health and well
-            being of our communities through constant rigor, deep commitment to cause, and abiding resepect to our
-          shared goal for a better world.</p>
-
-          <h3>Our Vision:</h3>
-          <p>To build a world changing application that make a meaningful, scientifically proven impact in the mental
-            health of our community.</p>
-        </div>
-      </mat-tab>
-    </mat-tab-group>
   </div>
-  <div fxLayoutAlign="center center">
+
-    <img src="assets/logo/Sartography-Logo-Horizontal-Color.png">
+  <div fxFlex="67.67%" fxLayout="column" class="capabilities">
+    <div
+      *ngFor="let c of capabilities; let i = index"
+      [fxLayout]="i % 2 === 0 ? 'row' : 'row-reverse'"
+      [ngClass]="i % 2 === 0 ? 'even' : 'odd'"
+      fxLayoutAlign="start start"
+    >
+      <div class="details" fxFlex="37.5%">
+        <h3>{{c.title}}</h3>
+        <p>{{c.description}}</p>
+      </div>
+
+      <div class="icon" fxFlex="12.5%">
+        <span
+          [inlineSVG]="c.icon_url"
+          class="capability-icon"
+        ></span>
+      </div>
+      <div class="icon-spacer" fxFlex="12.5%"></div>
+      <div class="details-spacer" fxFlex="37.5%"></div>
+    </div>
   </div>
 </div>
+

src/app/about-us/about-us.component.scss

@@ -1,63 +1,72 @@
-// Import theming functions
+@import "../../config";
-@import '~@angular/material/theming';
-// Import your custom theme
-@import '../../sartography_material';
-// Load the Sartography Theme
-@include sartography-theme($sartography-theme);
 
 .about-us {
-  padding: 5%;
+  position: relative;
-  background-color: mat-color($sartography-primary, 50);
+  background-color: $dark-gray;
-  color: mat-contrast($sartography-primary, 50);
+  background-image: url("/assets/images/about-us.jpg");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: bottom left;
+  min-height: 1600px;
 
-  .tab-content {
+  .title {
-    max-width: 800px;
+    margin-top: 80px;
-    margin: auto;
+    margin-left: 80px;
-  }
 
-  h1{
+    h1 {
-    text-align: center;
+      color: $brand-primary;
-    padding: 2%;
+      margin-bottom: 0;
-  }
-
-  button {
-    margin: 2%;
-    padding: 7px;
-    background-color: mat-color($sartography-warn, 500);
-    color: mat-contrast($sartography-warn, 500);
-    cursor: pointer;
-  }
-
-  mat-card {
-    padding: 5%;
-
-    .top {
-      text-align: center;
-    }
-
-
-    h2 {
-      padding: 0;
-      margin: 0;
-    }
-
-    img {
-      border-radius: 200px;
-      height: 200px;
-      width: 200px;
     }
   }
-  mat-tab-group {
+
-    background-color: #ffffff;
+  .capabilities {
-    min-height: 400px;
+    margin-top: 300px;
-    padding: 2%;
+    margin-right: 80px;
+
+    ::ng-deep .capability-icon svg {
+      margin-top: -52px;
+      width: 128px;
+      height: 128px;
+    }
   }
-  img {
+
-    max-width: 90%;
+  .even {
-    padding: 2%;
+    text-align: right;
+
+    .details {
+      background-color: transparent;
+      h3 { color: $brand-primary-dark-1; }
+    }
+    .icon {
+      background-color: transparent;
+      ::ng-deep .capability-icon svg path { fill: $brand-primary; }
+    }
+    .icon-spacer {
+      background-color: $brand-gray;
+
+      &::after {
+        content: '';
+        width: 1px;
+        height: 100%;
+        background-color: $brand-gray-light-4;
+      }
+    }
+    .details-spacer { background-color: $brand-gray; }
   }
-  ul.aboutList {
+
-    font-size: 14pt;
+  .odd {
-    line-height: 20pt;
+    text-align: left;
+
+    .details-spacer { background-color: transparent; }
+    .icon-spacer { background-color: transparent; }
+    .icon {
+      background-color: $brand-gray;
+      ::ng-deep .capability-icon svg path { fill: $brand-primary-light-1; }
+    }
+    .details {
+      background-color: $brand-gray;
+      color: white;
+      h3 { color: $brand-primary-light-2; }
+    }
   }
 }

src/app/about-us/about-us.component.ts

@@ -1,18 +1,54 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, ElementRef, HostListener, OnInit} from '@angular/core';
-import { ApiService } from '../api.service';
+import {ApiService} from '../api.service';
+import {Capability} from '../interfaces';
+import {animate, state, style, transition, trigger, useAnimation} from '@angular/animations';
+import {fadeIn, fadeOut} from '../animation';
 
 @Component({
   selector: 'app-about-us',
   templateUrl: './about-us.component.html',
-  styleUrls: ['./about-us.component.scss']
+  styleUrls: ['./about-us.component.scss'],
+  animations: [
+    trigger('fadeInOut', [
+      transition('void <=> *', useAnimation(fadeIn)),
+      transition('* <=> void', useAnimation(fadeOut))
+    ]),
+    trigger('scrollAnimation', [
+      state(
+        'show',
+        style({
+          opacity: 1,
+          zIndex: 0
+        })
+      ),
+      state(
+        'hide',
+        style({
+          opacity: 0,
+          zIndex: 0
+        })
+      ),
+      transition('show => hide', animate('700ms ease-out')),
+      transition('hide => show', animate('700ms ease-in'))
+    ])
+  ]
 })
 export class AboutUsComponent implements OnInit {
+  capabilities: Capability[];
+  state = 'hide';
 
-  constructor(
+  constructor(private api: ApiService, public el: ElementRef) {
-    private api: ApiService
+    this.api.getCapabilities().subscribe(c => this.capabilities = c);
-  ) { }
+  }
 
   ngOnInit() {
   }
 
+  @HostListener('window:scroll', ['$event'])
+  checkScroll() {
+    const hOffset = window.innerHeight / 2;
+    const componentPosition = this.el.nativeElement.offsetTop;
+    const scrollPosition = window.pageYOffset + hOffset;
+    this.state = scrollPosition >= componentPosition ? 'show' : 'hide';
+  }
 }