feat(bundles): fixes and adjustments

docs/app/@core/data/service/header-menu.service.ts

@@ -11,11 +11,6 @@ export class HeaderMenuService {
       title: 'Home',
       link: '/',
     },
-    {
-      title: 'Backend Bundles',
-      link: '/',
-      fragment: 'backend-bundles',
-    },
     {
       title: 'Docs',
       link: '/docs',

docs/app/@theme/components/header/header.component.html

@@ -9,6 +9,10 @@
 </div>
 <div class="section middle">
   <nb-menu [items]="headerMenu"></nb-menu>
+  <a routerLink="/" fragment="backend-bundles" class="backend-bundles eva-parent-hover">
+    <i [innerHTML]="'gift-outline' | eva: { width: 24, height: 24, fill: '#ff4d6b', animationType: 'shake' }"></i>
+    <span>Backend Bundles</span>
+  </a>
 </div>
 <div class="section right">
 

docs/app/@theme/components/header/header.component.scss

@@ -55,6 +55,16 @@
     }
   }
 
+  .backend-bundles {
+    display: flex;
+    align-items: center;
+    padding-right: 2rem;
+
+    i {
+      margin-right: 0.5rem;
+    }
+  }
+
   /deep/ nb-menu {
     flex: 1;
 
@@ -87,6 +97,7 @@
 
   .section.right {
     color: $contacts-fg;
+    display: none;
 
     a {
       font-family: nb-theme(font-main), sans-serif;
@@ -141,6 +152,9 @@
         display: list-item;
       }
     }
+    .section.right {
+      display: block;
+    }
   }
 
   @include media-breakpoint-up(xl) {
@@ -156,12 +170,6 @@
         justify-content: flex-end;
       }
     }
-
-    .section {
-      &.right {
-        display: none;
-      }
-    }
   }
 
   @include media-breakpoint-down(is) {
@@ -189,6 +197,11 @@
   }
 
   &.docs-page {
+
+    .backend-bundles {
+      display: none;
+    }
+
     .section {
       &.left {
         align-items: center;
@@ -237,15 +250,14 @@
         justify-content: space-between;
       }
 
-      .section.right {
-        display: block;
-      }
-
       .stars {
         width: 7.5rem;
         height: 1.25rem;
         margin-left: auto;
       }
+      .backend-bundles {
+        display: flex;
+      }
     }
 
     @include media-breakpoint-up(lg) {
@@ -259,6 +271,9 @@
           display: list-item;
         }
       }
