moved testimonial data to constants

open-template-hub · Sep 8, 2021 · a0e6054 · a0e6054
1 parent 752437b
commit a0e6054
Show file tree

Hide file tree

Showing 8 changed files with 82 additions and 88 deletions.
diff --git a/src/app/component/common/card/testimonial-card/testimonial-card.component.scss b/src/app/component/common/card/testimonial-card/testimonial-card.component.scss
@@ -7,7 +7,6 @@
   color: var(--lighter-contrast);
   padding: 25px;
   max-height: 7em;
-  overflow: auto;
 }
 
 .icon-wrapper {
@@ -93,4 +92,4 @@
   .review-area {
     max-height: 3em;
   }
-}
+}
diff --git a/src/app/component/common/card/testimonial-card/testimonial-card.component.ts b/src/app/component/common/card/testimonial-card/testimonial-card.component.ts
@@ -1,25 +1,9 @@
 import { Component, Input } from '@angular/core';
 import { environment } from 'src/environments/environment';
 import { environmentCommon } from 'src/environments/environment-common';
-import { URLS } from '../../../../data/constant';
+import { Testimonial, URLS } from '../../../../data/constant';
 import { ThemeService } from '../../../../service/theme/theme.service';
 
-export interface TestimonialOption {
-  review: string;
-  reviewer: {
-    name: string;
-    title: string;
-    photoUri: string;
-    social: {
-      linkedIn: string;
-      twitter: string;
-    };
-  };
-  style: {
-    themeColor: string;
-  };
-}
-
 @Component( {
   selector: 'app-testimonial-card',
   templateUrl: './testimonial-card.component.html',
@@ -35,12 +19,12 @@ export class TestimonialCardComponent {
     brandLogo: '',
   };
 
-  @Input() option: TestimonialOption = {
+  @Input() option: Testimonial = {
     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. ',
+        '',
     reviewer: {
-      name: 'Open Template Hub',
-      title: 'Co-Founder',
+      name: '',
+      title: '',
       photoUri: '',
       social: {
         linkedIn: '',

diff --git a/src/app/component/timeline/timeline.component.scss b/src/app/component/timeline/timeline.component.scss
@@ -132,12 +132,6 @@ $counter: $items - $rows + 2;
     margin: 10px auto 80px;
     max-width: 94%;
     z-index: 2;
-    @include mq-sm {
-      max-width: 60%;
-    }
-    @include mq-md {
-      max-width: 40%;
-    }
     @include mq-lg {
       max-width: $card-width;
       height: $card-height;

diff --git a/src/app/data/constant.ts b/src/app/data/constant.ts
@@ -1,10 +1,7 @@
 import { environmentCommon } from '../../environments/environment-common';
 import { Partner } from '../component/common/swiper-wrapper/swiper-wrapper.component';
 
-
-/**
- * @description holds constants
- */
+// TODO: Move definitions and data to the newly created corresponding classes
 
 export const ResponseCode = {
   OK: 200,
@@ -496,6 +493,70 @@ export const TIME_LINE: TimeLine[] = [
   }
 ];
 
+export interface Testimonial {
+  review: string;
+  reviewer: {
+    name: string;
+    title: string;
+    photoUri: string;
+    social: {
+      linkedIn: string;
+      twitter: string;
+    };
+  };
+  style: {
+    themeColor: string;
+  };
+}
+
+export const TESTIMONIALS: Testimonial[] = [
+  {
+    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. ',
+    reviewer: {
+      name: 'Furkan Yavuz',
+      title: 'Co-Founder @ Open Template Hub',
+      photoUri:
+          'https://avatars0.githubusercontent.com/u/2248168?s=460&u=435ef6ade0785a7a135ce56cae751fb3ade1d126&v=4',
+      social: {
+        linkedIn: 'https://www.linkedin.com/in/furkanyavuz',
+        twitter: 'https://twitter.com/furknyavuz',
+      },
+    },
+    style: { themeColor: 'var(--warn)' },
+  },
+  {
+    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. ',
+    reviewer: {
+      name: 'Fatih Turker',
+      title: 'Co-Founder @ Open Template Hub',
+      photoUri:
+          'https://avatars1.githubusercontent.com/u/2202179?s=460&u=261b1129e7106c067783cb022ab9999aad833bdc&v=4',
+      social: {
+        linkedIn: 'https://www.linkedin.com/in/fatihtrker',
+        twitter: 'https://twitter.com/remoklify',
+      },
+    },
+    style: { themeColor: 'var(--error)' },
+  },
+  {
+    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. ',
+    reviewer: {
+      name: 'Mert Sarac',
+      title: 'Software Developer @ Open Template Hub',
+      photoUri:
+          'https://avatars1.githubusercontent.com/u/38442589?s=400&u=aa3cda11724fc297a0bfa6beb35c9be81687cf3c&v=4',
+      social: {
+        linkedIn: 'https://www.linkedin.com/in/mertlsarac',
+        twitter: 'https://twitter.com/mertlsarac',
+      },
+    },
+    style: { themeColor: 'var(--info)' },
+  }
+];
+
 export const CATEGORIES = [
   {
     name: 'Development',

diff --git a/src/app/page/landing-layout/about-us/about-us.component.html b/src/app/page/landing-layout/about-us/about-us.component.html
@@ -1,7 +1,13 @@
 <div class="about-us-page">
   <div class="hero">
     <div class="hero-content">
-      <h1>History of Open Template Hub</h1>
+      <h1>Team Behind the Open Template Hub</h1>
+      <!-- TODO: Implement a new component from card for team members -->
+    </div>
+  </div>
+  <div class="hero">
+    <div class="hero-content">
+      <h1>History of the Open Template Hub</h1>
       <h4>Minimizes your effort while building a new software business with our open source GitHub micro server
         templates and responsive web UI + mobile UI templates</h4>
     </div>

diff --git a/src/app/page/landing-layout/home/home.component.html b/src/app/page/landing-layout/home/home.component.html
@@ -51,9 +51,8 @@ <h4 class="testimonial-header">Customer reviews</h4>
     <h6 class="testimonial-description">What our customers are saying...</h6>
   </div>
   <div class="card-area">
-    <app-testimonial-card [option]="option1"></app-testimonial-card>
-    <app-testimonial-card [option]="option2"></app-testimonial-card>
-    <app-testimonial-card [option]="option3"></app-testimonial-card>
+    <app-testimonial-card *ngFor="let testimonial of TESTIMONIALS" [option]="testimonial">
+    </app-testimonial-card>
   </div>
   <app-swiper-wrapper [partners]="PARTNERS"></app-swiper-wrapper>
   <div class="features-wrapper">

diff --git a/src/app/page/landing-layout/home/home.component.scss b/src/app/page/landing-layout/home/home.component.scss
@@ -2,7 +2,6 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
-  font-size: 35px;
 }
 
 .features {

diff --git a/src/app/page/landing-layout/home/home.component.ts b/src/app/page/landing-layout/home/home.component.ts
@@ -4,9 +4,8 @@ import { Router } from '@angular/router';
 import { CountUp } from 'countup.js';
 import { environment } from '../../../../environments/environment';
 import { environmentCommon } from '../../../../environments/environment-common';
-import { TestimonialOption } from '../../../component/common/card/testimonial-card/testimonial-card.component';
 import { Partner } from '../../../component/common/swiper-wrapper/swiper-wrapper.component';
-import { PARTNERS, URLS } from '../../../data/constant';
+import { PARTNERS, TESTIMONIALS, URLS } from '../../../data/constant';
 import { AuthenticationService } from '../../../service/auth/authentication.service';
 import { ThemeService } from '../../../service/theme/theme.service';
 
@@ -26,61 +25,14 @@ export class HomeComponent implements AfterViewInit {
 
   URLS = URLS;
   PARTNERS: Partner[] = PARTNERS;
+  TESTIMONIALS = TESTIMONIALS;
 
   KILO = 1000;
   MILLION = this.KILO * this.KILO;
 
   environment = environment;
   environmentCommon = environmentCommon;
 
-  option1: 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. ',
-    reviewer: {
-      name: 'Furkan Yavuz',
-      title: 'Co-Founder @ Open Template Hub',
-      photoUri:
-          'https://avatars0.githubusercontent.com/u/2248168?s=460&u=435ef6ade0785a7a135ce56cae751fb3ade1d126&v=4',
-      social: {
-        linkedIn: 'https://www.linkedin.com/in/furkanyavuz',
-        twitter: 'https://twitter.com/furknyavuz',
-      },
-    },
-    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. ',
-    reviewer: {
-      name: 'Fatih Türker',
-      title: 'Co-Founder @ Open Template Hub',
-      photoUri:
-          'https://avatars1.githubusercontent.com/u/2202179?s=460&u=261b1129e7106c067783cb022ab9999aad833bdc&v=4',
-      social: {
-        linkedIn: 'https://www.linkedin.com/in/fatihtrker',
-        twitter: 'https://twitter.com/remoklify',
-      },
-    },
-    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. ',
-    reviewer: {
-      name: 'Mert Saraç',
-      title: 'Software Developer @ Open Template Hub',
-      photoUri:
-          'https://avatars1.githubusercontent.com/u/38442589?s=400&u=aa3cda11724fc297a0bfa6beb35c9be81687cf3c&v=4',
-      social: {
-        linkedIn: 'https://www.linkedin.com/in/mertlsarac',
-        twitter: 'https://twitter.com/mertlsarac',
-      },
-    },
-    style: { themeColor: 'var(--info)' },
-  };
-
   constructor(
       private formBuilder: FormBuilder,
       public router: Router,