feat: update npm packages

2026-03-11 16:12:35 +01:00 · 2021-08-06 18:48:35 +03:00 · 2021-08-06 18:48:35 +03:00 · 7a22737611
commit 7a22737611
parent f6d9ec88ad
321 changed files with 19716 additions and 84 deletions
--- a/docs/app/pages/docs/landing-docs-routing.module.ts
+++ b/docs/app/pages/docs/landing-docs-routing.module.ts
@ -0,0 +1,39 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LandingDocsComponent } from './landing-docs.component';
+import { NgxAdminLandingPageComponent } from './page/ngx-admin-landing-page.component';
+
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: LandingDocsComponent,
+    children: [
+      {
+        path: ':page',
+        component: NgxAdminLandingPageComponent,
+      },
+      {
+        path: ':page/:subPage',
+        component: NgxAdminLandingPageComponent,
+      },
+      {
+        path: ':page/:subPage/:tab',
+        component: NgxAdminLandingPageComponent,
+      },
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LandingDocsRoutingModule {
+}
--- a/docs/app/pages/docs/landing-docs.component.html
+++ b/docs/app/pages/docs/landing-docs.component.html
@ -0,0 +1,27 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <div class="content-center">
+      <ngx-landing-header class="docs-header" [sidebarTag]="sidebarTag" [isDocs]="true">
+        <ngx-material-theme-link withPopover></ngx-material-theme-link>
+      </ngx-landing-header>
+    </div>
+  </nb-layout-header>
+  <nb-sidebar class="menu-sidebar" [tag]="sidebarTag" [responsive]="true" [compactedBreakpoints]="[]" [collapsedBreakpoints]="collapsedBreakpoints">
+    <nb-menu [items]="menuItems" tag="leftMenu"></nb-menu>
+  </nb-sidebar>
+  <nb-layout-column>
+    <router-outlet></router-outlet>
+
+    <div class="contact-us">
+      <h2>Need some help or found an issue?</h2>
+      <p>
+        Ask on <a href="https://stackoverflow.com/questions/ask">Stack Overflow</a> with tag `ngx-admin` or
+        post an issue on <a href="https://github.com/akveo/ngx-admin/issues/new">GitHub</a>.
+      </p>
+    </div>
+  </nb-layout-column>
+  <nb-layout-footer>
+    <ngx-docs-footer></ngx-docs-footer>
+  </nb-layout-footer>
+</nb-layout>
+
--- a/docs/app/pages/docs/landing-docs.component.scss
+++ b/docs/app/pages/docs/landing-docs.component.scss
@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../@theme/styles/themes';
+
+@include nb-install-component() {
+  $content-width: nb-theme(content-width);
+  $settings-width: nb-theme(settings-col-width);
+  $settings-margin: nb-theme(settings-col-margin);
+  $color-heading: nb-theme(color-fg-heading-light);
+
+  .menu-sidebar.fixed {
+    box-shadow: 8px 0 20px 0 rgba(218, 224, 235, 0.6);
+  }
+
+  nb-layout-header {
+    background-color: nb-theme(header-background-color);
+  }
+
+  .content-center {
+    max-width: $content-width;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .contact-us {
+    padding: 5rem 1rem;
+    h2 {
+      color: black;
+    }
+  }
+
+  .collapse-all {
+    position: absolute;
+    right: 1px;
+    top: 0.75rem;
+    font-size: 0.75rem;
+    color: $color-heading;
+    appearance: none;
+    background: none;
+    border: none;
+  }
+
+  ::ng-deep nb-layout .main-container {
+    padding-top: 3rem;
+
+    .scrollable {
+      padding-top: 0;
+    }
+  }
+
+  ::ng-deep nb-layout .layout-container {
+    max-width: $content-width;
+    width: 100%;
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  ::ng-deep nb-layout-footer ngx-docs-footer .contact {
+    display: none;
+  }
+
+  @include media-breakpoint-up(xl) {
+    .contact-us {
+      padding: 5rem 0;
+    }
+  }
+
+  @include media-breakpoint-up(macpro) {
+    ::ng-deep nb-layout-footer {
+      margin-right: $settings-width + $settings-margin;
+    }
+  }
+}
--- a/docs/app/pages/docs/landing-docs.component.ts
+++ b/docs/app/pages/docs/landing-docs.component.ts
@ -0,0 +1,70 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {Component, OnDestroy} from '@angular/core';
+import {Router} from '@angular/router';
+import {map, takeWhile, withLatestFrom} from 'rxjs/operators';
+import {
+  NbMediaBreakpoint,
+  NbMenuItem,
+  NbSidebarService,
+  NbThemeService} from '@nebular/theme';
+
+import {NgxMenuService} from '../../@theme/services/menu.service';
+import {NgxPaginationService} from '../../@theme/services/pagination.service';
+import {MetadataService} from '../../../../src/app/@core/utils/metadata.service';
+
+@Component({
+  selector: 'ngx-landing-docs',
+  templateUrl: './landing-docs.component.html',
+  styleUrls: ['./landing-docs.component.scss'],
+})
+export class LandingDocsComponent implements OnDestroy {
+  menuItems: NbMenuItem[] = [];
+  collapsedBreakpoints = ['xs', 'is', 'sm', 'md', 'lg'];
+  sidebarTag = 'menuSidebar';
+
+  private alive = true;
+
+  constructor(
+    private service: NgxMenuService,
+    private router: Router,
+    private themeService: NbThemeService,
+    private sidebarService: NbSidebarService,
+    private paginationService: NgxPaginationService,
+    private metadataService: MetadataService) {
+
+    this.metadataService.updateDescription('Free and Open Source ngx-admin to bootstrap the development of ' +
+      'your product or to learn Angular. Over 40+ Angular Components and 60+ Usage Examples.');
+    this.metadataService.updateTitle('A front-end admin dashboard on Angular 9+, Bootstrap 4+ and Nebular.');
+
+    this.themeService.changeTheme('docs-page');
+    this.paginationService.setPaginationItems('/docs');
+    this.menuItems = this.service.getPreparedMenu('/docs');
+
+    // TODO: can we do any better?
+    this.router.events
+      .pipe(
+        withLatestFrom(this.themeService.onMediaQueryChange().pipe(map((changes: any[]) => changes[1]))),
+        takeWhile(() => this.alive),
+      )
+      .subscribe(([event, mediaQuery]: [any, NbMediaBreakpoint]) => {
+        if (event.url === '/docs') {
+          const firstMenuItem = this.menuItems[0].children[0];
+          // angular bug with replaceUrl, temp fix with setTimeout
+          setTimeout(() => this.router.navigateByUrl(firstMenuItem.link, { replaceUrl: true }));
+        }
+
+        if (this.collapsedBreakpoints.includes(mediaQuery.name)) {
+          this.sidebarService.collapse(this.sidebarTag);
+        }
+      });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}
--- a/docs/app/pages/docs/landing-docs.module.ts
+++ b/docs/app/pages/docs/landing-docs.module.ts
@ -0,0 +1,42 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+
+// modules
+import { NgxLandingThemeModule } from '../../@theme/theme.module';
+import { SwiperModule } from 'ngx-swiper-wrapper';
+import { NgxBlocksModule } from '../../blocks/blocks.module';
+import { LandingDocsRoutingModule } from './landing-docs-routing.module';
+import { LandingSharedModule } from '../../shared/landing-shared.module';
+// modules
+
+// components
+import { LandingDocsComponent } from './landing-docs.component';
+import { NgxAdminLandingPageComponent } from './page/ngx-admin-landing-page.component';
+// components
+
+/*import { NgxMenuService } from '../@theme/services/menu.service';*/
+
+const COMPONENTS = [
+  LandingDocsComponent,
+  NgxAdminLandingPageComponent,
+];
+
+@NgModule({
+  declarations: [
+    ...COMPONENTS,
+  ],
+  imports: [
+    NgxLandingThemeModule,
+    SwiperModule,
+    LandingSharedModule,
+    LandingDocsRoutingModule,
+    NgxBlocksModule,
+  ],
+})
+export class LandingDocsModule {
+}
--- a/docs/app/pages/docs/page/ngx-admin-landing-page.component.html
+++ b/docs/app/pages/docs/page/ngx-admin-landing-page.component.html
@ -0,0 +1,32 @@
+<div class="middle-column">
+
+  <nb-card *ngIf="currentItem?.tabs" class="horizontal-nav">
+    <nb-card-header>
+      {{ currentItem?.name }}
+    </nb-card-header>
+    <nb-card-body>
+      <ngx-page-tabs [tabs]="currentItem?.tabs" horizontal></ngx-page-tabs>
+    </nb-card-body>
+  </nb-card>
+
+  <ng-container *ngFor="let block of currentItem?.children">
+    <ng-container [ngSwitch]="block.block">
+      <ngx-md-block *ngSwitchCase="'markdown'" [source]="block.children"></ngx-md-block>
+      <ngx-component-block *ngSwitchCase="'component'" [source]="block.source"></ngx-component-block>
+      <ngx-tabbed-block *ngSwitchCase="'tabbed'" [source]="block.children" [tabs]="currentItem.tabs"></ngx-tabbed-block>
+      <ngx-theme-block *ngSwitchCase="'theme'" [block]="block"></ngx-theme-block>
+      <ngx-components-overview-block *ngSwitchCase="'components-overview'"></ngx-components-overview-block>
+    </ng-container>
+  </ng-container>
+
+  <p class="not-found" *ngIf="!currentItem">Page does not exist.</p>
+
+  <ngx-pager-block [currentItemSlag]="currentItem?.slag"></ngx-pager-block>
+</div>
+
+<div class="settings-column" *ngIf="showSettings">
+  <div class="fixed-panel">
+    <ngx-page-tabs [tabs]="currentItem?.tabs"></ngx-page-tabs>
+    <ngx-page-toc [toc]="currentItem?.toc"></ngx-page-toc>
+  </div>
+</div>
--- a/docs/app/pages/docs/page/ngx-admin-landing-page.component.scss
+++ b/docs/app/pages/docs/page/ngx-admin-landing-page.component.scss
@ -0,0 +1,243 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  display: flex;
+
+  $note-fg-info: nb-theme(color-info);
+  $note-bg-info: #f0f6ff;
+  $note-fg-warning: nb-theme(color-warning);
+  $note-bg-warning: #fffae4;
+  $settings-width: nb-theme(settings-col-width);
+  $settings-margin: nb-theme(settings-col-margin);
+  $heading-light: nb-theme(color-fg-heading-light);
+  $code-bg: #f1f2f3;
+  $code-fg: nb-theme(color-info);
+  $code-block-bg: nb-theme(code-block-bg);
+  $table-head-fg: #8994a3;
+  $table-border: 1px solid #f1f2f3;
+  $table-stripe-bg: #f5f6f7;
+
+  .not-found {
+    color: $heading-light;
+    font-size: 1.25rem;
+  }
+
+  .middle-column {
+    flex: 3;
+    min-width: 0;
+
+    ::ng-deep nb-card {
+
+      nb-card-body {
+        padding: 2rem 1rem;
+
+        > *:last-child {
+          margin-bottom: 0!important;
+
+          *:last-child {
+            margin-bottom: 0 !important;
+          }
+        }
+      }
+
+      h1, h2, h3, h4, h5, h6 {
+        line-height: 1.25;
+        margin-bottom: 1.25rem;
+        font-weight: bold;
+      }
+
+      h3 {
+        color: $heading-light;
+      }
+
+      p {
+        font-size: 0.9375rem;
+        line-height: 1.5;
+      }
+
+      img {
+        max-width: 100%;
+      }
+
+      pre {
+        margin-bottom: 2rem;
+      }
+
+      code {
+        background: $code-bg;
+        color: $code-fg;
+        padding: 0.125rem 0.5rem;
+        border-radius: 0.25rem;
+      }
+
+      code.hljs {
+        color: #f8f8f2;
+        padding: 2rem 2.5rem;
+        border-radius: 0.5rem;
+        background: $code-block-bg;
+        font-size: 0.875rem;
+      }
+
+      ::ng-deep {
+        .widget-block {
+          display: block;
+          margin-bottom: 2rem;
+        }
+
+        ngx-styles-table-block table {
+          margin-bottom: 0;
+        }
+      }
+
+      table {
+        font-size: 0.9375rem;
+        width: 100%;
+        margin-bottom: 3rem;
+        thead {
+          color: $table-head-fg;
+          border-bottom: $table-border;
+
+          td {
+            padding: 1rem 0.5rem;
+          }
+        }
+
+        tr {
+          border-bottom: $table-border;
+
+          &:last-child {
+            border: none;
+          }
+          p {
+            margin-bottom: 0;
+          }
+        }
+
+        td {
+          padding: 1rem 0.5rem;
+
+          &:first-child {
+            font-weight: 500;
+          }
+        }
+
+        &.striped {
+          tbody tr:nth-child(odd) {
+            background: $table-stripe-bg;
+          }
+
+          td {
+            padding: 1rem 0.5rem;
+          }
+        }
+      }
+
+      ul {
+        margin-bottom: 1.5rem;
+        ul {
+          padding-left: 2.5rem;
+          list-style-type: none;
+          & > li {
+            list-style: circle;
+            position: relative;
+            margin-bottom: 0;
+          }
+        }
+        li {
+          font-size: 0.9375rem;
+          line-height: 1.5;
+          margin-bottom: 1.5rem;
+        }
+      }
+
+      .note {
+        padding: 1.25rem 3rem 1.5rem 1.25rem;
+        border-radius: 0.25rem;
+        margin-bottom: 3rem;
+
+        .note-title {
+          font-weight: 500;
+          text-transform: uppercase;
+          margin-bottom: 1.5rem;
+        }
+
+        .note-body {
+          font-size: 0.875rem;
+          line-height: 1.5;
+        }
+
+        &.note-info {
+          color: $note-fg-info;
+          background-color: $note-bg-info;
+        }
+
+        &.note-warning {
+          color: $note-fg-warning;
+          background-color: $note-bg-warning;
+        }
+      }
+
+      .color-swatch {
+        display: inline-block;
+        border: 1px solid black;
+        width: 0.875rem;
+        height: 0.875rem;
+        margin-left: 7px;
+        margin-bottom: -2px;
+        border-radius: 2px;
+      }
+    }
+  }
+
+  .horizontal-nav {
+    margin-top: 1rem;
+
+    nb-card-body {
+      background-color: nb-theme(layout-bg);
+      padding: 0;
+      overflow: visible;
+    }
+  }
+  .settings-column {
+    display: none;
+  }
+
+  @include media-breakpoint-up(md) {
+    .middle-column ::ng-deep nb-card nb-card-body {
+      padding: 2rem 3rem 2rem 2rem;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .horizontal-nav {
+      margin-top: 0;
+    }
+  }
+
+  @include media-breakpoint-up(macpro) {
+    .horizontal-nav nb-card-body {
+      display: none;
+    }
+
+    .settings-column {
+      display: block;
+      margin-left: $settings-margin;
+      width: $settings-width;
+
+      ngx-page-tabs {
+        margin-bottom: 1.5rem;
+      }
+    }
+
+    .fixed-panel {
+      position: fixed;
+      width: inherit;
+    }
+  }
+}
--- a/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
+++ b/docs/app/pages/docs/page/ngx-admin-landing-page.component.ts
@ -0,0 +1,105 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Inject, NgZone, OnDestroy, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import {
+  filter,
+  map,
+  publishBehavior,
+  publishReplay,
+  refCount,
+  tap,
+  takeWhile,
+} from 'rxjs/operators';
+import { NB_WINDOW } from '@nebular/theme';
+import { fromEvent } from 'rxjs';
+
+import { NgxStructureService } from '../../../@theme/services/structure.service';
+import { NgxTocStateService } from '../../../@theme/services/toc-state.service';
+import {MetadataService} from '../../../../../src/app/@core/utils/metadata.service';
+
+@Component({
+  selector: 'ngx-admin-landing-page',
+  templateUrl: './ngx-admin-landing-page.component.html',
+  styleUrls: ['./ngx-admin-landing-page.component.scss'],
+})
+export class NgxAdminLandingPageComponent implements OnDestroy, OnInit {
+
+  currentItem;
+  private alive = true;
+
+  constructor(@Inject(NB_WINDOW) private window,
+              private ngZone: NgZone,
+              private router: Router,
+              private activatedRoute: ActivatedRoute,
+              private structureService: NgxStructureService,
+              private tocState: NgxTocStateService,
+              private metaDataService: MetadataService) {
+  }
+
+  get showSettings() {
+    return this.currentItem && this.currentItem.children
+      .some((item) => ['markdown', 'component', 'tabbed'].includes(item.block));
+  }
+
+  ngOnInit() {
+    this.handlePageNavigation();
+    this.handleTocScroll();
+    this.window.history.scrollRestoration = 'manual';
+  }
+
+  handlePageNavigation() {
+    this.activatedRoute.params
+      .pipe(
+        takeWhile(() => this.alive),
+        filter((params: any) => params.subPage),
+        map((params: any) => {
+          const slag = `${params.page}_${params.subPage}`;
+          return this.structureService.findPageBySlag(this.structureService.getPreparedStructure(), slag);
+        }),
+        filter(item => item),
+        tap((item: any) => {
+          this.metaDataService.updateTitle(item.title);
+          this.metaDataService.updateDescription(item.description);
+          this.metaDataService.updateKeywords(item.keywords);
+        }),
+        publishReplay(),
+        refCount(),
+      )
+      .subscribe((item) => {
+        this.currentItem = item;
+      });
+  }
+
+  handleTocScroll() {
+    this.ngZone.runOutsideAngular(() => {
+      fromEvent(this.window, 'scroll')
+        .pipe(
+          publishBehavior(null),
+          refCount(),
+          takeWhile(() => this.alive),
+          filter(() => this.tocState.list().length > 0),
+        )
+        .subscribe(() => {
+          this.tocState.list().map(item => item.setInView(false));
+
+          const current: any = this.tocState.list().reduce((acc, item) => {
+            return item.y > 0 && item.y < acc.y ? item : acc;
+          }, { y: Number.POSITIVE_INFINITY, fake: true });
+
+          if (current && !current.fake) {
+            current.setInView(true);
+            this.router.navigate([], { fragment: current.fragment, replaceUrl: true });
+          }
+        });
+    });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
@ -0,0 +1,125 @@
+<ngx-landing-section-title>
+  ngx-admin Dashboard with Backends
+</ngx-landing-section-title>
+
+<div class="section-container">
+
+  <p class="features__description">
+    Looking for a way to integrate Angular ngx-admin with .NET, Node.js, Ruby or PHP? We are here to save your time on painful setup, configuration and routing tasks.
+    Choose starter kit bundle based on a technology of your choice below.
+  </p>
+
+  <div class="package-switcher">
+    <div class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
+      <label *ngFor="let license of licenses"
+             class="package-switcher__btn btn btn-outline-secondary"
+             [class.active]="selectedLicenseType === license">
+        <input type="radio" [value]="license" name="licence-type" [(ngModel)]="selectedLicenseType"> {{ license | ngxCapitalize }}
+      </label>
+    </div>
+  </div>
+
+  <ul class="packages">
+    <li class="packages__item" *ngFor="let product of products | async">
+      <nb-card class="package-card">
+        <nb-card-body>
+          <div class="package-card__image" [ngStyle]="product.imageUrl | backgroundImage"></div>
+          <h4 class="package-card__title">{{ product.title }}</h4>
+          <p class="package-card__description">
+            {{ product.description | slice:0:200 }}...
+            <a class="go-to-button"
+               href="{{ product.storeUrl }}?utm_source=ngx_admin&utm_medium=referral&utm_campaign=akveo_store%20-%20specific%20bundle%20-%20ngx_admin%20landing&utm_content=buy_bundle_{{ selectedLicenseType }}"
+               target="_blank">
+              read more
+            </a>
+          </p>
+          <div class="package-card__price-wrapper">
+            <span class="package-card__price package-card__price--old" *ngIf="shouldShowOldPrice(product.variants, selectedLicenseType)">
+              ${{ (product.variants | license:selectedLicenseType).compare_at_price }}
+            </span>
+            <span class="package-card__price">From ${{ (product.variants | license:selectedLicenseType).price }}</span>
+          </div>
+          <a href="{{ product.storeUrl }}?utm_source=ngx_admin&utm_medium=referral&utm_campaign=akveo_store%20-%20specific%20bundle%20-%20ngx_admin%20landing&utm_content=buy_bundle_{{ selectedLicenseType }}"
+             class="package-card__buy-link btn">
+             Buy now
+          </a>
+        </nb-card-body>
+      </nb-card>
+    </li>
+  </ul>
+
+  <div class="request-code-section">
+    <a href="https://github.com/akveo/ngx-admin-bundle-support/tree/master/codeSamples" target="_blank" class="package-card__buy-link btn">
+      CODE SAMPLE
+    </a>
+
+    <a href="https://store.akveo.com/collections/all?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin%20landing&utm_source=ngx_admin&utm_medium=referral&utm_content=browse_other_bundles" target="_blank" class="package-card__buy-link btn">
+      BROWSE OTHER BUNDLES
+    </a>
+  </div>
+
+  <div class="fleet-management-template-banner">
+    <a href="https://www.akveo.com/templates/fleet-management-dashboard?utm_campaign=services%20-%20templates%20-%20ngx-admin%20&utm_source=ngx-admin&utm_medium=referral&utm_content=landing_banner" target="_blank" aria-label="Template for Fleet Management Software">
+      <picture>
+        <source srcset="assets/img/fleet-management-banner.webp" type="image/webp">
+        <img src="assets/img/fleet-management-banner.jpg"
+             class="fleet-management-template-banner-image"
+             alt="Template for Fleet Management Software">
+      </picture>
+    </a>
+  </div>
+
+  <table class="features-table">
+    <tr class="header">
+      <th class="left">FEATURES</th>
+      <th>PERSONAL APP</th>
+      <th>DEVELOPER APP</th>
+    </tr>
+    <tr *ngFor="let feature of features | async">
+      <td class="left">{{ feature.text }}</td>
+      <td>
+        <ng-container *ngTemplateOutlet="availabilityIcon; context: { $implicit: feature.availableInPersonalLicence }">
+        </ng-container>
+      </td>
+      <td>
+        <ng-container *ngTemplateOutlet="availabilityIcon; context: { $implicit: feature.availableInCommercialLicence }">
+        </ng-container>
+      </td>
+    </tr>
+
+    <ng-template #availabilityIcon let-isAvailable>
+      <i *ngIf="isAvailable; else unavailableIcon"
+         aria-label="available"
+         [innerHTML]="'checkmark-outline' | eva: { width: 24, height: 24, fill: '#00db92' }">
+      </i>
+
+      <ng-template #unavailableIcon>
+        <i aria-label="unavailable" [innerHTML]="'close-outline' | eva: { width: 24, height: 24, fill: '#ff8588' }"></i>
+      </ng-template>
+    </ng-template>
+  </table>
+
+  <ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async"></ngx-landing-description-section>
+
+  <div class="bundles-architecture">
+    <ngx-landing-section-title>
+      Architecture Design
+    </ngx-landing-section-title>
+
+    <p class="features__description">The schema describes high-level solution architecture.</p>
+
+    <picture class="bundle-scheme">
+      <source type="image/webp" srcset="assets/img/bundle-scheme@1x.webp 1x, assets/img/bundle-scheme@2x.webp 2x">
+      <img class="bundle-scheme__image" src="assets/img/bundle-scheme@1x.png" srcset="assets/img/bundle-scheme@2x.png 2x" alt="Backend bundles">
+    </picture>
+  </div>
+
+  <p class="features__description">Need more details or have a question?</p>
+
+  <div class="request-code-section">
+    <a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn">
+      CONTACT US
+    </a>
+  </div>
+
+</div>
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
@ -0,0 +1,403 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $content-width: nb-theme(content-width);
+  $left-right-offset: 8.125rem;
+
+  display: block;
+  padding-top: 5.125rem;
+
+  .section-container {
+    width: calc(#{$content-width} - #{$left-right-offset} * 2);
+    max-width: 100%;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .features {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 0 11px;
+    margin-top: 5rem;
+    margin-left: -11px;
+    margin-right: -11px;
+    width: 100%;
+    width: calc(100% + 22px);
+
+    &__item {
+      flex: 0 0 25%;
+      width: 25%;
+      max-width: 25%;
+      display: flex;
+      flex-direction: column;
+      text-align: center;
+      list-style: none;
+      padding-left: 11px;
+      padding-right: 11px;
+      margin-bottom: 1.625rem;
+    }
+    &__title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 60px;
+      font-weight: bold;
+      font-size: 24px;
+      line-height: 30px;
+      text-align: center;
+      color: rgba(0, 0, 0, 0.87);
+    }
+    &__description {
+      font-family: nb-theme(font-secondary), sans-serif;
+      color: #8994a3;
+      font-size: nb-theme(font-size-lg);
+      line-height: 1.75;
+      text-align: center;
+    }
+  }
+
+  .bundles-architecture {
+    display: none;
+    margin-bottom: 5rem;
+
+    .bundle-scheme {
+      width: 100%;
+      height: auto;
+      margin: 2.5rem auto;
+
+      &__image {
+        width: 100%;
+      }
+    }
+
+    @include media-breakpoint-up(md) {
+      display: block;
+    }
+  }
+
+  .package-switcher {
+    margin: 2.375rem 0 5rem;
+
+    &__btn-group {
+      box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
+      border-radius: 1.5rem;
+      &:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):first-child {
+        border-top-left-radius: 1.5rem;
+        border-bottom-left-radius: 1.5rem;
+      }
+      &:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):last-child {
+        border-top-right-radius: 1.5rem;
+        border-bottom-right-radius: 1.5rem;
+      }
+    }
+
+    &__btn {
+      min-width: 10.625rem;
+      color: #bdc3cb;
+      border-color: #e6e8eb;
+      text-transform: none;
+      cursor: pointer;
+
+      &:active {
+        color: #ffffff;
+      }
+
+      &.active {
+        color: #000000;
+        background-color: #fafafa;
+      }
+    }
+  }
+
+  .packages {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    padding: 0;
+    margin-left: -11px;
+    margin-right: -11px;
+    margin-bottom: 4rem;
+    width: 100%;
+    width: calc(100% + 22px);
+
+    &__item {
+      flex: 0 0 25%;
+      width: 25%;
+      max-width: 25%;
+      display: flex;
+      flex-direction: column;
+      list-style: none;
+      padding-left: 11px;
+      padding-right: 11px;
+      margin-bottom: 22px;
+    }
+  }
+
+  .fleet-management-template-banner {
+    margin: -2.5rem 0 2.5rem;
+  }
+
+  .fleet-management-template-banner-image {
+    height: auto;
+    width: 100%;
+  }
+
+  nb-flip-card {
+    display: flex;
+    height: 100%;
+  }
+
+  ::ng-deep .flipcard-body {
+    height: 100%;
+    width: 100%;
+  }
+
+  ::ng-deep .front-container, .back-container {
+    height: 100%;
+  }
+
+  nb-card-front, nb-card-back {
+    display: flex;
+    height: 100%;
+  }
+
+  nb-card {
+    height: 100%;
+    border: 0;
+    background-color: #ffffff;
+    box-shadow: 0 7px 17px 0 rgba(218, 224, 235, 0.5);
+    margin-bottom: 0;
+  }
+
+  nb-card-body {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: stretch;
+    padding: 1rem;
+  }
+
+  .package-card {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-content: stretch;
+    align-items: stretch;
+    text-align: center;
+
+    &__header {
+      display: flex;
+      flex-direction: column;
+      flex: 0 0 auto;
+      margin-bottom: 0.5625rem;
+    }
+    &__demo-link {
+      align-self: flex-end;
+      color: #ff8588;
+      font-weight: bold;
+      font-size: 0.75rem;
+      line-height: 1rem;
+      text-align: center;
+      text-transform: uppercase;
+      padding: 0.25rem 1rem;
+      border: 1px solid #ff8588;
+      border-radius: 0.75rem;
+      &--secondary {
+        color: #ad7efa;
+        border-color: #ad7efa;
+      }
+    }
+    &__image {
+      margin: 1rem -1rem;
+      display: flex;
+      flex: 0 0 14.125rem;
+      background-repeat: no-repeat;
+      background-position: center center;
+      background-size: auto 100%;
+    }
+    &__price-wrapper {
+      flex: 0 0 2.5rem;
+      margin-top: auto;
+      margin-bottom: 0.5rem;
+    }
+    &__price {
+      font-weight: bold;
+      font-size: 1.75rem;
+      line-height: 2.5rem;
+      color: rgba(0, 0, 0, 0.87);
+      vertical-align: middle;
+      &--old {
+        font-size: 1.5rem;
+        color: #ff4d6b;
+        text-decoration: line-through;
+        vertical-align: middle;
+        margin-right: 1rem;
+      }
+    }
+    &__title {
+      font-weight: bold;
+      font-size: 1.125rem;
+      color: rgba(0, 0, 0, 0.87);
+      line-height: 1.5rem;
+    }
+    &__description {
+      margin-top: 0.5rem;
+      font-family: nb-theme(font-secondary), sans-serif;
+      font-weight: lighter;
+      font-size: 0.875rem;
+      color: rgba(0, 0, 0, 0.87);
+      margin-bottom: 1.675rem;
+    }
+    &__buy-link {
+      font-family: nb-theme(font-secondary), sans-serif;
+      font-size: 0.75rem;
+      color: #ffffff;
+      text-transform: uppercase;
+      background-color: nb-theme(color-active-fg);
+      box-shadow: nb-theme(shadow-btn);
+      border-radius: 3px;
+      margin-top: 0.5rem;
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+    }
+    &__type {
+      font-weight: bold;
+      font-size: 1rem;
+      line-height: 1.25rem;
+      color: rgba(0, 0, 0, 0.87);
+      text-align: center;
+      margin-top: 0.25rem;
+      margin-bottom: 0.5rem;
+    }
+  }
+
+  .go-to-button {
+    font-family: nb-theme(font-main), sans-serif;
+    color: nb-theme(color-active-fg);
+    padding: 0.25rem;
+    cursor: pointer;
+    text-decoration: none;
+  }
+
+  .request-code-section {
+    margin-bottom: 5rem;
+
+    a:not(:first-child) {
+      margin-left: 2rem;
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    .section-container {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    .bundle-scheme {
+      padding: 0 11px;
+    }
+
+    .features {
+      padding-left: 11px;
+      padding-right: 11px;
+
+      &__item {
+        flex-basis: 50%;
+        width: 50%;
+        max-width: 50%;
+      }
+    }
+
+    .packages {
+      padding-left: 11px;
+      padding-right: 11px;
+
+      &__item {
+        flex-basis: 50%;
+        width: 50%;
+        max-width: 50%;
+        margin-bottom: 1.625rem;
+      }
+    }
+  }
+
+  .features-table {
+    width: 100%;
+    margin-bottom: 5rem;
+
+    box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
+    background-color: #fafafa;
+
+    th, td {
+      padding: 0.5rem;
+      text-align: center;
+    }
+
+    th {
+      padding: 1rem;
+    }
+
+    td ul {
+      display: inline-block;
+      margin: auto;
+    }
+
+    .left {
+      text-align: left;
+      padding-left: 1rem;
+    }
+
+    tr:nth-child(even) {
+      background-color: #ffffff;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+
+    .packages__item {
+      flex-basis: 100%;
+      width: 100%;
+      max-width: 100%;
+    }
+
+    .features-table {
+      .header {
+        font-size: 0.875rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+
+    .features__item {
+      flex-basis: 100%;
+      width: 100%;
+      max-width: 100%;
+    }
+    .package-switcher__btn {
+      min-width: 8rem;
+    }
+  }
+}
--- a/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
+++ b/docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { AfterViewInit, Component, ElementRef, EventEmitter, Inject, Input, Output } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { Observable } from 'rxjs';
+import { delay, filter, take } from 'rxjs/operators';
+import { NB_WINDOW } from '@nebular/theme';
+
+import {
+  BUNDLE_LICENSE,
+  STORE_PRODUCTS_URL,
+  BundlesService,
+  Feature,
+  Product,
+  ProductVariant,
+} from '../../../@core/data/service/bundles.service';
+import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
+import { LicensePipe } from '../backend-bundles-section/license.pipe';
+
+@Component({
+  selector: 'ngx-backend-bundles-section',
+  templateUrl: 'backend-bundles-section.component.html',
+  styleUrls: ['./backend-bundles-section.component.scss'],
+})
+export class BackendBundlesSectionComponent implements AfterViewInit {
+
+  @Output() loaded = new EventEmitter();
+  @Input()
+  set material(value: boolean | undefined) {
+    if (value) {
+      this.productUrl = STORE_PRODUCTS_URL.material;
+
+      this.getProducts();
+    }
+  }
+
+  selectedLicenseType = BUNDLE_LICENSE.personal;
+  productUrl = STORE_PRODUCTS_URL.base;
+
+  licenses = Object.values(BUNDLE_LICENSE);
+
+  descriptions: Observable<Descriptions[]> = this.descriptionService.getBundleDescriptions();
+  products: Observable<Product[]>;
+  features: Observable<Feature[]> = this.bundlesService.getFeatures();
+
+  constructor(private descriptionService: DescriptionsService,
+              private bundlesService: BundlesService,
+              private activatedRoute: ActivatedRoute,
+              private el: ElementRef<HTMLElement>,
+              @Inject(NB_WINDOW) private window,
+              private licensePipe: LicensePipe) {
+    this.getProducts();
+  }
+
+  ngAfterViewInit() {
+    this.activatedRoute.fragment
+      .pipe(
+        filter(fragment => fragment === 'backend-bundles'),
+        delay(500),
+        take(1),
+      )
+      .subscribe((fragment: string) => {
+        this.window.scrollTo(0, this.el.nativeElement.offsetTop);
+      });
+  }
+
+  getProducts() {
+    this.products = this.bundlesService.getProducts(this.productUrl);
+  }
+
+  shouldShowOldPrice(variants: ProductVariant[], selectedLicenseType: string): boolean {
+    const product = this.licensePipe.transform(variants, selectedLicenseType);
+
+    return !!parseFloat(product.compare_at_price);
+  }
+}
--- a/docs/app/pages/home/backend-bundles-section/background-image.pipe.ts
+++ b/docs/app/pages/home/backend-bundles-section/background-image.pipe.ts
@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({ name: 'backgroundImage' })
+export class BackgroundImagePipe implements PipeTransform {
+  transform(url: string): any {
+    return {
+      'background-image': `url(\'${url}\')`,
+    };
+  }
+}
--- a/docs/app/pages/home/backend-bundles-section/license.pipe.ts
+++ b/docs/app/pages/home/backend-bundles-section/license.pipe.ts
@ -0,0 +1,11 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { ProductVariant } from '../../../@core/data/service/bundles.service';
+
+@Pipe({ name: 'license' })
+export class LicensePipe implements PipeTransform {
+  transform(variants: ProductVariant[], license: string): ProductVariant {
+    const result = variants
+      .find(variant => variant.title.toLowerCase().includes(license.toLowerCase()));
+    return result ? result : variants[0];
+  }
+}
--- a/docs/app/pages/home/contact-form/contact.component.html
+++ b/docs/app/pages/home/contact-form/contact.component.html
@ -0,0 +1,6 @@
+<div class="contact">
+  <h1>Need customization?</h1>
+  <p>Thinking of building something outstanding based on ngx-admin or just need some Angular/React experts?</p>
+  <a class="btn btn-demo" href="https://www.akveo.com/contact?utm_campaign=services%20-%20contacts%20-%20ngx_admin%20docs&utm_source=ngx-admin-material&utm_medium=referral&utm_content=landing_contact_section"
+     target="_blank">Contact us</a>
+</div>
--- a/docs/app/pages/home/contact-form/contact.component.scss
+++ b/docs/app/pages/home/contact-form/contact.component.scss
@ -0,0 +1,53 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $color-active: nb-theme(color-active-fg);
+
+  .contact {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  h1 {
+    font-family: 'Helvetica Neue Bold', sans-serif;
+    font-size: 2.5rem;
+    color: $color-active;
+    margin: 0;
+  }
+
+  p {
+    font-family: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'), sans-serif;
+    font-size: 1.5rem;
+    line-height: 1.5;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .btn {
+    font-family: nb-theme(font-main), sans-serif;
+    border-radius: 3px;
+    border: none;
+    background: #ffffff;
+    color: #000000;
+    box-shadow: nb-theme(shadow-default);
+    cursor: pointer;
+    text-transform: uppercase;
+
+    &.btn-demo {
+      margin-top: 0.375rem;
+      padding: 1.125rem 6.25rem;
+      color: #ffffff;
+      background-color: nb-theme(color-active-fg);
+      box-shadow: nb-theme(shadow-btn);
+    }
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-green-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-green-btn);
+    }
+  }
+}
--- a/docs/app/pages/home/contact-form/contact.component.ts
+++ b/docs/app/pages/home/contact-form/contact.component.ts
@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngx-contact-form',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.scss'],
+})
+export class ContactFormComponent {
+  constructor() {
+
+  }
+
+}
--- a/docs/app/pages/home/contact-section/contact-section.component.html
+++ b/docs/app/pages/home/contact-section/contact-section.component.html
@ -0,0 +1,50 @@
+<ngx-landing-section-title>
+  Stay tuned
+</ngx-landing-section-title>
+
+<p class="description">
+  Subscribe to get notified about new versions of ngx-admin and other cool projects that we are working on
+</p>
+
+<div class="sending-block">
+  <form id="email-form"
+        #contactForm
+        class="email-form"
+        action="https://akveo.us19.list-manage.com/subscribe/post?u=e8ac0871a095839ba14553eff&amp;id=cd45c56765"
+        method="post"
+        target="_blank"
+        novalidate>
+    <label for="email">Your Email</label>
+    <input id="email"
+           #emailInput
+           type="email"
+           name="EMAIL"
+           class="email"
+           [class.invalid]="invalid"
+           placeholder="johndoe@gmail.com"
+           required>
+    <input class="submit-input"
+           type="button"
+           value="Subscribe"
+           name="subscribe"
+           (click)="submitForm()"
+           [attr.disabled]="disabledControl">
+  </form>
+  <div class="agreement-block">
+    <nb-checkbox [(ngModel)]="isAgree" status="success">
+      <p class="agreement">
+          <span class="highlight">I agree</span> to get news on what’s going on around Akveo products and community.<br />
+          The administrator processes data following <a class="active" href="https://www.akveo.com/privacy-policy?utm_source=ngx_admin_landing&utm_medium=contact_section" target="_blank">the Privacy Policy</a>. I understand that I can opt out at any time
+      </p>
+    </nb-checkbox>
+  </div>
+
+  <div class="separator">
+    <div>or</div>
+  </div>
+
+  <div class="contact-us-container">
+    <a class="contact-us"
+       href="https://www.akveo.com/contact?utm_campaign=services%20-%20contacts%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landind_contact_section">Contact Us</a>
+  </div>
+</div>
--- a/docs/app/pages/home/contact-section/contact-section.component.scss
+++ b/docs/app/pages/home/contact-section/contact-section.component.scss
@ -0,0 +1,194 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  display: block;
+  padding-top: 5.625rem;
+  padding-bottom: 7.5rem;
+
+  .description {
+    font-family: nb-theme(font-secondary), sans-serif;
+    font-size: nb-theme(font-size-lg);
+    width: 40%;
+    margin: 1.375rem auto 0;
+    text-align: center;
+  }
+
+  .sending-block {
+    max-width: 33.5rem;
+    margin: 3rem auto 0;
+  }
+
+  .email-form {
+    label {
+      display: block;
+      margin-bottom: 0.75rem;
+    }
+
+    .email {
+      width: 75%;
+      font-size: nb-theme(font-size-sm);
+      padding: 1.125rem 0 1rem 1rem;
+      border: none;
+      box-shadow: nb-theme(shadow-default);
+      border-radius: 0.25rem 0 0 0.25rem;
+
+      &.invalid {
+        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
+      }
+
+      &::placeholder {
+        color: #434a59;
+        opacity: 0.24;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .submit-input {
+      width: 25%;
+      padding: 1rem 0;
+      border: none;
+      color: #ffffff;
+      text-transform: uppercase;
+      background-color: nb-theme(color-active-bg);
+      border-radius: 0 0.25rem 0.25rem 0;
+      box-shadow: nb-theme(shadow-btn);
+      cursor: pointer;
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+
+      &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+
+        &:hover {
+          box-shadow: nb-theme(shadow-btn);
+        }
+
+      }
+    }
+  }
+
+  .agreement-block {
+    display: flex;
+    margin-top: 1.25rem;
+
+    ::ng-deep nb-checkbox {
+      .customised-control {
+        padding: 0.125rem 0.125rem 0 0;
+      }
+
+      .customised-control-indicator {
+      }
+    }
+  }
+
+  .agreement {
+    font-family: nb-theme(font-secondary), sans-serif;
+    font-size: nb-theme(font-size-sm);
+
+    .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);
+    }
+  }
+
+  .separator {
+    margin-top: 2.875rem;
+    border-top: 0.125rem solid #dde1eb;
+    color: #8994a3;
+    text-transform: uppercase;
+    position: relative;
+    opacity: 0.5;
+
+    div {
+      $width: 1.375rem;
+      $block-or-padding: 1.375rem;
+
+      font-size: nb-theme(font-size-sm);
+      padding: 0 $block-or-padding;
+      position: absolute;
+      left: calc(50% - #{$block-or-padding} - #{$width} / 2);
+      top: -0.625rem;
+      background-color: #ffffff;
+    }
+  }
+
+  .contact-us-container {
+    text-align: center;
+  }
+
+  .contact-us {
+    display: inline-block;
+    font-family: nb-theme(font-main), sans-serif;
+    font-weight: nb-theme(font-weight-bold);
+    margin-top: 3.625rem;
+    color: nb-theme(color-active-bg);
+    cursor: pointer;
+    text-transform: uppercase;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-down(md) {
+    .description {
+      width: 80%;
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    padding: 2.125rem 1rem;
+
+    .description {
+      width: 100%;
+      font-size: nb-theme(font-size);
+    }
+
+    .sending-block {
+      margin-top: 2.375rem;
+    }
+
+    .email-form {
+      .email {
+        width: 100%;
+      }
+
+      .submit-input {
+        width: 100%;
+        border-radius: 0.25rem;
+        margin-top: 1.5rem;
+      }
+    }
+
+    .agreement-block {
+      margin-top: 1.25rem;
+    }
+
+    .separator {
+      margin-top: 2rem;
+    }
+
+    .contact-us {
+      margin-top: 2rem;
+    }
+  }
+}
--- a/docs/app/pages/home/contact-section/contact-section.component.ts
+++ b/docs/app/pages/home/contact-section/contact-section.component.ts
@ -0,0 +1,40 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, ElementRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ngx-landing-contact-section',
+  templateUrl: './contact-section.component.html',
+  styleUrls: ['./contact-section.component.scss'],
+})
+export class ContactSectionComponent {
+
+  @ViewChild('contactForm', { static: false }) contactForm: HTMLFormElement;
+  @ViewChild('emailInput', { static: false }) emailInput: ElementRef;
+
+  isAgree = false;
+  invalid = false;
+
+  constructor() {
+  }
+
+  submitForm() {
+    if (!this.emailInput.nativeElement.value) {
+      this.invalid = true;
+
+      return;
+    }
+
+    this.contactForm.nativeElement.submit();
+    this.invalid = false;
+    this.emailInput.nativeElement.value = '';
+  }
+
+  get disabledControl() {
+    return this.isAgree ? null : 'disabled';
+  }
+}
--- a/docs/app/pages/home/description-section/description-section.component.html
+++ b/docs/app/pages/home/description-section/description-section.component.html
@ -0,0 +1,11 @@
+<div class="descriptions" *ngFor="let item of descriptions">
+  <div class="icons-block">
+    <i [innerHTML]="item.icon | eva: { width: 48, height: 48, fill: '#00db92' }"></i>
+  </div>
+  <div class="title">
+    {{ item.title }}
+  </div>
+  <p class="description">
+    {{ item.description }}
+  </p>
+</div>
--- a/docs/app/pages/home/description-section/description-section.component.scss
+++ b/docs/app/pages/home/description-section/description-section.component.scss
@ -0,0 +1,108 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $content-width: nb-theme(content-width);
+  $left-right-offset: 8.125rem;
+
+  width: calc(#{$content-width} - #{$left-right-offset} * 2);
+  display: flex;
+  margin: 0 auto;
+  position: relative;
+  margin-bottom: 5rem;
+
+  .descriptions {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-left: 1.375rem;
+
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+
+  .icons-block {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 6.25rem;
+    height: 6.25rem;
+    border-radius: 50%;
+    background-color: #ffffff;
+    box-shadow: nb-theme(shadow-default);
+  }
+
+  .title {
+    color: #000000;
+    font-size: 1.5rem;
+    margin-top: 2.75rem;
+
+  }
+
+  .description {
+    width: 100%;
+    color: nb-theme(color-fg);
+    font-family: nb-theme(font-secondary), sans-serif;
+    margin-top: 1.25rem;
+    text-align: center;
+    line-height: 1.8;
+  }
+
+  @include media-breakpoint-down(lg) {
+    flex-wrap: wrap;
+    width: 100%;
+
+    .descriptions {
+      margin-left: 0;
+      padding: 0 1rem;
+      flex: auto;
+      width: 50%;
+      margin-bottom: 1rem;
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    flex-direction: column;
+    top: 0;
+    padding-top: 4.125rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+
+    .descriptions {
+      width: 100%;
+      flex: 1;
+      padding: 0;
+      margin: 1.5rem 0 0;
+
+      &:first-child {
+        margin: 0;
+      }
+    }
+
+    .title {
+      margin-top: 1.5rem;
+    }
+
+    .description {
+      margin-bottom: 0;
+    }
+
+    .icons-block {
+      width: 4rem;
+      height: 4rem;
+    }
+
+    ::ng-deep svg {
+      width: 1.875rem;
+      height: 1.875rem;
+    }
+  }
+}
--- a/docs/app/pages/home/description-section/description-section.component.ts
+++ b/docs/app/pages/home/description-section/description-section.component.ts
@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Input } from '@angular/core';
+import { Descriptions } from '../../../@core/data/service/descriptions.service';
+
+@Component({
+  selector: 'ngx-landing-description-section',
+  templateUrl: './description-section.component.html',
+  styleUrls: ['./description-section.component.scss'],
+})
+export class DescriptionSectionComponent {
+  @Input() descriptions: Descriptions[];
+}
--- a/docs/app/pages/home/free-banner-section/free-banner-section.component.html
+++ b/docs/app/pages/home/free-banner-section/free-banner-section.component.html
@ -0,0 +1,8 @@
+<div class="free-banner-container">
+  <a href="{{url}}"
+     target="_blank">
+    <img class="free-banner-img"
+         defaultImage="{{bannerImg}}"
+         lazyLoad="{{bannerImg}}"/>
+  </a>
+</div>
--- a/docs/app/pages/home/free-banner-section/free-banner-section.component.scss
+++ b/docs/app/pages/home/free-banner-section/free-banner-section.component.scss
@ -0,0 +1,25 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  display: block;
+  padding-top: 5.125rem;
+
+
+  .free-banner-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  img {
+    width: 100%;
+    max-width: 78.75rem;
+    border-radius: 1.5rem;
+  }
+}
--- a/docs/app/pages/home/free-banner-section/free-banner-section.component.ts
+++ b/docs/app/pages/home/free-banner-section/free-banner-section.component.ts
@ -0,0 +1,19 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'ngx-free-banner-section',
+  templateUrl: './free-banner-section.component.html',
+  styleUrls: ['./free-banner-section.component.scss'],
+})
+export class FreeBannerSectionComponent {
+
+ @Input() bannerImg: string;
+ @Input() url: string;
+
+}
--- a/docs/app/pages/home/landing-home-routing.module.ts
+++ b/docs/app/pages/home/landing-home-routing.module.ts
@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { LandingHomeComponent } from './landing-home.component';
+import { MaterialLandingComponent } from './material-landing/material-landing.component';
+
+
+export const routes: Routes = [
+  {
+    path: '',
+    component: LandingHomeComponent,
+  },
+  {
+    path: 'material',
+    component: MaterialLandingComponent,
+  },
+  // {
+  //   path: 'overview',
+  //   component: OverviewComponent,
+  // },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class LandingHomeRoutingModule {
+}
--- a/docs/app/pages/home/landing-home.component.html
+++ b/docs/app/pages/home/landing-home.component.html
@ -0,0 +1,15 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <ngx-landing-header>
+      <ngx-material-theme-link withPopover></ngx-material-theme-link>
+    </ngx-landing-header>
+  </nb-layout-header>
+
+  <nb-layout-column>
+    <ngx-landing-sections-container></ngx-landing-sections-container>
+  </nb-layout-column>
+
+  <nb-layout-footer class="footer" fixed>
+    <ngx-landing-footer></ngx-landing-footer>
+  </nb-layout-footer>
+</nb-layout>
--- a/docs/app/pages/home/landing-home.component.scss
+++ b/docs/app/pages/home/landing-home.component.scss
@ -0,0 +1,80 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $content-width: nb-theme(content-width);
+
+  .contact-us {
+    padding: 5rem 1rem;
+
+    h2 {
+      color: black;
+    }
+  }
+
+  nb-layout-header {
+    background-color: nb-theme(header-background-color);
+  }
+
+  ::ng-deep nb-layout .main-container {
+    padding-top: 3rem;
+
+    .scrollable {
+      padding-top: 0;
+    }
+  }
+
+  ::ng-deep nb-layout .layout-container .columns {
+    margin: 0 auto;
+  }
+
+  ::ng-deep nb-layout-header {
+    box-shadow: nb-theme(shadow-default);
+    background: nb-theme(header-bg);
+    ngx-landing-header {
+      max-width: calc(#{$content-width} - 8.125rem * 2);
+      margin: 0 auto;
+    }
+  }
+
+  ::ng-deep .layout .layout-container .content nb-layout-footer.footer {
+    width: 100%;
+    background-color: nb-theme(color-white);
+    box-shadow: nb-theme(shadow-default);
+
+    ngx-landing-footer {
+      max-width: $content-width;
+      justify-content: space-evenly;
+      margin: 0 auto;
+    }
+  }
+
+
+  @include media-breakpoint-down(xl) {
+    nb-layout-header ::ng-deep nav {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    nb-layout-header ::ng-deep nav {
+      padding-right: 0;
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    nb-layout-header ::ng-deep nav {
+      padding-left: 0;
+      padding-right: 0;
+      height: 3.75rem;
+    }
+  }
+}
+
--- a/docs/app/pages/home/landing-home.component.ts
+++ b/docs/app/pages/home/landing-home.component.ts
@ -0,0 +1,23 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import {MetadataService} from '../../../../src/app/@core/utils/metadata.service';
+
+@Component({
+  selector: 'ngx-landing-home',
+  templateUrl: './landing-home.component.html',
+  styleUrls: ['./landing-home.component.scss'],
+})
+export class LandingHomeComponent {
+  constructor(private themeService: NbThemeService, private metadataService: MetadataService) {
+    this.metadataService.updateDescription('Save more than $33,000 using ngx-admin for personal and commercial' +
+      ' use. The dashboard is based on Angular 9+ and Bootstrap 4+. Completely FREE and MIT licensed.');
+    this.metadataService.updateTitle('Ngx-admin - most popular admin dashboard on Angular 9+ and Nebular.');
+    this.themeService.changeTheme('ngx-landing');
+  }
+}
--- a/docs/app/pages/home/landing-home.module.ts
+++ b/docs/app/pages/home/landing-home.module.ts
@ -0,0 +1,78 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgModule } from '@angular/core';
+
+// modules
+import { NgxLandingThemeModule } from '../../@theme/theme.module';
+import { SwiperModule } from 'ngx-swiper-wrapper';
+// modules
+
+// components
+import { LandingHomeComponent } from './landing-home.component';
+import { MainInfoSectionComponent } from './main-info-section/main-info-section.component';
+import { DescriptionSectionComponent } from './description-section/description-section.component';
+import { ReasonSectionComponent } from './reason-section/reason-section.component';
+import { ThemeSectionComponent } from './theme-section/theme-section.component';
+import { ReviewsSectionComponent } from './reviews-section/reviews-section.component';
+import { SocialSectionComponent } from './social-section/social-section.component';
+import { ContactSectionComponent } from './contact-section/contact-section.component';
+import { OurProjectsSectionComponent } from './our-projects-section/our-projects-section.component';
+import { LandingHomeRoutingModule } from './landing-home-routing.module';
+import { NgxLandingSectionsContainerComponent } from './sections-container/ngx-landing-sections-container.component';
+import { BackendBundlesSectionComponent } from './backend-bundles-section/backend-bundles-section.component';
+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';
+import {ContactFormComponent} from './contact-form/contact.component';
+import {NbButtonModule} from '@nebular/theme';
+import { FreeBannerSectionComponent } from './free-banner-section/free-banner-section.component';
+// components
+
+const PIPES = [LicensePipe, BackgroundImagePipe];
+
+const COMPONENTS = [
+  LandingHomeComponent,
+  MaterialLandingComponent,
+  NgxLandingSectionsContainerComponent,
+  MainInfoSectionComponent,
+  DefaultAdminInfoComponent,
+  MaterialAdminInfoComponent,
+  DescriptionSectionComponent,
+  ReasonSectionComponent,
+  ThemeSectionComponent,
+  ReviewsSectionComponent,
+  OurProjectsSectionComponent,
+  SocialSectionComponent,
+  ContactSectionComponent,
+  BackendBundlesSectionComponent,
+  MaterialFeaturesSectionComponent,
+  ContactFormComponent,
+  FreeBannerSectionComponent,
+];
+
+@NgModule({
+  declarations: [
+    ...COMPONENTS,
+    ...PIPES,
+  ],
+  imports: [
+    NgxLandingThemeModule,
+    SwiperModule,
+    LandingHomeRoutingModule,
+    LandingSharedModule,
+    NbButtonModule,
+  ],
+  providers: [
+    ...PIPES,
+  ],
+})
+export class LandingHomeModule {
+}
--- a/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.html
+++ b/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 9+</strong> and
+    <a href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_main_info&utm_medium=referral&utm_source=ngx_admin" target="_blank">Nebular</a> with
+    <a href="https://eva.design/?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">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://store.akveo.com/collections/all?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin%20landing&utm_source=ngx_admin&utm_medium=referral&utm_content=integrate_hero_link" target="_blank">
+        Integrate ready-made solution: ngx-admin with backend.
+      </a>
+    </span>
+  </p>
+</div>
--- a/docs/app/pages/home/main-info-section/default-admin-main-info/default-info.component.ts
+++ b/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 {
+}
--- a/docs/app/pages/home/main-info-section/main-info-section.component.html
+++ b/docs/app/pages/home/main-info-section/main-info-section.component.html
@ -0,0 +1,50 @@
+<div class="main-img-container">
+  <a href="http://www.akveo.com/ngx-admin/?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section_image"
+     target="_blank"
+     class="hero-image-link">
+    <img *ngIf="breakpoint.width >= breakpoints.md"
+         class="main-img"
+         defaultImage="assets/img/default.png"
+         [lazyLoad]="imageUrl"/>
+  </a>
+</div>
+<div class="main-inf">
+  <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>
+  <div class="badges">
+    <iframe class="stars"
+            src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
+            frameborder="0"
+            width="170px"
+            scrolling="0">
+    </iframe>
+  </div>
+  <div class="buttons">
+    <div class="buttons-links">
+      <a class="btn btn-demo"
+         href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_section"
+         target="_blank">
+        Demo
+      </a>
+      <button (click)="openDownloadDialog()" class="btn btn-download">
+        Download
+      </button>
+    </div>
+
+    <a href="https://store.akveo.com/pages/ngx-admin-premium?utm_source=ngx_admin&utm_medium=referral&utm_campaign=ngx-admin_premium"
+       target="_blank"
+       class="btn btn-premium btn-green"
+    >
+      ngx-admin Premium
+    </a>
+  </div>
+</div>
--- a/docs/app/pages/home/main-info-section/main-info-section.component.scss
+++ b/docs/app/pages/home/main-info-section/main-info-section.component.scss
@ -0,0 +1,288 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $color-active: nb-theme(color-active-fg);
+
+  display: flex;
+  padding: 3.375rem 0;
+  max-width: 120rem;
+  margin: 0 auto;
+
+  .description {
+    font-size: 1.5rem;
+  }
+
+  .bundles {
+    display: block;
+    margin-top: 0.5rem;
+  }
+
+  .hero-image-link {
+    position: relative;
+    display: block;
+    padding-top: 84%;
+    overflow: hidden;
+
+    &::after {
+      content: ' ';
+      display: block;
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      background: linear-gradient(0, #fafafa, transparent);
+      height: 20%;
+    }
+
+    img {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: auto !important;
+    }
+  }
+
+  .main-img-container {
+    min-width: 60.625rem;
+    min-height: 47.875rem;
+
+    .main-img {
+      width: 100%;
+      height: 100%;
+      transition: opacity 1s;
+      opacity: 0;
+
+      &.ng-lazyloaded {
+        opacity: 1;
+      }
+    }
+  }
+
+  .main-inf {
+    width: 44%;
+    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;
+    color: $color-active;
+    margin: 0;
+  }
+
+  p {
+    font-family: nb-theme(font-secondary), sans-serif;
+    font-size: nb-theme(font-size-lg);
+    line-height: 1.5;
+    margin-top: 2.25rem;
+    margin-bottom: 0;
+
+    a {
+      text-decoration: none;
+      font-family: nb-theme(font-main), sans-serif;
+      color: nb-theme(color-active-fg);;
+    }
+  }
+
+  .badges {
+    display: flex;
+    margin-top: 2.75rem;
+    flex-direction: row;
+    align-items: center;
+
+    .stars {
+      width: 6.25rem;
+      height: 1.25rem;
+      margin-right: 1rem;
+    }
+  }
+
+  .buttons {
+    display: flex;
+    flex-direction: column;
+    margin-top: 1.875rem;
+  }
+
+  .buttons-links {
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      flex: 1;
+    }
+  }
+
+  .btn {
+    font-family: nb-theme(font-main), sans-serif;
+    border-radius: 3px;
+    border: none;
+    background: #ffffff;
+    color: #000000;
+    padding: 1.125rem 0;
+    box-shadow: nb-theme(shadow-default);
+    cursor: pointer;
+    text-transform: uppercase;
+
+    &.btn-green {
+      color: #ffffff;
+      background-color: nb-theme(color-active-fg);
+      box-shadow: nb-theme(shadow-btn);
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+    }
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-btn);
+    }
+
+    &.btn-download {
+      margin-left: 1em;
+    }
+  }
+
+  .btn-premium {
+    margin-top: 1rem;
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(xxl) {
+    .main-img-container {
+      min-width: 50.625rem;
+      min-height: 47.875rem;
+    }
+
+    .main-inf {
+      width: 100%;
+      margin: 4.625rem 5.875rem 0 2.625rem;
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    .main-img-container {
+      min-width: 39rem;
+      min-height: 36.25rem;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    padding-bottom: 6.25rem;
+
+    .main-img-container {
+      min-height: 28.75rem;
+      min-width: 31rem;
+    }
+
+    .main-inf {
+      margin-right: 0.75rem;
+      margin-left: 1rem;
+    }
+  }
+
+  @include media-breakpoint-down(xxl) {
+    .description {
+      font-size: 1.2rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .main-img-container {
+      min-height: 21.875rem;
+      min-width: 23rem;
+      width: 75rem;
+    }
+
+    .main-inf {
+      margin-top: 1.25rem;
+    }
+
+    h1 {
+      font-size: 3rem;
+    }
+
+    p {
+      font-size: 1rem;
+      margin-top: 1.25rem;
+    }
+
+    .btn {
+      font-size: 0.7rem;
+      padding-bottom: 1rem;
+      padding-top: 1rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 1.75rem;
+    flex-direction: column;
+
+    .main-inf {
+      margin: 0;
+    }
+
+    .mobile-main-img-container {
+      width: 100%;
+      height: auto;
+
+      img {
+        width: 100%;
+        height: 100%;
+        transition: opacity 1s;
+        opacity: 0;
+
+        &.ng-lazyloaded {
+          opacity: 1;
+        }
+      }
+    }
+
+    h1 {
+      font-size: 3rem;
+      text-align: center;
+    }
+
+    p {
+      font-size: nb-theme(font-size);
+      text-align: justify;
+      margin: 1.75rem 1rem 0;
+    }
+
+    .main-img-container {
+      margin: 1.375rem 0 0;
+      min-width: 0;
+      min-height: 0;
+      width: 0;
+    }
+
+    .badges {
+      margin-top: 2.375rem;
+      justify-content: center;
+    }
+
+    .buttons {
+      padding-right: 1rem;
+      padding-left: 1rem;
+    }
+  }
+}
--- a/docs/app/pages/home/main-info-section/main-info-section.component.ts
+++ b/docs/app/pages/home/main-info-section/main-info-section.component.ts
@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnDestroy, Input } from '@angular/core';
+import { NbDialogService, NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+
+import { DownloadFormComponent } from '../../../shared/components/download-form/download-form.component';
+import { PremiumFormComponent } from '../../../shared/components/premium-form/premium-form.component';
+
+@Component({
+  selector: 'ngx-landing-main-info',
+  templateUrl: './main-info-section.component.html',
+  styleUrls: ['./main-info-section.component.scss'],
+})
+export class MainInfoSectionComponent implements OnDestroy {
+  constructor(themeService: NbThemeService,
+              breakpointService: NbMediaBreakpointsService,
+              private dialogService: NbDialogService) {
+    this.breakpoints = breakpointService.getBreakpointsMap();
+    themeService.onMediaQueryChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(([oldValue, newValue]) => {
+        this.breakpoint = newValue;
+      });
+  }
+
+  private alive = true;
+  public forMaterialTheme: boolean = false;
+  public readonly breakpoints: any;
+  public breakpoint: NbMediaBreakpoint;
+
+  @Input() public set material(value: any) {
+    this.forMaterialTheme = (value);
+  }
+
+  public get imageUrl(): string {
+    return this.forMaterialTheme !== false
+      ? 'assets/img/ngx-admin-material.jpg'
+      : 'assets/img/ngx-admin.png';
+  }
+
+  public ngOnDestroy() {
+    this.alive = false;
+  }
+
+  openDownloadDialog() {
+    this.dialogService.open(DownloadFormComponent);
+  }
+
+  openDownloadPremiumDialog() {
+    this.dialogService.open(PremiumFormComponent);
+  }
+}
--- a/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.html
+++ b/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://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20demo&utm_source=ngx_admin_material&utm_medium=referral&utm_content=landing_page"
+                                                                                   target="_blank">ngx-admin</a>.
+    Included: <strong>Angular 9+</strong>,
+    <a href="https://akveo.github.io/nebular?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info" target="_blank">Nebular</a> and
+    <a href="https://eva.design?utm_campaign=eva_design%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_main_info">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://store.akveo.com/?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin_material&utm_medium=referral&utm_content=landing" target="_blank">
+        Check out our store.
+      </a>
+    </span>
+  </p>
+</div>
--- a/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts
+++ b/docs/app/pages/home/main-info-section/material-admin-main-info/material-info.component.ts
@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { MetadataService } from '../../../../../../src/app/@core/utils/metadata.service';
+
+@Component({
+  selector: 'ngx-material-admin-info',
+  templateUrl: './material-info.component.html',
+  styleUrls: ['./../main-info-section.component.scss'],
+})
+export class MaterialAdminInfoComponent implements OnInit {
+
+  constructor(private metaDataService: MetadataService) {}
+
+  ngOnInit(): void {
+    this.metaDataService.updateTitle('Ngx-admin material dashboard template based on Angular 9+ and Bootstrap 4+');
+    this.metaDataService.updateDescription('Ngx-admin material works perfectly with Angular Material and Nebular.' +
+      ' Over 40+ Angular Components and 60+ Usage Examples.Take the best from both!');
+    this.metaDataService.updateKeywords('Ngx-admin material theme, ngx-admin material dashboard, ngx-admin material');
+  }
+}
--- a/docs/app/pages/home/material-features/material-features.component.html
+++ b/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>
+
--- a/docs/app/pages/home/material-features/material-features.component.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/docs/app/pages/home/material-features/material-features.component.ts
+++ b/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() {
+
+  }
+
+}
--- a/docs/app/pages/home/material-landing/material-landing.component.html
+++ b/docs/app/pages/home/material-landing/material-landing.component.html
@ -0,0 +1,24 @@
+<nb-layout>
+  <nb-layout-header fixed>
+    <ngx-landing-header>
+      <ngx-material-theme-link></ngx-material-theme-link>
+    </ngx-landing-header>
+  </nb-layout-header>
+
+  <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>
+
+    <ngx-free-banner-section bannerImg="assets/img/bakery-banner.png"
+                             url="https://uibakery.io/?utm_source=github&utm_medium=clicks&utm_campaign=banner">
+    </ngx-free-banner-section>
+
+    <ngx-backend-bundles-section [material]="true"></ngx-backend-bundles-section>
+    <ngx-contact-form></ngx-contact-form>
+  </nb-layout-column>
+
+  <nb-layout-footer class="footer" fixed>
+    <ngx-landing-footer></ngx-landing-footer>
+  </nb-layout-footer>
+</nb-layout>
--- a/docs/app/pages/home/material-landing/material-landing.component.scss
+++ b/docs/app/pages/home/material-landing/material-landing.component.scss
@ -0,0 +1,34 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  $content-width: nb-theme(content-width);
+
+  ::ng-deep {
+    .version {
+      color: nb-theme(color-basic-500) !important;
+    }
+
+    ngx-landing-footer{
+      .h6, .copy {
+        color: #ffffff !important;
+      }
+    }
+  }
+
+  .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%;
+    }
+
+  }
+}
--- a/docs/app/pages/home/material-landing/material-landing.component.ts
+++ b/docs/app/pages/home/material-landing/material-landing.component.ts
@ -0,0 +1,20 @@
+import { Component } from '@angular/core';
+import { NbThemeService } from '@nebular/theme';
+import {MetadataService} from '../../../../../src/app/@core/utils/metadata.service';
+
+@Component({
+  selector: 'ngx-material-landing',
+  templateUrl: './material-landing.component.html',
+  styleUrls: [
+    './material-landing.component.scss',
+    '../landing-home.component.scss',
+  ],
+})
+export class MaterialLandingComponent {
+  constructor(private themeService: NbThemeService, private metadataService: MetadataService) {
+    this.metadataService.updateDescription('Ngx-admin material works perfectly with Angular Material and Nebular.' +
+      ' Over 40+ Angular Components and 60+ Usage Examples.Take the best from both!');
+    this.metadataService.updateTitle('Ngx-admin material dashboard template based on Angular 9+ and Bootstrap 4+');
+    this.themeService.changeTheme('ngx-landing-material');
+  }
+}
--- a/docs/app/pages/home/our-projects-section/our-projects-section.component.html
+++ b/docs/app/pages/home/our-projects-section/our-projects-section.component.html
@ -0,0 +1,36 @@
+<ngx-landing-section-title>
+  More from Akveo
+</ngx-landing-section-title>
+
+<ul class="projects">
+  <li class="project">
+    <div class="project-img">
+      <img class="lazy-load-image"
+           defaultImage="assets/img/default.png"
+           lazyLoad="assets/img/nebular.png"
+           alt="Nebular" />
+    </div>
+    <div>
+      <div class="title">Nebular</div>
+      <div class="description">
+        Nebular is a great toolkit if you build Rich UI web applications based on Angular. Complete with a set of native Angular components, themeable components, authentication and security layers that are easily configurable to your API. Nebular offers a world of possibilities
+      </div>
+      <a class="btn" href="https://akveo.github.io/nebular/?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_content=landing_our_projects_link&utm_medium=referral&utm_source=ngx_admin" target="_blank">Learn more</a>
+    </div>
+  </li>
+  <li class="project">
+    <div class="project-img">
+      <img class="lazy-load-image"
+           defaultImage="assets/img/default.png"
+           lazyLoad="assets/img/eva-icons.png"
+           alt="Eva Icons" />
+    </div>
+    <div>
+      <div class="title">Eva Icons</div>
+      <div class="description">
+        Eva Icons is a pack of more than 480 beautifully crafted Open Source icons. Download for desktop and use them in your creations for Web, iOS, and Android. The icons are available in several formats: PNG, SVG, font, Sketch
+      </div>
+      <a class="btn" href="https://akveo.github.io/eva-icons/#/" target="_blank">Learn more</a>
+    </div>
+  </li>
+</ul>
--- a/docs/app/pages/home/our-projects-section/our-projects-section.component.scss
+++ b/docs/app/pages/home/our-projects-section/our-projects-section.component.scss
@ -0,0 +1,150 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $our-projects-section-offset: 7.125rem;
+
+  display: block;
+  padding-top: 5.125rem;
+
+  .project-img {
+    min-width: 39.75rem;
+    min-height: 20.375rem;
+    max-height: 20.375rem;
+
+    .lazy-load-image {
+      width: 100%;
+      visibility: hidden;
+      transition: opacity 1s;
+      opacity: 0;
+
+      &.ng-lazyloaded {
+        visibility: visible;
+        opacity: 1;
+      }
+      &.ng-failed-lazyloaded {
+        height: 100%;
+      }
+    }
+  }
+
+  ul {
+    width: calc(100% - #{$our-projects-section-offset} * 2);
+    margin: 0 auto;
+    padding: 4rem 0 3.5rem;
+  }
+
+  li {
+    list-style: none;
+    display: flex;
+    margin-top: 5.5rem;
+
+    &:first-child {
+      margin-top: 0;
+    }
+
+    & > div {
+      margin-left: 3.75rem;
+      margin-top: 0.125rem;
+    }
+
+    .project-img {
+      margin: 0;
+    }
+  }
+
+  .title {
+    font-family: 'Helvetica Neue Bold', sans-serif;
+    color: #000000;
+    font-size: 3rem;
+  }
+  
+  .description {
+    font-family: nb-theme(font-secondary), sans-serif;
+    font-size: nb-theme(font-size-lg);
+    margin-top: 1.125rem;
+    line-height: 1.5;
+  }
+  
+  .btn {
+    font-family: nb-theme(font-main), sans-serif;
+    background-color: nb-theme(color-active-bg);
+    border-radius: 3px;
+    box-shadow: nb-theme(shadow-btn);
+    color: #ffffff;
+    cursor: pointer;
+    margin-top: 2.625rem;
+    padding: 1rem 0.875rem;
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-green-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-green-btn);
+    }
+  }
+
+  @include media-breakpoint-down(xl) {
+    ul {
+      width: 100%;
+      margin: 0;
+      padding: 1.375rem 1rem;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    .project-img {
+      min-width: 33rem;
+      min-height: 16.25rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    .project-img {
+      min-width: 25rem;
+      min-height: auto;
+      max-height: 17rem;
+    }
+  }
+
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 2.5rem;
+
+    .project-img {
+      max-height: 100%;
+      min-width: 100%;
+    }
+
+    li {
+      margin-top: 3.625rem;
+      flex-direction: column;
+
+      & > div {
+        margin-top: 1rem;
+        margin-left: 0;
+      }
+    }
+
+    .title {
+      font-size: 1.5rem;
+    }
+
+    .description {
+      font-size: nb-theme(font-size);
+    }
+
+    .btn {
+      width: 100%;
+      padding: 1rem 0.875rem;
+      margin-top: 2.375rem;
+    }
+  }
+}
--- a/docs/app/pages/home/our-projects-section/our-projects-section.component.ts
+++ b/docs/app/pages/home/our-projects-section/our-projects-section.component.ts
@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-landing-our-projects-section',
+  templateUrl: './our-projects-section.component.html',
+  styleUrls: ['./our-projects-section.component.scss'],
+})
+export class OurProjectsSectionComponent {
+
+}
--- a/docs/app/pages/home/reason-section/reason-section.component.html
+++ b/docs/app/pages/home/reason-section/reason-section.component.html
@ -0,0 +1,33 @@
+<ngx-landing-section-title>
+  Why ngx-admin?
+</ngx-landing-section-title>
+
+<ul class="reasons">
+  <li class="reason">
+    <div class="number">1</div>
+    <div class="description">
+      Save more than $33,000 using ngx-admin.
+      According to our research ngx-admin optimizes 480 hours of development time. Taking the average hourly rate of a <a class="active" href="https://www.codementor.io/freelance-rates/front-end-developers" target="_blank">front-end engineer</a> in the US – $70
+    </div>
+  </li>
+  <li class="reason">
+    <div class="number">2</div>
+    <div class="description">
+      Create a custom experience by working with one of 3 themes or edit just a few custom variables. Need help? Check <a class="active" href="https://akveo.github.io/ngx-admin/docs/guides/theme-system?utm_campaign=nebular%20-%20home%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=landing_guides_theme_system_link">out our article</a>, where we describe how you can create a different look in just 2 minutes
+    </div>
+  </li>
+  <li class="reason">
+    <div class="number">3</div>
+    <div class="description">
+      It’s completely FREE and MIT licensed.
+      You don’t have to worry about the legal stuff, ngx-admin is free for personal and commercial purposes, so you can use it to build any product
+    </div>
+  </li>
+  <li class="reason">
+    <div class="number">4</div>
+    <div class="description">
+      <span class="highlight">Do you need more?</span> We can customize! <br/>
+      Visit our <a class="active" href="https://www.akveo.com?utm_campaign=services%20-%20homepage%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_reason_section" target="_blank">homepage</a> or simply leave us a note at <a class="active" href="mailto:contact@akveo.com">contact@akveo.com</a>. We’re available for hire and can create custom solutions just for you
+    </div>
+  </li>
+</ul>
--- a/docs/app/pages/home/reason-section/reason-section.component.scss
+++ b/docs/app/pages/home/reason-section/reason-section.component.scss
@ -0,0 +1,111 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $reasons-section-offset: 10.625rem;
+
+  display: block;
+  padding: 5.25rem 0;
+
+  .reasons {
+    width: calc(100% - #{$reasons-section-offset} * 2);
+    margin: 0 auto;
+    margin-top: -1.375rem;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    padding: 0;
+
+    .reason {
+      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) {
+    .reasons {
+      width: 100%;
+      padding: 0 1rem;
+      margin: 0;
+
+      .number {
+        font-size: 6rem;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding-top: 2.625rem;
+    padding-bottom: 0;
+
+    .reasons {
+      flex-direction: column;
+
+      .reason {
+        width: 100%;
+        margin: 1.625rem 0 0.375rem;
+        padding: 0;
+
+        &:nth-child(2n) {
+          padding: 0;
+
+        }
+      }
+
+      .number {
+        font-size: 5rem;
+        line-height: 1.3;
+      }
+    }
+  }
+}
--- a/docs/app/pages/home/reason-section/reason-section.component.ts
+++ b/docs/app/pages/home/reason-section/reason-section.component.ts
@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-landing-reason-section',
+  templateUrl: './reason-section.component.html',
+  styleUrls: ['./reason-section.component.scss'],
+})
+export class ReasonSectionComponent {
+
+}
--- a/docs/app/pages/home/reviews-section/reviews-section.component.html
+++ b/docs/app/pages/home/reviews-section/reviews-section.component.html
@ -0,0 +1,46 @@
+<ngx-landing-section-title>
+  What ngx-lovers are saying?
+</ngx-landing-section-title>
+
+<div class="carousel-container">
+  <div  class="swiper-container reviews" [swiper]="swiperConfig">
+    <div class="swiper-wrapper">
+      <div *ngFor="let review of reviews" class="review-card swiper-slide">
+        <div class="header-card">
+          <div class="social-icon">
+            <i [innerHTML]="review.socialIcon | eva: { width: 26, height: 26, fill: '#3b5998' }"></i>
+          </div>
+          <div class="avatar">
+            <img alt="Reviewer Avatar"
+                 data-src="{{ review.avatar }}"
+                 class="swiper-lazy"/>
+          </div>
+          <div class="personal-info">
+            <div class="name">{{ review.firstName }}</div>
+            <div class="surname">{{ review.lastName }}</div>
+          </div>
+        </div>
+        <div class="body-card">
+          {{ review.review }}
+        </div>
+        <div class="footer-card">
+          <a class="go-to-button"
+             href="{{ review.link }}"
+             target="_blank">
+              Go to comment
+            <i [innerHTML]="'arrow-ios-forward' | eva: { width: 24, height: 24, fill: '#e5e5e5' }"></i>
+          </a>
+        </div>
+      </div>
+    </div>
+
+    <div class="swiper-pagination"></div>
+
+    <div class="swiper-button-prev">
+      <i [innerHTML]="'arrow-ios-back' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
+    </div>
+    <div class="swiper-button-next">
+      <i [innerHTML]="'arrow-ios-forward' | eva: { width: 36, height: 36, fill: '#00db92' }"></i>
+    </div>
+  </div>
+</div>
--- a/docs/app/pages/home/reviews-section/reviews-section.component.scss
+++ b/docs/app/pages/home/reviews-section/reviews-section.component.scss
@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '../../../@theme/styles/swiper_ngx-admin';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  display: block;
+  padding-top: 6rem;
+  padding-bottom: 7.875rem;
+
+  .carousel-container {
+    position: relative;
+  }
+
+  .reviews {
+    max-width: 55.125rem;
+    display: flex;
+    margin: 0 auto;
+    margin-top: 4.625rem;
+  }
+
+  .review-card {
+    background-color: #ffffff;
+    box-shadow: nb-theme(shadow-default);
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .header-card {
+      display: flex;
+      position: relative;
+      padding-top: 1rem;
+      padding-left: 1rem;
+      padding-right: 3.125rem;
+      overflow: hidden;
+    }
+
+    .social-icon {
+      position: absolute;
+      right: 1.375rem;
+      top: 1.875rem;
+    }
+
+    .avatar {
+      max-width: 3.375rem;
+      height: 3.375rem;
+      border-radius: 50%;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .personal-info {
+      font-family: nb-theme(font-main), sans-serif;
+      margin-left: 1.25rem;
+      margin-top: 0.5rem;
+      color: #000000;
+      word-break: break-all;
+    }
+
+    .body-card {
+      font-family: nb-theme(font-secondary), sans-serif;
+      color: #000000;
+      padding: 0 1rem;
+      margin-top: 1.75rem;
+      line-height: 1.8;
+      height: 10.375rem;
+    }
+
+    .footer-card {
+      border-top: 1px solid #eaeaea;
+    }
+  }
+
+  .go-to-button {
+    display: block;
+    font-family: nb-theme(font-main), sans-serif;
+    color: nb-theme(color-active-fg);
+    padding: 1rem;
+    cursor: pointer;
+    position: relative;
+    text-decoration: none;
+
+    i {
+      position: absolute;
+      right: 1.375rem;
+      top: 1rem;
+    }
+  }
+
+  .swiper-container {
+    position: static;
+  }
+
+  @include swiper-navigation-arrows((
+    top: 9rem,
+    position: 8.125rem,
+    positionXl: 5%
+  ));
+
+  .swiper-pagination {
+    top: 110%;
+
+    ::ng-deep span {
+      height: 0.75rem;
+      width: 0.75rem;
+      opacity: 0.08;
+      background-color: #000000;
+
+      &.swiper-pagination-bullet-active {
+        opacity: 1;
+        background: nb-theme(color-active-bg);
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    padding-top: 4rem;
+    padding-bottom: 4.375rem;
+
+    .reviews {
+      margin-top: 2.25rem;
+    }
+
+    .swiper-pagination {
+      top: 108%;
+    }
+
+    .swiper-slide {
+      width: 80%;
+    }
+  }
+}
--- a/docs/app/pages/home/reviews-section/reviews-section.component.ts
+++ b/docs/app/pages/home/reviews-section/reviews-section.component.ts
@ -0,0 +1,99 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnDestroy } from '@angular/core';
+import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
+import { NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
+import { takeWhile } from 'rxjs/operators';
+import { Review, ReviewsService } from '../../../@core/data/service/reviews.service';
+
+@Component({
+  selector: 'ngx-landing-reviews-section',
+  templateUrl: './reviews-section.component.html',
+  styleUrls: ['./reviews-section.component.scss'],
+})
+export class ReviewsSectionComponent implements OnDestroy {
+
+  private alive = true;
+
+  private desktopSwiperConfig: SwiperConfigInterface = {
+    slidesPerView: 3,
+    keyboard: true,
+    navigation: true,
+  };
+
+  private tabletSwiperConfig: SwiperConfigInterface = {
+    ...this.desktopSwiperConfig,
+    slidesPerView: 2,
+  };
+
+  private mobileSwiperConfig: SwiperConfigInterface = {
+    slidesPerView: 'auto',
+    centeredSlides: true,
+    keyboard: false,
+    navigation: false,
+  };
+
+  swiperConfig: SwiperConfigInterface = {
+    direction: 'horizontal',
+    spaceBetween: 24,
+    mousewheel: false,
+    lazy: true,
+    loop: true,
+    autoplay: true,
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+      hideOnClick: false,
+    },
+  };
+
+  breakpoints: any;
+  reviews: Review[];
+
+  constructor(private themeService: NbThemeService,
+              private breakpointService: NbMediaBreakpointsService,
+              private reviewsService: ReviewsService) {
+    this.breakpoints = this.breakpointService.getBreakpointsMap();
+    this.themeService.onMediaQueryChange()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe(([oldValue, newValue]) => {
+        this.changeSwiperConfig(newValue.width);
+      });
+
+    this.reviewsService.getReviews()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((reviews) => this.reviews = reviews);
+  }
+
+  changeSwiperConfig(currentWidth: number): void {
+    if (this.isMobile(currentWidth)) {
+      this.swiperConfig = {
+        ...this.swiperConfig,
+        ...this.mobileSwiperConfig,
+      };
+    } else {
+      const desktopOrTabletConfig = this.isTablet(currentWidth) ? this.tabletSwiperConfig : this.desktopSwiperConfig;
+
+      this.swiperConfig = {
+        ...this.swiperConfig,
+        ...desktopOrTabletConfig,
+      };
+    }
+  }
+
+  private isMobile(currentWidth: number): boolean {
+    return currentWidth <= this.breakpoints.is;
+  }
+
+  private isTablet(currentWidth: number): boolean {
+    return currentWidth <= this.breakpoints.sm;
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}
--- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
+++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.html
@ -0,0 +1,27 @@
+<div class="gray-section">
+  <ngx-landing-main-info></ngx-landing-main-info>
+</div>
+
+<ngx-backend-bundles-section id="backend-bundles"></ngx-backend-bundles-section>
+
+<ngx-landing-description-section *ngIf="descriptions | async" [descriptions]="descriptions | async" ></ngx-landing-description-section>
+
+<ngx-landing-theme-section></ngx-landing-theme-section>
+
+<div class="gray-section">
+  <ngx-landing-reason-section></ngx-landing-reason-section>
+
+  <ngx-landing-reviews-section></ngx-landing-reviews-section>
+</div>
+
+<ngx-free-banner-section bannerImg="assets/img/bakery-banner.png"
+                         url="https://uibakery.io/?utm_source=github&utm_medium=clicks&utm_campaign=banner">
+</ngx-free-banner-section>
+
+<ngx-landing-our-projects-section></ngx-landing-our-projects-section>
+
+<div class="gray-section">
+  <ngx-landing-social-section></ngx-landing-social-section>
+</div>
+
+<ngx-landing-contact-section></ngx-landing-contact-section>
--- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.scss
+++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.scss
@ -0,0 +1,47 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $content-width: nb-theme(content-width);
+
+  .gray-section {
+    background-color: nb-theme(gray-section-bg);
+  }
+
+  ngx-landing-description-section,
+  ngx-landing-reason-section,
+  ngx-landing-reviews-section,
+  ngx-landing-our-projects-section,
+  ngx-landing-social-section,
+  ngx-landing-contact-section,
+  ngx-backend-bundles-section,
+  ngx-free-banner-section {
+    max-width: $content-width;
+    margin: 0 auto;
+  }
+
+  ngx-landing-description-section {
+    margin-top: -3rem;
+  }
+
+
+  @include media-breakpoint-down(is) {
+    ngx-landing-main-info,
+    ngx-landing-description-section,
+    ngx-landing-theme-section,
+    ngx-landing-reason-section,
+    ngx-landing-reviews-section,
+    ngx-landing-our-projects-section,
+    ngx-landing-social-section,
+    ngx-landing-contact-section {
+      max-width: 100%;
+    }
+
+  }
+}
--- a/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.ts
+++ b/docs/app/pages/home/sections-container/ngx-landing-sections-container.component.ts
@ -0,0 +1,21 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+import { Observable } from 'rxjs';
+import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
+
+@Component({
+  selector: 'ngx-landing-sections-container',
+  templateUrl: './ngx-landing-sections-container.component.html',
+  styleUrls: ['./ngx-landing-sections-container.component.scss'],
+})
+export class NgxLandingSectionsContainerComponent {
+
+  descriptions: Observable<Descriptions[]> = this.descriptionsService.getDescriptions();
+
+  constructor(private descriptionsService: DescriptionsService) { }
+}
--- a/docs/app/pages/home/social-section/social-section.component.html
+++ b/docs/app/pages/home/social-section/social-section.component.html
@ -0,0 +1,63 @@
+<ngx-landing-section-title>
+  Help us make our products better for you
+</ngx-landing-section-title>
+
+<p>
+  You can support us by creating pull requests, submitting bugs, and suggesting awesome new features you’d like to see
+</p>
+
+<a class="social-button github"
+   href="https://github.com/akveo/ngx-admin"
+   target="_blank">
+  <i [innerHTML]="'github' | eva: { width: 42, height: 42 }"></i>
+  <div class="info">
+    <div class="appeal">Star our repo</div>
+    <div class="title">GitHub</div>
+  </div>
+</a>
+
+<div class="sub-title">
+  Here's what else you can do:
+</div>
+
+<div class="buttons-group">
+  <a class="social-button facebook"
+     href="https://www.facebook.com/akveo"
+     target="_blank">
+    <i [innerHTML]="'facebook' | eva: { width: 44, height: 44, fill: '#3b5998' }"></i>
+    <div class="info">
+      <div class="appeal">
+        Like us
+      </div>
+      <div class="title">
+        Facebook
+      </div>
+    </div>
+  </a>
+  <a class="social-button linkedin"
+     href="https://www.linkedin.com/company/akveo/"
+     target="_blank">
+    <i [innerHTML]="'linkedin' | eva: { width: 42, height: 42, fill: '#0077b5' }"></i>
+    <div class="info">
+      <div class="appeal">
+        Join us
+      </div>
+      <div class="title">
+        Linkedin
+      </div>
+    </div>
+  </a>
+  <a class="social-button twitter"
+     href="https://twitter.com/akveo_inc"
+     target="_blank">
+    <i [innerHTML]="'twitter' | eva: { width: 42, height: 42, fill: '#08a0e9' }"></i>
+    <div class="info">
+      <div class="appeal">
+        Follow us
+      </div>
+      <div class="title">
+        Twitter
+      </div>
+    </div>
+  </a>
+</div>
--- a/docs/app/pages/home/social-section/social-section.component.scss
+++ b/docs/app/pages/home/social-section/social-section.component.scss
@ -0,0 +1,182 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  display: block;
+  text-align: center;
+  padding-top: 4.75rem;
+  padding-bottom: 5.125rem;
+
+  .social-button {
+    width: 19rem;
+    display: inline-flex;
+    align-items: center;
+    box-shadow: nb-theme(shadow-default);
+    background-color: nb-theme(color-white);
+    padding-left: 2rem;
+    border-radius: 0.25rem;
+    color: #000000;
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-btn);
+    }
+
+    > i {
+      width: 2.75rem;
+      text-align: center;
+    }
+
+    .info {
+      margin-left: 1.625rem;
+      text-align: left;
+    }
+
+    .appeal {
+      font-family: nb-theme(font-secondary), sans-serif;
+    }
+
+    .title {
+      font-size: 1.5rem;
+    }
+  }
+
+  p {
+    font-family: nb-theme(font-secondary), sans-serif;
+    font-size: nb-theme(font-size-lg);
+    width: 36%;
+    margin: 1.25rem auto 0;
+    line-height: 1.5;
+  }
+
+  .github {
+    margin-top: 2rem;
+    padding: 1.5rem 5rem 1.5rem 1.625rem;
+  }
+
+  .sub-title {
+    color: #000000;
+    margin-top: 2.5rem;
+    font-size: 1.5rem;
+  }
+
+  .buttons-group {
+    display: flex;
+    justify-content: center;
+    margin-top: 2.5rem;
+
+    .social-button {
+      margin-left: 1.5rem;
+
+      &:first-child {
+        margin-left: 0;
+      }
+    }
+  }
+
+  .facebook {
+    padding: 1.5rem 5rem 1.25rem 1.625rem;
+
+    .info {
+      margin-left: 1.625rem;
+    }
+
+    .title {
+      margin-top: 0.25rem;
+    }
+  }
+
+  .linkedin {
+    padding: 1.5rem 5rem 1.25rem 1.625rem;
+
+    .info {
+      margin-left: 1.625rem;
+    }
+  }
+
+  .twitter {
+    padding: 1.5rem 5rem 1.25rem 1.625rem;
+
+    .info {
+      margin-left: 1.625rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    p {
+      width: 80%;
+    }
+
+    //.social-button {
+    //  width: auto;
+    //}
+
+    .github {
+      width: auto;
+    }
+
+    .facebook {
+      width: 13rem;
+      padding-right: 1.5rem;
+    }
+
+    .linkedin {
+      width: 13rem;
+      padding-right: 1.5rem;
+    }
+
+    .twitter {
+      width: 13rem;
+      padding-right: 1.5rem;
+    }
+  }
+
+  @include media-breakpoint-down(sm) {
+    padding: 4.25rem 1rem 2.125rem;
+
+    p {
+      width: 100%;
+      font-size: nb-theme(font-size);
+    }
+
+    .social-button {
+      margin-top: 2rem;
+      margin-left: 0;
+      padding: 1.25rem 0 1.25rem 1.875rem;
+      width: 100%;
+
+      .info {
+        margin-left: 1.5rem;
+      }
+    }
+
+    .sub-title {
+      margin-top: 2.25rem;
+    }
+
+    .buttons-group {
+      margin-top: 1.875rem;
+      flex-direction: column;
+
+      .social-button {
+        margin-top: 1rem;
+        margin-left: 0;
+
+        &:first-child {
+          margin-top: 0;
+        }
+      }
+    }
+  }
+}
--- a/docs/app/pages/home/social-section/social-section.component.ts
+++ b/docs/app/pages/home/social-section/social-section.component.ts
@ -0,0 +1,16 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-landing-social-section',
+  templateUrl: './social-section.component.html',
+  styleUrls: ['./social-section.component.scss'],
+})
+export class SocialSectionComponent {
+
+}
--- a/docs/app/pages/home/theme-section/theme-section.component.html
+++ b/docs/app/pages/home/theme-section/theme-section.component.html
@ -0,0 +1,85 @@
+<ngx-landing-section-title>
+  Multiple theme
+</ngx-landing-section-title>
+
+<div class="carousel-container">
+  <div  class="swiper-container reviews"
+        [swiper]="swiperConfig"
+        [(index)]="sliderIndex">
+    <div class="swiper-wrapper">
+      <a [href]="materialLightDemoUrl" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+            data-src="assets/img/material-light-theme.png"
+            class="swiper-lazy"
+            alt="Material Light Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+            lazyLoad="assets/img/material-light-theme.png"
+            defaultImage="assets/img/default.png"
+            alt="Material Light Theme" />
+      </a>
+      <a [href]="materialDarkDemoUrl" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+            data-src="assets/img/material-dark-theme.png"
+            class="swiper-lazy"
+            alt="Material Dark Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+            lazyLoad="assets/img/material-dark-theme.png"
+            defaultImage="assets/img/default.png"
+            alt="Material Dark Theme" />
+      </a>
+      <a [href]="lightDemoUrl" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+            data-src="assets/img/light-theme.png"
+            class="swiper-lazy"
+            alt="Eva Light Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+            lazyLoad="assets/img/light-theme.png"
+            defaultImage="assets/img/default.png"
+            alt="Eva Light Theme" />
+      </a>
+      <a [href]="darkDemoUrl" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+            data-src="assets/img/dark-theme.png"
+            class="swiper-lazy"
+            alt="Eva Dark Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+            src="assets/img/dark-theme.png"
+            alt="Eva Dark Theme"
+            class="ng-lazyloaded" />
+      </a>
+      <a [href]="cosmicDemoUrl" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+             data-src="assets/img/cosmic-theme.png"
+             class="swiper-lazy"
+             alt="Cosmic Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+             src="assets/img/cosmic-theme.png"
+             alt="Cosmic Theme"
+             class="ng-lazyloaded"/>
+      </a>
+      <a [href]="corporateDemoUrl" target="_blank" class="image-container swiper-slide">
+        <img *ngIf="breakpoint.width <= breakpoints.sm"
+             data-src="assets/img/corporate-theme.png"
+             class="swiper-lazy"
+             alt="Corporate Theme" />
+        <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
+             src="assets/img/corporate-theme.png"
+             alt="Corporate Theme"
+             class="ng-lazyloaded"/>
+      </a>
+    </div>
+
+    <div class="swiper-pagination"></div>
+
+    <div class="swiper-button-prev">
+      <i [innerHTML]="'arrow-ios-back' | eva: { width: 36, height: 36, fill: iconColor }"></i>
+    </div>
+    <div class="swiper-button-next">
+      <i [innerHTML]="'arrow-ios-forward' | eva: { width: 36, height: 36, fill: iconColor }"></i>
+    </div>
+  </div>
+</div>
+
+<a class="btn btn-demo"
+   href="https://www.akveo.com/ngx-admin/pages/dashboard?utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_view_demo"
+   target="_blank">View demo</a>
--- a/docs/app/pages/home/theme-section/theme-section.component.scss
+++ b/docs/app/pages/home/theme-section/theme-section.component.scss
@ -0,0 +1,191 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '../../../@theme/styles/themes';
+@import '../../../@theme/styles/swiper_ngx-admin';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+
+  display: block;
+  padding-top: 6.25rem;
+  padding-bottom: 5.125rem;
+  text-align: center;
+
+  .image-container {
+    width: 75.875rem;
+    height: 46.625rem;
+  }
+
+  img {
+    width: 100%;
+    height: 100%;
+  }
+
+  .carousel-container {
+    margin-top: 4rem;
+  }
+
+  .swiper-container {
+    position: static;
+  }
+
+  .swiper-wrapper {
+    padding-top: 4.125rem;
+  }
+
+  @include swiper-navigation-arrows((
+    top: 22.625rem,
+    position: 18%,
+    positionXl: 10%
+  ));
+
+  .swiper-pagination {
+    display: inline-flex;
+    justify-content: center;
+    left: 1.5rem;
+    top: 0;
+    bottom: auto;
+
+    ::ng-deep .swiper-pagination-bullet {
+      height: 0.25rem;
+      width: auto;
+      border-radius: 0;
+      font-family: nb-theme(font-main), sans-serif;
+      font-size: nb-theme(font-size-lg);
+      color: nb-theme(color-fg);
+      background: transparent;
+      margin: 0;
+      opacity: 0.56;
+
+      &::after {
+        content: '';
+        display: block;
+        width: 100%;
+        height: 100%;
+        background: #eff1f3;
+      }
+
+      span {
+        display: inline-block;
+        padding: 0.75rem 1.5rem;
+        width: 100%;
+      }
+
+      &.swiper-pagination-bullet-active {
+        opacity: 1;
+        color: nb-theme(color-active-fg);
+
+        &::after {
+          border-radius: 0.375rem;
+          background: nb-theme(color-active-bg);
+        }
+      }
+    }
+  }
+
+  .btn {
+    font-family: nb-theme(font-main), sans-serif;
+    border-radius: 3px;
+    border: none;
+    background: #ffffff;
+    color: #000000;
+    box-shadow: nb-theme(shadow-default);
+    cursor: pointer;
+    text-transform: uppercase;
+
+    &.btn-demo {
+      margin-top: 0.375rem;
+      padding: 1.125rem 6.25rem;
+      color: #ffffff;
+      background-color: nb-theme(color-active-fg);
+      box-shadow: nb-theme(shadow-btn);
+    }
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-green-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-green-btn);
+    }
+  }
+
+  @include media-breakpoint-down(xxl) {
+    .image-container {
+      width: 64.875rem;
+      height: 39.625rem;
+    }
+  }
+
+  @include media-breakpoint-down(lg) {
+    padding-top: 0;
+
+    .image-container {
+      width: 46.875rem;
+      height: 100%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    img {
+      transition: opacity 1s;
+      opacity: 0;
+
+      &.ng-lazyloaded {
+        opacity: 1;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    padding-top: 2.375rem;
+    padding-bottom: 1.875rem;
+
+    .carousel-container {
+      margin-top: 2.25rem;
+    }
+
+    .swiper-container {
+      margin: 0 1rem;
+    }
+
+    .image-container {
+      max-width: 19.75rem;
+      max-height: 12rem;
+    }
+
+    .swiper-pagination {
+      left: 0;
+      margin: 0;
+      width: 100%;
+
+      ::ng-deep .swiper-pagination-bullet {
+        flex: 1;
+        font-size: nb-theme(font-size-sm);
+
+        span {
+          padding: 0.75rem 0;
+          white-space: pre;
+        }
+
+        &.swiper-pagination-bullet-active {
+          opacity: 1;
+          color: nb-theme(color-active-fg);
+
+          &::after {
+            border-radius: 0.375rem;
+            background: nb-theme(color-active-bg);
+          }
+        }
+      }
+    }
+
+    .btn-demo {
+      display: none;
+    }
+  }
+}
--- a/docs/app/pages/home/theme-section/theme-section.component.ts
+++ b/docs/app/pages/home/theme-section/theme-section.component.ts
@ -0,0 +1,151 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, OnDestroy, Input } from '@angular/core';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { SwiperConfigInterface } from 'ngx-swiper-wrapper';
+import { takeWhile } from 'rxjs/operators';
+import {
+  NbMediaBreakpoint,
+  NbMediaBreakpointsService,
+  NbThemeService,
+} from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-landing-theme-section',
+  templateUrl: './theme-section.component.html',
+  styleUrls: ['./theme-section.component.scss'],
+})
+export class ThemeSectionComponent implements OnDestroy {
+
+  private alive = true;
+  private forMaterialTheme: boolean = false;
+  private themes: string[] = [
+    'Material\nLight',
+    'Material\nDark',
+    'Eva\nLight',
+    'Eva\nDark',
+    'Cosmic',
+    'Corporate',
+  ];
+
+  breakpoint: NbMediaBreakpoint;
+  breakpoints: any;
+  sliderIndex: number = 1;
+  initialSwiperConfig: SwiperConfigInterface = {
+    initialSlide: 1,
+    direction: 'horizontal',
+    spaceBetween: 200,
+    slidesPerView: 'auto',
+    centeredSlides: true,
+    keyboard: true,
+    navigation: true,
+
+    effect: 'coverflow',
+    grabCursor: true,
+    coverflowEffect: {
+      rotate: 0,
+      stretch: 0,
+      depth: 500,
+      modifier: 1,
+      slideShadows : false,
+    },
+    pagination: {
+      el: '.swiper-pagination',
+      clickable: true,
+      hideOnClick: false,
+      renderBullet: (index, className) => {
+        return `
+          <span class="${className}">
+            <span>${this.themes[index]}</span>
+          </span>`;
+      },
+    },
+  };
+  swiperConfig: SwiperConfigInterface  = {
+    ...this.initialSwiperConfig,
+  };
+
+  @Input() public set material(value: any) {
+    this.forMaterialTheme = coerceBooleanProperty(value);
+  }
+
+  public get iconColor(): string {
+    return this.forMaterialTheme ? '#6200ee' : '#00db92';
+  }
+
+  // tslint:disable:max-line-length
+  public get materialLightDemoUrl(): string {
+    return this.forMaterialTheme
+      ? 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=material-light&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_material_light'
+      : 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=material-light&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_material_light';
+  }
+
+  public get materialDarkDemoUrl(): string {
+    return this.forMaterialTheme
+      ? 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=material-dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_material_dark'
+      : 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=material-dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_material_dark';
+  }
+
+  public get lightDemoUrl(): string {
+    return this.forMaterialTheme
+      ? 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=default&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_default'
+      : 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=default&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_default';
+  }
+
+  public get darkDemoUrl(): string {
+    return this.forMaterialTheme
+      ? 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_dark'
+      : 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=dark&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_dark';
+  }
+
+  public get cosmicDemoUrl(): string {
+    return this.forMaterialTheme
+      ? 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_cosmic'
+      : 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=cosmic&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_cosmic';
+  }
+
+  public get corporateDemoUrl(): string {
+    return this.forMaterialTheme
+      ? 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_material_themes_corporate'
+      : 'https://www.akveo.com/ngx-admin/pages/dashboard?theme=corporate&utm_campaign=ngx_admin%20-%20demo%20-%20ngx_admin%20docs&utm_source=ngx_admin&utm_medium=referral&utm_content=ngx_admin_landing_themes_corporate';
+  }
+  // tslint:enable:max-line-length
+
+  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;
+
+        this.changeSwiperConfig();
+      });
+  }
+
+  changeSwiperConfig(): void {
+    if (this.isMobile) {
+      this.swiperConfig = {
+        ...this.swiperConfig,
+        preloadImages: false,
+        lazy: true,
+      };
+    } else {
+      this.swiperConfig = this.initialSwiperConfig;
+    }
+  }
+
+  get isMobile(): boolean {
+    return this.breakpoint.width <= this.breakpoints.sm;
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}
--- a/docs/app/pages/pages-routing.module.ts
+++ b/docs/app/pages/pages-routing.module.ts
@ -0,0 +1,32 @@
+import { RouterModule, Routes } from '@angular/router';
+import { NgModule } from '@angular/core';
+
+import { PagesComponent } from './pages.component';
+
+const routes: Routes = [{
+  path: '',
+  component: PagesComponent,
+  children: [
+    {
+      path: '',
+      loadChildren: () => import('./home/landing-home.module')
+        .then(m => m.LandingHomeModule),
+    },
+    {
+      path: 'docs',
+      loadChildren: () => import('./docs/landing-docs.module')
+        .then(m => m.LandingDocsModule),
+    },
+    {
+      path: '**',
+      redirectTo: '',
+    },
+  ],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PagesRoutingModule {
+}
--- a/docs/app/pages/pages.component.ts
+++ b/docs/app/pages/pages.component.ts
@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-landing-pages',
+  template: `<router-outlet></router-outlet>`,
+})
+export class PagesComponent {
+}
--- a/docs/app/pages/pages.module.ts
+++ b/docs/app/pages/pages.module.ts
@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+
+import { PagesComponent } from './pages.component';
+import { PagesRoutingModule } from './pages-routing.module';
+
+const PAGES_COMPONENTS = [
+  PagesComponent,
+];
+
+@NgModule({
+  imports: [
+    PagesRoutingModule,
+  ],
+  declarations: [
+    ...PAGES_COMPONENTS,
+  ],
+})
+export class PagesModule {
+}