Add testimonial section on homepage

frontend_v2/src/app/components/home/home.component.html

@@ -429,8 +429,30 @@ <h3 class="fw-light center">Sponsors</h3>
         </div>
       </div>
     </section>
-    <!-- Subscribe to newsletter -->
     <section class="ev-container text-med-black ev-super-light-bg">
+      <div class="grad-container-testimonial text-med-black">
+        <div class="row">
+          <h3 class="fw-light center">Testimonials</h3>
+        </div>
+        <div class="testimonial-container">
+          <div class="card ev-card-panel ev-challenge-card z-depth-2 hoverable margin-bottom-cancel">
+          <div class="testimonial-body">
+            <span class="fs-24">{{ testimonialbody }}</span>
+          </div>
+          <div class="testimonial-author fs-20">- {{ testimonialauthor }}</div>
+          <img src="assets/images/testimonials/arrow.png" (click)="testimonialNavigate()" class="testimonial-arrow-left" />
+          <img
+            src="assets/images/testimonials/arrow.png"
+            (click)="testimonialNavigate('right')"
+            class="testimonial-arrow-right"
+          />
+          <img src="assets/images/testimonials/quotes.png" class="testimonial-quotes" />
+        </div>
+        </div>
+      </div>
+    </section>
+    <!-- Subscribe to newsletter -->
+    <section class="ev-container text-med-black">
       <div class="grad-container text-med-black">
         <div class="row">
           <h3 class="fw-light center">Subscribe to our newsletter</h3>

frontend_v2/src/app/components/home/home.component.scss

@@ -1,4 +1,6 @@
 @import 'styles/variables';
+@import './mixins.scss';
+
 
 .grad-container .row {
   margin-left: auto;
@@ -92,6 +94,94 @@ p {
   }
 }
 
+.testimonial-container {
+  text-align: center;
+  width: 90%;
+  height: 30%;
+  padding-left: 5vw;
+  .testimonial-body {
+    width: 70%;
+    margin-left: 15%;
+    padding-top: 120px;
+    padding-bottom: 100px;
+    span {
+      color: #000;
+      font-weight: $fw-light;
+      font-style: italic;
+      padding: 15px;
+    }
+  }
+
+  .testimonial-author {
+    color: #000;
+    font-weight: $fw-regular;
+    padding-bottom: 70px;
+    text-align: right;
+    padding-right: 15vw;
+  }
+
+  .testimonial-arrow-left {
+    position: absolute;
+    top: 40%;
+    left: 0;
+    height: 100px;
+    cursor: pointer;
+  }
+
+  .testimonial-arrow-right {
+    position: absolute;
+    top: 40%;
+    right: 0;
+    height: 100px;
+    cursor: pointer;
+    transform: rotate(180deg);
+  }
+
+  .testimonial-quotes {
+    position: absolute;
+    top: 15%;
+    left: 10%;
+    height: 50px;
+  }
+}
+
+@include screen-medium {
+  .testimonial-container {
+    .testimonial-quotes {
+      top: 15% !important;
+      height: 40px !important;
+    }
+  }
+}
+
+@include screen-small {
+  .testimonial-container {
+    background-size: 80 !important;
+    padding-left: 0;
+    .testimonial-quotes {
+      height: 30px !important;
+      top: 12%;
+    }
+    .testimonial-author {
+      padding-bottom: 40px;
+    }
+  }
+}
+
+.grad-container-testimonial {
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 60px 100px 40px 100px;
+  clear: both;
+}
+
+@media screen and (max-width: 992px){
+    .grad-container-testimonial {
+      padding: 10px;
+  }
+}
+
+
 #gsoc {
   height: 45%;
 }

frontend_v2/src/app/components/home/home.component.spec.ts

@@ -12,7 +12,6 @@ import { HttpClientModule } from '@angular/common/http';
 import { HomemainComponent } from './homemain/homemain.component';
 import { PartnersComponent } from './partners/partners.component';
 import { RulesComponent } from './rules/rules.component';
-import { TestimonialsComponent } from './testimonials/testimonials.component';
 import { FeaturedChallengesComponent } from './featured-challenges/featured-challenges.component';
 import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
@@ -34,7 +33,6 @@ describe('HomeComponent', () => {
         HomemainComponent,
         PartnersComponent,
         RulesComponent,
-        TestimonialsComponent,
         FeaturedChallengesComponent,
         TwitterFeedComponent,
       ],

frontend_v2/src/app/components/home/home.component.ts

@@ -1,11 +1,12 @@
-import { Component, OnDestroy, OnInit, ViewChildren, QueryList, AfterViewInit } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewChildren, QueryList, AfterViewInit, Inject } from '@angular/core';
 import { ApiService } from '../../services/api.service';
 import { EndpointsService } from '../../services/endpoints.service';
 import { AuthService } from '../../services/auth.service';
 import { GlobalService } from '../../services/global.service';
 import { BehaviorSubject } from 'rxjs';
 import { Router } from '@angular/router';
 import { InputComponent } from '../../components/utility/input/input.component';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * Component Class
