fix(landing): change landing content

docs/app/pages/home/landing-home-routing.module.ts

@@ -19,6 +19,10 @@ export const routes: Routes = [
     path: 'material',
     component: MaterialLandingComponent,
   },
+  // {
+  //   path: 'overview',
+  //   component: OverviewComponent,
+  // },
 ];
 
 @NgModule({

docs/app/pages/home/landing-home.module.ts

@@ -28,6 +28,9 @@ import { LicensePipe } from './backend-bundles-section/license.pipe';
 import { BackgroundImagePipe } from './backend-bundles-section/background-image.pipe';
 import { MaterialLandingComponent } from './material-landing/material-landing.component';
 import { LandingSharedModule } from '../../shared/landing-shared.module';
+import {MaterialFeaturesSectionComponent} from './material-features/material-features.component';
+import {DefaultAdminInfoComponent} from './main-info-section/default-admin-main-info/default-info.component';
+import {MaterialAdminInfoComponent} from './main-info-section/material-admin-main-info/material-info.component';
 // components
 
 const PIPES = [LicensePipe, BackgroundImagePipe];
@@ -37,6 +40,8 @@ const COMPONENTS = [
   MaterialLandingComponent,
   NgxLandingSectionsContainerComponent,
   MainInfoSectionComponent,
+  DefaultAdminInfoComponent,
+  MaterialAdminInfoComponent,
   DescriptionSectionComponent,
   ReasonSectionComponent,
   ThemeSectionComponent,
@@ -45,6 +50,7 @@ const COMPONENTS = [
   SocialSectionComponent,
   ContactSectionComponent,
   BackendBundlesSectionComponent,
+  MaterialFeaturesSectionComponent,
 ];
 
 @NgModule({

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

@@ -0,0 +1,16 @@
+<div>
+  <h1>ngx-admin</h1>
+  <p class="description">
+    The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and
+    <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with
+    <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.
+    Free and Open Source for personal and commercial purposes.
+    <br>
+    <span class="bundles">
+      Never start from scratch again.
+      <a href="https://hubs.ly/H0n5NVz0" target="_blank">
+        Integrate ready-made solution: ngx-admin with backend.
+      </a>
+    </span>
+  </p>
+</div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-default-admin-info',
+  templateUrl: './default-info.component.html',
+  styleUrls: ['./../main-info-section.component.scss'],
+})
+export class DefaultAdminInfoComponent {
+}

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

@@ -9,20 +9,28 @@
   </a>
 </div>
 <div class="main-inf">
-  <h1>ngx-admin</h1>
+<!--  <h1>ngx-admin</h1>-->
-  <p class="description">
+<!--  <p class="description">-->
-    The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and
+<!--    The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and-->
-    <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with
+<!--    <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with-->
-    <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.
+<!--    <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.-->
-    Free and Open Source for personal and commercial purposes.
+<!--    Free and Open Source for personal and commercial purposes.-->
-    <br>
+<!--    <br>-->
-    <span class="bundles">
+<!--    <span class="bundles">-->
-      Never start from scratch again.
+<!--      Never start from scratch again.-->
-      <a href="https://hubs.ly/H0n5NVz0" target="_blank">
+<!--      <a href="https://hubs.ly/H0n5NVz0" target="_blank">-->
-        Integrate ready-made solution: ngx-admin with backend.
+<!--        Integrate ready-made solution: ngx-admin with backend.-->
-      </a>
+<!--      </a>-->
-    </span>
+<!--    </span>-->
-  </p>
+<!--  </p>-->
+  <ng-container *ngIf="forMaterialTheme === false">
+    <ngx-default-admin-info></ngx-default-admin-info>
+  </ng-container>
+
+  <ng-container *ngIf="forMaterialTheme !== false">
+    <ngx-material-admin-info></ngx-material-admin-info>
+  </ng-container>
+
   <div class="mobile-main-img-container">
     <img *ngIf="breakpoint.width <= breakpoints.sm" class="main-img" lazyLoad="assets/img/corporate-theme.png" alt="Light theme Dashboard"/>
   </div>
@@ -42,3 +50,4 @@
        target="_blank">Demo</a>
   </div>
 </div>
+

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

@@ -70,6 +70,11 @@
     margin: 4.625rem 9% 0 6%;
   }
 
+  ngx-default-admin-info,
+  ngx-material-admin-info {
+    padding: 0;
+  }
+
   h1 {
     font-family: 'Helvetica Neue Bold', sans-serif;
     font-size: 4rem;

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

@@ -30,7 +30,7 @@ export class MainInfoSectionComponent implements OnDestroy {
   public breakpoint: NbMediaBreakpoint;
 
   @Input() public set material(value: any) {
-    this.forMaterialTheme = coerceBooleanProperty(value);
+    this.forMaterialTheme = (value);
   }
 
   public get imageUrl(): string {

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

@@ -0,0 +1,18 @@
+<div>
+  <h1>material ngx-admin</h1>
+  <p class="description">
+    Material admin theme based on the most popular Angular dashboard template - <a href="https://hubs.ly/H0nJjJ00"
+                                                                                   target="_blank">ngx-admin</a>.
+    Included: <strong>Angular 9+</strong>,
+    <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> and
+    <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a>.
+    Free for personal and commercial usage.
+    <br>
+    <span class="bundles">
+      Get material ngx-admin integrated with backend technology of your choice.
+      <a href="https://hubs.ly/H0nJfXB0" target="_blank">
+        Check out our store.
+      </a>
+    </span>
+  </p>
+</div>

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

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-admin-info',
+  templateUrl: './material-info.component.html',
+  styleUrls: ['./../main-info-section.component.scss'],
+})
+export class MaterialAdminInfoComponent {
+}

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

@@ -0,0 +1,31 @@
+<ngx-landing-section-title>
+  Features and benefits
+</ngx-landing-section-title>
+
+<ul class="features">
+  <li class="feature">
+    <div class="number">1</div>
+    <div class="description">
+      The most popular and trusted Angular open source dashboard template is out there. Used by hundreds of thousands developers worldwide and Fortune 500 companies*
+    </div>
+  </li>
+  <li class="feature">
+    <div class="number">2</div>
+    <div class="description">
+      Over 40+ Angular Components and 60+ Usage Examples. Kick off your project and save money by using ngx-admin.
+    </div>
+  </li>
+  <li class="feature">
+    <div class="number">3</div>
+    <div class="description">
+      Already using ngx-admin and willing to switch to material theme? Material theme is backward-compatible. Check out the article describing how to do that
+    </div>
+  </li>
+  <li class="feature">
+    <div class="number">4</div>
+    <div class="description">
+      ngx-admin material works perfectly with Angular Material and Nebular. Take the best from both!
+    </div>
+  </li>
+</ul>
+

docs/app/pages/home/material-features/material-features.component.scss

@@ -0,0 +1,104 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $features-section-offset: 10.625rem;
+
+  display: block;
+  padding: 5.25rem 0;
+
+  .features {
+    width: calc(100% - #{$features-section-offset} * 2);
+    margin: -1.375rem auto 0;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 0;
+
+    .feature {
+      display: flex;
+      width: 50%;
+      list-style: none;
+      padding-right: 3.75rem;
+      padding-left: 0.25rem;
+      margin-top: 7.875rem;
+
+      &:nth-child(2n) {
+        padding-right: 0;
+        padding-left: 3.75rem;
+      }
+    }
+
+    .number {
+      font-family: 'Helvetica Neue Bold', sans-serif;
+      font-size: 8.75rem;
+      color: #ffffff;
+      text-shadow: 0 0.5rem 1rem #dae0eb;
+      line-height: 0.3;
+    }
+
+    .description {
+      &::before {
+        content: '';
+        display: block;
+        height: 0.25rem;
+        width: 3.5rem;
+        margin-bottom: 0.375rem;
+        background-color: nb-theme(color-active-bg);
+      }
+
+      font-family: nb-theme(font-secondary), sans-serif;
+      font-size: nb-theme(font-size-lg);
+      line-height: 1.5;
+      margin-left: 1.75rem;
+    }
+
+    .highlight {
+      font-family: nb-theme(font-main), sans-serif;
+    }
+
+    .active {
+      text-decoration: none;
+      font-family: nb-theme(font-main), sans-serif;
+      color: nb-theme(color-active-fg);
+
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    .features {
+      width: 100%;
+      padding: 0 1rem;
+      margin: 0;
+
+      .number {
+        font-size: 6rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 2.625rem;
+    padding-bottom: 0;
+
+    .features {
+      flex-direction: column;
+
+      .feature {
+        width: 100%;
+        margin: 1.625rem 0 0.375rem;
+        padding: 0;
+
+        &:nth-child(2n) {
+          padding: 0;
+
+        }
+      }
+
+      .number {
+        font-size: 5rem;
+        line-height: 1.3;
+      }
+    }
+  }
+}

docs/app/pages/home/material-features/material-features.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngx-material-features',
+  templateUrl: './material-features.component.html',
+  styleUrls: ['./material-features.component.scss'],
+})
+export class MaterialFeaturesSectionComponent {
+  constructor() {
+
+  }
+
+}

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

@@ -3,8 +3,9 @@
     <ngx-landing-header></ngx-landing-header>
   </nb-layout-header>
 
-  <nb-layout-column>
+  <nb-layout-column class="main-section">
     <ngx-landing-main-info material></ngx-landing-main-info>
+    <ngx-material-features></ngx-material-features>
     <ngx-landing-theme-section material></ngx-landing-theme-section>
   </nb-layout-column>
 

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

@@ -1,6 +1,9 @@
 @import '../../../@theme/styles/themes';
 
 @include nb-install-component() {
+
+  $content-width: nb-theme(content-width);
+
   ::ng-deep {
     .version {
       color: nb-theme(color-basic-500) !important;
@@ -12,4 +15,20 @@
       }
     }
   }
+
+  .main-section {
+    background-color: nb-theme(gray-section-bg);
+  }
+
+  ngx-material-features {
+    max-width: $content-width;
+    margin: 0 auto;
+  }
+
+  @include media-breakpoint-down(is) {
+    ngx-material-features {
+      max-width: 100%;
+    }
+
+  }
 }

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

@@ -6,8 +6,8 @@ import { NbThemeService } from '@nebular/theme';
   templateUrl: './material-landing.component.html',
   styleUrls: [
     './material-landing.component.scss',
-    '../landing-home.component.scss'
+    '../landing-home.component.scss',
-  ]
+  ],
 })
 export class MaterialLandingComponent {
   constructor(private themeService: NbThemeService) {