feat(docs): added get premium modal in landing

fix(docs): fixed styles for get download modal

docs/app/shared/components/premium-form/premium-form.component.html

@@ -0,0 +1,11 @@
+<nb-card>
+  <nb-card-header>
+    <span>Download</span>
+    <div class="close-icon" (click)="closeDialog()">
+      <i [innerHTML]="'close' | eva: { width: 26, height: 26, fill: '#222b45' }"></i>
+    </div>
+  </nb-card-header>
+  <nb-card-body>
+    <div id="hubspotForm"></div>
+  </nb-card-body>
+</nb-card>

docs/app/shared/components/premium-form/premium-form.component.scss

@@ -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 '~@nebular/theme/styles/global/breakpoints';
+
+@import '../../../@theme/styles/themes';
+
+@include nb-install-component() {
+
+  nb-card {
+    width: 30rem;
+  }
+
+  nb-card-header {
+    display: flex;
+    align-items: center;
+  }
+
+  .close-icon {
+    cursor: pointer;
+    margin-left: auto;
+    right: 0.1rem;
+    top: 0.1rem;
+    width: fit-content;
+  }
+
+  ::ng-deep .custom-form {
+    .modal-header {
+      display: none;
+    }
+
+    .modal-body {
+      padding-bottom: 0;
+    }
+
+    .actions {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    input.hs-input {
+      width: 100%;
+      font-size: nb-theme(font-size-sm);
+      padding: 0.75rem 1rem !important;
+      border: 1px solid #e4e9f2;
+      box-shadow: nb-theme(shadow-default);
+      border-radius: 0.25rem;
+
+      &.invalid {
+        box-shadow: 0 0 1.25rem 0 rgba(210, 45, 45, 0.6);
+      }
+
+      &::placeholder {
+        color: #434a59;
+        opacity: 0.24;
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+
+    .hs-richtext .modal-body {
+      padding: 0;
+      margin-bottom: 1rem;
+      p {
+        margin-bottom: 0;
+        text-align: left ! important;
+      }
+    }
+
+    .hs-recaptcha {
+      margin-top: 1rem;
+    }
+
+    .hs-error-msgs {
+      list-style-type: none;
+      padding: 0;
+    }
+
+    .hs-form-required, .hs-error-msg {
+      color: #f2545b;
+    }
+
+    .hs_error_rollup {
+      display: none;
+    }
+
+    .btn {
+      margin-top: 2rem;
+      font-family: nb-theme(font-main), sans-serif;
+      border-radius: 3px;
+      border: none;
+      background-color: nb-theme(color-active-fg);
+      color: #ffffff;
+      padding: 1rem 2rem;
+      box-shadow: nb-theme(shadow-btn);
+      cursor: pointer;
+      text-transform: uppercase;
+
+      &:hover {
+        box-shadow: nb-theme(shadow-hover-green-btn);
+      }
+
+      &:active {
+        box-shadow: nb-theme(shadow-active-green-btn);
+      }
+    }
+  }
+}

docs/app/shared/components/premium-form/premium-form.component.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 { AfterViewInit, Component } from '@angular/core';
+import { NbDialogRef } from '@nebular/theme';
+
+@Component({
+  selector: 'ngx-premium-form',
+  templateUrl: './premium-form.component.html',
+  styleUrls: ['./premium-form.component.scss'],
+})
+export class PremiumFormComponent implements AfterViewInit {
+
+
+  constructor(protected ref: NbDialogRef<PremiumFormComponent>) {
+  }
+
+  ngAfterViewInit() {
+    hbspt.forms.create({
+      portalId: '2452262',
+      formId: 'b066428e-c41a-4dce-bbc2-5690cf084a8f',
+      target: '#hubspotForm',
+      submitButtonClass: 'btn',
+      css: '',
+      cssClass: 'custom-form',
+      redirectUrl: 'https://github.com/akveo/ngx-admin',
+    });
+  }
+
+  closeDialog() {
+    this.ref.close();
+  }
+}