From cc937192d79597fc577eb2d2999d111062289b55 Mon Sep 17 00:00:00 2001
From: Sergey Filinsky <s.filinsky@akveo.com>
Date: Wed, 16 Sep 2020 22:18:58 +0300
Subject: [PATCH] feat(demo): added backend integration descriptions

---
 .../backend-integration-routing.module.ts     |  56 +++++++++
 .../backend-integration.component.scss        |  53 +++++++++
 .../backend-integration.component.ts          |  16 +++
 .../backend-integration.module.ts             |  41 +++++++
 ...-core-integration-description.component.ts |  31 +++++
 ...t-net-integration-description.component.ts |  29 +++++
 ...merce-integration-description.component.ts |  22 ++++
 .../iot-integration-description.component.ts  |  22 ++++
 .../java-integration-description.component.ts |  31 +++++
 ...de-js-integration-description.component.ts |  31 +++++
 .../php-integration-description.component.ts  |  29 +++++
 ...ython-integration-description.component.ts |  28 +++++
 ...backend-integration-diagram.component.html |  81 +++++++++++++
 ...backend-integration-diagram.component.scss | 108 ++++++++++++++++++
 .../backend-integration-diagram.component.ts  |  15 +++
 .../integration-description.component.scss    |  34 ++++++
 .../integration-description.component.ts      |  32 ++++++
 src/app/pages/pages-menu.ts                   |  16 +--
 src/app/pages/pages-routing.module.ts         |   5 +
 19 files changed, 672 insertions(+), 8 deletions(-)
 create mode 100644 src/app/pages/backend-integration/backend-integration-routing.module.ts
 create mode 100644 src/app/pages/backend-integration/backend-integration.component.scss
 create mode 100644 src/app/pages/backend-integration/backend-integration.component.ts
 create mode 100644 src/app/pages/backend-integration/backend-integration.module.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/java-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/php-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/descriptions/python-integration-description.component.ts
 create mode 100644 src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html
 create mode 100644 src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss
 create mode 100644 src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
 create mode 100644 src/app/pages/backend-integration/integration-description/integration-description.component.scss
 create mode 100644 src/app/pages/backend-integration/integration-description/integration-description.component.ts

