Adding About page

package.json

@@ -23,6 +23,7 @@
     "@angular/platform-browser-dynamic": "^5.2.0",
     "@angular/router": "^5.2.0",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
     "rxjs": "^5.5.6",
     "zone.js": "^0.8.19"
   },

src/app/_components/feature-card/feature-card.component.html

@@ -0,0 +1,4 @@
+<mat-card>
+  <img mat-card-image src="{{ imageUrl }}" alt="{{ imageAlt }}">
+  <mat-card-content><p>{{ contents }}</p></mat-card-content>
+</mat-card>

src/app/_components/feature-card/feature-card.component.scss

@@ -0,0 +1,28 @@
+@import '~styles/breakpoints';
+
+.mat-card {
+  padding: 30px;
+  min-height: 350px;
+  max-width: 250px;
+  @include respond-to('small') {
+    margin: 10px auto;
+    max-width: 90%;
+  }
+}
+
+.mat-card-image {
+  width: 150px;
+  @include respond-to('small') {
+    width: 100%;
+  }
+  display: block;
+  margin: 40px auto;
+  padding-top: 40px;
+}
+
+.mat-card-content {
+  text-align: center;
+  @include respond-to('small') {
+    font-size: 24pt;
+  }
+}

src/app/_components/feature-card/feature-card.component.spec.ts

@@ -0,0 +1,27 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+
+import { FeatureCardComponent } from './feature-card.component';
+
+describe('FeatureCardComponent', () => {
+  let component: FeatureCardComponent;
+  let fixture: ComponentFixture<FeatureCardComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [FeatureCardComponent],
+      schemas: [NO_ERRORS_SCHEMA],
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(FeatureCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/_components/feature-card/feature-card.component.ts

@@ -0,0 +1,17 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-feature-card',
+  templateUrl: './feature-card.component.html',
+  styleUrls: ['./feature-card.component.scss'],
+})
+export class FeatureCardComponent {
+  @Input()
+  imageUrl: string;
+
+  @Input()
+  imageAlt: string;
+
+  @Input()
+  contents; string;
+}

src/app/_components/nav/nav.component.html

@@ -1,8 +1,33 @@
-<mat-toolbar color="primary">
-  <span><a [routerLink]="['/']">Ingredient Parser</a></span>
+<mat-toolbar color="primary" class="full-size">
+  <span class="site-name"><a [routerLink]="['/']">Ingredient Parser</a></span>
 
   <span class="fill-remaining-space"></span>
 
+  <button mat-button [routerLink]="['/about']">About</button>
   <button mat-button [routerLink]="['/demo']">Demo</button>
   <button mat-button color="accent" [routerLink]="['/signup']">Sign Up</button>
-</mat-toolbar>
+</mat-toolbar>
+
+<mat-toolbar color="primary" class="compressed">
+  <button mat-icon-button class="menu-button" (click)="sidenav.toggle()">
+    <mat-icon>menu</mat-icon>
+  </button>
+  <span class="site-name"><a [routerLink]="['/']">Ingredient Parser</a></span>
+
+  <span class="fill-remaining-space"></span>
+</mat-toolbar>
+
+<mat-sidenav-container
+  class="sidenav-container">
+  <mat-sidenav
+    #sidenav
+    mode="over"
+    fixedInViewport="true"
+    fixedTopGap="56">
+    <mat-nav-list>
+      <p class="sidenav-button"><a [routerLink]="['/about']" (click)="sidenav.toggle()">About</a><br /></p>
+      <p class="sidenav-button"><a [routerLink]="['/demo']" (click)="sidenav.toggle()">Demo</a><br /></p>
+      <p class="sidenav-button"><a [routerLink]="['/signup']" (click)="sidenav.toggle()">Sign Up</a><br /></p>
+    </mat-nav-list>
+  </mat-sidenav>
+</mat-sidenav-container>

src/app/_components/nav/nav.component.scss

@@ -1,3 +1,33 @@
+@import '~styles/breakpoints';
+
 .fill-remaining-space {
     flex: 1 1 auto;
+}
+
+mat-toolbar.full-size {
+  @include respond-to('small') {
+    display: none;
+  }
+}
+
+mat-toolbar.compressed {
+  display: none;
+  padding-top: 10px;
+  @include respond-to('small') {
+    display: block;
+  }
+}
+
+.menu-button {
+  margin-right: 45px;
+}
+
+.sidenav-container {
+  flex: 1 0 auto;
+  margin-top: 56px;
+}
+
+.sidenav-button {
+  font-size: 26pt;
+  padding: 25px 35px;
 }

src/app/_components/nav/nav.component.ts

@@ -1,15 +1,10 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-nav',
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.scss'],
 })
