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

docs/app/@theme/components/page-tabs/page-tabs.component.scss

@@ -0,0 +1,101 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  display: flex;
+  flex-wrap: wrap;
+
+  $tabs-fg: nb-theme(color-fg-heading-light);
+  $tabs-fg-active: nb-theme(color-fg-heading);
+  $tabs-bg-active: nb-theme(color-white);
+  $tabs-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6);
+  $tabs-accent-line: nb-theme(color-fg-highlight);
+
+  a {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    align-items: center;
+    padding: 1rem;
+    width: 50%;
+    height: 7.5rem;
+    font-size: 0.875rem;
+    text-decoration: none;
+    color: $tabs-fg;
+    margin-bottom: 1rem;
+
+    .title {
+      padding-bottom: 0.75rem;
+      font-weight: 500;
+    }
+
+    .icon {
+      font-size: 1.5rem;
+      padding-bottom: 1rem;
+    }
+
+    &.selected {
+      background: white;
+      color: $tabs-fg-active;
+      box-shadow: $tabs-shadow;
+
+      .line {
+        height: 0.1875rem;
+        width: 60%;
+        background: $tabs-accent-line;
+        border-radius: 1.5px;
+      }
+    }
+  }
+
+  .icon,
+  .title {
+    display: block;
+    text-align: center;
+  }
+}
+
+:host(.horizontal) {
+  a {
+    flex: 0 0 50%;
+    height: auto;
+    margin-bottom: 0;
+    padding: 0 1rem;
+
+    .title,
+    .icon {
+      display: inline;
+      padding-bottom: 0;
+      vertical-align: middle;
+    }
+
+    .icon {
+      margin-right: 0.5rem;
+    }
+  }
+
+  .text-container {
+    padding-bottom: 1.3rem;
+  }
+
+  .line {
+    order: -1;
+    margin-bottom: 1.3rem;
+  }
+
+  @media screen and (min-width: 40em) {
+    flex: 1 1 0;
+
+    a {
+      flex: 1 1 0;
+
+      &.selected::after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        border-left: 1rem solid transparent;
+        border-right: 1rem solid transparent;
+        border-top: 1rem solid #fff;
+      }
+    }
+  }
+}

docs/app/@theme/components/page-tabs/page-tabs.component.ts

@@ -0,0 +1,87 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { ChangeDetectionStrategy, Component, Input, OnDestroy, HostBinding } from '@angular/core';
+import { takeWhile, map, publishReplay, refCount } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { Observable, of as observableOf, combineLatest } from 'rxjs';
+
+@Component({
+  selector: 'ngx-page-tabs',
+  styleUrls: ['./page-tabs.component.scss'],
+  template: `
+    <a *ngFor="let item of items$ | async" [class.selected]="item.selected" [routerLink]="['../', item.tab]">
+      <div class="text-container">
+        <i class="icon {{ item.icon }}"></i>
+        <span class="title">{{ item.title }}</span>
+      </div>
+      <i class="line"></i>
+    </a>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxPageTabsComponent implements OnDestroy {
+
+  items$: Observable<any[]> = observableOf([]);
+
+  @Input()
+  set tabs(value) {
+    this.items$ = combineLatest(
+      observableOf(value || []).pipe(
+        map(tabs => this.availableTabs.filter(tab => tabs[tab.tab])),
+      ),
+      this.activatedRoute.params.pipe(publishReplay(), refCount()),
+    )
+    .pipe(
+      takeWhile(() => this.alive),
+      map(([tabs, params]) => (tabs.map((item: any) => ({ ...item, selected: item.tab === params.tab })))),
+    );
+  }
+
+  @HostBinding('class.horizontal')
+  isHorizontal = false;
+  @Input()
+  set horizontal(value) {
+    this.isHorizontal = value !== 'false' && value !== false;
+  }
+
+  private availableTabs: {
+    tab: string;
+    title: string;
+    icon: string;
+    selected?: boolean;
+  }[] = [
+      {
+        tab: 'overview',
+        title: 'Overview',
+        icon: 'feather-eye',
+        selected: true,
+      },
+      {
+        tab: 'api',
+        title: 'API',
+        icon: 'feather-settings',
+      },
+      {
+        tab: 'theme',
+        title: 'Theme',
+        icon: 'feather-droplet',
+      },
+      {
+        tab: 'examples',
+        title: 'Examples',
+        icon: 'feather-image',
+      },
+    ];
+  private alive = true;
+
+  constructor(private activatedRoute: ActivatedRoute) {
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}