+      .section.right {
+        display: block;
+      }
     }
 
     @include media-breakpoint-up(xl) {

docs/app/@theme/styles/themes.scss

@@ -56,7 +56,7 @@ $nb-themes: nb-register-theme((
   layout-medium-padding: 0,
   layout-small-padding: 0,
 
-  header-bg: color-bg,
+  header-bg: #fafafa,
   header-padding: 0 0,
   header-height: 4.25rem,
   header-fg: color-fg,

docs/app/app-routing.module.ts

@@ -15,6 +15,8 @@ const routes: Routes = [
 const config: ExtraOptions = {
   useHash: false,
   anchorScrolling: 'enabled',
+  onSameUrlNavigation: 'reload',
+  scrollPositionRestoration: 'enabled',
 };
 
 @NgModule({

docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html

@@ -4,7 +4,9 @@
 
 <div class="section-container">
 
-  <p class="features__description">Akveo new product created after a number of community and clients requests. We did all backend integration in ngx-admin for you! Now you can buy a complete UI + backend solution based on the backend framework of choice to use it as a template for your solution implementation.
+  <p class="features__description">
+    Looking for a way to integrate Angular ngx-admin with .NET, Ruby, Python or PHP? We are here to save your time on painful setup, configuration and routing tasks.
+    Choose starter kit bundle based on a technology of your choice below.
   </p>
 
   <div class="package-switcher">
@@ -25,9 +27,6 @@
         <nb-card-front class="package-card package-card--front">
           <nb-card>
             <nb-card-body>
-              <div class="package-card__header">
-                <span class="package-card__demo-link">Coming soon</span>
-              </div>
               <div class="package-card__image package-card__image--dot-net"></div>
               <h4 class="package-card__title">{{ ecomName }}</h4>
               <h4 class="package-card__title">{{ netName }}</h4>
@@ -39,10 +38,8 @@
                 <span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
               </div>
               <a [href]="firstBundleMail"
-                 target="_blank"
                  class="package-card__buy-link btn btn-demo"
-                 nbButton
+                 nbButton>
-                 (click)="stopPropagation($event)">
                  Buy now
               </a>
             </nb-card-body>
@@ -52,12 +49,10 @@
           <nb-card>
             <nb-card-body>
               <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
-              <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="firstBundleMail"
                  target="_blank"
                  class="package-card__buy-link btn btn-demo"
-                 nbButton
+                 nbButton>
-                 (click)="stopPropagation($event)">
                  Buy now
               </a>
             </nb-card-body>
@@ -70,9 +65,6 @@
         <nb-card-front class="package-card package-card--front">
           <nb-card>
             <nb-card-body>
-              <div class="package-card__header">
-                <span class="package-card__demo-link">Coming soon</span>
-              </div>
               <div class="package-card__image package-card__image--dot-net"></div>
               <h4 class="package-card__title">{{ iotName }}</h4>
               <h4 class="package-card__title">{{ netName }}</h4>
@@ -84,7 +76,6 @@
                 <span class="package-card__price">${{ isCommercial() ? '1500' : '150' }}</span>
               </div>
               <a [href]="secondBundleMail"
-                 target="_blank"
                  class="package-card__buy-link btn btn-demo"
                  nbButton
                  (click)="stopPropagation($event)">
@@ -97,12 +88,9 @@
           <nb-card>
             <nb-card-body>
               <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
-              <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="secondBundleMail"
-                 target="_blank"
                  class="package-card__buy-link btn btn-demo"
-                 nbButton
+                 nbButton>
-                 (click)="stopPropagation($event)">
                 Buy now
               </a>
             </nb-card-body>
@@ -115,9 +103,6 @@
         <nb-card-front class="package-card package-card--front">
           <nb-card>
             <nb-card-body>
-              <div class="package-card__header">
-                <span class="package-card__demo-link package-card__demo-link--secondary">Coming soon</span>
-              </div>
               <div class="package-card__image package-card__image--dot-net-core"></div>
               <h4 class="package-card__title">{{ ecomName }}</h4>
               <h4 class="package-card__title">{{ netCoreName }}</h4>
@@ -129,10 +114,8 @@
                 <span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
               </div>
               <a [href]="thirdBundleMail"
-                 target="_blank"
                  class="package-card__buy-link btn btn-demo"
-                 nbButton
+                 nbButton>
-                 (click)="stopPropagation($event)">
                 Buy now
               </a>
             </nb-card-body>
@@ -142,7 +125,6 @@
           <nb-card>
             <nb-card-body>
               <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
-              <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="thirdBundleMail"
                  target="_blank"
                  class="package-card__buy-link btn btn-demo"
@@ -160,9 +142,6 @@
         <nb-card-front class="package-card package-card--front">
           <nb-card>
             <nb-card-body>
-              <div class="package-card__header">
-                <span class="package-card__demo-link package-card__demo-link--secondary">Coming soon</span>
-              </div>
               <div class="package-card__image package-card__image--dot-net-core"></div>
               <h4 class="package-card__title">{{ iotName }}</h4>
               <h4 class="package-card__title">{{ netCoreName }}</h4>
@@ -174,10 +153,8 @@
                 <span class="package-card__price">${{ isCommercial() ? '1400' : '140' }}</span>
               </div>
               <a [href]="fourthBundleMail"
-                 target="_blank"
                  class="package-card__buy-link btn btn-demo"
-                 nbButton
+                 nbButton>
-                 (click)="stopPropagation($event)">
                 Buy now
               </a>
             </nb-card-body>
@@ -187,12 +164,9 @@
           <nb-card>
             <nb-card-body>
               <h4 class="package-card__type">{{ selectedLicenseType }}</h4>
-              <ng-container *ngTemplateOutlet="bundleFeaturesList"></ng-container>
               <a [href]="fourthBundleMail"
-                 target="_blank"
                  class="package-card__buy-link btn btn-demo"
-                 nbButton
+                 nbButton>
-                 (click)="stopPropagation($event)">
                  Buy now
               </a>
             </nb-card-body>
@@ -209,7 +183,7 @@
       <th>COMMERCIAL</th>
     </tr>
     <tr>
-      <td class="left">NGX Admin template with 100+ UI components integrated with Backend</td>
+      <td class="left">ngx-admin template with 100+ UI components integrated with Backend Services</td>
       <td>
         <ul class="included">
           <li class="included__item"></li>
@@ -222,7 +196,7 @@
       </td>
     </tr>
     <tr>
-      <td class="left">.NET backend Services and Repository layers with data access</td>
+      <td class="left">Backend Services and Repository layers with data access</td>
       <td>
         <ul class="included">
           <li class="included__item"></li>
@@ -288,19 +262,31 @@
     </tr>
   </table>
 
-  <ngx-landing-description-section *ngIf="descriptions" [descriptions]="descriptions" ></ngx-landing-description-section>
+  <div class="request-code-section">
+    <a href="mailto:support@akveo.com?subject=Bundle code sample request" class="package-card__buy-link btn btn-demo" nbButton>
+      REQUEST CODE SAMPLE
+    </a>
+  </div>
 
+  <ngx-landing-description-section *ngIf="descriptions" [descriptions]="descriptions" ></ngx-landing-description-section>
 
   <ngx-landing-section-title>
     Architecture Design
   </ngx-landing-section-title>
 
-  <p class="features__description">The schema describes the idea of how backend part of the .NET solution is organized.
+  <p class="features__description">The schema describes high-level solution architecture.</p>
-  </p>
 
   <picture class="bundle-scheme">
     <source type="image/webp" srcset="/assets/img/bundle-scheme@1x.webp 1x, /assets/img/bundle-scheme@2x.webp 2x">
     <img class="bundle-scheme__image" src="/assets/img/bundle-scheme@1x.png" srcset="/assets/img/bundle-scheme@2x.png 2x" alt="Backend bundles">
   </picture>
 
+  <p class="features__description">Need more details or have a question?</p>
+
+  <div class="request-code-section">
+    <a href="mailto:support@akveo.com?subject=Custom bundle request" class="package-card__buy-link btn btn-demo" nbButton>
+      CONTACT US
+    </a>
+  </div>
+
 </div>

docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss

@@ -71,7 +71,7 @@
     display: none;
     width: 100%;
     height: auto;
-    margin: 2.5rem auto;
+    margin: 2.5rem auto 5rem;
 
     &__image {
       width: 100%;
@@ -184,7 +184,6 @@
     justify-content: flex-start;
     align-content: stretch;
     align-items: stretch;
-    cursor: pointer;
 
     &--front {
       text-align: center;
@@ -310,7 +309,6 @@
         border: solid #00db92;
         border-width: 0 2px 2px 0;
         transform: rotate(45deg);
-        // ff3d71
       }
     }
 
@@ -353,6 +351,10 @@
     }
   }
 
+  .request-code-section {
+    margin-bottom: 5rem;
+  }
+
   @include media-breakpoint-down(xl) {
     .section-container {
       padding-left: 1rem;
@@ -404,11 +406,6 @@
       padding: 1rem;
     }
 
-    td {
-      font-weight: lighter;
-      font-size: 0.75rem;
-    }
-
     td ul {
       display: inline-block;
       margin: auto;

docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts

@@ -4,9 +4,11 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, OnDestroy } from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Inject, OnDestroy } from '@angular/core';
 import { Descriptions, DescriptionsService } from '../../../@core/data/service/descriptions.service';
-import { takeWhile } from 'rxjs/operators';
+import { delay, filter, take, takeWhile } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
+import { NB_WINDOW } from '@nebular/theme';
 
 @Component({
   selector: 'ngx-backend-bundles-section',
@@ -14,15 +16,11 @@ import { takeWhile } from 'rxjs/operators';
   styleUrls: ['./backend-bundles-section.component.scss'],
 })
 
-export class BackendBundlesSectionComponent implements OnDestroy {
+export class BackendBundlesSectionComponent implements OnDestroy, AfterViewInit {
 
   private alive = true;
   descriptions: Descriptions[];
 
-  ngOnDestroy() {
-    this.alive = false;
-  }
-
   selectedLicenseType = 'Personal';
   personalLicense = 'Personal';
   commercialLicense = 'Commercial';
@@ -30,15 +28,8 @@ export class BackendBundlesSectionComponent implements OnDestroy {
   ecomName = 'E-Commerce:';
   iotName = 'IoT:';
 
-  netName = '.NET + NGX Admin';
+  netName = '.NET + ngx-admin';
-  netCoreName = '.NET Core + NGX Admin';
+  netCoreName = '.NET Core + ngx-admin';
-
-
-  constructor(private descriptionsService: DescriptionsService) {
-    this.descriptionsService.getBundleDescriptions()
-      .pipe(takeWhile(() => this.alive))
-      .subscribe((descriptions) => this.descriptions = descriptions);
-  }
 
   get firstBundleMail(): string {
     return this.getMailToText('.NET E-commerce');
@@ -61,14 +52,39 @@ export class BackendBundlesSectionComponent implements OnDestroy {
   thirdCardFlipped: boolean = false;
   fourthCardFlipped: boolean = false;
 
+  constructor(private descriptionsService: DescriptionsService,
+              private activatedRoute: ActivatedRoute,
+              private el: ElementRef<HTMLElement>,
+              @Inject(NB_WINDOW) private window) {
+    this.descriptionsService.getBundleDescriptions()
+      .pipe(takeWhile(() => this.alive))
+      .subscribe((descriptions) => this.descriptions = descriptions);
+  }
+
   stopPropagation(e) {
-    e.stopPropagation();
+    // e.stopPropagation();
   }
 
   isCommercial() {
     return this.selectedLicenseType === 'Commercial';
   }
 
+  ngAfterViewInit() {
+    this.activatedRoute.fragment
+      .pipe(
+        filter(fragment => fragment === 'backend-bundles'),
+        delay(500),
+        take(1),
+      )
+      .subscribe((fragment: string) => {
+        this.window.scrollTo(0, this.el.nativeElement.offsetTop);
+      });
+  }
+
+  ngOnDestroy() {
+    this.alive = false;
+  }
+
   private getMailToText(bundleName: string) {
     return 'mailto:support@akveo.com' +
       `?subject=${this.selectedLicenseType} ${bundleName} Bundle` +

docs/app/pages/home/description-section/description-section.component.scss

@@ -15,7 +15,7 @@
   display: flex;
   margin: 0 auto;
   position: relative;
-  top: -3.25rem;
+  margin-bottom: 5rem;
 
   .descriptions {
     flex: 1;

docs/app/pages/home/landing-home.component.html

@@ -1,5 +1,5 @@
 <nb-layout>
-  <nb-layout-header>
+  <nb-layout-header fixed>
     <ngx-landing-header></ngx-landing-header>
   </nb-layout-header>
 

docs/app/pages/home/landing-home.component.scss

@@ -32,7 +32,7 @@
 
   /deep/ nb-layout-header {
     box-shadow: nb-theme(shadow-default);
-
+    background: nb-theme(header-bg);
     nav {
       max-width: calc(#{$content-width} - 8.125rem * 2);
       margin: 0 auto;