docs(download): add download button with hubspot form (#5725)

docs/app/pages/home/main-info-section/main-info-section.component.html

@@ -29,11 +29,18 @@
     </iframe>
   </div>
   <div class="buttons">
-    <a class="btn btn-installation-guidelines"
-       [routerLink]="'/docs/getting-started/installation-guidelines'">Installation Docs</a>
-    <a class="btn btn-demo"
-       href="https://hubs.ly/H0n55nc0"
-       target="_blank">Demo</a>
+    <div class="buttons-links">
+      <a class="btn btn-installation-guidelines"
+         [routerLink]="'/docs/getting-started/installation-guidelines'">
+        Installation Docs
+      </a>
+      <a class="btn btn-demo"
+         href="https://hubs.ly/H0n55nc0"
+         target="_blank">
+        Demo
+      </a>
+    </div>
+
+    <ngx-download-admin></ngx-download-admin>
   </div>
 </div>
-

docs/app/pages/home/main-info-section/main-info-section.component.scss

@@ -113,21 +113,28 @@
     margin-top: 1.875rem;
   }
 
+  .buttons-links {
+    display: flex;
+    justify-content: space-between;
+
+    .btn {
+      flex: 1;
+    }
+  }
+
   .btn {
     font-family: nb-theme(font-main), sans-serif;
     border-radius: 3px;
     border: none;
     background: #ffffff;
     color: #000000;
-    padding: 1.125rem 1em;
+    padding: 1.125rem 0;
     box-shadow: nb-theme(shadow-default);
     cursor: pointer;
     text-transform: uppercase;
 
     &.btn-demo {
       margin-left: 1em;
-      padding-left: 4rem;
-      padding-right: 4rem;
       color: #ffffff;
       background-color: nb-theme(color-active-fg);
       box-shadow: nb-theme(shadow-btn);
@@ -181,13 +188,6 @@
       margin-right: 0.75rem;
       margin-left: 1rem;
     }
-
-    .btn {
-        &.btn-demo {
-          padding-left: 3.25rem;
-          padding-right: 3.25rem;
-        }
-    }
   }
 
   @include media-breakpoint-down(xxl) {
@@ -271,14 +271,21 @@
     }
 
     .buttons {
+      padding-right: 1rem;
+      padding-left: 1rem;
+
       a {
         display: block;
-        margin: 0 1rem;
+        margin: 0;
 
         &.btn-demo {
           margin-top: 1rem;
         }
       }
     }
+
+    .buttons-links {
+      display: block;
+    }
   }
 }

docs/app/pages/home/main-info-section/main-info-section.component.ts

@@ -14,7 +14,8 @@ import { takeWhile } from 'rxjs/operators';
   styleUrls: ['./main-info-section.component.scss'],
 })
 export class MainInfoSectionComponent implements OnDestroy {
-  constructor(themeService: NbThemeService, breakpointService: NbMediaBreakpointsService) {
+  constructor(themeService: NbThemeService,
+              breakpointService: NbMediaBreakpointsService) {
     this.breakpoints = breakpointService.getBreakpointsMap();
     themeService.onMediaQueryChange()
       .pipe(takeWhile(() => this.alive))