update home

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

@@ -6,7 +6,6 @@
 }
 
 .features {
-  padding-top: 0;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -26,14 +25,20 @@
   background-color: var(--brand-color-lighter-5);
 }
 
-.features h2, .features .feature {
+.features h4, .features .feature {
   padding-left: 7vw;
   padding-right: 7vw;
 }
 
-.features h2 {
-  background-color: var(--brand-color-lighter-5);
-  padding-top: 80px;
+.features h4 {
+  color: var(--brand-color);
+}
+
+.features h5 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+  font-weight: normal;
+  color: var(--brand-color);
 }
 
 .feature svg {
@@ -158,6 +163,15 @@
   .hero-content-left > * {
     padding-bottom: 6vh;
   }
+
+  .features {
+    padding-top: 6vh;
+  }
+
+  .features h4 {
+    padding-bottom: 20px;
+    text-align: center;
+  }
 }
 
 @media only screen and (min-width: 1000px) {
@@ -167,6 +181,11 @@
 
   .features {
     padding-bottom: 300px;
+    padding-top: 150px;
+  }
+
+  .features h4 {
+    padding-bottom: 40px;
   }
 
   .register-wrapper {

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

@@ -13,9 +13,9 @@ import { URLS } from '../../../util/constant';
 } )
 export class HomeComponent implements AfterViewInit {
 
-  downloadCounter = 2800;
-  starsCounter = 7;
-  userCounter = 5;
+  downloadCounter = 5100;
+  serverTypesCounter = 6;
+  uiTypesCounter = 3;
 
   brand = {
     brandLogo: '',
@@ -66,30 +66,30 @@ export class HomeComponent implements AfterViewInit {
     const eventCountUp = new CountUp( 'npmCounterElement', this.downloadCounter, options );
 
     options.formattingFn = ( n: number ) => {
-      return this.countUpFormatter( n, this.starsCounter );
+      return this.countUpFormatter( n, this.serverTypesCounter );
     };
-    if ( this.starsCounter < this.KILO ) {
+    if ( this.serverTypesCounter < this.KILO ) {
       options.duration = 2
-    } else if ( this.starsCounter < this.MILLION ) {
+    } else if ( this.serverTypesCounter < this.MILLION ) {
       options.duration = 3
     } else {
       options.duration = 4
     }
 
-    const studentCountUp = new CountUp( 'githubStarCounterElement', this.starsCounter, options );
+    const studentCountUp = new CountUp( 'githubStarCounterElement', this.serverTypesCounter, options );
 
     options.formattingFn = ( n: number ) => {
-      return this.countUpFormatter( n, this.userCounter );
+      return this.countUpFormatter( n, this.uiTypesCounter );
     };
-    if ( this.userCounter < this.KILO ) {
+    if ( this.uiTypesCounter < this.KILO ) {
       options.duration = 2
-    } else if ( this.userCounter < this.MILLION ) {
+    } else if ( this.uiTypesCounter < this.MILLION ) {
       options.duration = 3
     } else {
       options.duration = 4
     }
 
-    const userCountUp = new CountUp( 'serverTypesCounterElement', this.userCounter, options );
+    const userCountUp = new CountUp( 'serverTypesCounterElement', this.uiTypesCounter, options );
 
     if ( !eventCountUp.error ) {
       eventCountUp.start();