converted home page to angular material look.

src/client/app/components/app.component.html

-<div platform>
-  <sd-toolbar></sd-toolbar>
-  <sd-navbar></sd-navbar>
-  <router-outlet></router-outlet>
-</div>
+<sd-toolbar></sd-toolbar>
+<sd-navbar></sd-navbar>
+<router-outlet></router-outlet>

src/client/app/components/home/home.component.html

-<h2>
-  {{ 'LOVE_TECH' | translate }} <div class="smile"></div>
-</h2>
+<div class="home-card-container">
+  <md-card>
+    <md-card-title>{{ 'LOVE_TECH' | translate }}</md-card-title>
+    <md-card-content>
+      <p>
+        {{'ABOUT_REWARD' | translate}}
+      </p>
+      <p>
+        {{'ABOUT_ADD' | translate}}
+      </p>
 
-<p>
-  {{'ABOUT_REWARD' | translate}}
-</p>
-<p>
-  {{'ABOUT_ADD' | translate}}
-</p>
+      <form (submit)="addName()" class="home-form">
+        <div>
+          <md-input [(ngModel)]="newName" name="newName" class="home-input" [placeholder]="'INPUT_HINT' | translate" ngDefaultControl></md-input>
+          <button md-raised-button color="primary" type="submit" class="home-button">{{'ADD_BTN_TEXT' | translate}}</button>
+        </div>
+      </form>
 
-<form (submit)="addName()">
-  <input [(ngModel)]="newName" name="newName" [placeholder]="'INPUT_HINT' | translate">
-  <button type="submit">{{'ADD_BTN_TEXT' | translate}}</button>
-</form>
+      <md-list class="home-list">
+        <md-list-item *ngFor="let name of (nameListService.names | async)">
+          <h3 md-line>{{name}}</h3>
+          <p md-line class="demo-secondary-text">secondary text</p>
+        </md-list-item>
+      </md-list>
 
-<ul>
-  <li *ngFor="let name of (nameListService.names | async)">{{name}}</li>
-</ul>
+      <p>
+        <a class="link" (click)="readAbout()">About - RouterExtensions example</a>
+      </p>
 
-<p>
-  <a class="link" (click)="readAbout()">About - RouterExtensions example</a>
-</p>
+    </md-card-content>
+  </md-card>
+</div>

src/client/app/components/home/home.component.scss

@@ -3,32 +3,26 @@
   padding: 0 16px;
 }
 
-input {
-  width: 250px;
+.home-card-container {
+  padding-top: 20px;
+  padding-left: 20px;
 }
 
-ul {
-  list-style-type: none;
-  padding: 0 0 0 8px;
+.home-card {
+  font-size: 14px;
+  width: 400px;
 }
 
-.smile {
-  background: url("./assets/svg/smile.svg");
-  height: 48px;
-  width: 48px;
-  display: inline-block;
-  transform: scale(0.6);
-  margin-top: -25px;
-  position: relative;
-  top: 16px;
+.home-form {
+  padding: 20px;
 }
 
-a.link {
-  color: #00e;
-  cursor: pointer;
-  text-decoration: underline;
+.home-input {
+  font-size: 14px;
+  width: 250px;
 }
 
-a.link:hover {
-  color: #f00;
+.home-button {
+  font-size: 16px;
+  margin: 10px;
 }

src/client/app/components/home/home.module.ts

+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { HomeComponent } from './home.component';
+import {NameListService} from "../../frameworks/sample/services/name-list.service";
+import {MdListModule} from '@angular2-material/list';
+import { MdCardModule } from '@angular2-material/card';
+import {MdInputModule} from '@angular2-material/input';
+import {MultilingualModule} from "../../frameworks/i18n/multilingual.module";
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MdCardModule,
+    MdListModule,
+    MultilingualModule,
+    FormsModule,
+    MdInputModule
+  ],
+  declarations: [HomeComponent],
+  exports: [HomeComponent],
+  providers: [NameListService]
+})
+export class HomeModule { }

src/client/web.module.ts

@@ -6,9 +6,9 @@ import { RouterModule } from '@angular/router';
 
 // app
 import { AppComponent } from './app/components/app.component';
-import { HomeComponent } from './app/components/home/home.component';
-import { AboutComponent } from './app/components/about/about.component';
 import { routes } from './app/components/app.routes';
+import { AboutModule } from './app/components/about/about.module';
+import { HomeModule } from "./app/components/home/home.module";
 
 // feature modules
 import { CoreModule } from './app/frameworks/core/core.module';
@@ -16,8 +16,6 @@ import { AnalyticsModule } from './app/frameworks/analytics/analytics.module';
 import { MultilingualModule } from './app/frameworks/i18n/multilingual.module';
 import { SampleModule } from './app/frameworks/sample/sample.module';
 
-import { AboutModule } from './app/components/about/about.module';
-
 // config
 import { Config, WindowService, ConsoleService } from './app/frameworks/core/index';
 Config.PLATFORM_TARGET = Config.PLATFORMS.WEB;
@@ -26,6 +24,7 @@ Config.DEBUG.LEVEL_4 = true;
 // sample config (extra)
 import { AppConfig } from './app/frameworks/sample/services/app-config';
 import { MultilingualService } from './app/frameworks/i18n/services/multilingual.service';
+
 // custom i18n language support
 MultilingualService.SUPPORTED_LANGUAGES = AppConfig.SUPPORTED_LANGUAGES;
 
@@ -48,11 +47,11 @@ if (String('<%= TARGET_DESKTOP %>') === 'true') {
     AnalyticsModule,
     MultilingualModule,
     SampleModule,
-    AboutModule
+    AboutModule,
+    HomeModule
   ],
   declarations: [
-    AppComponent,
-    HomeComponent
+    AppComponent
   ],
   providers: [
     {