home page update + premium section

open-template-hub · Aug 30, 2021 · ca32f04 · ca32f04
1 parent ad162b7
commit ca32f04
Show file tree

Hide file tree

Showing 10 changed files with 66 additions and 121 deletions.
diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.html b/src/app/component/nav/common/bottom-nav/bottom-nav.component.html
@@ -1,4 +1,4 @@
-<app-dropdown-menu [toggleEvent]="productToggleEvent.asObservable()" [menuType]="'bottom'" [options]="PRODUCTS">
+<app-dropdown-menu [toggleEvent]="productToggleEvent.asObservable()" [menuType]="'bottom'" [options]="PRODUCT_LINES">
 </app-dropdown-menu>
 <app-dropdown-menu [toggleEvent]="serviceToggleEvent.asObservable()" [menuType]="'bottom'" [options]="SERVICES">
 </app-dropdown-menu>

diff --git a/src/app/component/nav/common/bottom-nav/bottom-nav.component.ts b/src/app/component/nav/common/bottom-nav/bottom-nav.component.ts
@@ -5,7 +5,7 @@ import { AuthToken } from '../../../../model/AuthToken';
 import { AuthenticationService } from '../../../../service/auth/authentication.service';
 import { BasicInfoService } from '../../../../service/basic-info/basic-info.service';
 import { LoadingService } from '../../../../service/loading/loading.service';
