Frontend_V2: Add testimonial section on homepage(Cloud-CV#3527)

* add testimonial section on homepage * removed unnecessary animations * remove padding for mobile view * add wrapper * add testimonial org and logo * fix the testimonial card * fix indentation Co-authored-by: Rishabh Jain <[email protected]>
vinceli1004 · Aug 26, 2021 · a973f25 · a973f25
1 parent d70a544
commit a973f25
Show file tree

Hide file tree

Showing 9 changed files with 256 additions and 287 deletions.
diff --git a/frontend_v2/src/app/components/home/home.component.html b/frontend_v2/src/app/components/home/home.component.html
@@ -429,8 +429,39 @@ <h3 class="fw-light center">Sponsors</h3>
         </div>
       </div>
     </section>
+    <!-- Testimonials Section --> 
+    <section class="ev-container testimonial-wrapper text-med-black ev-super-light-bg">
+      <div class="grad-container 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="row">
+            <div class="testimonial-author col s12 m3 l3 center fs-20">
+              <img src="../../../assets/images/profile.png" class="logo"/>
+              <div class="  testimonial-details">
+                <h5 class="name fs-20">{{ testimonialauthor}}</h5>
+                <span class="orgname fs-18">{{ testimonialorg }}</span>
+              </div>
+            </div>
+            <div class="col s12 m6 l9 testimonial-body">
+              <span class="fs-24">{{ testimonialbody }}</span>
+            </div>
+          </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 ev-super-light-bg">
+    <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>

diff --git a/frontend_v2/src/app/components/home/home.component.scss b/frontend_v2/src/app/components/home/home.component.scss
@@ -1,4 +1,5 @@
 @import 'styles/variables';
+@import './mixins.scss';
 
 .grad-container .row {
   margin-left: auto;
@@ -92,6 +93,111 @@ p {
   }
 }
 
+.testimonial-container {
+  text-align: center;
+  width: 90%;
+  height: 30%;
+  padding-left: 5vw;
+
+  .testimonial-body {
+    padding-top: 150px;
+    padding-bottom: 70px;
+    width: 60%;
+
+    span {
+      color: #000;
+      font-weight: $fw-light;
+      font-style: italic;
+    }
+  }
+
+  .testimonial-author {
+    padding-top: 100px;
+    padding-bottom: 70px;
+    margin-left: 5%;
+
+    .logo {
+      height: 100px;
+      width: 100px;
+    }
+
+    .testimonial-details {
+      margin-top: 15px;
+      display: block;
+    }
+
+    .name {
+      margin: 0;
+      padding-bottom: 5px;
+    }
+  }
+
+  .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: 22%;
+    left: 30%;
+    height: 50px;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .testimonial-container {
+    .testimonial-author {
+      margin-left: 0;
+    }
+    .testimonial-body {
+      padding-top: 35px;
+      width: 80%;
+      margin-left: 10%;
+    }
+    .testimonial-quotes {
+      top: 280px;
+      left: 17%;
+    }
+  }
+}
+
+@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-author {
+      padding-bottom: 40px;
+    }
+  }
+  .testimonial-wrapper {
+    .grad-container {
+      padding: 0px;
+    }
+  }
+}
+
 #gsoc {
   height: 45%;
 }

diff --git a/frontend_v2/src/app/components/home/home.component.spec.ts b/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,
       ],

diff --git a/frontend_v2/src/app/components/home/home.component.ts b/frontend_v2/src/app/components/home/home.component.ts
@@ -1,10 +1,11 @@
-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 { Router } from '@angular/router';
 import { InputComponent } from '../../components/utility/input/input.component';
+import { DOCUMENT } from '@angular/common';
 
 /**
  * Component Class
@@ -20,6 +21,42 @@ 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', org: 'Georgia Tech', image:'' },
+    { text: '2-' + this.ipsum, author: 'Octopus', org: 'Google', image:'' },
+    { text: '3-' + this.ipsum, author: 'Penguin', org: 'Facebook', image:'' },
+  ];
+
+  /**
+  * Selected testimonial text
+  */
+  testimonialbody = this.testimonials[this.selected]['text'];
+
+  /**
+  * Selected testimonial author
+  */
+  testimonialauthor = this.testimonials[this.selected]['author'];
+
+  /**
+  * Selected testimonial orgName
+  */
+  testimonialorg = this.testimonials[this.selected]['org'];
+
   /**
    * Subscribe Form
    */
@@ -46,7 +83,8 @@ export class HomeComponent implements OnInit, AfterViewInit, OnDestroy {
     private endpointService: EndpointsService,
     private authService: AuthService,
     private globalService: GlobalService,
-    private router: Router
+    private router: Router,
+    @Inject(DOCUMENT) private document: Document
   ) {}
 
   ngOnInit() {
@@ -124,6 +162,84 @@ 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];
+    const d = this.document.getElementsByClassName('testimonial-org')[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);
+    this.disappearAppear(d, 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'];
+      scope.testimonialorg = scope.testimonials[scope.selected]['org'];
+    }, 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();

diff --git a/frontend_v2/src/app/components/home/home.module.ts b/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,
   ],

diff --git a/frontend_v2/src/app/components/home/testimonials/testimonials.component.html b/frontend_v2/src/app/components/home/testimonials/testimonials.component.html