@@ -21,6 +22,37 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   public user = {};
   public challengeList = [];
 
+  /**
+   * Selected testimonial index
+   */
+  selected = 0;
+
+  /**
+  * Placeholder text Lorem Ipsum
+  */
+  ipsum: any =
+    'Lorem ipsum dolor sit amet,\
+  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';
+
+  /**
+  * Sample testimonials till the API comes up
+  */
+  testimonials = [
+    { text: '1-' + this.ipsum, author: 'Lorem' },
+    { text: '2-' + this.ipsum, author: 'Octopus' },
+    { text: '3-' + this.ipsum, author: 'Penguin' },
+  ];
+
+  /**
+  * Selected testimonial text
+  */
+  testimonialbody = this.testimonials[this.selected]['text'];
+
+  /**
+  * Selected testimonial author
+  */
+  testimonialauthor = this.testimonials[this.selected]['author'];
+
   /**
    * Subscribe Form
    */
@@ -32,12 +64,18 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
   components: QueryList<InputComponent>;
 
   authServiceSubscription: any;
+
+  /**
+   * Component constructor
+   * @param document  Window document Injection.
+   */
   constructor(
     private apiService: ApiService,
     private endpointService: EndpointsService,
     private authService: AuthService,
     private globalService: GlobalService,
-    private router: Router
+    private router: Router,
+    @Inject(DOCUMENT) private document: Document
   ) {}
 
   ngOnInit() {
@@ -115,6 +153,82 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     );
   }
 
+  /**
+   * Right arrow clicked
+   */
+   testimonialRight() {
+    this.selected = this.selected + 1;
+    if (this.selected >= this.testimonials.length) {
+      this.selected = 0;
+    }
+  }
+
+  /**
+   * left arrow clicked
+   */
+  testimonialLeft() {
+    this.selected = this.selected - 1;
+    if (this.selected < 0) {
+      this.selected = this.testimonials.length - 1;
+    }
+  }
+
+  /**
+   * Testimonials navigated
+   */
+  testimonialNavigate(direction = 'left') {
+    const a = this.document.getElementsByClassName('testimonial-body')[0];
+    const b = this.document.getElementsByClassName('testimonial-author')[0];
+    const c = this.document.getElementsByClassName('testimonial-quotes')[0];
+    if (direction === 'left') {
+      this.testimonialLeft();
+    } else {
+      this.testimonialRight();
+    }
+    this.flyOut(a, direction, this);
+    this.disappearAppear(a, this);
+    this.disappearAppear(b, this);
+    this.disappearAppear(c, this);
+  }
+
+  /**
+   * Fly out animation
+   */
+  flyOut = (element, direction, scope) => {
+    const temp = 15;
+    setTimeout(function () {
+      scope.testimonialbody = scope.testimonials[scope.selected]['text'];
+      scope.testimonialauthor = scope.testimonials[scope.selected]['author'];
+      element.style.marginLeft = '15%';
+    }, 1000);
+  };
+
+  /**
+   * Disappear animation
+   */
+  disappearAppearRecursive = (element, temp) => {
+    const x = temp - 0.01;
+    if (x >= 0) {
+      (function (scope) {
+        setTimeout(function () {
+          element.style.opacity = x + '';
+          scope.disappearAppearRecursive(element, x);
+        }, 5);
+      })(this);
+    }
+  };
+
+  /**
+   * Disappear animation wrapper
+   */
+  disappearAppear = (element, scope) => {
+    const temp = 1.0;
+    this.disappearAppearRecursive(element, temp);
+    setTimeout(function () {
+      element.style.opacity = '1';
+    }, 1000);
+  };
+
   ngOnDestroy(): void {
     if (this.authServiceSubscription) {
       this.authServiceSubscription.unsubscribe();

frontend_v2/src/app/components/home/home.module.ts

@@ -7,7 +7,6 @@ import { FeaturedChallengesComponent } from './featured-challenges/featured-chal
 import { HomemainComponent } from './homemain/homemain.component';
 import { PartnersComponent } from './partners/partners.component';
 import { RulesComponent } from './rules/rules.component';
-import { TestimonialsComponent } from './testimonials/testimonials.component';
 import { TwitterFeedComponent } from './twitter-feed/twitter-feed.component';
 import { HomeComponent } from './home.component';
 
@@ -21,7 +20,6 @@ import { HomeRoutingModule } from './home-routing.module';
     TwitterFeedComponent,
     PartnersComponent,
     RulesComponent,
-    TestimonialsComponent,
     HomemainComponent,
     FeaturedChallengesComponent,
   ],
@@ -31,7 +29,6 @@ import { HomeRoutingModule } from './home-routing.module';
     TwitterFeedComponent,
     PartnersComponent,
     RulesComponent,
-    TestimonialsComponent,
     HomemainComponent,
     FeaturedChallengesComponent,
   ],