partners update

src/app/component/common/swiper-wrapper/swiper-wrapper.component.html

@@ -1,13 +1,13 @@
 <swiper
-  [slidesPerView]="1"
-  [spaceBetween]="10"
-  [loop]="true"
-  [loopFillGroupWithBlank]="true"
-  [pagination]="{
+    [slidesPerView]="1"
+    [spaceBetween]="10"
+    [loop]="true"
+    [loopFillGroupWithBlank]="true"
+    [pagination]="{
       clickable: true
     }"
-  [navigation]="true"
-  [breakpoints]="{
+    [navigation]="true"
+    [breakpoints]="{
       '640': {
         slidesPerView: 1,
         spaceBetween: 30
@@ -21,9 +21,8 @@
         spaceBetween: 50
       }
     }"
-  class="mySwiper"
->
+    class="mySwiper">
   <ng-template *ngFor="let partner of partners" swiperSlide>
-    <img [src]="partner.brandLogo" alt="logo" class="brand-logo" height="50"/>
+    <img [src]="partner.brandLogo" alt="logo" class="brand-logo" height="90"/>
   </ng-template>
 </swiper>

src/app/component/common/swiper-wrapper/swiper-wrapper.component.ts

@@ -15,11 +15,5 @@ export interface Partner {
 } )
 
 export class SwiperWrapperComponent {
-  @Input() partners: Partner[] = [
-    { brandLogo: '../../../../assets/common/partners/buymeacoffee-logo.png' },
-    { brandLogo: '../../../../assets/common/partners/github-logo.png' },
-    { brandLogo: '../../../../assets/common/partners/google-logo.png' },
-    { brandLogo: '../../../../assets/common/partners/linkedin-logo.png' },
-    { brandLogo: '../../../../assets/common/partners/stripe-logo.png' }
-  ];
+  @Input() partners: Partner[] = [];
 }

src/app/data/constant.ts

@@ -1,4 +1,5 @@
 import { DropdownColumnOption } from '../component/common/dropdown-menu/dropdown-menu.component';
