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

docs/articles/backend-integration.md

@@ -0,0 +1,82 @@
+# Backend Integration
+
+This section describes approaches of integration of ngx-admin application with backend API. Despite we understand that every backend is really different, we think that we can cover several most commonly used ways.
+<hr>
+
+## Integration with JSON REST server
+
+Despite there's an option to do CORS requests to API server directly, we don't advise to do so. This way has disadvantages in terms of security and performance. In terms of security when you do CORS request you basically expose your API server URL to everybody. Your API server should take additional measures to make sure some URLs are not accessible, because it is exposed to the web. As for performance, CORS requests require to send preflight OPTIONS request before each HTTP request. This adds additional HTTP overhead.
+
+The solution we suggest is to use proxy for your API server. In this case you can make your app accessible through some sub-url. For example, if your application's hosted under url `website.com` and your index file is located at `website.com/index.html`, you can make your API root accessible on `website.com/api`. This is well supported by angular-cli/webpack-dev-server for development setup and by web servers for production setup. Let's review these setups:
+<hr>
+
+## angular-cli/webpack-dev-server setup
+
+There's not so much needs to be done to proxy your api using angular-cli. You can read detailed documentation in <a href="https://github.com/angular/angular-cli/blob/masterdocs/documentation/stories/proxy.md" target="_blank">their docs</a>.
+But the most important topics are:
+
+You should create `proxy.conf.json` file in your application root. The file should contain something like below:
+```json
+{
+  "/api": {
+    "target": "http://localhost:3000",
+    "secure": false
+  }
+}
+```
+
+In this case you should put URL of your API server instead of `http://localhost:3000`.
+
+After that you need to run your angular-cli application using following command 
+```bash
+ng serve --proxy-config proxy.conf.json
+```
+That's it. Now you can access `/api` URL from your ngx-admin application and your requests will be forwarded to your API server.
+<hr>
+
+## Production setup
+
+Production setup is not much different from development setup. The only difference is that usually you don't use there angular-cli or webpack-dev-server to host your HTML/CSS/JS. Usually we all use some web server for that. At Akveo we mostly use [nginx](https://nginx.org/en/) for this use case. Below there is a sample configuration for this particular web server. For others it is not that much different.
+
+Usually you create new virtual host with some similar configuration:
+
+```nginx
+server {
+  listen 80;
+  server_name website.com;
+
+  root /yourAngularAppDistPath;
+  index index.html index.htm;
+  etag on;
+
+  location / {
+    index index.html;
+    try_files $uri /index.html;
+  }
+}
+```
+
+The only thing you need to add is proxy-pass to `/api` URL like below:
+
+```nginx
+server {
+  listen 80;
+  server_name website.com;
+
+  root /yourAngularAppDistPath;
+  index index.html index.htm;
+  etag on;
+
+  location / {
+    index index.html;
+    try_files $uri /index.html;
+  }
+
+  location /api {
+    proxy_pass http://localhost:3000/;
+    proxy_set_header Host $host;
+  }
+}
+```
+
+That's it. Now your API server works on production as well.

docs/articles/concept-theme-system.md