-import { PRODUCTS, SERVICES, URLS } from '../../../../util/constant';
+import { PRODUCT_LINES, SERVICES, URLS } from '../../../../util/constant';
 import { DropdownColumnOption } from '../../../common/dropdown-menu/dropdown-menu.component';
 
 @Component( {
@@ -26,8 +26,8 @@ export class BottomNavComponent {
 
   URLS = URLS;
 
-  PRODUCTS: DropdownColumnOption[] = [];
-  SERVICES: DropdownColumnOption[] = [];
+  PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
+  SERVICES: DropdownColumnOption[] = SERVICES;
 
   constructor(
       private router: Router,
@@ -47,9 +47,6 @@ export class BottomNavComponent {
           }
         }
     );
-
-    this.PRODUCTS = PRODUCTS;
-    this.SERVICES = SERVICES;
   }
 
   logout() {

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.html
@@ -5,7 +5,7 @@ <h2>Open Template Hub</h2>
   </a>
   <div class="left-item-wrapper">
     <a>
-      <app-dropdown-menu [options]="PRODUCTS">
+      <app-dropdown-menu [options]="PRODUCT_LINES">
         <span>Products</span>
         <i aria-hidden="true" class="material-icons">expand_more</i>
       </app-dropdown-menu>

diff --git a/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.ts b/src/app/component/nav/landing/landing-layout-top-nav/landing-layout-top-nav.component.ts
@@ -2,7 +2,7 @@ import { Component } from '@angular/core';
 import { Router } from '@angular/router';
 import { LoadingService } from '../../../../service/loading/loading.service';
 import { ThemeService } from '../../../../service/theme/theme.service';
-import { PRODUCTS, SERVICES, URLS } from '../../../../util/constant';
+import { PRODUCT_LINES, SERVICES, URLS } from '../../../../util/constant';
 import { DropdownColumnOption } from '../../../common/dropdown-menu/dropdown-menu.component';
 
 @Component( {
@@ -17,8 +17,8 @@ export class LandingLayoutTopNavComponent {
   };
   URLS = URLS;
 
-  PRODUCTS: DropdownColumnOption[] = [];
-  SERVICES: DropdownColumnOption[] = [];
+  PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
+  SERVICES: DropdownColumnOption[] = SERVICES;
 
   constructor(
       private router: Router,
@@ -27,8 +27,5 @@ export class LandingLayoutTopNavComponent {
   ) {
     this.brand = this.themeService.brand;
     this.loadingService.sharedLoading.subscribe( loading => this.loading = loading );
-
-    this.PRODUCTS = PRODUCTS;
-    this.SERVICES = SERVICES;
   }
 }
diff --git a/src/app/page/raw-landing-layout/home/home.component.html b/src/app/page/raw-landing-layout/home/home.component.html
@@ -59,107 +59,35 @@ <h6 class="testimonial-description">What our customers are saying...</h6>
     <app-testimonial-card [option]="option3" [marginTop]="'119px'" [minHeight]="'217px'"></app-testimonial-card>
   </div>
   <app-swiper-wrapper></app-swiper-wrapper>
-  <div class="features">
-    <h4>Micro servers for your needs</h4>
-    <div class="feature-wrapper feature-right">
-      <div class="feature">
-        <a class="feature-img-wrapper"href="https://github.com/open-template-hub/auth-server-nodejs-template">
-          <img class="demonstration" [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/auth-server-logo.png?raw=true'" alt="demonstration"/>
-        </a>
-        <div class="feature-notes">
-          <h5>
-            Auth Server Template
-          </h5>
-          <h6>
-            Authentication Server Template supporting both regular signup and login processes and login with social
-            networks that support OAuth and OAuth2.0
-          </h6>
-        </div>
-      </div>
-      <div class="layers">
-        <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-          <path d="M 0,150 1000,0 v 150 z" style="fill: var(--brand-color-lighter-5);"></path>
-        </svg>
-      </div>
-    </div>
-    <div class="feature-wrapper feature-left">
-      <div class="feature">
-        <a class="feature-img-wrapper"href="https://github.com/open-template-hub/payment-server-template">
-          <img class="server-logo" [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/payment-server-logo.png?raw=true'"
-               alt="server-logo"/>
-        </a>
-        <div class="feature-notes">
-          <h5>
-            Payment Server Template
-          </h5>
-          <h6>
-            Payment Server template integrated with Stripe and Coinbase Commerce payment systems
-          </h6>
-        </div>
-      </div>
-
-      <div class="layers">
-        <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-          <path d="M 0,150 1000,0 v 150 z" style="fill: var(--background-color);"></path>
-        </svg>
-      </div>
-    </div>
-    <div class="feature-wrapper feature-right">
-      <div class="feature">
-        <a class="feature-img-wrapper"href="https://github.com/open-template-hub/file-storage-server-template">
-          <img class="server-logo" [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/file-storage-server-logo.png?raw=true'"
-               alt="server-logo"/>
-        </a>
-        <div class="feature-notes">
-          <h5>
-            File Storage Server Template
-          </h5>
-          <h6>
-            File Storage Server Template that supports uploading and downloading files from AWS S3
-          </h6>
+  <div class="features-wrapper">
+    <div *ngFor="let productLine of PRODUCT_LINES;" class="features">
+      <h4>{{ productLine.sectionTitle }}</h4>
+      <div *ngFor="let product of productLine.menus; let i = index; last as isLast" class="feature-wrapper"
+           [class.feature-right]="i % 2 === 0" [class.feature-left]="i % 2 === 1">
+        <div class="feature">
+          <a class="feature-img-wrapper" [href]="product.link">
+            <img class="server-logo"
+                 [src]="product.brand.brandLogo"
+                 alt="server-logo"/>
+          </a>
+          <div class="feature-notes">
+            <h5>
+              {{ product.header }}
+            </h5>
+            <h6>
+              {{ product.description }}
+            </h6>
+          </div>
         </div>
-      </div>
-      <div class="layers">
-        <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-          <path d="M 0,150 1000,0 v 150 z" style="fill: var(--brand-color-lighter-5);"></path>
-        </svg>
-      </div>
-    </div>
-    <div class="feature-wrapper feature-left">
-      <div class="feature">
-        <a class="feature-img-wrapper"href="https://github.com/open-template-hub/analytics-server-template">
-          <img class="server-logo" [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/analytics-server-logo.png?raw=true'"
-               alt="server-logo"/>
-        </a>
-        <div class="feature-notes">
-          <h5>
-            Analytics Server Template
-          </h5>
-          <h6>
-            Analytics Server Template for generic usage in Node.js
-          </h6>
+        <div *ngIf="i % 2 === 0 && !isLast" class="layers">
+          <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
+            <path d="M 0,150 1000,0 v 150 z" style="fill: var(--brand-color-lighter-5);"></path>
+          </svg>
         </div>
-      </div>
-
-      <div class="layers">
-        <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
-          <path d="M 0,150 1000,0 v 150 z" style="fill: var(--background-color);"></path>
-        </svg>
-      </div>
-    </div>
-    <div class="feature-wrapper feature-right">
-      <div class="feature">
-        <a class="feature-img-wrapper"href="https://github.com/open-template-hub/basic-info-server-template">
-          <img class="server-logo" [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/basic-info-server-logo.png?raw=true'"
-               alt="server-logo"/>
-        </a>
-        <div class="feature-notes">
-          <h5>
-            Basic Info Server Template
-          </h5>
-          <h6>
-            Basic Info Server Template for generic usage in Node.js
-          </h6>
+        <div *ngIf="i % 2 === 1" class="layers">
+          <svg viewBox="0 0 1000 150" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice">
+            <path d="M 0,150 1000,0 v 150 z" style="fill: var(--background-color);"></path>
+          </svg>
         </div>
       </div>
     </div>

diff --git a/src/app/page/raw-landing-layout/home/home.component.scss b/src/app/page/raw-landing-layout/home/home.component.scss
@@ -25,6 +25,10 @@
   background-color: var(--brand-color-lighter-5);
 }
 
+.feature-img-wrapper {
+  padding: 30px;
+}
+
 .features h4, .features .feature {
   padding-left: 7vw;
   padding-right: 7vw;
@@ -190,19 +194,22 @@ app-swiper-wrapper {
   }
 
   .features {
-    padding-bottom: 300px;
-    padding-top: 150px;
+    padding-top: 200px;
   }
 
   .feature-img-wrapper {
-    max-width: 30%;
+    max-width: 20%;
     margin-right: 5vw;
   }
 
   .features h4 {
     padding-bottom: 40px;
   }
 
+  .features-wrapper {
+    padding-bottom: 300px;
+  }
+
   .register-wrapper {
     margin-top: 30px;
   }

diff --git a/src/app/page/raw-landing-layout/home/home.component.ts b/src/app/page/raw-landing-layout/home/home.component.ts
@@ -3,9 +3,10 @@ import { FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { CountUp } from 'countup.js';
 import { TestimonialOption } from '../../../component/common/card/testimonial-card/testimonial-card.component';
+import { DropdownColumnOption } from '../../../component/common/dropdown-menu/dropdown-menu.component';
 import { AuthenticationService } from '../../../service/auth/authentication.service';
 import { ThemeService } from '../../../service/theme/theme.service';
-import { URLS } from '../../../util/constant';
+import { PRODUCT_LINES, URLS } from '../../../util/constant';
 
 @Component( {
   selector: 'app-home',
@@ -23,6 +24,7 @@ export class HomeComponent implements AfterViewInit {
   };
 
   URLS = URLS;
+  PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
 
   KILO = 1000;
   MILLION = this.KILO * this.KILO;

diff --git a/src/app/util/constant.ts b/src/app/util/constant.ts
@@ -102,7 +102,7 @@ export const RIBBONS = {
   }
 };
 
-export const PRODUCTS: DropdownColumnOption[] = [
+export const PRODUCT_LINES: DropdownColumnOption[] = [
   {
     sectionTitle: 'Servers',
     menus: [
@@ -168,6 +168,18 @@ export const PRODUCTS: DropdownColumnOption[] = [
         link: URLS.maintenance
       }
     ]
+  },
+  {
+    sectionTitle: 'Premium',
+    menus: [
+      {
+        backgroundColor: 'var(--brand-color-lighter-2)',
+        brand: { brandLogo: 'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/logo/servers/orchestration-server-logo.png?raw=true' },
+        header: 'Orchestration Server',
+        description: 'Orchestration Server Template for generic usage in Node.js',
+        link: URLS.maintenance
+      }
+    ]
   }
 ];
 

diff --git a/src/styles/brand/brand.scss b/src/styles/brand/brand.scss
@@ -1,3 +1,7 @@
+@import "brand-red";
+@import "brand-yellow";
+@import "brand-blue";
+
 :root, .light-theme {
   --brand-color: var(--brand-color-default-theme);
   --brand-color-lighter-1: #64be65;

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,5 +1,3 @@
 @import "styles.common";
 @import "brand/brand";
-@import "brand/brand-red";
-@import "brand/brand-yellow";
-@import "brand/brand-blue";
+