+import { Partner } from '../component/common/swiper-wrapper/swiper-wrapper.component';
 
 /**
  * @description holds constants
@@ -225,6 +226,14 @@ export const SERVICES: DropdownColumnOption[ ] = [
   }
 ];
 
+export const PARTNERS: Partner[] = [
+  { brandLogo: '../../../../assets/common/partners/github-logo.png' },
+  { brandLogo: '../../../../assets/common/partners/aws-logo.png' },
+  { brandLogo: '../../../../assets/common/partners/heroku-logo.png' },
+  { brandLogo: '../../../../assets/common/partners/google-logo.png' },
+  { brandLogo: '../../../../assets/common/partners/stripe-logo.png' },
+  { brandLogo: '../../../../assets/common/partners/netlify-logo.png' },
+];
 
 export const CATEGORIES = [
   {

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

@@ -15,7 +15,9 @@ <h6>Minimizes your effort while building a new software business with our open s
       </div>
 
       <div class="hero-content-right">
-        <img class="demonstration" [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/products/company-profile-ui/oth-packages.png?raw=true'" alt="oth-packages"/>
+        <img class="demonstration"
+             [src]="'https://github.com/open-template-hub/open-template-hub.github.io/blob/master/assets/products/company-profile-ui/oth-packages.png?raw=true'"
+             alt="oth-packages"/>
       </div>
     </div>
     <div class="counters">
@@ -58,7 +60,7 @@ <h6 class="testimonial-description">What our customers are saying...</h6>
     <app-testimonial-card [option]="option2" [marginTop]="'180px'" [minHeight]="'156px'"></app-testimonial-card>
     <app-testimonial-card [option]="option3" [marginTop]="'119px'" [minHeight]="'217px'"></app-testimonial-card>
   </div>
-  <app-swiper-wrapper></app-swiper-wrapper>
+  <app-swiper-wrapper [partners]="PARTNERS"></app-swiper-wrapper>
   <div class="features-wrapper">
     <div *ngFor="let productLine of PRODUCT_LINES;" class="features">
       <div class="product-line-header">
@@ -74,15 +76,18 @@ <h5 *ngIf="productLine.sectionDescription">
            [class.feature-left]="i % 2 === 1" [class.feature-right]="i % 2 === 0">
         <div *ngIf="i % 2 === 0" 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: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
+            <path d="M 0,150 1000,0 v 150 z"
+                  [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
           </svg>
         </div>
         <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 1000,0 0,0 v 150 z" [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
+            <path d="M 1000,0 0,0 v 150 z"
+                  [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
           </svg>
         </div>
-        <div class="feature" [style.background-color]="i % 2 == 0 ? (product.backgroundColor ? product.backgroundColor : 'var(--hover)') : ';'">
+        <div class="feature"
+             [style.background-color]="i % 2 == 0 ? (product.backgroundColor ? product.backgroundColor : 'var(--hover)') : ';'">
           <a class="feature-img-wrapper" [href]="product.link">
             <img class="server-logo"
                  [src]="product.brand.brandLogo"
@@ -100,7 +105,8 @@ <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 1000,0 0,0 v 150 z" [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
+            <path d="M 1000,0 0,0 v 150 z"
+                  [style]="'fill: ' + (product.backgroundColor ? product.backgroundColor : 'var(--hover)') + ';'"></path>
           </svg>
         </div>
       </div>

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

@@ -4,9 +4,10 @@ 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 { Partner } from '../../../component/common/swiper-wrapper/swiper-wrapper.component';
+import { PARTNERS, PRODUCT_LINES, URLS } from '../../../data/constant';
 import { AuthenticationService } from '../../../service/auth/authentication.service';
 import { ThemeService } from '../../../service/theme/theme.service';
-import { PRODUCT_LINES, URLS } from '../../../data/constant';
 
 @Component( {
   selector: 'app-home',
@@ -25,6 +26,7 @@ export class HomeComponent implements AfterViewInit {
 
   URLS = URLS;
   PRODUCT_LINES: DropdownColumnOption[] = PRODUCT_LINES;
+  PARTNERS: Partner[] = PARTNERS;
 
   KILO = 1000;
   MILLION = this.KILO * this.KILO;
@@ -33,19 +35,19 @@ export class HomeComponent implements AfterViewInit {
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit blandit, tempus risus vitae, elementum eros. Suspendisse nec orci at neque molestie dignissim. ',
     brand: { brandLogo: '../../../../assets/common/social/buymeacoffee-logo.png' },
     style: { themeColor: 'var(--warn)' }
-  }
+  };
 
   option2: TestimonialOption = {
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit blandit, tempus risus vitae, elementum eros. Suspendisse nec orci at neque molestie dignissim. ',
     brand: { brandLogo: '../../../../assets/common/social/reddit-logo.png' },
     style: { themeColor: 'var(--error)' }
-  }
+  };
 
   option3: TestimonialOption = {
     review: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse in elit blandit, tempus risus vitae, elementum eros. Suspendisse nec orci at neque molestie dignissim. ',
     brand: { brandLogo: '../../../../assets/common/social/facebook-logo.png' },
     style: { themeColor: 'var(--info)' }
-  }
+  };
 
   constructor(
       private formBuilder: FormBuilder,
@@ -77,11 +79,11 @@ export class HomeComponent implements AfterViewInit {
     };
 
     if ( this.downloadCounter < this.KILO ) {
-      options.duration = 2
+      options.duration = 2;
     } else if ( this.downloadCounter < this.MILLION ) {
-      options.duration = 3
+      options.duration = 3;
     } else {
-      options.duration = 4
+      options.duration = 4;
     }
 
     const eventCountUp = new CountUp( 'npmCounterElement', this.downloadCounter, options );
@@ -90,11 +92,11 @@ export class HomeComponent implements AfterViewInit {
       return this.countUpFormatter( n, this.serverTypesCounter );
     };
     if ( this.serverTypesCounter < this.KILO ) {
-      options.duration = 2
+      options.duration = 2;
     } else if ( this.serverTypesCounter < this.MILLION ) {
-      options.duration = 3
+      options.duration = 3;
     } else {
-      options.duration = 4
+      options.duration = 4;
     }
 
     const studentCountUp = new CountUp( 'githubStarCounterElement', this.serverTypesCounter, options );
@@ -103,11 +105,11 @@ export class HomeComponent implements AfterViewInit {
       return this.countUpFormatter( n, this.uiTypesCounter );
     };
     if ( this.uiTypesCounter < this.KILO ) {
-      options.duration = 2
+      options.duration = 2;
     } else if ( this.uiTypesCounter < this.MILLION ) {
-      options.duration = 3
+      options.duration = 3;
     } else {
-      options.duration = 4
+      options.duration = 4;
     }
 
     const userCountUp = new CountUp( 'serverTypesCounterElement', this.uiTypesCounter, options );
@@ -131,12 +133,12 @@ export class HomeComponent implements AfterViewInit {
 
   countUpFormatter( n: number, lastNumber: number ) {
     if ( n < this.KILO ) {
-      return n + ''
+      return n + '';
     } else {
       if ( n < this.MILLION ) {
-        return Math.round( n / this.KILO * 10 ) / 10 + 'k'
+        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';
       }
     }
   }