@@ -0,0 +1,124 @@
+# Theme System
+
+<a href="https://akveo.github.io/nebular/?utm_source=ngx_admin_landing&utm_medium=docs_theme_system" target="_blank">Nebular</a> Theme System is a set of rules we put into how SCSS files and variables are organized to achieve the following goals:
+
+- ability to flexibly change looks & feel of the application by managing variables, without changing SCSS itself;
+- ability to switch between visual themes in a runtime without reloading the page;
+- support of CSS-variables (implemented partially).
+<hr>
+
+## Theme Map
+
+Each theme is represented as an SCSS map with a list of key-value pairs:
+
+```scss
+$theme: (
+  font-main: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'),
+  font-secondary: font-main,
+
+  font-weight-thin: 200,
+  font-weight-light: 300,
+  font-weight-normal: 400,
+  font-weight-bolder: 500,
+  font-weight-bold: 600,
+  font-weight-ultra-bold: 800,
+
+  base-font-size: 16px,
+
+  font-size-xlg: 1.25rem,
+  font-size-lg: 1.125rem,
+  font-size: 1rem,
+  font-size-sm: 0.875rem,
+  font-size-xs: 0.75rem,
+
+  radius: 0.375rem,
+  padding: 1.25rem,
+  margin: 1.5rem,
+  line-height: 1.25,
+  
+  ...
+```
+Where _key_ - is a variable name, and _value_ - is a raw SCSS value (color, string, etc) or **parent variable name**, so that you can inherit values from different variables:
+
+```scss
+$theme: (
+  font-main: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'),
+  font-secondary: font-main,
+```
+Here `font-secondary` inherits its value from `font-main`.
+<hr>
+
+## Component Variables
+
+Then, for each component of the Nebular Components, there is a list of variables you can change.
+For example - header component variables:
+
+```scss
+  ...
+  
+  header-font-family: font-secondary,
+  header-font-size: font-size,
+  header-line-height: line-height,
+  header-fg: color-fg-heading,
+  header-bg: color-bg,
+  header-height: 4.75rem,
+  header-padding: 1.25rem,
+  header-shadow: shadow,
+  
+  ...
+```
+As you can see, you have 8 variables for a pretty simple component and from the other side, 6 of them are inherited from the default values.
+It means that if you want to create a new theme with a united look & feel of the components - in most cases you would need to change around 10 generic variables, such as `color-bg`, `shadow`, etc. 
+to change the UI completely.
+
+List of component style variables is specified in the component documentation, for example [styles for header component](docs/components/layout/theme#nblayoutheadercomponent).
+<hr>
+
+## Variables Usage
+
+Now, if you want to use the variables in your custom style files, all you need to do (of course, after the [successful setup of the Theme System](docs/guides/enable-theme-system) is to call `nb-theme(var-name)` function:
+
+```scss
+@import '../../../@theme/styles/themes';
+
+:host {
+
+  background: nb-theme(card-bg); // and use it
+}
+```
+Depending on the currently enabled theme and the way `card-bg` inherited in your theme, you will get the right color.
+<hr>
+
+## Built-in themes
+
+Currently, there are 3 built-in themes: 
+- `default` - clean white theme
+- `cosmic` - dark theme
+- `corporate` - firm business theme
+
+Themes can also be inherited from each other, `cosmic`, for instance, is inherited from the `default` theme.
+<hr>
+
+## Magic of multiple themes with hot-reload
+
+As you can see from the [ngx-admin demo](http://akveo.com/ngx-admin?utm_source=nebular_documentation&utm_medium=doc_page), you can switch themes in the runtime without reloading the page.
+It is useful when you have multiple visual themes per user role or want to provide your user with such a configuration so that he can decide which theme works best for him.
+The only requirement for the feature to work is to wrap all of your component styles into special mixin `nb-install-component` and use `nb-theme` to get the right value:
+
+```scss
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  background: nb-theme(card-bg); // now, for each theme registered the corresponding value will be inserted
+  
+  .container {
+    background: nb-theme(color-bg);
+    font-weight: nb-theme(font-weight-bold);
+  }
+}
+```
+<hr>
+
+## Related Articles
+
+- [Change Theme](docs/guides/change-theme)

docs/articles/index.md

@@ -0,0 +1,50 @@
+# What is ngx-admin?
+
+ngx-admin is a front-end admin dashboard template based on Angular 7+, Bootstrap 4+ and <a href="https://akveo.github.io/nebular/?utm_source=ngx_admin_landing&utm_medium=docs_getting_started" target="_blank">Nebular</a>. That means all the data you can see on graphs, charts and tables is mocked in Javascript so you can use the backend of your choice with no limitations.
+<hr>
+
+## How can it help me?
+
+We believe that at the moment a lot of business applications have administration/management interfaces inside of them. Sometimes it’s not that obvious, but a lot of web applications have dashboards with panels, charts analytics, etc.
+
+
+ngx-admin aims to bootstrap the development of your product and provide an ecosystem for building production-ready application or prototypes.
+
+Frameworks like Bootstrap provide a number of components, but usually it’s not enough to build a real-world app. This template comes with lots of popular UI components with a unified color scheme, plus it is based on a modern Angular framework and has a flexible component based structure.
+
+You can also use ngx-admin for the purpose of learning Angular.
+<hr>
+
+## List of features
+
+- Angular 7+ & Typescript
+- Bootstrap 4+ & SCSS
+- Responsive layout
+- RTL support
+- High resolution
+- Flexibly configurable themes with **hot-reload** (3 themes included)
+- Authentication module with multiple providers
+- Lots of awesome features:
+  - Buttons
+  - Modals
+  - Popovers
+  - Icons
+  - Typography
+  - Animated searches
+  - Forms
+  - Tabs
+  - Notifications
+  - Tables
+  - Maps
+  - Charts
+  - Editors
+  
+And many more!
+<hr>
+
+## Assumptions
+
+This documentation assumes that you are already familiar with JavaScript/TypeScript, Angular, CSS and Bootstrap.
+
+## Have questions?
+Didn't find something here? Look through the <a href="https://github.com/akveo/ngx-admin/issues" target="_blank">issues</a> or simply drop us a line at <a href="mailto:contact@akveo.com">contact@akveo.com</a>.

docs/articles/install-starter-kit.md

@@ -0,0 +1,63 @@
+# Install ngx-admin
+
+Please note, that **ngx-admin** is just a frontend application. Backend integration can be done relatively simple, but you should be aware that all the data is mocked using JavaScript objects. 
+If you want the data to be dynamic, you should consider developing a backend integration by your own. 
+The Nebular team doesn't consider providing generic integration layer as a part of this project because every backend API has a different structure in terms of data format and URLs.
+<hr>
+
+## Install tools
+
+To install ngx-admin on your machine you need to have the following tools installed:
+- Git - <a href="https://git-scm.com" target="_blank">https://git-scm.com</a>
+- Node.js - <a href="https://nodejs.org" target="_blank">https://nodejs.org</a>. Please note the **version** should be **>=8**
+- Npm - Node.js package manager, comes with Node.js. Please make sure npm **version** is **>=5**
+- You might also need some specific native packages depending on your operating system like `build-essential` on Ubuntu
+
+<div class="note note-warning">
+  <div class="note-title">Warning!</div>
+  <div class="note-body">
+    Please note that **it is not possible** to build ngx-admin **without these tools** and it will not be possible because of the way how Angular is built.
+  </div>
+</div>
+<hr>
+
+## Download the code
+
+When you completed tools setup, you need to download the code of ngx-admin application. The easiest way to do that is to clone GitHub repository:
+```bash
+git clone https://github.com/akveo/ngx-admin.git
+```
+
+After clone is completed, you need to install npm modules:
+```bash
+cd ngx-admin && npm i
+```
+<div class="note note-warning">
+  <div class="note-title">Warning!</div>
+  <div class="note-body">
+    Please make sure that installation process successfully completed without errors.
+  </div>
+</div>
+<hr>
+
+## Run local copy
+
+To run a local copy in development mode, execute:
+
+```bash
+npm start
+```
+
+Go to <a href="http://0.0.0.0:4200" target="_blank">http://0.0.0.0:4200</a> or <a href="http://localhost:4200" target="_blank">http://localhost:4200</a> in your browser.
+<hr>
+
+## Production bundle
+
+To create a bundle in production mode, execute:
+
+```bash
+npm run build:prod
+```
+
+This will clear up your `dist` folder (where release files are located) and generate a release build.
+Now you can copy the sources from the `dist` folder and use it with any backend framework or simply [put it under a web server](docs/getting-started/server-deployment).

docs/articles/server-deployment.md

@@ -0,0 +1,11 @@
+# Server Deployment
+
+Though in the development Nebular app consists of a number of TypeScript, SASS, etc files, the built package is just a bunch HTML/JavaScript/CSS files.
+No other processing is needed to get them running in a browser.
+So to deploy the app you basically need two simple steps:
+
+- Build your app with `npm run build:prod`
+- Copy the output from the `dist` folder under a web-server of your choice.
+
+More details on how to setup your web-server to better serve the application can be found on Angular Documentation website, under <a href="https://angular.io/guide/deployment#server-configuration" target="_blank">Server Configuration</a> section.
+<hr>

docs/articles/start.md

@@ -0,0 +1,17 @@
+# Where to start?
+
+Nebular is a set of modules for <a href="https://angular.io/" target="_blank">Angular</a>. Despite it is not required to know Angular framework to set up your first Nebular project, it is highly recommended to go through the Angular tutorial beforehand and be familiar with basic Angular concepts.
+<hr>
+
+## Quickstart tutorials
+
+Based on a current setup of your project and your goals, there are two starting points:
+
+- **[Starting based on our Nebular Admin starter kit](docs/guides/install-based-on-starter-kit)** Consider this tutorial if you are building admin or any other back-office application and you need a template as a good starting kit.
+- **[Adding into existing Angular Project](docs/guides/add-into-existing-project)** This tutorial explains how to use Nebular if you already have some Angular code as starting app from scratch.
+
+Please consider creating an issue on GitHub if your use case is not described above. But we kindly ask to always look through the documentation and the list of existing issues first.
+  
+## I'm new to Angular or web development in general
+
+Quite often we receive emails and messages from people who ask us for the advice we can give them if they are completely new to software engineering and/or Angular in particular. Well, we can't say that there's some general way, unfortunately. Each advice should be aimed at a particular person, his current skills set and goals. That's why we believe that each person knows better for himself. But in any case, there are multiple resources like https://www.coursera.org/ or https://egghead.io/ which focus on providing online education. 

docs/articles/theme-change.md

@@ -0,0 +1,54 @@
+# Change Current Theme
+
+Nebular Theme System provides 3 color schemes out of the box - `default`, `corporate` and `cosmic`. It is both possible to change the theme statically and dynamically during the runtime.
+
+
+## Switch from Cosmic to Default
+It is extremely simple to replace a theme from one to another.
+All you need to do is to find your `NbThemeModule.forRoot` declaration and change a value of the `name` setting:
+
+```ts
+  @NgModule({
+    imports: [
+      // ...
+      NbThemeModule.forRoot({ name: 'default' }),
+    ],
+  }
+```
+<hr>
+
+## Runtime Theme Switch
+In case you want to have a better control when a theme is changed, or for instance need to change it based on a user role,
+it is possible to dynamically tell Nebular which theme should be enabled. 
+`NbThemeService` is our friend in this case and particularly the `changeTheme` method:
+
+```ts
+
+  // ...
+  constructor(private themeService: NbThemeService) {
+    this.themeService.changeTheme('corporate');
+  }
+
+```
+<hr>
+
+## Listen to Theme Change
+And of course it is possible to subscribe to an event when the current theme gets changed so that you can adjust something in your code accordingly:
+
+```ts
+
+  // ...
+  constructor(private themeService: NbThemeService) {
+  
+    this.themeService.onThemeChange()
+          .subscribe((theme: any) => {
+            console.log(`Theme changed to ${theme.name}`);
+          });
+  }
+
+```
+<hr>
+
+## Related Articles
+
+- [Theme System](docs/guides/theme-system)