fix(landing): add contact section and fix landing image

docs/app/pages/home/contact-form/contact.component.html

@@ -0,0 +1,6 @@
+<div class="contact">
+  <h1>Need customization?</h1>
+  <p>Thinking of building something outstanding based on ngx-admin or just need some Angular/React experts?</p>
+  <a class="btn btn-demo" href="https://hubs.ly/H0nJf_b0"
+     target="_blank">Contact us</a>
+</div>

docs/app/pages/home/contact-form/contact.component.scss

@@ -0,0 +1,53 @@
+@import '../../../@theme/styles/themes';
+@import '~@nebular/theme/styles/global/breakpoints';
+
+@include nb-install-component() {
+  $color-active: nb-theme(color-active-fg);
+
+  .contact {
+    text-align: center;
+    margin-bottom: 4rem;
+  }
+
+  h1 {
+    font-family: 'Helvetica Neue Bold', sans-serif;
+    font-size: 2.5rem;
+    color: $color-active;
+    margin: 0;
+  }
+
+  p {
+    font-family: unquote('"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'), sans-serif;
+    font-size: 1.5rem;
+    line-height: 1.5;
+    margin-top: 1.5rem;
+    margin-bottom: 1.5rem;
+  }
+
+  .btn {
+    font-family: nb-theme(font-main), sans-serif;
+    border-radius: 3px;
+    border: none;
+    background: #ffffff;
+    color: #000000;
+    box-shadow: nb-theme(shadow-default);
+    cursor: pointer;
+    text-transform: uppercase;
+
+    &.btn-demo {
+      margin-top: 0.375rem;
+      padding: 1.125rem 6.25rem;
+      color: #ffffff;
+      background-color: nb-theme(color-active-fg);
+      box-shadow: nb-theme(shadow-btn);
+    }
+
+    &:hover {
+      box-shadow: nb-theme(shadow-hover-green-btn);
+    }
+
+    &:active {
+      box-shadow: nb-theme(shadow-active-green-btn);
+    }
+  }
+}

docs/app/pages/home/contact-form/contact.component.ts

@@ -0,0 +1,13 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngx-contact-form',
+  templateUrl: './contact.component.html',
+  styleUrls: ['./contact.component.scss'],
+})
+export class ContactFormComponent {
+  constructor() {
+
+  }
+
+}

docs/app/pages/home/landing-home.module.ts

@@ -31,6 +31,8 @@ import { LandingSharedModule } from '../../shared/landing-shared.module';
 import {MaterialFeaturesSectionComponent} from './material-features/material-features.component';
 import {DefaultAdminInfoComponent} from './main-info-section/default-admin-main-info/default-info.component';
 import {MaterialAdminInfoComponent} from './main-info-section/material-admin-main-info/material-info.component';
+import {ContactFormComponent} from './contact-form/contact.component';
+import {NbButtonModule} from '@nebular/theme';
 // components
 
 const PIPES = [LicensePipe, BackgroundImagePipe];
