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

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">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_source=ngx_admin_landing&utm_medium=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>

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;
+      }
+    }
+  }
+}

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 {
+
+}