Add main info component with material theme screenshot to material landing page

docs/app/pages/home/main-info-section/main-info-section.component.html

@@ -5,7 +5,7 @@
     <img *ngIf="breakpoint.width >= breakpoints.md"
          class="main-img"
          defaultImage="assets/img/default.png"
-         lazyLoad="assets/img/ngx-admin.png"/>
+         [lazyLoad]="imageUrl"/>
   </a>
 </div>
 <div class="main-inf">

docs/app/pages/home/main-info-section/main-info-section.component.ts

@@ -4,7 +4,8 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, OnDestroy } from '@angular/core';
+import { Component, OnDestroy, Input, OnInit } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 
@@ -14,24 +15,31 @@ import { takeWhile } from 'rxjs/operators';
   styleUrls: ['./main-info-section.component.scss'],
 })
 export class MainInfoSectionComponent implements OnDestroy {
-
+  constructor(themeService: NbThemeService, breakpointService: NbMediaBreakpointsService) {
-  private alive = true;
+    this.breakpoints = breakpointService.getBreakpointsMap();
-
+    themeService.onMediaQueryChange()
-  breakpoint: NbMediaBreakpoint;
-  breakpoints: any;
-
-  constructor(private themeService: NbThemeService,
-              private breakpointService: NbMediaBreakpointsService) {
-
-    this.breakpoints = this.breakpointService.getBreakpointsMap();
-    this.themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))
       .subscribe(([oldValue, newValue]) => {
         this.breakpoint = newValue;
       });
   }
 
-  ngOnDestroy() {
+  private alive = true;
+  public readonly breakpoints: any;
+  public breakpoint: NbMediaBreakpoint;
+  public forMaterialTheme: boolean = false;
+
+  @Input() public set material(value: any) {
+    this.forMaterialTheme = coerceBooleanProperty(value);
+  }
+
+  public get imageUrl(): string {
+    return this.forMaterialTheme
+      ? 'assets/img/ngx-admin-material.png'
+      : '/assets/img/ngx-admin.png';
+  }
+
+  public ngOnDestroy() {
     this.alive = false;
   }
 }

docs/app/pages/home/material-landing/material-landing.component.html

@@ -3,6 +3,10 @@
     <ngx-landing-header></ngx-landing-header>
   </nb-layout-header>
 
+  <nb-layout-column>
+    <ngx-landing-main-info material></ngx-landing-main-info>
+  </nb-layout-column>
+
   <nb-layout-footer class="footer" fixed>
     <ngx-landing-footer></ngx-landing-footer>
   </nb-layout-footer>