@@ -51,6 +53,7 @@ const COMPONENTS = [
   ContactSectionComponent,
   BackendBundlesSectionComponent,
   MaterialFeaturesSectionComponent,
+  ContactFormComponent,
 ];
 
 @NgModule({
@@ -63,6 +66,7 @@ const COMPONENTS = [
     SwiperModule,
     LandingHomeRoutingModule,
     LandingSharedModule,
+    NbButtonModule,
   ],
   providers: [
     ...PIPES,

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

@@ -9,20 +9,6 @@
   </a>
 </div>
 <div class="main-inf">
-<!--  <h1>ngx-admin</h1>-->
-<!--  <p class="description">-->
-<!--    The most popular admin dashboard based on <strong>Angular 8+</strong>, Bootstrap 4+ and-->
-<!--    <a href="https://hubs.ly/H0n5N9P0" target="_blank">Nebular</a> with-->
-<!--    <a href="https://hubs.ly/H0n5PKH0">Eva Design System</a> support.-->
-<!--    Free and Open Source for personal and commercial purposes.-->
-<!--    <br>-->
-<!--    <span class="bundles">-->
-<!--      Never start from scratch again.-->
-<!--      <a href="https://hubs.ly/H0n5NVz0" target="_blank">-->
-<!--        Integrate ready-made solution: ngx-admin with backend.-->
-<!--      </a>-->
-<!--    </span>-->
-<!--  </p>-->
   <ng-container *ngIf="forMaterialTheme === false">
     <ngx-default-admin-info></ngx-default-admin-info>
   </ng-container>

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

@@ -4,8 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { Component, OnDestroy, Input, OnInit } from '@angular/core';
+import { Component, OnDestroy, Input } from '@angular/core';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { NbMediaBreakpoint, NbMediaBreakpointsService, NbThemeService } from '@nebular/theme';
 import { takeWhile } from 'rxjs/operators';
 
@@ -34,7 +33,7 @@ export class MainInfoSectionComponent implements OnDestroy {
   }
 
   public get imageUrl(): string {
-    return this.forMaterialTheme
+    return this.forMaterialTheme !== false
       ? 'assets/img/ngx-admin-material.png'
       : '/assets/img/ngx-admin.png';
   }

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

@@ -7,6 +7,7 @@
     <ngx-landing-main-info material></ngx-landing-main-info>
     <ngx-material-features></ngx-material-features>
     <ngx-landing-theme-section material></ngx-landing-theme-section>
+    <ngx-contact-form></ngx-contact-form>
   </nb-layout-column>
 
   <nb-layout-footer class="footer" fixed>

docs/app/pages/home/theme-section/theme-section.component.html

@@ -20,7 +20,7 @@
       <a [href]="materialDarkDemoUrl" target="_blank" class="image-container swiper-slide">
         <img *ngIf="breakpoint.width <= breakpoints.sm"
             data-src="assets/img/material-dark-theme.png"
-            class="swiper-lazy" 
+            class="swiper-lazy"
             alt="Material Dark Theme" />
         <img *ngIf="!(breakpoint.width <= breakpoints.sm)"
             lazyLoad="assets/img/material-dark-theme.png"

docs/app/shared/landing-shared.module.ts

@@ -13,4 +13,4 @@ const pipes = [CapitalizePipe, EvaIconsPipe];
   declarations: [...component, ...pipes],
   exports: [NbPopoverModule, ...component, ...pipes],
 })
-export class LandingSharedModule {}
+export class LandingSharedModule {}

src/app/app-routing.module.ts

@@ -8,6 +8,7 @@ import {
   NbRequestPasswordComponent,
   NbResetPasswordComponent,
 } from '@nebular/auth';
+import {StarterScreenComponent} from './themes-screen/starter-screen.component';
 
 export const routes: Routes = [
   {
@@ -15,6 +16,11 @@ export const routes: Routes = [
     loadChildren: () => import('./pages/pages.module')
       .then(m => m.PagesModule),
   },
+  {
+    path: 'themes',
+    loadChildren: () => import('app/themes-screen/starter.module')
+      .then(m => m.StarterModule),
+  },
   {
     path: 'auth',
     component: NbAuthComponent,

src/app/themes-screen/starter-routing.module.ts

@@ -0,0 +1,22 @@
+import {NgModule} from '@angular/core';
+import {RouterModule, Routes} from '@angular/router';
+import {StarterScreenComponent} from './starter-screen.component';
+import {NgxStarterComponent} from './starter.component';
+
+const routes: Routes = [{
+  path: '',
+  component: NgxStarterComponent,
+  children: [
+    {
+      path: '',
+      component: StarterScreenComponent,
+    },
+    ],
+}];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class StarterRoutingModule {
+}

src/app/themes-screen/starter-screen.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'ngx-starter-screen',
+  styleUrls: ['./starter.component.scss'],
+  templateUrl: './starter.component.html',
+})
+export class StarterScreenComponent {
+
+}

src/app/themes-screen/starter.component.html

@@ -0,0 +1,69 @@
+<nb-layout windowMode>
+  <nb-layout-header fixed>
+<!--    <div class="header-container">-->
+<!--      <div class="logo-container">-->
+<!--        <a class="logo" href="#">ngx-<span>admin</span></a>-->
+<!--      </div>-->
+<!--    </div>-->
+
+<!--    <div class="header-container">-->
+<!--      <nb-actions size="small">-->
+<!--        <nb-action class="control-item github-stars">-->
+<!--          <span class="subtitle text">Support us: </span>-->
+<!--          <iframe src="https://ghbtns.com/github-btn.html?user=akveo&repo=ngx-admin&type=star&count=true"-->
+<!--                  frameborder="0"-->
+<!--                  scrolling="0"-->
+<!--                  width="170px"-->
+<!--                  height="20px">-->
+<!--          </iframe>-->
+<!--        </nb-action>-->
+<!--        <nb-action class="control-item downloads-count">-->
+<!--          <nb-icon icon="download"></nb-icon>-->
+<!--          <span class="subtitle number">470.000</span>-->
+<!--        </nb-action>-->
+<!--        <nb-action class="control-item contact-us">-->
+<!--          &lt;!&ndash;          (click)="trackEmailClick()"&ndash;&gt;-->
+<!--          <a nbButton ghost href="mailto:contact@akveo.com" >-->
+<!--            <nb-icon icon="email-outline" pack="eva"></nb-icon>-->
+<!--            <span>contact@akveo.com</span>-->
+<!--          </a>-->
+<!--        </nb-action>-->
+<!--      </nb-actions>-->
+<!--    </div>-->
+  </nb-layout-header>
+
+  <nb-layout-column class="small">
+    <nb-card>
+      <nb-card-header>Light</nb-card-header>
+      <nb-card-body>
+        <img src="assets/image/corporate-theme.png"
+             class="swiper-lazy"
+             alt="Corporate Theme" />
+
+      </nb-card-body>
+    </nb-card>
+    <nb-card>
+      <nb-card-header>Light</nb-card-header>
+    </nb-card>
+    <nb-card>
+      <nb-card-header>Light</nb-card-header>
+    </nb-card>
+  </nb-layout-column>
+
+  <nb-layout-column>
+    <nb-card>
+      <nb-card-header>Light</nb-card-header>
+    </nb-card>
+    <nb-card>
+      <nb-card-header>Light</nb-card-header>
+    </nb-card>
+    <nb-card>
+      <nb-card-header>Light</nb-card-header>
+    </nb-card>
+  </nb-layout-column>
+
+  <nb-layout-footer fixed>
+    <ngx-footer></ngx-footer>
+  </nb-layout-footer>
+
+</nb-layout>

src/app/themes-screen/starter.component.scss

@@ -0,0 +1,127 @@
+@import '~bootstrap/scss/mixins/breakpoints';
+@import '~@nebular/theme/styles/global/breakpoints';
+@import '../@theme/styles/themes';
+
+//@include nb-install-component() {
+//  display: flex;
+//  justify-content: space-between;
+//  width: 100%;
+//
+//  .logo-container {
+//    display: flex;
+//    align-items: center;
+//    width: calc(#{nb-theme(sidebar-width)} - #{nb-theme(header-padding)});
+//  }
+//
+//  nb-action {
+//    height: auto;
+//    display: flex;
+//    align-content: center;
+//  }
+//
+//  nb-user {
+//    cursor: pointer;
+//  }
+//
+//  .subtitle {
+//    font-family: nb-theme(text-subtitle-font-family);
+//    font-size: nb-theme(text-subtitle-font-size);
+//    font-weight: nb-theme(text-subtitle-font-weight);
+//    line-height: nb-theme(text-subtitle-line-height);
+//  }
+//
+//  .downloads-count .number {
+//    @include nb-ltr(margin-left, 0.5rem);
+//    @include nb-rtl(margin-right, 0.5rem);
+//  }
+//
+//  ::ng-deep nb-search button {
+//    padding: 0!important;
+//  }
+//
+//  .contact-us {
+//    padding: 0;
+//
+//    nb-icon {
+//      font-size: 1.25rem;
+//    }
+//  }
+//
+//  .header-container {
+//    display: flex;
+//    align-items: center;
+//    width: auto;
+//
+//    .sidebar-toggle {
+//      @include nb-ltr(padding-right, 1.25rem);
+//      @include nb-rtl(padding-left, 1.25rem);
+//      text-decoration: none;
+//      color: nb-theme(text-hint-color);
+//      nb-icon {
+//        font-size: 1.75rem;
+//      }
+//    }
+//
+//    .logo {
+//      padding: 0 1.25rem;
+//      font-size: 1.75rem;
+//      @include nb-ltr(border-left, 1px solid nb-theme(divider-color));
+//      @include nb-rtl(border-right, 1px solid nb-theme(divider-color));
+//      white-space: nowrap;
+//      text-decoration: none;
+//    }
+//  }
+//
+//  .github-stars {
+//    width: 245px;
+//    display: flex;
+//
+//    iframe {
+//      width: 100px;
+//      @include nb-ltr(margin-left, 1rem);
+//      @include nb-rtl(margin-right, 1rem);
+//    }
+//  }
+//
+//  @include media-breakpoint-down(xl) {
+//    .control-item.search,
+//    .control-item.notifications,
+//    .control-item.email,
+//    .control-item.github-stars .text {
+//      display: none;
+//    }
+//
+//    .control-item.github-stars {
+//      width: auto;
+//
+//      iframe {
+//        margin: 0;
+//      }
+//    }
+//  }
+//
+//  @include media-breakpoint-down(lg) {
+//    .downloads-count {
+//      display: none;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(md) {
+//    .theme-select {
+//      display: none;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(sm) {
+//    .contact-us {
+//      display: none;
+//    }
+//  }
+//
+//  @include media-breakpoint-down(is) {
+//    .github-stars,
+//    .user-action {
+//      display: none;
+//    }
+//  }
+//}

src/app/themes-screen/starter.component.ts

@@ -0,0 +1,8 @@
+import {Component} from '@angular/core';
+
+@Component({
+  selector: 'ngx-starter',
+  templateUrl: './starter.component.html',
+  styleUrls: ['./starter.component.scss'],
+})
+export class NgxStarterComponent {}

src/app/themes-screen/starter.module.ts

@@ -0,0 +1,28 @@
+import {NgModule} from '@angular/core';
+import {StarterScreenComponent} from './starter-screen.component';
+import {StarterRoutingModule} from './starter-routing.module';
+import {NgxStarterComponent} from './starter.component';
+import {NbActionsModule, NbButtonModule, NbCardModule, NbIconModule, NbLayoutModule} from '@nebular/theme';
+import {ThemeModule} from '../@theme/theme.module';
+
+const NB_MODULES = [
+  NbIconModule,
+  NbLayoutModule,
+  NbCardModule,
+  NbButtonModule,
+];
+
+@NgModule({
+  imports: [
+    StarterRoutingModule,
+    ...NB_MODULES,
+    ThemeModule,
+    NbActionsModule,
+  ],
+  declarations: [
+    StarterScreenComponent,
+    NgxStarterComponent,
+  ],
+})
+export class StarterModule {
+}