Implement feature card

src/app/app.module.ts

@@ -99,6 +99,7 @@ import { LedComponent } from './component/led/led.component';
 import { BusinessPartnerSwiperComponent } from './component/swiper/business-partner-swiper/business-partner-swiper.component';
 import { PresentationSwiperComponent } from './component/swiper/presentation-swiper/presentation-swiper.component';
 import { SitemapPageComponent } from './page/landing-layout/sitemap-page/sitemap-page.component';
+import { FeatureCardComponent } from './component/card/feature-card/feature-card.component';
 
 FullCalendarModule.registerPlugins( [
   dayGridPlugin,
@@ -185,6 +186,7 @@ FullCalendarModule.registerPlugins( [
     BusinessPartnerSwiperComponent,
     PresentationSwiperComponent,
     SitemapPageComponent,
+    FeatureCardComponent,
   ],
   imports: [
     BrowserModule,

src/app/data/feature/feature.data.ts

@@ -0,0 +1,22 @@
+import { Feature } from 'src/app/model/feature/feature.model';
+
+export const FEATURES: Feature[] = [
+  {
+    title: 'Lightweight Microservices',
+    description:
+      'Do not lost on functional dependencies, you can only focus on your business. All other layers like authentication, payment, mail, storage, analytics are covered by us with extremely lightweight and configurable microservices. Always be safe with encrypted service communications. Order your out-of-transaction requests with message queues. Do not spend your resources on performance enhancements, enjoy fastest service response times.',
+    icon: 'fas fa-feather-alt',
+  },
+  {
+    title: 'Compact Storage',
+    description:
+      'Store your data efficiently and do not waste your time on your data architecture and performance analysis. Open Template Hub provides you efficient storage, orients and keeps your data in NOSQL and RDBMS, handles connection pools and management.',
+    icon: 'fas fa-database',
+  },
+  {
+    title: 'Reliable Design',
+    description:
+      'Shout your business out to the world using responsive user interfaces with handy and highly customizable components.',
+    icon: 'fas fa-mobile',
+  },
+];

src/app/model/feature/feature.model.ts

@@ -0,0 +1,5 @@
+export interface Feature {
+  title: string;
+  description: string;
+  icon: string;
+}

src/app/page/landing-layout/home-page/home-page.component.html

@@ -10,7 +10,8 @@ <h1>Open Template Hub</h1>
 
   <div class="hero-right">
     <app-image-content-loader
-            *ngIf="!brandLogoLoaded" [imageContentLoaderClass]="'brand-logo-main'"></app-image-content-loader>
+      *ngIf="!brandLogoLoaded"
+      [imageContentLoaderClass]="'brand-logo-main'"></app-image-content-loader>
     <img
       [src]="
         'https://raw.githubusercontent.com/open-template-hub/open-template-hub.github.io/master/assets/min/logo/oth-packages.min.png'
@@ -32,7 +33,10 @@ <h1>Open Template Hub</h1>
     class="counter-wrapper"
     rel="noopener"
     target="_blank">
-    <app-text-content-loader [size]="30" *ngIf="npmCounterLoading" class="loader"></app-text-content-loader>
+    <app-text-content-loader
+      [size]="30"
+      *ngIf="npmCounterLoading"
+      class="loader"></app-text-content-loader>
     <p class="counter" id="npmDownloadCounterElement"></p>
     <p class="description">Npm Downloads</p>
   </a>
@@ -73,3 +77,17 @@ <h1>Open Template Hub</h1>
   </app-business-partner-swiper>
   <app-cookies></app-cookies>
 </div>
+
+<div class="features-section-wrapper">
+  <h1 class="section-header">Why Open Template Hub?</h1>
+  <p class="section-description">
+    Minimize your effort while building a new software business with our open
+    source microserver templates and ui templates
+  </p>
+  <div class="section-content">
+    <app-feature-card
+      *ngFor="let feature of FEATURES"
+      [feature]="feature">
+    </app-feature-card>
+  </div>
+</div>

src/app/page/landing-layout/home-page/home-page.component.scss

@@ -96,6 +96,42 @@
   padding-bottom: 100px;
 }
 
+.features-section-wrapper {
+  @include util.flex-layout-column;
+  @include util.flex-center-center;
+
+  box-sizing: border-box;
+
+  width: 100%;
+
+  padding: 50px;
+
+  & .section-header {
+    color: var(--darker);
+  }
+
+  & .section-description {
+    color: var(--lighter);
+    padding: 30px;
+    text-align: center;
+  }
+
+  & .section-content {
+    @include util.flex-layout-row;
+    @include util.flex-center-center;
+
+    width: 100%;
+    padding-left: 3vw;
+    padding-right: 4.5vw;
+    margin-top: 30px;
+
+    & app-feature-card {
+      margin-left: 15px;
+      width: 16em;
+    }
+  }
+}
+
 @media only screen and (max-width: 999px) {
   .hero {
     flex-direction: column;
@@ -145,6 +181,21 @@
     }
   }
 
+  .features-section-wrapper {
+    & .section-content {
+      @include util.flex-layout-column;
+      @include util.flex-center-center;
+
+      padding-left: 3vw;
+      padding-right: 5vw;
+
+      & app-feature-card {
+        margin-top: 20px;
+        width: 90%;
+      }
+    }
+  }
+
   app-swiper-wrapper {
     margin-bottom: 80px;
   }

src/app/page/landing-layout/home-page/home-page.component.ts

@@ -2,20 +2,23 @@ import { AfterViewInit, Component } from '@angular/core';
 import { FormBuilder } from '@angular/forms';
 import { Router } from '@angular/router';
 import { CountUp } from 'countup.js';
+import { FEATURES } from 'src/app/data/feature/feature.data';
 import { PARTNERS } from 'src/app/data/partner/partner.data';
 import { TESTIMONIALS } from 'src/app/data/testimonial/testimonial.data';
+import { Feature } from 'src/app/model/feature/feature.model';
+import { Testimonial } from 'src/app/model/testimonial/testimonial.model';
 import { NpmProviderService } from 'src/app/service/provider/npm-provider.service';
 import { environment } from '../../../../environments/environment';
 import { environmentCommon } from '../../../../environments/environment-common';
 import { URLS } from '../../../data/constant';
 import { Partner } from '../../../model/partner/partner.model';
 import { AuthenticationService } from '../../../service/auth/authentication.service';
 
-@Component( {
+@Component({
   selector: 'app-home-page',
   templateUrl: './home-page.component.html',
-  styleUrls: [ './home-page.component.scss' ],
-} )
+  styleUrls: ['./home-page.component.scss'],
+})
 export class HomePageComponent implements AfterViewInit {
   npmDownloadCounter = { count: 0, id: 'npmDownloadCounterElement' };
   serverTypesCounter = { count: 7, id: 'serverTypesCounterElement' };
@@ -25,7 +28,8 @@ export class HomePageComponent implements AfterViewInit {
 
   URLS = URLS;
   PARTNERS: Partner[] = PARTNERS;
-  TESTIMONIALS = TESTIMONIALS;
+  TESTIMONIALS: Testimonial[] = TESTIMONIALS;
+  FEATURES: Feature[] = FEATURES;
 
   KILO = 1000;
   MILLION = this.KILO * this.KILO;
@@ -34,29 +38,29 @@ export class HomePageComponent implements AfterViewInit {
   environmentCommon = environmentCommon;
 
   constructor(
-      private formBuilder: FormBuilder,
-      public router: Router,
-      private authenticationService: AuthenticationService,
-      private npmProviderService: NpmProviderService
+    private formBuilder: FormBuilder,
+    public router: Router,
+    private authenticationService: AuthenticationService,
+    private npmProviderService: NpmProviderService
   ) {
     // redirect to home if already logged in
-    if ( this.authenticationService.currentUserValue ) {
-      this.router.navigate( [ URLS.dashboard.root ] );
+    if (this.authenticationService.currentUserValue) {
+      this.router.navigate([URLS.dashboard.root]);
     }
   }
 
   ngAfterViewInit() {
     this.initCountUps();
   }
 
-  countUpFormatter( n: number ) {
-    if ( n < this.KILO ) {
+  countUpFormatter(n: number) {
+    if (n < this.KILO) {
       return n + '';
     } else {
-      if ( n < this.MILLION ) {
-        return Math.round( ( n / this.KILO ) * 10 ) / 10 + 'k';
+      if (n < this.MILLION) {
+        return Math.round((n / this.KILO) * 10) / 10 + 'k';
       } else {
-        return Math.round( ( n / this.MILLION ) * 10 ) / 10 + 'M';
+        return Math.round((n / this.MILLION) * 10) / 10 + 'M';
       }
     }
   }
@@ -68,42 +72,42 @@ export class HomePageComponent implements AfterViewInit {
       formattingFn: undefined,
     };
 
-    this.npmProviderService.getNpmPackagesDownloadCount().then( ( count ) => {
+    this.npmProviderService.getNpmPackagesDownloadCount().then((count) => {
       this.npmDownloadCounter.count = count;
       this.npmCounterLoading = false;
-      this.startCounter( options, this.npmDownloadCounter );
-    } );
+      this.startCounter(options, this.npmDownloadCounter);
+    });
 
-    this.startCounter( options, this.serverTypesCounter );
+    this.startCounter(options, this.serverTypesCounter);
 
-    this.startCounter( options, this.uiTypesCounter );
+    this.startCounter(options, this.uiTypesCounter);
   }
 
   setBrandLogoLoaded = () => {
     this.brandLogoLoaded = true;
-  }
+  };
 
   private startCounter(
-      options: { duration: number; useGrouping: boolean; formattingFn },
-      counter
+    options: { duration: number; useGrouping: boolean; formattingFn },
+    counter
   ) {
-    options.formattingFn = ( n: number ) => {
-      return this.countUpFormatter( n );
+    options.formattingFn = (n: number) => {
+      return this.countUpFormatter(n);
     };
 
-    if ( counter.count < this.KILO ) {
+    if (counter.count < this.KILO) {
       options.duration = 2;
-    } else if ( counter.count < this.MILLION ) {
+    } else if (counter.count < this.MILLION) {
       options.duration = 3;
     } else {
       options.duration = 4;
     }
 
-    const eventCountUp = new CountUp( counter.id, counter.count, options );
-    if ( !eventCountUp.error ) {
+    const eventCountUp = new CountUp(counter.id, counter.count, options);
+    if (!eventCountUp.error) {
       eventCountUp.start();
     } else {
-      console.error( eventCountUp.error );
+      console.error(eventCountUp.error);
     }
   }
 }