feat: intro page

src/app/app.component.html

@@ -20,7 +20,7 @@
         </button>
 
         <span routerLink="" class="branding spacer hidden-md-up text-center"><img [src]="logo" /> Angular Starter</span>
-        <span routerLink="" class="branding spacer hidden-sm-down"><img [src]="logo" /> Angular NGrx Material Starter</span>
+        <span routerLink="" class="branding spacer hidden-sm-down"><img [src]="logo" /> Angular ngRx Material Starter</span>
 
         <span class="hidden-sm-down">
           <button md-button class="nav-button" *ngFor="let item of navigation" [routerLink]="[item.link]" routerLinkActive="active">

src/app/app.component.scss

@@ -26,6 +26,7 @@ $footer-height: 140px;
 }
 
 .wrapper {
+  z-index: -2;
   min-height: 100%;
   margin-bottom: -$footer-height;
 }

src/app/examples/stock-market/stock-market.component.sccs-theme.scss

@@ -1,6 +1,6 @@
 @import '~@angular/material/theming';
 
-@mixin todos-component-theme($theme) {
+@mixin examples-component-theme($theme) {
   $warn: map-get($theme, warn);
 
   md-card {

src/app/static/about/about.component.html

@@ -1,3 +1,17 @@
-<p>
-  about works!
-</p>
+<div class="background">
+  <div class="container">
+    <h1>Angular ngRx Material Starter</h1>
+    <div class="actions hidden-md-down">
+      <a md-raised-button color="primary" routerLink="../features">Check Features</a>
+      <a md-raised-button color="accent" routerLink="../examples">Check Examples</a>
+      <a md-raised-button routerLink="../settings">Change Theme</a>
+    </div>
+    <div class="get-started">
+      <h2>Getting started</h2>
+      <code>git clone https://github.com/tomastrajan/angular-ngrx-material-starter.git new-project</code><br>
+      <code>cd new-project</code><br>
+      <code>npm install</code><br>
+      <code>npm start</code>
+    </div>
+  </div>
+</div>

src/app/static/about/about.component.scss

@@ -0,0 +1,66 @@
+@import 'styles-variables';
+
+.background {
+  position: absolute;
+  top: 64px;
+  left: 0;
+  bottom: 140px;
+  right: 0;
+  overflow-y: auto;
+
+  .container {
+    margin-top: 100px;
+  }
+
+  .actions {
+    text-align: center;
+    margin: 50px;
+
+  }
+
+  .get-started {
+    width: 625px;
+    margin: 50px auto;
+    font-size: 0.8em;
+    letter-spacing: .01px;
+    overflow-wrap: break-word;
+
+    code {
+      word-wrap: break-word;
+      white-space: normal;
+    }
+  }
+
+  h1 {
+    text-align: center;
+    font-size: 3em;
+    text-transform: uppercase;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, toolbar)) {
+  .background {
+    top: 56px;
+  }
+}
+
+@media (max-width: map-get($grid-breakpoints, md)) {
+  .background {
+    .get-started {
+      width: auto;
+    }
+  }
+}
+
+.background::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  background: url('../../../assets/intro.jpg') no-repeat center top;
+  background-size: cover;
+  opacity: .6;
+  content: "";
+  z-index: 0;
+}

src/app/static/about/about.component.scss-theme.scss

@@ -0,0 +1,19 @@
+@import '~@angular/material/theming';
+
+@mixin about-component-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+
+  .background {
+    color: mat-color($background, background);
+    background-color: mat-color($foreground, text);
+  }
+
+  .get-started {
+    //border: 1px solid mat-color($background, background);
+  }
+}
+

src/app/static/about/about.component.ts

@@ -7,6 +7,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class AboutComponent implements OnInit {
 
+  intro = require('../../../assets/intro.jpg');
+
   constructor() { }
 
   ngOnInit() {

src/styles-reset.scss-theme.scss

@@ -14,6 +14,7 @@
   }
 
   code {
+    color: mat-color($foreground, text);
     background-color: mat-color($accent, lighter);
   }
 }

src/styles-variables.scss

@@ -1,6 +1,7 @@
 $grid-breakpoints: (
   xs: 0,
   sm: 576px,
+  toolbar: 600px,
   md: 768px,
   lg: 992px,
   xl: 1200px

src/styles.scss

@@ -17,14 +17,17 @@
 @import 'styles-reset.scss-theme';
 @import 'app/app.component.scss-theme';
 @import 'app/shared/big-input/big-input.component.scss-theme';
+@import 'app/static/about/about.component.scss-theme';
 @import 'app/examples/todos/todos.component.scss-theme';
 @import 'app/examples/stock-market/stock-market.component.sccs-theme.scss';
 
 @mixin custom-components-theme($theme) {
   @include styles-reset-theme($theme);
   @include app-component-theme($theme);
+  @include about-component-theme($theme);
   @include big-input-component-theme($theme);
   @include todos-component-theme($theme);
+  @include examples-component-theme($theme);
 }
 
 .default-theme {