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

2025-12-22 18:30:14 +01:00 · 2018-12-26 15:17:57 +03:00 · 2018-12-26 15:17:57 +03:00 · 43cc3a1556
commit 43cc3a1556
parent 67c9587b87
190 changed files with 15425 additions and 21 deletions
--- a/docs/app/@theme/components/docs-footer/footer.component.html
+++ b/docs/app/@theme/components/docs-footer/footer.component.html
@ -0,0 +1,39 @@
+<div class="logo">
+  <a href="http://akveo.com" target="_blank"><img src="assets/img/akveo-logo.png" alt="Akveo logo"></a>
+</div>
+<div>
+  <ul>
+    <li><strong class="title">More from Akveo</strong></li>
+    <li><a href="http://akveo.com?utm_source=nebular_documentation&utm_medium=footer" target="_blank">Homepage</a></li>
+    <li><a href="https://akveo.github.io/eva-icons?utm_source=nebular_documentation&utm_medium=footer">Eva Icons</a></li>
+    <li><a href="https://akveo.github.io/react-native-ui-kitten?utm_source=nebular_documentation&utm_medium=footer">React Native UI Kitten</a></li>
+    <li><a href="http://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=footer"
+           target="_blank">ngx-admin</a></li>
+  </ul>
+</div>
+<div>
+  <ul>
+    <li><strong class="title">Follow Us</strong></li>
+    <li class="social">
+      <a href="https://github.com/akveo/ngx-admin" target="_blank">
+        <i class="small-social-github"></i>
+      </a>
+      <a href="https://twitter.com/akveo_inc" target="_blank">
+        <i class="small-social-twitter"></i>
+      </a>
+      <a href="https://www.facebook.com/akveo" target="_blank">
+        <i class="small-social-facebook"></i>
+      </a>
+    </li>
+    <li class="copy">
+      &copy; 2015-2018 <a href="http://akveo.com?utm_source=nebular_documentation&utm_medium=footer" target="_blank">Akveo LLC</a><br>
+      Documentation licensed under CC BY 4.0.
+    </li>
+  </ul>
+</div>
+<div class="contact">
+  <ul>
+    <li><strong class="title">Contact Us</strong></li>
+    <li><a href="#">contact@akveo.com</a></li>
+  </ul>
+</div>
--- a/docs/app/@theme/components/docs-footer/footer.component.scss
+++ b/docs/app/@theme/components/docs-footer/footer.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() {
+
+  $text-fg: nb-theme(footer-fg);
+  $social-fg: nb-theme(color-fg-icon);
+  $title-fg: nb-theme(color-fg-heading);
+
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  padding-top: 1.25rem;
+  justify-content: space-around;
+
+  > div {
+    display: flex;
+    margin-right: 0;
+    justify-content: center;
+    width: 100%;
+    &:last-child {
+      margin-right: 0;
+    }
+
+    a {
+      color: $text-fg;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    li {
+      display: flex;
+      margin-bottom: 1rem;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+    }
+
+    &.logo {
+      display: none;
+    }
+
+    .title {
+      color: $title-fg;
+      font-size: 1.125rem;
+      font-weight: bold;
+      line-height: 1.375rem;
+    }
+
+    .copy {
+      color: $text-fg;
+      display: list-item;
+      font-size: 0.75rem;
+    }
+
+    .social {
+      display: flex;
+      flex-direction: row;
+      a {
+        font-size: 3rem;
+        text-decoration: none;
+        color: $social-fg;
+        margin-right: 1rem;
+      }
+    }
+  }
+
+  > div.logo {
+    display: none;
+  }
+
+  @include media-breakpoint-up(md) {
+    > div {
+      justify-content: flex-start;
+      margin-right: 2rem;
+      width: auto;
+
+      li {
+        justify-content: flex-start;
+        align-items: flex-start;
+        text-align: left;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    > div.logo {
+      display: flex;
+      flex-direction: column;
+      margin-top: -2.5rem;
+      text-align: center;
+      justify-content: center;
+
+      img {
+        max-width: 9rem;
+      }
+    }
+  }
+}
--- a/docs/app/@theme/components/docs-footer/footer.component.ts
+++ b/docs/app/@theme/components/docs-footer/footer.component.ts
@ -0,0 +1,10 @@
+import { ChangeDetectionStrategy, Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-docs-footer',
+  styleUrls: ['./footer.component.scss'],
+  templateUrl: './footer.component.html',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxDocsFooterComponent {
+}
--- a/docs/app/@theme/components/footer/footer.component.html
+++ b/docs/app/@theme/components/footer/footer.component.html
@ -0,0 +1,49 @@
+<div class="logo">
+  <a href="http://akveo.com" target="_blank"><img src="assets/img/akveo-logo.png" alt="Akveo logo"></a>
+</div>
+<div>
+  <ul>
+    <li><span class="title">More from Akveo</span></li>
+    <li><a href="http://akveo.com?utm_source=ngx_admin_landing&utm_medium=footer" target="_blank">Homepage</a></li>
+    <li><a href="https://akveo.github.io/nebular?utm_source=ngx_admin_landing&utm_medium=footer">Nebular</a></li>
+    <li><a href="https://akveo.github.io/eva-icons?utm_source=ngx_admin_landing&utm_medium=footer">Eva Icons</a></li>
+    <li><a href="https://akveo.github.io/react-native-ui-kitten?utm_source=ngx_admin_landing&utm_medium=footer">React Native UI Kitten</a></li>
+  </ul>
+</div>
+<div class="social-container">
+  <ul>
+    <li><span class="title">Follow Us</span></li>
+    <li class="social">
+      <a href="https://github.com/akveo/ngx-admin"
+         aria-label="github"
+         target="_blank">
+        <i [innerHTML]="'github-outline' | eva: { width: 30, height: 30, fill: '#f7f8fa' }"></i>
+      </a>
+      <a href="https://twitter.com/akveo_inc"
+         aria-label="twitter"
+         target="_blank">
+        <i [innerHTML]="'twitter' | eva: { width: 30, height: 30, fill: '#f7f8fa' }"></i>
+      </a>
+      <a href="https://www.facebook.com/akveo"
+         aria-label="facebook"
+         target="_blank">
+        <i [innerHTML]="'facebook' | eva: { width: 35, height: 35, fill: '#f7f8fa' }"></i>
+      </a>
+      <a href="https://www.linkedin.com/company/akveo"
+         aria-label="linkedIn"
+         target="_blank">
+        <i [innerHTML]="'linkedin' | eva: { width: 35, height: 35, fill: '#f7f8fa' }"></i>
+      </a>
+    </li>
+    <li class="copy">
+      &copy; 2015-2018 <a href="http://akveo.com?utm_source=eva_documentation&utm_medium=footer" target="_blank">Akveo LLC</a><br>
+      Documentation licensed under CC BY 4.0.
+    </li>
+  </ul>
+</div>
+<div class="contact">
+  <ul>
+    <li class="title">Contact Us</li>
+    <li><a href="mailto:contact@akveo.com">contact@akveo.com</a></li>
+  </ul>
+</div>
--- a/docs/app/@theme/components/footer/footer.component.scss
+++ b/docs/app/@theme/components/footer/footer.component.scss
@ -0,0 +1,188 @@
+/**
+ * @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() {
+  $text-fg: nb-theme(footer-fg);
+  $social-fg: nb-theme(color-fg-icon);
+  $title-fg: nb-theme(footer-title-fg);
+
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  padding-top: 2.75rem;
+  justify-content: flex-start;
+  margin: 0.375rem 10.25rem 0;
+
+  > div {
+    display: flex;
+    margin-right: 0;
+    margin-bottom: 2rem;
+    margin-top: 0.375rem;
+    justify-content: center;
+    width: 100%;
+
+    &:last-child {
+      margin-right: 0;
+      margin-bottom: 0;
+    }
+
+    a {
+      font-size: nb-theme(font-size);
+      color: $text-fg;
+    }
+
+    ul {
+      list-style: none;
+      padding-left: 0;
+    }
+
+    li {
+      font-family: nb-theme(font-secondary), sans-serif;
+      font-weight: normal;
+      display: flex;
+      margin-bottom: 1.5rem;
+      justify-content: center;
+      align-items: center;
+      text-align: center;
+
+      &:first-child {
+        margin-bottom: 1.75rem;
+      }
+    }
+
+    .title {
+      color: $title-fg;
+      font-size: nb-theme(font-size-lg);
+    }
+
+    .copy {
+      $copy-color: #535b6c;
+
+      color: $copy-color;
+      display: list-item;
+      font-size: 0.66rem;
+      line-height: 1.75;
+
+      a {
+        font-size: 0.65rem;
+        color: $copy-color;
+      }
+    }
+
+    .social {
+      display: flex;
+      flex-direction: row;
+
+      a {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 2.5rem;
+        height: 2.5rem;
+        background-color: $social-fg;
+        border-radius: 0.375rem;
+        text-decoration: none;
+        margin-right: 1.5rem;
+        line-height: 0.5;
+
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+
+  > div.logo {
+    margin-bottom: 3.125rem;
+
+    a {
+      width: 10rem;
+      height: 10rem;
+    }
+
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    justify-content: space-around;
+    margin-right: 0;
+    margin-left: 0;
+
+    > div.logo {
+      display: none;
+    }
+
+    > div {
+      justify-content: flex-start;
+      margin-right: 0;
+      margin-bottom: 0;
+      width: auto;
+
+      li {
+        justify-content: flex-start;
+        align-items: flex-start;
+        text-align: left;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    margin-right: 2rem;
+    margin-left: 2rem;
+
+    > div.logo {
+      display: flex;
+      flex-direction: column;
+      margin-top: 0;
+      margin-bottom: 0;
+      text-align: center;
+    }
+  }
+
+  @include media-breakpoint-up(xxl) {
+    justify-content: flex-start;
+    margin: 0.375rem 10.25rem 0;
+
+    > div.logo {
+      margin-right: 7.875rem;
+    }
+
+    > div {
+      margin-right: 8.375rem;
+    }
+
+    .company-info {
+      margin-right: 12.25rem;
+    }
+
+    .social-container {
+      margin-right: 6.75rem;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    padding-left: 1rem;
+    padding-right: 1rem;
+
+    > div {
+      margin-right: 0;
+
+      &.logo {
+        margin-right: 0;
+      }
+    }
+
+    .social-container {
+      margin-right: 0;
+    }
+  }
+}
--- a/docs/app/@theme/components/footer/footer.component.ts
+++ b/docs/app/@theme/components/footer/footer.component.ts
@ -0,0 +1,15 @@
+/**
+ * @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-footer',
+  styleUrls: ['./footer.component.scss'],
+  templateUrl: './footer.component.html',
+})
+export class NgxLandingFooterComponent {
+}
--- a/docs/app/@theme/components/fragment-target/fragment-target.directive.ts
+++ b/docs/app/@theme/components/fragment-target/fragment-target.directive.ts
@ -0,0 +1,73 @@
+import { Directive, ElementRef, Inject, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+import { NB_WINDOW } from '@nebular/theme';
+import { takeWhile, publish, refCount } from 'rxjs/operators';
+import { NgxTocElement, NgxTocStateService } from '../../services/toc-state.service';
+import { delay } from 'rxjs/internal/operators';
+
+@Directive({
+  // tslint:disable-next-line
+  selector: '[ngxFragment]',
+})
+export class NgxFragmentTargetDirective implements OnInit, OnDestroy, NgxTocElement {
+  @Input() ngxFragment: string;
+  @Input() ngxFragmentClass: string;
+  @Input() ngxFragmentSync: boolean = true;
+
+  private inView = false;
+  private alive = true;
+  private readonly marginFromTop = 120;
+
+  get fragment(): string {
+    return this.ngxFragment;
+  }
+
+  get element(): any {
+    return this.el.nativeElement;
+  }
+
+  get y(): number {
+    return this.element.getBoundingClientRect().y;
+  }
+
+  constructor(
+    private activatedRoute: ActivatedRoute,
+    @Inject(NB_WINDOW) private window,
+    private tocState: NgxTocStateService,
+    private el: ElementRef,
+    private renderer: Renderer2,
+  ) {}
+
+  ngOnInit() {
+    this.ngxFragmentSync && this.tocState.add(this);
+
+    this.activatedRoute.fragment
+      .pipe(publish(null), refCount(), takeWhile(() => this.alive), delay(10))
+      .subscribe((fragment: string) => {
+        if (fragment && this.fragment === fragment && !this.inView) {
+          this.selectFragment();
+        } else {
+          this.deselectFragment();
+        }
+      });
+  }
+
+  selectFragment() {
+    this.ngxFragmentClass && this.renderer.addClass(this.el.nativeElement, this.ngxFragmentClass);
+    this.setInView(true);
+    this.window.scrollTo(0, this.el.nativeElement.offsetTop - this.marginFromTop);
+  }
+
+  deselectFragment() {
+    this.renderer.removeClass(this.el.nativeElement, this.ngxFragmentClass);
+  }
+
+  setInView(val: boolean) {
+    this.inView = val;
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+    this.ngxFragmentSync && this.tocState.remove(this);
+  }
+}
--- a/docs/app/@theme/components/header/header.component.html
+++ b/docs/app/@theme/components/header/header.component.html
@ -0,0 +1,25 @@
+<div class="section left">
+  <button *ngIf="sidebarTag" class="sidebar-toggle" (click)="toggleSidebar()">
+    <i class="nb-menu"></i>
+  </button>
+  <div class="logo">
+    <a routerLink="/">ngx-admin</a>
+    <span class="version">v{{ currentVersion }}</span>
+  </div>
+</div>
+<div class="section middle">
+  <nb-menu [items]="headerMenu"></nb-menu>
+</div>
+<div class="section right">
+
+  <ng-container *ngIf="!isDocs">
+    Need some help? Let us know! <a (click)="trackEmailClick()" href="mailto:contact@akveo.com">contact@akveo.com</a>
+  </ng-container>
+
+  <iframe *ngIf="isDocs"
+          class="stars"
+          src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"
+          frameborder="0"
+          scrolling="0">
+  </iframe>
+</div>
--- a/docs/app/@theme/components/header/header.component.scss
+++ b/docs/app/@theme/components/header/header.component.scss
@ -0,0 +1,286 @@
+/**
+ * @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() {
+  $left-section-width: nb-theme(sidebar-width);
+  $right-section-width: nb-theme(settings-col-width);
+  $logo-fg: nb-theme(header-fg);
+  $version-fg: nb-theme(color-fg-heading-light);
+  $menu-item-fg: nb-theme(color-fg-heading-light);
+  $menu-item-fg-active: nb-theme(header-menu-fg-active);
+  $contacts-fg: nb-theme(color-fg-heading-light);
+  $contacts-active-fg: nb-theme(header-menu-fg-active);
+
+  display: flex;
+  flex: 1 0 auto;
+  flex-direction: row;
+  align-items: center;
+
+  .section {
+    display: flex;
+    padding: 0.875rem 0.5rem;
+
+    &.left {
+      width: $left-section-width;
+    }
+
+    &.middle {
+      flex: 1;
+    }
+  }
+
+  .logo {
+    display: flex;
+    flex: 1 0 auto;
+    flex-direction: row;
+
+    a {
+      font-family: nb-theme(font-main), sans-serif;
+      font-size: 1.275rem;
+      color: $logo-fg;
+      text-decoration: none !important;
+      font-weight: bold;
+    }
+
+    .version {
+      font-size: 0.75rem;
+      font-weight: bold;
+      color: $version-fg;
+    }
+  }
+
+  /deep/ nb-menu {
+    flex: 1;
+
+    .menu-items {
+      display: flex;
+      justify-content: flex-start;
+
+      .menu-item {
+        border: none;
+        width: 5.375rem;
+
+        a {
+          padding: 0.675rem 1.375rem;
+          color: $menu-item-fg;
+          display: block;
+
+          &:hover, &.active, &:focus {
+            font-weight: normal;
+            color: $menu-item-fg-active;
+            outline: none !important;
+          }
+        }
+      }
+
+      li:first-child {
+        display: none;
+      }
+    }
+  }
+
+  .section.right {
+    color: $contacts-fg;
+
+    a {
+      font-family: nb-theme(font-main), sans-serif;
+      color: $contacts-active-fg;
+      margin-left: 0.375rem;
+    }
+  }
+
+  @include media-breakpoint-up(is) {
+    .section {
+      padding: 0.875rem 0;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    .logo {
+      align-items: baseline;
+      flex: 1 0 auto;
+
+      a {
+        color: #000000;
+        margin-right: 0.5rem;
+      }
+
+      .version {
+        display: inline;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(md) {
+    .logo {
+      flex: 1 0 auto;
+      flex-direction: column;
+      align-items: flex-start;
+
+      .version {
+        margin-left: 0;
+      }
+    }
+
+    /deep/ nb-menu .menu-items li:nth-child(2) {
+      display: list-item;
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    /deep/ nb-menu .menu-items {
+      justify-content: flex-start;
+
+      li:not(:first-child) {
+        display: list-item;
+      }
+    }
+  }
+
+  @include media-breakpoint-up(xl) {
+    .sidebar-toggle {
+      display: none;
+    }
+  }
+
+
+  @include media-breakpoint-down(sm) {
+    /deep/ nb-menu {
+      .menu-items {
+        justify-content: flex-end;
+      }
+    }
+
+    .section {
+      &.right {
+        display: none;
+      }
+    }
+  }
+
+  @include media-breakpoint-down(is) {
+    padding: 0 0 0 1rem;
+
+    .section {
+      &.left {
+        width: auto;
+      }
+    }
+
+    .logo {
+      flex: 1 0 auto;
+      flex-direction: column;
+      align-items: flex-start;
+
+      a {
+        color: #000000;
+      }
+
+      .version {
+        margin-left: 0;
+      }
+    }
+  }
+
+  &.docs-page {
+    .section {
+      &.left {
+        align-items: center;
+        padding-left: 0;
+        width: auto;
+      }
+
+      &.middle {
+        justify-content: flex-end;
+      }
+
+      &.right {
+        display: none;
+        margin-left: 0;
+        width: auto;
+      }
+    }
+
+    .sidebar-toggle {
+      border: none;
+      background-color: transparent;
+      font-size: 2.5rem;
+      line-height: 1rem;
+      flex: 1 0 auto;
+      padding: 0 0.5rem;
+
+      .nb-menu {
+        vertical-align: middle;
+      }
+    }
+
+    /deep/ nb-menu {
+      flex-grow: 0;
+      flex-shrink: 1;
+      flex-basis: auto;
+    }
+
+    @include media-breakpoint-up(is) {
+      /deep/ nb-menu .menu-items li:first-child {
+        display: list-item;
+      }
+    }
+
+    @include media-breakpoint-up(sm) {
+      .section.middle {
+        justify-content: space-between;
+      }
+
+      .section.right {
+        display: block;
+      }
+
+      .stars {
+        width: 7.5rem;
+        height: 1.25rem;
+        margin-left: auto;
+      }
+    }
+
+    @include media-breakpoint-up(lg) {
+      .section.middle {
+        justify-content: space-around;
+      }
+      /deep/ nb-menu {
+        min-width: 28rem;
+
+        .menu-items li {
+          display: list-item;
+        }
+      }
+    }
+
+    @include media-breakpoint-up(xl) {
+      .section.left {
+        padding-left: 1.125rem;
+        width: nb-theme(sidebar-width);
+      }
+
+      .sidebar-toggle {
+        display: none;
+      }
+
+      /deep/ nb-menu {
+        flex: 1;
+      }
+    }
+
+    @include media-breakpoint-up(macpro) {
+      .section.right {
+        margin-left: 1.875rem;
+        width: $right-section-width;
+      }
+    }
+  }
+}
--- a/docs/app/@theme/components/header/header.component.ts
+++ b/docs/app/@theme/components/header/header.component.ts
@ -0,0 +1,52 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Component, HostBinding, Input, OnDestroy } from '@angular/core';
+import { takeWhile } from 'rxjs/operators';
+import { NbSidebarService } from '@nebular/theme';
+
+/*import { NgxAnalytics } from '../../services/analytics.service';*/
+import { NgxVersionService } from '../../services/version.service';
+import { HeaderMenuService } from '../../../@core/data/service/header-menu.service';
+
+@Component({
+  selector: 'ngx-landing-header',
+  styleUrls: ['./header.component.scss'],
+  templateUrl: './header.component.html',
+})
+export class NgxLandingHeaderComponent implements OnDestroy {
+
+  private alive = true;
+
+  @HostBinding('class.docs-page') @Input() isDocs = false;
+
+  @Input() sidebarTag: string = '';
+
+  currentVersion: string;
+  headerMenu = [];
+
+  constructor(/*private analytics: NgxAnalytics,*/
+              private sidebarService: NbSidebarService,
+              private versionService: NgxVersionService,
+              private headerMenuService: HeaderMenuService) {
+    this.currentVersion = this.versionService.getNgxVersion();
+
+    this.headerMenuService.getHeaderMenu()
+      .pipe(takeWhile(() => this.alive ))
+      .subscribe((headerMenu) => this.headerMenu = headerMenu);
+  }
+
+  trackEmailClick() {
+  }
+
+  toggleSidebar() {
+    this.sidebarService.toggle(false, this.sidebarTag);
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}
--- a/docs/app/@theme/components/index.ts
+++ b/docs/app/@theme/components/index.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 { NgxLandingFooterComponent } from './footer/footer.component';
+import { NgxLandingHeaderComponent } from './header/header.component';
+import { NgxSectionTitleComponent } from './section-title/section-title.component';
+import { NgxPageTabsComponent } from './page-tabs/page-tabs.component';
+import { NgxPageTocComponent } from './page-toc/page-toc.component';
+import { NgxFragmentTargetDirective } from './fragment-target/fragment-target.directive';
+import { NgxDocsFooterComponent } from './docs-footer/footer.component';
+
+export {
+  NgxLandingHeaderComponent,
+  NgxLandingFooterComponent,
+  NgxSectionTitleComponent,
+  NgxPageTabsComponent,
+  NgxPageTocComponent,
+  NgxFragmentTargetDirective,
+  NgxDocsFooterComponent,
+};
--- a/docs/app/@theme/components/page-tabs/page-tabs.component.scss
+++ b/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;
+      }
+    }
+  }
+}
--- a/docs/app/@theme/components/page-tabs/page-tabs.component.ts
+++ b/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;
+  }
+}
--- a/docs/app/@theme/components/page-toc/page-toc.component.scss
+++ b/docs/app/@theme/components/page-toc/page-toc.component.scss
@ -0,0 +1,50 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  $title-fg: nb-theme(color-fg-heading-light);
+  $item-fg: rgba(102, 110, 128, 0.87);
+  $item-fg-active: #202020;
+  $accent-line-bg: nb-theme(color-fg-highlight);
+
+  padding-left: 1rem;
+  display: block;
+
+  h4 {
+    font-size: 1.25rem;
+    font-weight: normal;
+    margin-bottom: 2.5rem;
+    color: $title-fg;
+  }
+
+  ul {
+    list-style: none;
+    padding-left: 3.25rem;
+    font-size: 0.9375rem;
+
+    li {
+      margin-bottom: 0.9375rem;
+    }
+    a {
+      color: $item-fg;
+    }
+
+    li.selected a {
+      font-weight: 500;
+      color: $item-fg-active;
+      position: relative;
+
+      &::after {
+        content: '';
+        position: absolute;
+        left: -3.25rem;
+        top: 50%;
+        transform: translateY(-50%);
+        height: 0.1875rem;
+        width: 2rem;
+        background: $accent-line-bg;
+        border-radius: 1.5px;
+      }
+    }
+  }
+}
--- a/docs/app/@theme/components/page-toc/page-toc.component.ts
+++ b/docs/app/@theme/components/page-toc/page-toc.component.ts
@ -0,0 +1,67 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  Input,
+  OnDestroy,
+} from '@angular/core';
+import { takeWhile,  map } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { of as observableOf,  combineLatest } from 'rxjs';
+
+@Component({
+  selector: 'ngx-page-toc',
+  styleUrls: ['./page-toc.component.scss'],
+  template: `
+    <ng-container *ngIf="items?.length > 0">
+      <h4>Overview</h4>
+      <ul>
+        <li *ngFor="let item of items" [class.selected]="item.selected">
+          <a [routerLink]="item.link" [fragment]="item.fragment">{{ item.title }}</a>
+        </li>
+      </ul>
+    </ng-container>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class NgxPageTocComponent implements OnDestroy {
+
+  items: any[];
+
+  @Input()
+  set toc(value) {
+    combineLatest(
+      observableOf(value || []),
+      this.activatedRoute.fragment,
+    )
+      .pipe(
+        takeWhile(() => this.alive),
+        map(([toc, fragment]) => {
+          toc = toc.map((item: any) => ({ ...item, selected: fragment === item.fragment }));
+          if (toc.length && !toc.find(item => item.selected)) {
+            toc[0].selected = true;
+          }
+          return toc;
+        }),
+      )
+      .subscribe((toc) => {
+        this.items = toc;
+        this.cd.detectChanges();
+      });
+  }
+
+  private alive = true;
+
+  constructor(private activatedRoute: ActivatedRoute, private cd: ChangeDetectorRef) {
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+}
--- a/docs/app/@theme/components/section-title/section-title.component.html
+++ b/docs/app/@theme/components/section-title/section-title.component.html
@ -0,0 +1,3 @@
+<h2>
+  <ng-content></ng-content>
+</h2>
--- a/docs/app/@theme/components/section-title/section-title.component.scss
+++ b/docs/app/@theme/components/section-title/section-title.component.scss
@ -0,0 +1,24 @@
+/**
+ * @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() {
+  h2 {
+    font-family: 'Helvetica Neue Bold', sans-serif;
+    font-size: 2rem;
+    color: #000000;
+    text-align: center;
+  }
+
+
+  @include media-breakpoint-down(is) {
+    h2 {
+      font-size: 1.5rem;
+    }
+  }
+}
--- a/docs/app/@theme/components/section-title/section-title.component.ts
+++ b/docs/app/@theme/components/section-title/section-title.component.ts
@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-landing-section-title',
+  templateUrl: './section-title.component.html',
+  styleUrls: ['./section-title.component.scss'],
+})
+export class NgxSectionTitleComponent {
+
+}
--- a/docs/app/@theme/pipes/eva-icons.pipe.ts
+++ b/docs/app/@theme/pipes/eva-icons.pipe.ts
@ -0,0 +1,50 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { DomSanitizer } from '@angular/platform-browser';
+import { Pipe, PipeTransform } from '@angular/core';
+import { icons } from 'eva-icons';
+
+@Pipe({ name: 'eva' })
+export class EvaIconsPipe implements PipeTransform {
+
+  private defaultOptions = {
+    height: 24,
+    width: 24,
+    fill: 'inherit',
+    animationHover: true,
+    animationInfinity: false,
+  };
+
+  constructor(private sanitizer: DomSanitizer) {}
+
+  transform(icon: string,
+            options: {
+              height: number;
+              width: number;
+              fill: string;
+              animationType?: string;
+              animationHover?: boolean;
+              animationInfinity?: boolean;
+            },
+  ) {
+    const mergedOptions = {
+      ...this.defaultOptions,
+      ...options,
+    };
+    const { width, height, fill, animationType, animationHover, animationInfinity } = mergedOptions;
+    const animation = animationType ?
+      { type: animationType, hover: animationHover, infinite: animationInfinity } :
+      null;
+
+    return this.sanitizer.bypassSecurityTrustHtml(icons[icon].toSvg({
+      width,
+      height,
+      fill,
+      animation,
+    }));
+  }
+}
--- a/docs/app/@theme/services/analytics.service.ts
+++ b/docs/app/@theme/services/analytics.service.ts
@ -0,0 +1,28 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable, Inject } from '@angular/core';
+import { NB_WINDOW } from '@nebular/theme';
+
+@Injectable()
+export class NgxAnalytics {
+  private enabled: boolean;
+
+  constructor(@Inject(NB_WINDOW) private window) {
+    this.enabled = this.window.location.href.indexOf('akveo.github.io') >= 0;
+  }
+
+  trackEvent(eventName: string, eventVal: string = '') {
+    if (this.enabled) {
+      this.gtmPushToDataLayer({ event: eventName, eventValue: eventVal });
+    }
+  }
+
+  // Push to 'dataLayer' Google Tag Manager array
+  private gtmPushToDataLayer(params) {
+    this.window.dataLayer.push(params);
+  }
+}
--- a/docs/app/@theme/services/code-loader.service.ts
+++ b/docs/app/@theme/services/code-loader.service.ts
@ -0,0 +1,39 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { publishReplay ,  refCount } from 'rxjs/operators';
+
+@Injectable()
+export class NgxCodeLoaderService {
+
+  /**
+   * Contains cached files by url.
+   * */
+  private cache: Map<string, Observable<string>> = new Map();
+
+  constructor(private http: HttpClient) {
+  }
+
+  load(path: string): Observable<string> {
+    const url = this.buildFilePath(path);
+    const cached = this.cache.get(url);
+
+    return cached ? cached : this.buildRequest(url);
+  }
+
+  private buildFilePath(path: string): string {
+    return `assets/examples/${path}`;
+  }
+
+  private buildRequest(url): Observable<string> {
+    const request = this.http.get(url, { responseType: 'text' })
+      .pipe(
+        publishReplay(1),
+        refCount(),
+      );
+
+    this.cache.set(url, request);
+
+    return request;
+  }
+}
--- a/docs/app/@theme/services/dialog-state.service.ts
+++ b/docs/app/@theme/services/dialog-state.service.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 { Injectable } from '@angular/core';
+import { Observable, ReplaySubject } from 'rxjs';
+import { share } from 'rxjs/operators';
+
+@Injectable()
+export class DialogStateService {
+
+  protected dialogState$ = new ReplaySubject();
+
+  changeDialogState(state: string) {
+    this.dialogState$.next({state});
+  }
+
+  onChangeDialogState(): Observable<any> {
+    return this.dialogState$.pipe(share());
+  }
+}
--- a/docs/app/@theme/services/highlight.service.ts
+++ b/docs/app/@theme/services/highlight.service.ts
@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+import * as hljs from 'highlight.js';
+
+@Injectable()
+export class NgxHighlightService {
+
+  public highlight(code: string): string {
+    return hljs.highlightAuto(code, ['ts', 'html', 'scss', 'nginx']).value;
+  }
+}
--- a/docs/app/@theme/services/iframe-communicator.service.ts
+++ b/docs/app/@theme/services/iframe-communicator.service.ts
@ -0,0 +1,25 @@
+import { Inject, Injectable } from '@angular/core';
+import { Observable,  fromEvent as observableFromEvent } from 'rxjs';
+import { filter,  map } from 'rxjs/operators';
+import { NB_WINDOW } from '@nebular/theme';
+
+@Injectable()
+export class NgxIframeCommunicatorService {
+
+  constructor(@Inject(NB_WINDOW) private window) {
+  }
+
+  public send(payload: any, target: Window = this.window.parent) {
+    if (target !== this.window) {
+      target.postMessage(payload, '*');
+    }
+  }
+
+  public receive(id: string): Observable<any> {
+    return observableFromEvent(this.window, 'message')
+      .pipe(
+        filter((msg: any) => msg.data && msg.data.id === id),
+        map((msg: any) => msg.data),
+      );
+  }
+}
--- a/docs/app/@theme/services/index.ts
+++ b/docs/app/@theme/services/index.ts
@ -0,0 +1,36 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { NgxVersionService } from './version.service';
+import { DialogStateService } from './dialog-state.service';
+import { NgxAnalytics } from './analytics.service';
+import { NgxHighlightService } from './highlight.service';
+import { NgxMenuService } from './menu.service';
+import { NgxPaginationService } from './pagination.service';
+import { NgxStructureService } from './structure.service';
+import { NgxTabbedService } from './tabbed.service';
+import { NgxTextService } from './text.service';
+import { NgxTocStateService } from './toc-state.service';
+import { NgxCodeLoaderService } from './code-loader.service';
+import { NgxStylesService } from './styles.service';
+import { NgxIframeCommunicatorService } from './iframe-communicator.service';
+
+
+export const ngxLandingServices = [
+  NgxVersionService,
+  DialogStateService,
+  NgxAnalytics,
+  NgxHighlightService,
+  NgxMenuService,
+  NgxPaginationService,
+  NgxStructureService,
+  NgxTabbedService,
+  NgxTextService,
+  NgxTocStateService,
+  NgxCodeLoaderService,
+  NgxStylesService,
+  NgxIframeCommunicatorService,
+];
--- a/docs/app/@theme/services/menu.service.ts
+++ b/docs/app/@theme/services/menu.service.ts
@ -0,0 +1,86 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable } from '@angular/core';
+import { NbMenuItem } from '@nebular/theme';
+
+import { NgxStructureService } from './structure.service';
+import { NgxTextService } from './text.service';
+
+interface IItemLink {
+  title: string;
+  parent?: {
+    link?: string;
+  };
+}
+
+@Injectable()
+export class NgxMenuService {
+
+  constructor(private structureService: NgxStructureService,
+              private textService: NgxTextService) {
+  }
+
+  getPreparedMenu(basePath: string): any {
+    return this.prepareMenu(this.structureService.getPreparedStructure(), { link: basePath });
+  }
+
+  prepareMenu(structure, parent = null) {
+    return structure
+      .filter(item => item.name && item.type !== 'block')
+      .map((item: any) => {
+        const menuItem: NbMenuItem = {
+          title: item.name,
+          pathMatch: 'prefix',
+          parent: parent,
+          data: item,
+          group: item.type === 'group',
+        };
+        menuItem.link = this.createItemLink<NbMenuItem>(menuItem);
+
+        if (item.children && item.children.some(child => child.type === 'page' || child.type === 'tabs')) {
+          menuItem.expanded = true;
+          menuItem.children = this.prepareMenu(item.children, menuItem);
+        }
+
+        return menuItem;
+      });
+  }
+
+  protected prepareToc(item: any) {
+    return item.children.reduce((acc: any[], child: any) => {
+      if (child.block === 'markdown') {
+        return acc.concat(this.getTocForMd(child));
+      } else if (child.block === 'tabbed') {
+        return acc.concat(this.getTocForTabbed(child));
+      }
+      acc.push(child.source.name);
+      return acc;
+    }, []);
+  }
+
+  protected getTocForMd(block: any) {
+    return block.children.map((section: any) => ({
+      title: section.title,
+      fragment: section.fragment,
+    }));
+  }
+
+  protected getTocForTabbed(block: any) {
+    return block.children.map((component: any) => (
+      {
+        title: component.name,
+        fragment: this.textService.createSlag(component.name),
+      }
+    ));
+  }
+
+  createItemLink<T extends IItemLink>(item: T): string {
+    const url = this.textService.createSlag(item.title);
+
+    return item.parent ? `${item.parent.link}/${url}` : url;
+  }
+}
--- a/docs/app/@theme/services/pagination.service.ts
+++ b/docs/app/@theme/services/pagination.service.ts
@ -0,0 +1,97 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable } from '@angular/core';
+import { NgxStructureService } from './structure.service';
+import { NgxMenuService } from './menu.service';
+
+/**
+ * Pagination Item options
+ */
+class NgxPaginationItem {
+  title: string;
+  slag: string;
+  link?: string;
+  prev?: {
+    title: string;
+    link: string;
+  };
+  next?: {
+    title: string;
+    link: string;
+  };
+  parent: NgxPaginationItem;
+}
+
+@Injectable()
+export class NgxPaginationService {
+
+  protected paginationItems;
+
+  constructor(private structureService: NgxStructureService,
+              private menuService: NgxMenuService) {
+  }
+
+  setPaginationItems(basePath: string) {
+    this.paginationItems = this.addPrevNextPointers(
+      this.prepareItems(
+        this.structureService.getPreparedStructure(),
+        { link: basePath },
+        ),
+    );
+  }
+
+  protected prepareItems(structure, parent = null): NgxPaginationItem[] {
+    return structure
+        .filter(item => item.name)
+        .reduce((result, item: any) => {
+          const paginationItem: NgxPaginationItem = {
+            title: item.name,
+            parent: parent,
+            slag: item.slag,
+          };
+          paginationItem.link = this.menuService.createItemLink<NgxPaginationItem>(paginationItem);
+
+          if (item.name && item.type === 'page' || item.type === 'tabs') {
+            result.push(paginationItem);
+          }
+
+          if (item.children) {
+            return result.concat(this.prepareItems(item.children, paginationItem));
+          }
+
+          return result;
+      }, [] as NgxPaginationItem[]);
+  }
+
+  protected addPrevNextPointers(items): NgxPaginationItem[] {
+    return items
+      .map((paginationItem, index, paginationItems) => {
+        const prev = paginationItems[index - 1];
+        const next = paginationItems[index + 1];
+
+        if (prev) {
+          paginationItem.prev = {
+            link: prev.link,
+            title: prev.title,
+          };
+        }
+
+        if (next) {
+          paginationItem.next = {
+            link: next.link,
+            title: next.title,
+          };
+        }
+
+        return paginationItem;
+      });
+  }
+
+  getPaginationItem(slag: string): NgxPaginationItem {
+    return this.paginationItems.find(item => item.slag === slag);
+  }
+}
--- a/docs/app/@theme/services/structure.service.ts
+++ b/docs/app/@theme/services/structure.service.ts
@ -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 { Inject, Injectable } from '@angular/core';
+
+import { NgxTabbedService } from './tabbed.service';
+import { NgxTextService } from './text.service';
+import { DOCS, STRUCTURE } from '../../app.options';
+
+@Injectable()
+export class NgxStructureService {
+
+  protected prepared;
+
+  constructor(private textService: NgxTextService,
+              private tabbedService: NgxTabbedService,
+              @Inject(STRUCTURE) structure,
+              @Inject(DOCS) docs) {
+    this.prepared = this.prepareStructure(structure, docs);
+  }
+
+  getPreparedStructure(): any {
+    return this.prepared;
+  }
+
+  findPageBySlag(structure: any, slag: string): any {
+    for (const item of structure) {
+      if (item.slag === slag) {
+        return item;
+      }
+      if (item.type === 'section' && item.children) {
+        const deep = this.findPageBySlag(item.children, slag);
+        if (deep) {
+          return deep;
+        }
+      }
+    }
+  }
+
+  protected prepareStructure(structure: any, preparedDocs: any, parentSlag?: string): any {
+    return structure.map((item: any) => {
+      const slag = item.name ? this.textService.createSlag(item.name) : null;
+
+      if (item.type === 'block' && typeof item.source === 'string') {
+
+        if (item.block === 'theme') {
+          item.source = preparedDocs.themes[item.source];
+        }
+
+        if (item.block === 'component') {
+          item.source = this.prepareComponent(preparedDocs.classes.find((data) => data.name === item.source));
+        }
+      }
+
+      if (item.block === 'markdown') {
+        item.children = this.textService.mdToSectionsHTML(require(`raw-loader!../../../articles/${item.source}`));
+      }
+
+      if (item.children) {
+        item.children = this.prepareStructure(item.children, preparedDocs, slag);
+      }
+
+      if (item.type === 'tabs') {
+        item.source = this.getComponents(item, preparedDocs);
+        item.tabs = this.tabbedService.determineTabs(item);
+
+        // we emulate a block here
+        item.children = [
+          {
+            type: 'block',
+            block: 'tabbed',
+            children: item.source,
+          },
+        ];
+      }
+
+      if (item.type === 'page' || item.type === 'tabs') {
+        item.toc = this.prepareToc(item);
+        item.slag = parentSlag ? `${parentSlag}_${slag}` : slag;
+      }
+
+      return item;
+    });
+  }
+
+  protected getComponents(item: any, preparedDocs) {
+    return item.source
+      .map(source => preparedDocs.classes.find((data) => data.name === source))
+      .map(component => this.prepareComponent(component));
+  }
+
+  protected prepareComponent(component: any) {
+    const textNodes = component.overview.filter(node => node.type === 'text');
+    if (textNodes && textNodes.length) {
+      textNodes[0].content = `## ${component.name}\n\n${textNodes[0].content}`; // TODO: this is bad
+    }
+    return {
+      ... component,
+      slag: this.textService.createSlag(component.name),
+      overview: component.overview.map((node: any) => {
+        if (node.type === 'text') {
+          return {
+            type: node.type,
+            content: this.textService.mdToSectionsHTML(node.content),
+          };
+        }
+        return node;
+      }),
+    };
+  }
+
+  protected prepareToc(item: any) {
+    return item.children.reduce((acc: any[], child: any) => {
+      if (child.block === 'markdown') {
+        return acc.concat(this.getTocForMd(child));
+      } else if (child.block === 'tabbed') {
+        return acc.concat(this.getTocForTabbed(child));
+      } else if (child.block === 'component') {
+        acc.push(this.getTocForComponent(child));
+      }
+      return acc;
+    }, []);
+  }
+
+  protected getTocForMd(block: any) {
+    return block.children.map((section: any) => ({
+        title: section.title,
+        fragment: section.fragment,
+      }
+    ));
+  }
+
+  protected getTocForComponent(block: any) {
+    return {
+      title: block.source.name,
+      fragment: block.source.slag,
+    };
+  }
+
+  protected getTocForTabbed(block: any) {
+    return block.children.map((component: any) => ({
+        title: component.name,
+        fragment: this.textService.createSlag(component.name),
+      }
+    ));
+  }
+}
--- a/docs/app/@theme/services/styles.service.ts
+++ b/docs/app/@theme/services/styles.service.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 { Inject, Injectable } from '@angular/core';
+import { DOCS } from '../../app.options';
+
+@Injectable()
+export class NgxStylesService {
+
+  constructor(@Inject(DOCS) private docs) {
+  }
+
+  mapThemedValues(classStyles: any): any {
+    return classStyles.map(item => {
+      item.styles.map(prop => {
+        prop.themedValues = [];
+        for (const themeName in this.docs.themes) {
+          if (this.docs.themes.hasOwnProperty(themeName)) {
+            prop.themedValues.push({
+              theme: this.docs.themes[themeName].name,
+              value: this.docs.themes[themeName].data[prop.name].value,
+            });
+          }
+        }
+        return prop;
+      });
+      return item;
+    });
+  }
+}
--- a/docs/app/@theme/services/tabbed.service.ts
+++ b/docs/app/@theme/services/tabbed.service.ts
@ -0,0 +1,56 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class NgxTabbedService {
+
+  determineTabs(tabs: any): { [tab: string]: boolean } {
+    return {
+      'overview': this.hasOverview(tabs),
+      'api': this.hasAPI(tabs),
+      'theme': this.hasTheme(tabs),
+      'examples': this.hasExample(tabs),
+    };
+  }
+
+  hasOverview(tabs: any): boolean {
+    return tabs.source.some(source => this.componentHasOverview(source));
+  }
+
+  hasExample(tabs: any): boolean {
+    return tabs.source.some(source => this.componentHasExamples(source));
+  }
+
+  hasTheme(tabs: any): boolean {
+    return tabs.source.some(source => this.componentHasTheme(source));
+  }
+
+  hasAPI(tabs: any): boolean {
+    return tabs.source.some(source => this.componentHasMethods(source) || this.componentHasProps(source));
+  }
+
+  componentHasTheme(component): boolean {
+    return component.styles &&
+      component.styles.length > 0;
+  }
+
+  componentHasProps(component): boolean {
+    return component &&
+      component.props &&
+      component.props.length > 0;
+  }
+
+  componentHasMethods(component): boolean {
+    return component &&
+      component.methods &&
+      component.methods.length > 0 &&
+      component.methods.some(method => method.shortDescription || method.description);
+  }
+
+  componentHasOverview(component): boolean {
+    return component && component.overview && component.overview.length > 0;
+  }
+
+  componentHasExamples(component): boolean {
+    return component.liveExamples && component.liveExamples.length > 0;
+  }
+}
--- a/docs/app/@theme/services/text.service.ts
+++ b/docs/app/@theme/services/text.service.ts
@ -0,0 +1,67 @@
+import { Injectable } from '@angular/core';
+import { Location } from '@angular/common';
+import * as marked from 'marked';
+
+import { NgxHighlightService } from './highlight.service';
+
+@Injectable()
+export class NgxTextService {
+
+  private readonly SECTION_SPLIT = '<hr>';
+  private readonly TITLE_MASK = '^#{1,6}[^#]?(.+)\n';
+  private readonly STRIP_HTML = '<\\/?[^>]+(>|$)';
+
+  constructor(private highlight: NgxHighlightService, private location: Location) {
+  }
+
+  mdToSectionsHTML(markdown: string) {
+    return this.splitIntoSections(markdown)
+      .map((section) => {
+        const html = this.mdToHTML(section);
+        const title = this.extractTitle(section) || this.extractFirstTwoWords(html);
+        const fragment = this.createSlag(title);
+        return {
+          source: section,
+          title: title,
+          fragment: fragment,
+          html: html,
+        };
+      });
+  }
+
+  mdToHTML(markdown: string) {
+    return marked
+      .setOptions({
+        baseUrl: this.location.prepareExternalUrl(''),
+        langPrefix: 'hljs ',
+        highlight: (code) => this.highlight.highlight(code),
+      } as any)
+      .parse(markdown.trim());
+  }
+
+  splitIntoSections(markdown: string) {
+    return markdown.split(new RegExp(this.SECTION_SPLIT, 'g'))
+      .filter(section => section.trim());
+  }
+
+  extractTitle(section: string) {
+    const titleMatch = section.trim().match(new RegExp(this.TITLE_MASK, 'i'));
+    return titleMatch ? titleMatch[1] : '';
+  }
+
+  extractFirstTwoWords(section: string) {
+    return section
+      .replace(new RegExp(this.STRIP_HTML, 'g'), '')
+      .trim()
+      .split(/\s+/g)
+      .slice(0, 2)
+      .join(' ');
+  }
+
+  createSlag(name: string) {
+    return name
+      .replace(/[^a-zA-Z0-9\s]+/g, '')
+      .replace(/\s/g, '-')
+      .toLowerCase();
+  }
+}
--- a/docs/app/@theme/services/toc-state.service.ts
+++ b/docs/app/@theme/services/toc-state.service.ts
@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+
+export interface NgxTocElement {
+  fragment: string;
+  element: any;
+  y: number;
+  setInView(val: boolean);
+}
+
+@Injectable()
+export class NgxTocStateService {
+  state: NgxTocElement[] = [];
+
+  add(el: NgxTocElement) {
+    this.state.push(el);
+  }
+
+  remove(el: NgxTocElement) {
+    this.state = this.state.filter(e => e !== el);
+  }
+
+  list(): NgxTocElement[] {
+    return this.state;
+  }
+
+  clear() {
+    this.state = [];
+  }
+}
--- a/docs/app/@theme/services/version.service.ts
+++ b/docs/app/@theme/services/version.service.ts
@ -0,0 +1,15 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class NgxVersionService {
+
+  getNgxVersion() {
+    return require('../../../../package.json').version;
+  }
+}
--- a/docs/app/@theme/styles/_helvetica-neue.scss
+++ b/docs/app/@theme/styles/_helvetica-neue.scss
@ -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.
+ */
+
+$helvetica-neue-font-path: 'assets/fonts/helvetica-neue' !default;
+
+@font-face {
+  font-family: 'Helvetica Neue Bold';
+  font-display: swap;
+  src: url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.eot');
+  src: local('Helvetica Neue Bold'), local('HelveticaNeue-Bold'),
+  url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
+  url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.woff') format('woff'),
+  url('#{$helvetica-neue-font-path}/HelveticaNeue-Bold.ttf') format('truetype');
+  font-weight: bold;
+  font-style: normal;
+}
--- a/docs/app/@theme/styles/_small-social.scss
+++ b/docs/app/@theme/styles/_small-social.scss
@ -0,0 +1,36 @@
+$small-social-font-path: '/assets/fonts/small-social' !default;
+@font-face {
+  font-family: 'small-social';
+  font-display: auto;
+  src:  url('#{$small-social-font-path}/small-social.eot?skntni');
+  src:  url('#{$small-social-font-path}/small-social.eot?skntni#iefix') format('embedded-opentype'),
+  url('#{$small-social-font-path}/small-social.ttf?skntni') format('truetype'),
+  url('#{$small-social-font-path}/small-social.woff?skntni') format('woff'),
+  url('#{$small-social-font-path}/small-social.svg?skntni#small-social') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+[class^='small-social-'], [class*=' small-social-'] {
+  font-family: 'small-social' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.small-social-facebook::before {
+  content: '\e900';
+}
+.small-social-github::before {
+  content: '\e901';
+}
+.small-social-twitter::before {
+  content: '\e902';
+}
--- a/docs/app/@theme/styles/styles.scss
+++ b/docs/app/@theme/styles/styles.scss
@ -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 'small-social';
+@import 'helvetica-neue';
+@import 'themes';
+
+@import '~@nebular/theme/styles/globals';
+@import '~@nebular/bootstrap/styles/globals';
+
+@include nb-install() {
+  @include nb-theme-global();
+  @include nb-bootstrap-global();
+};
--- a/docs/app/@theme/styles/themes.scss
+++ b/docs/app/@theme/styles/themes.scss
@ -0,0 +1,189 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+@import '~@nebular/theme/styles/theming';
+@import '~@nebular/theme/styles/themes/corporate';
+@import '~@nebular/theme/styles/themes/default';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+/*
+We have to overwrite breakpoints because we need to add *macpro* breakpoint.
+But if we add it using *map-merge* function we'll get the warning and *media-breakpoint-down* will stop working.
+*/
+$grid-breakpoints: (
+  xs: 0,
+  is: 400px,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  macpro: 1280px,
+  xxl: 1400px,
+  xxxl: 1600px
+);
+
+$nb-enabled-themes: (ngx-landing, docs-page);
+
+/* stylelint-disable */
+$nb-themes: nb-register-theme((
+  font-main: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
+
+  content-width: 1440px,
+  settings-col-width: 16rem,
+  settings-col-margin: 1.875rem,
+
+  color-primary: #3366ff,
+
+  separator: transparent,
+  color-success: #18cb90,
+  color-bg: transparent,
+  color-fg: #405571,
+  color-fg-heading: #546d8d,
+  color-fg-text: #919fb1,
+  color-fg-icon: #c4c8d1,
+  color-gray-bg: #edf0f5,
+  color-fg-heading-light: #405571,
+  color-active-fg: color-success,
+  color-active-bg: color-success,
+
+  shadow: none,
+
+  layout-bg: transparent,
+  layout-padding: 0,
+  layout-medium-padding: 0,
+  layout-small-padding: 0,
+
+  header-bg: color-bg,
+  header-padding: 0 0,
+  header-height: 4.25rem,
+  header-fg: color-fg,
+  header-menu-fg-active: color-active-fg,
+  header-section-border-color: #f5f5f5,
+
+  header-button-border: #dce4f2,
+
+  sidebar-width: 11.25rem,
+
+  menu-bg: transparent,
+  menu-item-padding: 0.675rem 1rem,
+  menu-item-fg: #8992a3,
+  menu-active-fg: color-primary,
+  menu-font-size: 0.95rem,
+  menu-font-weight: font-weight-normal,
+
+  menu-active-bg: transparent,
+
+  footer-height: 18.75rem,
+  footer-padding: 1.25rem 0,
+  footer-fg: #8992a3,
+  footer-fg-highlight: footer-fg,
+  footer-separator: transparent,
+  footer-title-fg: #0d1c2e,
+
+
+  list-icon-item-bg: #ebf1fa,
+  list-icon-item-fg: #0d1c2e,
+
+  switcher-view-bg: #d8e1f0,
+
+  checkbox-size: 1.5rem,
+  checkbox-border-color: form-control-border-color,
+  checkbox-checkmark: transparent,
+
+  checkbox-checked-bg: color-active-fg,
+  checkbox-checked-size: 1.5rem,
+  checkbox-checked-border-color: checkbox-checked-bg,
+  checkbox-checked-checkmark: color-white,
+
+  format-name-fg: #6a7385,
+
+  popover-bg: #0d1c2e,
+  popover-fg: #ffffff,
+  popover-border: #0d1c2e,
+  popover-border-radius: 0.75rem,
+  popover-arrow-size: 6px,
+
+  info-bg: #fff2f2,
+  info-fg: #ff3d71,
+
+  custiom-radius: 0.625rem,
+
+  gray-section-bg: #fafafa,
+
+  shadow-default: 0 0.5rem 1.25rem 0 rgba(218, 224, 235, 0.6),
+  shadow-btn: 0 0.375rem 2.125rem 0 rgba(184, 255, 231, 0.5),
+  shadow-hover-btn: 0 0.5rem 2rem 0 #dae0eb,
+  shadow-active-btn: 0 0.5rem 1.25rem 0 rgba(218, 224, 235, 0.6),
+  shadow-hover-green-btn: 0 0.5rem 2rem 0 rgba(0, 219, 146, 0.25),
+  shadow-active-green-btn: 0 0.375rem 2.125rem 0 rgba(0, 219, 146, 0.32),
+), ngx-landing, corporate);
+
+/* stylelint-enable foo */
+$nb-themes: nb-register-theme((
+  // custom
+  font-main: unquote('-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"'),
+
+  content-width: 1440px,
+  settings-col-width: 16rem,
+  settings-col-margin: 1.875rem,
+  color-gray-light: #ced5dd,
+  color-fg-heading-light: #405571,
+  code-block-bg: linear-gradient(225deg, #333c66 0%, #1d2447 100%),
+  color-info: #5699f0,
+  color-warning: #f09301,
+  header-menu-fg-active: color-fg-highlight,
+
+  radius: 0.25rem,
+  separator: transparent,
+  color-bg: transparent,
+  color-fg: #494949,
+  color-fg-text: #494949,
+  color-fg-heading: rgba(0, 0, 0, 0.88),
+  color-fg-icon: #cdd6e3,
+
+  shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.6),
+
+  layout-bg: #fafafa,
+  layout-padding: 3.25rem 1.25rem 3.25rem 1rem,
+  layout-medium-padding: 0,
+  layout-small-padding: 0,
+
+  header-bg: white,
+  sidebar-padding: 2rem,
+  sidebar-shadow: none,
+  color-fg-highlight: #00db92,
+  link-color:	color-fg-highlight,
+  link-color-hover: color-fg-highlight,
+  link-color-visited: color-fg-highlight,
+
+  header-height: 4.25rem,
+  header-padding: 0,
+  header-fg: black,
+
+  menu-fg: black,
+  menu-font-size: 0.95rem,
+  menu-font-weight: font-weight-normal,
+  menu-submenu-fg: color-fg-heading-light,
+  menu-active-fg: menu-fg,
+  menu-submenu-padding: 0,
+  menu-submenu-item-container-padding: 0 1rem,
+  menu-submenu-active-border-color: transparent,
+  menu-submenu-active-fg: color-fg-highlight,
+  menu-active-font-weight: bold,
+
+  card-bg: white,
+  card-header-font-size: 2rem,
+  card-header-font-weight: bold,
+  card-header-fg-heading: black,
+  card-margin: 2.5rem,
+
+  footer-height: 18.75rem,
+  footer-padding: 1.25rem 0,
+  footer-shadow: none,
+  footer-fg: color-fg-heading-light,
+  footer-menu-fg: color-fg-text,
+
+), docs-page, default);
--- a/docs/app/@theme/theme.module.ts
+++ b/docs/app/@theme/theme.module.ts
@ -0,0 +1,113 @@
+/**
+ * @license
+ * Copyright Akveo. All Rights Reserved.
+ * Licensed under the MIT License. See License.txt in the project root for license information.
+ */
+
+import { RouterModule } from '@angular/router';
+import { ModuleWithProviders, NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { LazyLoadImageModule } from 'ng-lazyload-image';
+
+// components
+import {
+  NgxLandingFooterComponent,
+  NgxSectionTitleComponent,
+  NgxFragmentTargetDirective,
+  NgxPageTocComponent,
+  NgxPageTabsComponent,
+  NgxLandingHeaderComponent,
+  NgxDocsFooterComponent,
+} from './components';
+// components
+
+// services
+import { ngxLandingServices } from './services';
+// services
+
+// pipes
+import { EvaIconsPipe } from './pipes/eva-icons.pipe';
+// pipes
+
+import {
+  NbLayoutModule,
+  NbThemeModule,
+  NbMenuModule,
+  NbCheckboxModule,
+  NbCardModule,
+  NbSidebarModule,
+  NbTabsetModule,
+} from '@nebular/theme';
+
+const BASE_MODULES = [
+  CommonModule,
+  FormsModule,
+  ReactiveFormsModule,
+  LazyLoadImageModule,
+];
+
+const NB_MODULES = [
+  NbLayoutModule,
+  NbCheckboxModule,
+  NbMenuModule,
+  NbCardModule,
+  NbSidebarModule,
+  NbTabsetModule,
+];
+
+const COMPONENTS = [
+  NgxLandingFooterComponent,
+  NgxSectionTitleComponent,
+  NgxFragmentTargetDirective,
+  NgxPageTocComponent,
+  NgxPageTabsComponent,
+  NgxLandingHeaderComponent,
+  NgxDocsFooterComponent,
+];
+
+const PIPES = [
+  EvaIconsPipe,
+];
+
+@NgModule({
+  imports: [
+    RouterModule,
+
+    ...BASE_MODULES,
+
+    ...NB_MODULES,
+  ],
+  declarations: [
+    ...COMPONENTS,
+
+    ...PIPES,
+  ],
+  exports: [
+    RouterModule,
+
+    ...BASE_MODULES,
+
+    ...NB_MODULES,
+
+    ...COMPONENTS,
+
+    ...PIPES,
+  ],
+  entryComponents: [
+  ],
+})
+export class NgxLandingThemeModule {
+  static forRoot(): ModuleWithProviders {
+    return <ModuleWithProviders>{
+      ngModule: NgxLandingThemeModule,
+      providers: [
+        ...NbThemeModule.forRoot({ name: 'ngx-landing' }).providers,
+        ...NbMenuModule.forRoot().providers,
+        ...NbSidebarModule.forRoot().providers,
+
+        ...ngxLandingServices,
+      ],
+    };
+  }
+}