feat(demo): add landing page with docs (#1951)

docs/app/blocks/components/pager-block/pager-block.component.scss

@@ -0,0 +1,85 @@
+/**
+ * @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() {
+
+  $title-fg: nb-theme(color-fg-heading);
+  $text-fg: nb-theme(color-fg-text);
+  $arrow-fg: nb-theme(color-fg-highlight);
+
+  display: flex;
+  flex-direction: column;
+
+  /deep/ nb-card {
+    font-weight: 300;
+    flex: 1;
+
+    &.invisible {
+      visibility: hidden;
+    }
+
+    a {
+      padding: 2rem;
+      text-decoration: none;
+      color: $text-fg;
+      height: 100%;
+    }
+
+    .page-title {
+      display: flex;
+      justify-content: space-between;
+      color: $title-fg;
+      font-weight: 500;
+      font-size: 1.2rem;
+
+      i {
+        color: $arrow-fg;
+        margin-top: 0.3rem;
+        font-weight: bold;
+        font-size: 1.7rem;
+      }
+      span {
+        word-wrap: normal;
+      }
+    }
+
+    .description {
+      display: none;
+    }
+
+    &.left-block {
+      text-align: right;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    /deep/ nb-card {
+      margin-left: 1rem;
+
+      &:first-child {
+        margin-left: 0;
+      }
+
+      a {
+        padding: 2rem 3rem 2rem 2rem;
+      }
+      .page-title {
+        font-size: 1.5rem;
+        margin-bottom: 0.6rem;
+      }
+      .description {
+        display: block;
+      }
+    }
+  }
+}

docs/app/blocks/components/pager-block/pager-block.component.ts

@@ -0,0 +1,48 @@
+import {Component, ChangeDetectionStrategy, Input} from '@angular/core';
+import { NgxPaginationService } from '../../../@theme/services/pagination.service';
+
+@Component({
+  selector: 'ngx-pager-block',
+  styleUrls: ['./pager-block.component.scss'],
+  template: `
+    <ng-container *ngIf="paginationItem">
+      <nb-card [class.invisible]="!paginationItem.prev" class="left-block">
+        <a *ngIf="paginationItem.prev" [routerLink]="paginationItem.prev.link"
+          [attr.title]="paginationItem.prev.title">
+          <div class="page-title">
+            <i class="icon nb-arrow-thin-left"></i>
+            <span>{{ paginationItem.prev.title }}</span>
+          </div>
+          <div class="description">Previous page</div>
+        </a>
+      </nb-card>
+
+      <nb-card [class.invisible]="!paginationItem.next" class="right-block">
+        <a *ngIf="paginationItem.next" [routerLink]="paginationItem.next.link"
+          [attr.title]="paginationItem.next.title">
+          <div class="page-title">
+            <span>{{ paginationItem.next.title }}</span>
+            <i class="icon nb-arrow-thin-right"></i>
+          </div>
+          <div class="description">Next page</div>
+        </a>
+      </nb-card>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxPagerBlockComponent {
+  paginationItem;
+
+  @Input('currentItemSlag')
+  set setPaginationItem(currentItemSlag: string) {
+    this.paginationItem = this.getPaginationItem(currentItemSlag);
+  }
+
+  constructor(private paginationService: NgxPaginationService) {
+  }
+
+  getPaginationItem(currentItemSlag) {
+    return this.paginationService.getPaginationItem(currentItemSlag);
+  }
+}