created testimonial-card

src/app/app.module.ts

@@ -69,6 +69,7 @@ import { SearchComponent } from './component/common/search/search.component';
 import { RateBarComponent } from './component/common/rate-bar/rate-bar.component';
 import { PricingComponent } from './page/raw-landing-layout/pricing/pricing.component';
 import { PricingCardComponent } from './component/common/card/pricing-card/pricing-card.component';
+import { TestimonialCardComponent } from './component/common/card/testimonial-card/testimonial-card.component';
 
 FullCalendarModule.registerPlugins( [
   dayGridPlugin,
@@ -125,7 +126,8 @@ FullCalendarModule.registerPlugins( [
     RateBarComponent,
     EditThemeComponent,
     PricingComponent,
-    PricingCardComponent
+    PricingCardComponent,
+    TestimonialCardComponent
   ],
   imports: [
     BrowserModule,

src/app/component/common/card/testimonial-card/testimonial-card.component.html

@@ -0,0 +1,34 @@
+<div id=event-card>
+  <app-card1 [enableHeaderFullImg]="false" [height]="'340px'"
+             [paddingContent]="false"
+             [width]="'400px'" [maxHeight]="'500px'"
+             [containsVideo]="false" [enableHeader]="false">
+    <div body class="content-wrapper">
+      <div class="icon-wrapper">
+        <i class="material-icons">format_quote</i>
+      </div>
+      <p class="review-area">{{ option.review }}</p>
+      <a class="profile-image">
+        <img [src]="option.brand.brandLogo" alt="logo" class="brand-logo" height="40"/>
+        <span>Open Template Hub</span>
+      </a>
+      <div class="footer-social">
+        <a [href]="environment.social.twitter.url + '/' + environment.oth.social.twitter" target="_blank">
+          <i [class]="'fab fa-' + environment.social.twitter.cssClass + ' fa-2x fa-fw'"></i>
+        </a>
+        <a [href]="'https://github.com/' + environment.oth.social.github"
+           target="_blank">
+          <i [class]="'fab fa-' + environment.social.github.cssClass + ' fa-2x fa-fw'"></i>
+        </a>
+        <a [href]="'https://www.producthunt.com/' + environment.oth.social.productHunt"
+           target="_blank">
+          <i [class]="'fab fa-' + environment.social.productHunt.cssClass + ' fa-2x fa-fw'"></i>
+        </a>
+        <a [href]="environment.social.linkedin.url + '/company/' + environment.oth.social.linkedin"
+           target="_blank">
+          <i [class]="'fab fa-' + environment.social.linkedin.cssClass + ' fa-2x fa-fw'"></i>
+        </a>
+      </div>
+    </div>
+  </app-card1>
+</div>

src/app/component/common/card/testimonial-card/testimonial-card.component.scss

@@ -0,0 +1,29 @@
+.content-wrapper {
+  text-align: center;
+  font-size: 0.5em;
+}
+
+.review-area {
+  color: var(--lighter-contrast);
+  padding: 1.2em;
+}
+
+.icon-wrapper {
+  text-align: left;
+  padding: 1em 1em 0.1em;
+}
+
+.icon-wrapper i {
+  color: var(--brand-color);
+}
+
+.footer-social {
+  display: flex;
+  justify-content: center;
+  font-size: 0.6em;
+  margin-top: 3em;
+}
+
+.footer-social i {
+  color: var(--brand-color);
+}

src/app/component/common/card/testimonial-card/testimonial-card.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TestimonialCardComponent } from './testimonial-card.component';
+
+describe('TestimonialCardComponent', () => {
+  let component: TestimonialCardComponent;
+  let fixture: ComponentFixture<TestimonialCardComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TestimonialCardComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestimonialCardComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/common/card/testimonial-card/testimonial-card.component.ts

@@ -0,0 +1,36 @@
+import { Component, OnInit } from '@angular/core';
+import { ThemeService } from '../../../../service/theme/theme.service';
+import { URLS } from '../../../../util/constant';
+import { environment } from '../../../../../environments/environment';
+
+export interface TestimonialOption {
+  review: string,
+  brand: {
+    brandLogo: string
+  }
+}
+
+@Component({
+  selector: 'app-testimonial-card',
+  templateUrl: './testimonial-card.component.html',
+  styleUrls: ['./testimonial-card.component.scss']
+})
+export class TestimonialCardComponent implements OnInit {
+  URLS = URLS
+  environment = environment;
+  brand = {
+    brandLogo: '',
+  };
+
+  option: 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: this.themeService.brand
+  }
+  constructor(
+    private themeService: ThemeService
+  ) { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -7982,5 +7982,14 @@ <h6>
       </div>
     </div>
   </div>
+  <div class="in-page-title">
+    <h2 class="testimonial-header">Customer reviews</h2>
+    <p class="testimonial-description">What our customers are saying...</p>
+  </div>
+  <div class="card-area">
+    <app-testimonial-card></app-testimonial-card>
+    <app-testimonial-card></app-testimonial-card>
+    <app-testimonial-card></app-testimonial-card>
+  </div>
   <app-cookies></app-cookies>
 </div>

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

@@ -108,6 +108,15 @@
   justify-content: space-evenly;
 }
 
+.card-area {
+  width: 100%;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  -webkit-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
 @media only screen and (max-width: 999px) {
   .home-page {
     font-size: 23px;
@@ -204,6 +213,12 @@
   .hero-content-left h6 {
     text-align: left;
   }
+
+  app-testimonial-card {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
 @media (hover: hover) {