Addressed comments (#9)

src/_app-theme.scss

@@ -1,4 +1,6 @@
 @import '~@angular/material/core/theming/theming';
+@import './app/pages/homepage/homepage-theme';
+@import './app/shared/navbar/navbar-theme';
 
 // Styles for the docs app that are based on the current theme.
 @mixin material-docs-app-theme($theme) {
@@ -11,4 +13,7 @@
   material-docs-app {
     background: md-color($background, background);
   }
+
+  @include nav-bar-theme($theme);
+  @include home-page-theme($theme);
 }

src/app/app-module.ts

@@ -5,17 +5,25 @@ import {FormsModule} from '@angular/forms';
 import {HttpModule} from '@angular/http';
 import {MaterialModule} from '@angular/material';
 import {MaterialDocsApp} from './material-docs-app';
+import {Homepage} from './pages/homepage/homepage';
+import {NavBar} from './shared/navbar/navbar';
+import {routing} from './routes';
+import {ComponentsList} from './pages/components/components';
 
 
 @NgModule({
   declarations: [
     MaterialDocsApp,
+    ComponentsList,
+    Homepage,
+    NavBar,
   ],
   imports: [
     BrowserModule,
     FormsModule,
     HttpModule,
     MaterialModule.forRoot(),
+    routing,
   ],
   providers: [
     Location,

src/app/material-docs-app.html

@@ -1,3 +1,2 @@
-Main content
-<button md-raised-button color="primary">HELLO</button>
-<button md-raised-button color="accent">WORLD</button>
+<app-navbar></app-navbar>
+<router-outlet></router-outlet>

src/app/material-docs-app.scss

@@ -1,3 +0,0 @@
-:host {
-  display: block;
-}

src/app/pages/components/components.html

@@ -0,0 +1,4 @@
+<div *ngFor="let component of componentItems">
+  <img src="../../../assets/img/components/{{component.src}}.svg" [alt]="component.name" />
+  {{component.name}}
+</div>

src/app/pages/components/components.ts

@@ -0,0 +1,18 @@
+import { Component} from '@angular/core';
+
+@Component({
+  selector: 'app-components',
+  templateUrl: 'components.html',
+  styleUrls: ['components.scss']
+})
+export class ComponentsList {
+  componentItems = [
+    {name: 'Buttons', src: 'button'},
+    {name: 'Cards', src: 'card'},
+    {name: 'Chips', src: 'chip'},
+    {name: 'Grid lists', src: 'grid'},
+    {name: 'Menu', src: 'menu'},
+    {name: 'Tooltip', src: 'tooltip'},
+    {name: 'Progress', src: 'progress'},
+  ]
+}

src/app/pages/components/index.ts

@@ -0,0 +1 @@
+export * from './components';

src/app/pages/homepage/_homepage-theme.scss

@@ -0,0 +1,25 @@
+@mixin home-page-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  app-homepage {
+    .docs-header-background {
+      background: url('assets/img/homepage/material_splash.svg') repeat-x bottom center, md-color($primary);
+    }
+
+    .docs-header-headline {
+      color: md-color($primary, default-contrast);
+    }
+
+    .docs-header-start {
+      color: md-color($primary);
+    }
+
+    .docs-homepage-row {
+      color: md-color($primary, 800);
+    }
+  }
+}

src/app/pages/homepage/homepage.html

@@ -0,0 +1,28 @@
+<header class="docs-header-background">
+  <div class="docs-header-section">
+    <div class="docs-header-headline">
+      <h1>Angular Material</h1>
+      Material Design components for Angular 2 apps
+    </div>
+    <div class="docs-header-start">
+     <a md-raised-button routerLink="components">Get started</a>
+    </div>
+  </div>
+</header>
+
+<div class="docs-homepage-promo">
+  <div *ngFor="let section of homePageContent"
+       class="docs-homepage-row"
+       [class.docs-homepage-reverse-row]="section.reverse">
+    <div class="docs-homepage-promo-img">
+      <img [src]="getImagePath(section.img)" [alt]="section.title" />
+    </div>
+    <div class="docs-homepage-promo-desc">
+      <h2>{{section.title}}</h2>
+      <p>{{section.content}}</p>
+    </div>
+  </div>
+  <div class="docs-homepage-bottom-start">
+    <button md-raised-button color="primary">Get started</button>
+  </div>
+</div>

src/app/pages/homepage/homepage.scss

@@ -0,0 +1,56 @@
+// The margin between two sections
+$margin-promotion-sections: 32px;
+
+.docs-header-background {
+  height: 560px;
+}
+
+.docs-header-section {
+  text-align: center;
+  padding-top: 160px;
+}
+
+.docs-homepage-promo {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.docs-homepage-row {
+  display: flex;
+  max-width: 920px;
+  margin: $margin-promotion-sections 0;
+}
+
+.docs-homepage-row  img {
+  max-width: 100%;
+}
+
+.docs-homepage-reverse-row {
+  flex-direction: row-reverse;
+}
+
+.docs-header-start,
+.docs-homepage-bottom-start {
+  text-align: center;
+  margin: $margin-promotion-sections 0;
+}
+
+.docs-homepage-promo-img,
+.docs-homepage-promo-desc {
+  width: 50%;
+}
+
+.docs-homepage-promo-img {
+  text-align: center;
+}
+
+.docs-homepage-promo-desc {
+  line-height: 2;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+

src/app/pages/homepage/homepage.ts

@@ -0,0 +1,44 @@
+import { Component} from '@angular/core';
+
+@Component({
+  selector: 'app-homepage',
+  templateUrl: 'homepage.html',
+  styleUrls: ['homepage.scss']
+})
+export class Homepage {
+  private _imagePath: string = '../assets/img/homepage/';
+
+  homePageContent = [
+    {
+      title: 'Sprint from Zero to App',
+      content: `Hit the ground running with comprehensive, modern UI components that work across
+        the web, mobile and desktop`,
+      reverse: false,
+      img: 'sprintzerotoapp.svg',
+    },
+    {
+      title: 'Fast and Consistent',
+      content: `Finely tunes performance, because every millisecond counts. Fully tested across
+        modern browsers.`,
+      reverse: true,
+      img: 'fastandconsistent.svg',
+    },
+    {
+      title: 'Versatile',
+      content: `Themable, for when you need to stay on brand or just have a facourite color.
+        Accessible and internationalized so that all users are welcome.`,
+      reverse: false,
+      img: 'versatile.svg',
+    },
+    {
+      title: 'Optimized for Angular',
+      content: 'Built by the Angular team to integrate seamlessly with Angular 2.',
+      reverse: true,
+      img: 'optimized.svg',
+    },
+  ];
+
+  getImagePath(srcSvg: string): string {
+    return this._imagePath + srcSvg;
+  }
+}

src/app/pages/homepage/index.ts

@@ -0,0 +1 @@
+export * from './homepage';

src/app/routes.ts

@@ -0,0 +1,11 @@
+import { ModuleWithProviders } from '@angular/core';
+import { Homepage } from './pages/homepage';
+import { ComponentsList } from './pages/components';
+import { Routes, RouterModule } from '@angular/router';
+
+const MATERIAL_DOCS_ROUTES: Routes = [
+  { path: '', component: Homepage, pathMatch: 'full' },
+  { path: 'components', component:  ComponentsList },
+];
+
+export const routing: ModuleWithProviders = RouterModule.forRoot(MATERIAL_DOCS_ROUTES);

src/app/shared/navbar/_navbar-theme.scss

@@ -0,0 +1,15 @@
+@mixin nav-bar-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  app-navbar {
+    color: md-color($primary, default-contrast);
+
+    .docs-navbar {
+      background: md-color($primary);
+    }
+  }
+}

src/app/shared/navbar/index.ts

@@ -0,0 +1 @@
+export * from './navbar';

src/app/shared/navbar/navbar.html

@@ -0,0 +1,11 @@
+<!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
+<nav class="docs-navbar">
+  <a md-button routerLink="/" aria-label="Angular Material">
+    <img class="docs-angular-logo"
+         src="../../../assets/img/homepage/angular-logo-with-text.svg"
+         alt="Angular">
+    <span>Material</span>
+  </a>
+  <a md-button routerLink="components" aria-label="Components">Components</a>
+</nav>
+

src/app/shared/navbar/navbar.scss

@@ -0,0 +1,11 @@
+@import '../../../main';
+
+.docs-navbar {
+  padding: 8px 16px;
+}
+
+.docs-angular-logo {
+  margin: 0 4px 3px 0;
+  height: 26px;
+  vertical-align: middle;
+}

src/app/shared/navbar/navbar.ts

@@ -0,0 +1,8 @@
+import { Component} from '@angular/core';
+
+@Component({
+  selector: 'app-navbar',
+  templateUrl: 'navbar.html',
+  styleUrls: ['navbar.scss']
+})
+export class NavBar {}