diff --git a/src/app/pages/backend-integration/backend-integration-routing.module.ts b/src/app/pages/backend-integration/backend-integration-routing.module.ts
new file mode 100644
index 00000000..6e97fe77
--- /dev/null
+++ b/src/app/pages/backend-integration/backend-integration-routing.module.ts
@@ -0,0 +1,56 @@
+import {RouterModule, Routes} from '@angular/router';
+import {NgModule} from '@angular/core';
+import {BackendIntegrationComponent} from './backend-integration.component';
+import {PhpIntegrationDescriptionComponent} from './descriptions/php-integration-description.component';
+import {DotNetIntegrationDescriptionComponent} from './descriptions/dot-net-integration-description.component';
+import {DotNetCoreIntegrationDescriptionComponent} from './descriptions/dot-net-core-integration-description.component';
+import {NodeJsIntegrationDescriptionComponent} from './descriptions/node-js-integration-description.component';
+import {JavaIntegrationDescriptionComponent} from './descriptions/java-integration-description.component';
+import {PythonIntegrationDescriptionComponent} from './descriptions/python-integration-description.component';
+import {EcommerceIntegrationDescriptionComponent} from './descriptions/ecommerce-integration-description.component';
+import {IotIntegrationDescriptionComponent} from './descriptions/iot-integration-description.component';
+
+const routes: Routes = [{
+  path: '',
+  component: BackendIntegrationComponent,
+  children: [
+    {
+      path: 'php',
+      component: PhpIntegrationDescriptionComponent,
+    },
+    {
+      path: 'dot-net',
+      component: DotNetIntegrationDescriptionComponent,
+    },
+    {
+      path: 'dot-net-core',
+      component: DotNetCoreIntegrationDescriptionComponent,
+    },
+    {
+      path: 'node-js',
+      component: NodeJsIntegrationDescriptionComponent,
+    },
+    {
+      path: 'java',
+      component: JavaIntegrationDescriptionComponent,
+    },
+    {
+      path: 'python',
+      component: PythonIntegrationDescriptionComponent,
+    },
+    {
+      path: 'ecommerce',
+      component: EcommerceIntegrationDescriptionComponent,
+    },
+    {
+      path: 'iot',
+      component: IotIntegrationDescriptionComponent,
+    },
+  ],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class BackendIntegrationRoutingModule { }
diff --git a/src/app/pages/backend-integration/backend-integration.component.scss b/src/app/pages/backend-integration/backend-integration.component.scss
new file mode 100644
index 00000000..dc020830
--- /dev/null
+++ b/src/app/pages/backend-integration/backend-integration.component.scss
@@ -0,0 +1,53 @@
+@import '../../@theme/styles/themes';
+
+:host {
+  display: flex !important;
+  flex-direction: row;
+  justify-content: stretch;
+  align-items: stretch;
+  height: 100%;
+}
+
+.description-container, .diagram-container {
+  display: flex;
+}
+
+.diagram-container {
+  flex: 2 1 auto;
+  align-items: center;
+  min-width: 35rem;
+}
+
+.description-container {
+  flex: 1 1 auto;
+  max-width: 45rem;
+  align-items: stretch;
+  height: 100%;
+
+  & > *:not(router-outlet) {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+@media (max-width : 991px) {
+  :host {
+    flex-direction: column;
+    justify-content: flex-start;
+    height: fit-content;
+
+    .diagram-container {
+      width: 100%;
+      max-width: none;
+      height: fit-content;
+      margin: 0 auto;
+
+      ngx-backend-integration-diagram {
+        font-size: 2vw;
+        height: 60vw;
+        padding-top: 0;
+      }
+    }
+  }
+}
+
diff --git a/src/app/pages/backend-integration/backend-integration.component.ts b/src/app/pages/backend-integration/backend-integration.component.ts
new file mode 100644
index 00000000..34f282c4
--- /dev/null
+++ b/src/app/pages/backend-integration/backend-integration.component.ts
@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngx-backend-integration',
+  template: `
+    <div class="diagram-container">
+      <ngx-backend-integration-diagram></ngx-backend-integration-diagram>
+    </div>
+    <div class="description-container">
+      <router-outlet></router-outlet>
+    </div>
+  `,
+  styleUrls: ['./backend-integration.component.scss'],
+})
+export class BackendIntegrationComponent {
+}
diff --git a/src/app/pages/backend-integration/backend-integration.module.ts b/src/app/pages/backend-integration/backend-integration.module.ts
new file mode 100644
index 00000000..783185a8
--- /dev/null
+++ b/src/app/pages/backend-integration/backend-integration.module.ts
@@ -0,0 +1,41 @@
+import {ThemeModule} from '../../@theme/theme.module';
+import {NgModule} from '@angular/core';
+import {BackendIntegrationDiagramComponent} from './diagram/backend-integration-diagram.component';
+import {BackendIntegrationComponent} from './backend-integration.component';
+import {RouterModule} from '@angular/router';
+import {NbButtonModule, NbCardModule, NbIconModule} from '@nebular/theme';
+import {BackendIntegrationRoutingModule} from './backend-integration-routing.module';
+import {IntegrationDescriptionComponent} from './integration-description/integration-description.component';
+import {PhpIntegrationDescriptionComponent} from './descriptions/php-integration-description.component';
+import {DotNetIntegrationDescriptionComponent} from './descriptions/dot-net-integration-description.component';
+import {DotNetCoreIntegrationDescriptionComponent} from './descriptions/dot-net-core-integration-description.component';
+import {NodeJsIntegrationDescriptionComponent} from './descriptions/node-js-integration-description.component';
+import { JavaIntegrationDescriptionComponent } from './descriptions/java-integration-description.component';
+import { PythonIntegrationDescriptionComponent } from './descriptions/python-integration-description.component';
+import { EcommerceIntegrationDescriptionComponent } from './descriptions/ecommerce-integration-description.component';
+import { IotIntegrationDescriptionComponent } from './descriptions/iot-integration-description.component';
+
+@NgModule({
+  imports: [
+    ThemeModule,
+    RouterModule,
+    NbCardModule,
+    BackendIntegrationRoutingModule,
+    NbIconModule,
+    NbButtonModule,
+  ],
+  declarations: [
+    BackendIntegrationComponent,
+    BackendIntegrationDiagramComponent,
+    PhpIntegrationDescriptionComponent,
+    DotNetIntegrationDescriptionComponent,
+    DotNetCoreIntegrationDescriptionComponent,
+    NodeJsIntegrationDescriptionComponent,
+    JavaIntegrationDescriptionComponent,
+    PythonIntegrationDescriptionComponent,
+    EcommerceIntegrationDescriptionComponent,
+    IotIntegrationDescriptionComponent,
+    IntegrationDescriptionComponent,
+  ],
+})
+export class BackendIntegrationModule { }
diff --git a/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts
new file mode 100644
index 00000000..1159df65
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/dot-net-core-integration-description.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-dot-net-core-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class DotNetCoreIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/net-core-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnetcore';
+
+  features: string[] = [
+    'Backend layered architecture, authentication, solution structure',
+    'Ngx-admin template with 100+ UI components',
+    'Authentication using JWT tokens is implemented and integrated into both client and server side',
+    'Basic role management and ACL is in place',
+    'Data entities classes, independent of any ORM',
+    'Dependency injection takes care of services and repositories instantiation',
+    'Swagger included for automatic API testing and documentation',
+    'Serilog is used for logging',
+    'OWIN startup is configured',
+    'Documentation is included',
+    '3 months free updates',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts
new file mode 100644
index 00000000..e04a974c
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/dot-net-integration-description.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-dot-net-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class DotNetIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/net-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnet';
+
+  features: string[] = [
+    'Backend layered architecture, authentication, solution structure',
+    'Ngx-admin angular UI with 100+ UI components to use',
+    'Authentication using JWT tokens is implemented and integrated with both client and server side',
+    'Basic role management and ACL is in place',
+    'Swagger included for automatic API testing and documentation',
+    'Serilog is used for logging',
+    'OWIN startup is configured',
+    'Documentation is included',
+    '3 months free updates',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts
new file mode 100644
index 00000000..e16a710d
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/ecommerce-integration-description.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-e-commerce-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class EcommerceIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/e-commerce-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_e-commerce';
+
+  features: string[] = [
+    'E-commerce dashboard components integrated with backend',
+    'Sample order table and order details page integrated with backend',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts
new file mode 100644
index 00000000..a5534773
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/iot-integration-description.component.ts
@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-iot-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class IotIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/iot-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_iot';
+
+  features: string[] = [
+    'IOT dashboard components integrated with backend',
+    'Sample devices table and device details page integrated with backend',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts
new file mode 100644
index 00000000..66bd1f21
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/java-integration-description.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-java-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class JavaIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/java-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_java';
+
+  features: string[] = [
+    'Ngx-admin template with 100+ UI components',
+    'Spring Boot as the main framework for backend',
+    'Maven as building tool',
+    'Can be used with a range of SQL databases. In-Memory database H2 by default',
+    'Authentication using Json Web Tokens is implemented and integrated with both client and server side',
+    'Refresh Token functionality is available out of the box',
+    `TSLint as part of Angular project settings, it simply wouldn't let you push typescript code with errors`,
+    'Backend has Checkstyle setup and findbugs plugin for static code analysis',
+    'Swagger for API documentation purpose',
+    'Documentation is included',
+    '3 months free updates',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts
new file mode 100644
index 00000000..b4a3cd10
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/node-js-integration-description.component.ts
@@ -0,0 +1,31 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-node-js-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class NodeJsIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/nodejs-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_nodejs';
+
+  features: string[] = [
+    'MongoDB for user data storage',
+    'Express server',
+    'Authentication using Passport and JWT tokens is implemented and integrated with both client and server side',
+    'Eslint for code quality on the backend side',
+    'Winston is used for logging',
+    'Node-config is used for API settings',
+    'Nodemon is used for better development experience',
+    'Documentation is included',
+    'Basic role management and ACL is in place',
+    'Swagger included for automatic API testing and documentation',
+    '3 months free updates',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts
new file mode 100644
index 00000000..3259d777
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/php-integration-description.component.ts
@@ -0,0 +1,29 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-php-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class PhpIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/products/material-php-starter-bundle?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin%20&utm_medium=referral%20&utm_content=sidebar_link_php';
+
+  features: string[] = [
+    'Ngx-admin template with 100+ UI Nebular and Eva design components',
+    'Authentication using JWT tokens is implemented and integrated into both client and server-side',
+    'Basic role management and ACL is in place, AUTH, reset the password',
+    'Backend solution layered architecture and projects segregation',
+    'Swagger included for automatic API testing and documentation',
+    'Documentation is included',
+    'Docker and docker-compose configuration included',
+    'MySQL database',
+    '3 months free updates',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts b/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts
new file mode 100644
index 00000000..010388c5
--- /dev/null
+++ b/src/app/pages/backend-integration/descriptions/python-integration-description.component.ts
@@ -0,0 +1,28 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-python-integration-description',
+  template: `
+    <ngx-integration-description [features]="features"
+                                 [url]="url"
+                                 [buttonText]="buttonText"
+    ></ngx-integration-description>
+  `,
+})
+export class PythonIntegrationDescriptionComponent {
+
+  buttonText: string = 'Get Backend From 49$';
+  url = 'https://store.akveo.com/collections/python-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_python';
+
+  features: string[] = [
+    'ngx-admin template with 100+ UI components',
+    'Python backend with Flask micro-framework',
+    'Any SQL database can be used (PostgreSQL, MySQL, Oracle, Microsoft SQL Server, and SQLite)',
+    'SQLAlchemy as database toolkit for CRUD operations',
+    'Authentication using JWT tokens is implemented and integrated with both client and server side',
+    'Compression is set up for better performance',
+    'Documentation is included',
+    '3 months free updates',
+  ];
+
+}
diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html
new file mode 100644
index 00000000..1e5fd39e
--- /dev/null
+++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.html
@@ -0,0 +1,81 @@
+<div class='flex-column justify-content-center'>
+  <div class='flex-row justify-content-center header mt-auto mb-1'> What is admin dashboard with backend</div>
+  <div class='flex-row justify-content-center subheader'> You pay for backend connection (UI) + backend</div>
+  <div class='flex-row align-items-start justify-content-around mt-4 mb-auto'>
+    <div class='dashboard-container h-100 flex-column ml-3 mr-3'>
+      <div class='headers-container flex-column'>
+        <div class='header'> NGX-admin dashboard</div>
+        <div class='subheader'> Open source part + backend connection</div>
+      </div>
+      <div class='dashboard-content border-dashed pad1 flex-column justify-content-center'>
+        <div class='item mb-3'>
+          <div class='header'> REST Data Access</div>
+        </div>
+        <div class='flex-column border-dashed mb-3 p-3'>
+          <div class='item mb-3'>
+            <div class='header'> Nebular Components</div>
+          </div>
+          <div class='flex-row w-100'>
+            <div class='item flex-grow-1 mr-2'>
+              <div class='header'> Auth</div>
+            </div>
+            <div class='item flex-grow-1'>
+              <div class='header'> Security</div>
+            </div>
+          </div>
+        </div>
+        <div class='item mb-3'>
+          <div class='header'> Angular</div>
+        </div>
+      </div>
+    </div>
+    <div class='json-container mt-auto mb-auto header2 align-items-center'>
+      <nb-icon icon='arrow-back-outline'></nb-icon>
+      <div>JSON</div>
+      <nb-icon icon='arrow-forward-outline'></nb-icon>
+    </div>
+    <div class='backend-container h-100 flex-column ml-3 mr-3'>
+      <div class='headers-container flex-column'>
+        <div class='header justify-content-center'> Backend</div>
+      </div>
+      <div class='backend-content border-dashed pad1 flex-column justify-content-center'>
+        <div class='flex-column border-dashed mb-3 p-3'>
+          <div class='item mb-3'>
+            <div class='header'> Web API</div>
+            <div class='subheader'> Backend Interface</div>
+          </div>
+          <div class='item mb-3'>
+            <div class='header'> Service</div>
+            <div class='subheader'> Data organization Business logic</div>
+          </div>
+          <div class='item'>
+            <div class='header'> Security</div>
+            <div class='subheader'> Authentication, Authorization</div>
+          </div>
+        </div>
+        <div class='flex-row w-100'>
+          <div class='flex-column flex-grow-1 mr-3'>
+            <div class='item mb-3'>
+              <div class='header'> Repository</div>
+              <div class='subheader'> Data access</div>
+            </div>
+            <div class='item'>
+              <div class='header'> Entity Framework</div>
+              <div class='subheader'> Data transformation</div>
+            </div>
+          </div>
+          <div class='item h-100 flex-grow-1 mr-3'>
+            <div class='item'>
+              <div class='header'> Data Base</div>
+              <div class='subheader'>
+                <div>Data of product</div>
+                <div>+</div>
+                <div>Backend data (examples)</div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss
new file mode 100644
index 00000000..28a285d7
--- /dev/null
+++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.scss
@@ -0,0 +1,108 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  width: 100%;
+  height: 0;
+  position: relative;
+  padding-top: 80%; /* Aspect Ratio */
+  //background-color: transparentize(red, 0.8);
+  font-size: 0.9vw;
+
+  $subheader-color: nb-theme(text-hint-color);
+
+  .header, .subheader {
+    justify-content: center;
+  }
+
+  & > div {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    margin-bottom: 0;
+
+    & > .header {
+      font-size: 1.25em;
+      font-weight: bold;
+    }
+
+    & > .subheader {
+      font-size: 0.9em;
+      color: $subheader-color;
+    }
+  }
+
+  div {
+    display: flex;
+    text-align: center;
+  }
+
+  .json-container {
+    font-weight: bold;
+    div {
+      margin: 0 1em;
+    }
+  }
+
+  .headers-container {
+    height: 2.5rem;
+
+    & > .header {
+      font-size: 0.9em;
+      height: 0.9rem;
+      font-weight: bold;
+    }
+    & > .subheader {
+      font-size: 0.7em;
+      height: 0.7rem;
+      color: $subheader-color;
+    }
+  }
+
+  .dashboard-container {
+    width: 40%;
+  }
+
+  .json-container {
+    width: fit-content;
+
+    nb-icon {
+      width: 0.75em;
+      height: 0.75em;
+    }
+  }
+
+  .backend-container {
+    width: 40%;
+  }
+
+  .border-dashed {
+    border: 2px dashed nb-theme(border-basic-color-4);
+  }
+
+  .pad1 {
+    background-color: transparentize(nb-theme(background-basic-color-2), 0.5);
+    padding: 1em;
+    height: 100%;
+  }
+
+  .item {
+    background-color: nb-theme(background-basic-color-1);
+    justify-content: center;
+    padding: 0.5em 0;
+    flex-direction: column;
+    & > .header {
+      font-size: 0.7em;
+      font-weight: bold;
+      line-height: 1.1em;
+    }
+    & > .subheader {
+      font-size: 0.6em;
+      color: $subheader-color;
+      line-height: 1em;
+      flex-direction: column;
+      align-items: center;
+    }
+  }
+}
diff --git a/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
new file mode 100644
index 00000000..83249f5d
--- /dev/null
+++ b/src/app/pages/backend-integration/diagram/backend-integration-diagram.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'ngx-backend-integration-diagram',
+  templateUrl: './backend-integration-diagram.component.html',
+  styleUrls: ['./backend-integration-diagram.component.scss'],
+})
+export class BackendIntegrationDiagramComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}
diff --git a/src/app/pages/backend-integration/integration-description/integration-description.component.scss b/src/app/pages/backend-integration/integration-description/integration-description.component.scss
new file mode 100644
index 00000000..271ba5ea
--- /dev/null
+++ b/src/app/pages/backend-integration/integration-description/integration-description.component.scss
@@ -0,0 +1,34 @@
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+  background-color: nb-theme(background-basic-color-1);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 1rem 2rem;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+
+  .header, .header2 {
+    font-weight: bold;
+    font-size: 1.25rem;
+    margin-bottom: 1rem;
+  }
+
+  .subheader {
+    font-size: 1rem;
+    line-height: 1.5rem;
+    margin-bottom: 5rem;
+  }
+
+  .features-list {
+    list-style-type: none;
+    padding-left: 0;
+  }
+
+  a {
+    width: fit-content;
+    margin-top: 2rem;
+  }
+}
diff --git a/src/app/pages/backend-integration/integration-description/integration-description.component.ts b/src/app/pages/backend-integration/integration-description/integration-description.component.ts
new file mode 100644
index 00000000..d22f06cc
--- /dev/null
+++ b/src/app/pages/backend-integration/integration-description/integration-description.component.ts
@@ -0,0 +1,32 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'ngx-integration-description[features][url][buttonText]',
+  template: `
+    <div class='header'> For why do you need a backend admin dashboard?</div>
+    <div class='subheader'> To save up to 300 hours on development. To use backend as ready to use examples. </div>
+    <div class='header2'> Features </div>
+    <ul class='features-list'>
+      <li *ngFor='let feature of features'
+           class='feature'
+      >
+        - {{ feature }}
+      </li>
+    </ul>
+    <a nbButton
+       [href]='url'
+       status="primary"
+       target="_blank"
+    > {{buttonText}} </a>
+  `,
+  styleUrls: ['./integration-description.component.scss'],
+})
+export class IntegrationDescriptionComponent {
+
+  @Input() features: string[];
+  @Input() url: string;
+  @Input() buttonText: string;
+
+  constructor() { }
+
+}
diff --git a/src/app/pages/pages-menu.ts b/src/app/pages/pages-menu.ts
index 370a2953..02b5635c 100644
--- a/src/app/pages/pages-menu.ts
+++ b/src/app/pages/pages-menu.ts
@@ -18,35 +18,35 @@ export const MENU_ITEMS: NbMenuItem[] = [
     children: [
       {
         title: 'PHP',
-        url: 'https://store.akveo.com/products/material-php-starter-bundle?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin%20&utm_medium=referral%20&utm_content=sidebar_link_php',
+        link: '/pages/backend-integration/php',
       },
       {
         title: '.NET',
-        url: 'https://store.akveo.com/collections/net-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnet',
+        link: '/pages/backend-integration/dot-net',
       },
       {
         title: '.NET Core',
-        url: 'https://store.akveo.com/collections/net-core-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_dotnetcore',
+        link: '/pages/backend-integration/dot-net-core',
       },
       {
         title: 'Node JS',
-        url: 'https://store.akveo.com/collections/nodejs-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_nodejs',
+        link: '/pages/backend-integration/node-js',
       },
       {
         title: 'Java',
-        url: 'https://store.akveo.com/collections/java-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_java',
+        link: '/pages/backend-integration/java',
       },
       {
         title: 'Python',
-        url: 'https://store.akveo.com/collections/python-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_python',
+        link: '/pages/backend-integration/python',
       },
       {
         title: 'E-commerce',
-        url: 'https://store.akveo.com/collections/e-commerce-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_e-commerce',
+        link: '/pages/backend-integration/ecommerce',
       },
       {
         title: 'IoT',
-        url: 'https://store.akveo.com/collections/iot-bundles?utm_campaign=akveo_store%20-%20all%20bundles%20-%20ngx_admin_demo&utm_source=ngx_admin&utm_medium=referral&utm_content=sidebar_link_iot',
+        link: '/pages/backend-integration/iot',
       },
     ],
   },
diff --git a/src/app/pages/pages-routing.module.ts b/src/app/pages/pages-routing.module.ts
index 376cc4fa..990c630b 100644
--- a/src/app/pages/pages-routing.module.ts
+++ b/src/app/pages/pages-routing.module.ts
@@ -18,6 +18,11 @@ const routes: Routes = [{
       path: 'iot-dashboard',
       component: DashboardComponent,
     },
+    {
+      path: 'backend-integration',
+      loadChildren: () => import('./backend-integration/backend-integration.module')
+        .then(m => m.BackendIntegrationModule),
+    },
     {
       path: 'layout',
       loadChildren: () => import('./layout/layout.module')