-export class NavComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
 
+export class NavComponent {
 }

src/app/app-routing.module.ts

@@ -1,20 +1,26 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
 
+import { AboutComponent } from './public/about/about.component';
 import { DemoComponent } from './public/demo/demo.component';
 import { SignUpComponent } from './public/sign-up/sign-up.component';
 
 const appRoutes: Routes = [
   {
     path: '',
-    component: DemoComponent,
+    component: AboutComponent,
     pathMatch: 'full',
   },
   {
     path: 'demo',
     component: DemoComponent,
     pathMatch: 'full',
   },
+  {
+    path: 'about',
+    component: AboutComponent,
+    pathMatch: 'full',
+  },
   {
     path: 'signup',
     component: SignUpComponent,

src/app/app.module.ts

@@ -7,8 +7,12 @@ import {
   MatCardModule,
   MatExpansionModule,
   MatFormFieldModule,
+  MatIconModule,
   MatInputModule,
+  MatListModule,
+  MatMenuModule,
   MatProgressSpinnerModule,
+  MatSidenavModule,
   MatToolbarModule,
 } from '@angular/material';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
@@ -32,6 +36,8 @@ import { CodeSnippetComponent } from './_components/code-snippet/code-snippet.co
 // Public pages
 import { SignUpComponent } from './public/sign-up/sign-up.component';
 import { DemoComponent } from './public/demo/demo.component';
+import { AboutComponent } from './public/about/about.component';
+import { FeatureCardComponent } from './_components/feature-card/feature-card.component';
 
 @NgModule({
   declarations: [
@@ -42,6 +48,8 @@ import { DemoComponent } from './public/demo/demo.component';
     NavComponent,
     SignUpComponent,
     CodeSnippetComponent,
+    AboutComponent,
+    FeatureCardComponent,
   ],
   imports: [
     AppRoutingModule,
@@ -53,8 +61,12 @@ import { DemoComponent } from './public/demo/demo.component';
     MatCardModule,
     MatExpansionModule,
     MatFormFieldModule,
+    MatIconModule,
     MatInputModule,
+    MatListModule,
+    MatMenuModule,
     MatProgressSpinnerModule,
+    MatSidenavModule,
     MatToolbarModule,
   ],
   providers: [CurlCmdPipe, ParserService],

src/app/public/about/about.component.html

@@ -0,0 +1,37 @@
+
+<h2>Understand your ingredients</h2>
+<div class="flex-grid">
+  <div class="col">
+    <p>The Ingredient Parser API turns plain recipe strings into beautiful, structured data.</p>
+  </div>
+  <div class="col"><img class="flex-graphic" src="/assets/img/ingredient-translation.png" /></div>
+  <div class="col"></div>
+</div>
+
+<h2>Use cases</h2>
+<div class="flex-grid">
+  <div class="col">
+    <app-feature-card
+      imageUrl="/assets/img/search-icon.png"
+      imageAlt="Magnifying glass"
+      contents="Make your recipes searchable."></app-feature-card>
+  </div>
+  <div class="col">
+    <app-feature-card
+      imageUrl="/assets/img/shopping-cart-icon.png"
+      imageAlt="Shopping cart"
+      contents="Help customers build shopping lists from your recipes."></app-feature-card>
+  </div>
+  <div class="col">
+      <app-feature-card
+        imageUrl="/assets/img/database-icon.png"
+        imageAlt="Database icon"
+        contents="Build your ingredient database"></app-feature-card>
+  </div>
+</div>
+
+<h2>Contact</h2>
+<p class="full-width-content">
+  Questions? Please reach out to <a href="mailto:contact@ingredientparser.com">contact@ingredientparser.com</a>,
+  and I will be happy to assist you.
+</p>

src/app/public/about/about.component.scss

@@ -0,0 +1,39 @@
+@import '~styles/breakpoints';
+
+h2 {
+  margin-bottom: 50px;
+  @include respond-to('small') {
+    margin-bottom: 10px;
+  }
+}
+
+.flex-grid {
+  display: flex;
+  justify-content: space-between;
+  @include respond-to('small') {
+    display: block;
+  }
+}
+
+.col {
+  flex: 1;
+  width: 32%;
+  margin-bottom: 50px;
+  @include respond-to('small') {
+    width: 100%;
+    margin-bottom: 20px;
+    padding-top: 30px;
+  }
+}
+
+.flex-graphic {
+  border-radius: 15px;
+  width: 400px;
+  @include respond-to('small') {
+    width: 100%;
+  }
+}
+
+.full-width-content {
+  margin: 30px 0px;
+}

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

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

src/app/public/about/about.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.scss'],
+})
+export class AboutComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}