feat: add heroes section

src/app/app-routing.module.ts

@@ -38,6 +38,10 @@ const routes: Routes = [
     path: 'diversity',
     loadChildren: 'app/diversity/diversity.module#DiversityModule',
   },
+  {
+    path: 'heroes',
+    loadChildren: 'app/heroes/heroes.module#HeroesModule',
+  },
   {
     path: '**',
     redirectTo: '/',

src/app/app.module.ts

@@ -6,6 +6,7 @@ import { CoreModule } from './core/core.module';
 import { environment } from '../environments/environment';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { HomeModule } from './home/home.module';
+import { HeroesModule } from './heroes/heroes.module';
 import { NgModule } from '@angular/core';
 import { ScheduleModule } from './schedule/schedule.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
@@ -27,6 +28,7 @@ import '../style/fontAwesome.icons';
     FontAwesomeModule,
     HomeModule,
     ScheduleModule,
+    HeroesModule
   ],
   providers: [],
   bootstrap: [AppComponent],

src/app/core/menu/menu.component.html

@@ -43,6 +43,10 @@
          (click)="drawer.toggle()"
          class="menu-link"
          [routerLink]="['/diversity']">Diversity Scholarships</a>
+      <a mat-list-item
+      (click)="drawer.toggle()"
+      class="menu-link"
+      [routerLink]="['/heroes']">Our Heroes</a>
       <a mat-list-item
          class="menu-link small"
          href="mailto:info@ngcolombia.com">Contact us: info@ngcolombia.com</a>

src/app/diversity/diversity/diversity.component.scss

@@ -1,4 +1,24 @@
 @import '~style/_variables.scss';
+
+@media (min-width: 1150px) {
+  app-fullscreen {
+    &:not(.map-container) {
+      max-width: 1300px;
+      margin: 0 auto;
+    }
+    &:first-child {
+      min-height: 80vh;
+      padding-top: 20vh;
+    }
+    &.newsletter {
+      padding-top: 5vh;
+      padding-bottom: 20vh;
+    }
+    &:not(:first-child) {
+      min-height: 80vh;
+    }
+  }
+}
 .section {
   padding: 0 3rem;
   &.title {
@@ -89,4 +109,11 @@
 
 p.bullet {
   margin-bottom: 0.3rem;
+}
+
+@media (max-width: 500px) {
+  app-fullscreen {
+    min-height: auto;
+    padding: 4rem 0 1rem;
+  }
 }

src/app/heroes/heroes-routing.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { HeroesComponent } from './heroes/heroes.component';
+
+const routes: Routes = [
+  { path: '', component: HeroesComponent },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class HeroesRoutingModule { }

src/app/heroes/heroes.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from '@angular/common';
+import { HeroesComponent } from './heroes/heroes.component';
+import { HeroesRoutingModule } from './heroes-routing.module';
+import { NgModule } from '@angular/core';
+import { SharedModule } from '@shared/shared.module';
+
+import { NoImagePlaceholderDirective } from './heroes/directives/no-image-placeholder.directive'
+
+@NgModule({
+  imports: [CommonModule, HeroesRoutingModule, SharedModule],
+  declarations: [HeroesComponent, NoImagePlaceholderDirective],
+})
+export class HeroesModule {}

src/app/heroes/heroes/directives/no-image-placeholder.directive.ts

@@ -0,0 +1,20 @@
+import { Directive, ElementRef, OnInit } from '@angular/core';
+
+@Directive({
+  selector: '[no-image-placeholder]',
+})
+export class NoImagePlaceholderDirective implements OnInit {
+
+  constructor(private el: ElementRef) { }
+
+  ngOnInit() {
+    this.el.nativeElement.addEventListener("error", this.imgError);
+  } 
+
+
+  imgError = ()=> {
+    this.el.nativeElement.onerror = "";
+    this.el.nativeElement.src = "http://i.pravatar.cc/600";
+    console.log('error');
+  }
+}

src/app/heroes/heroes/heroes.component.html

@@ -0,0 +1,22 @@
+<app-banner title="Our heroes"></app-banner>
+
+<div class="main-container">
+  <div class="custom-wrapper">
+    <mat-card class="heroe" *ngFor="let hero of heroes">
+      <div class="top">
+        <div class="image-container">
+          <div class="wrapper">
+            <svg height="100%" width="100%" viewBox="0 0 100 100">
+              <polygon points="0.8 16.7, 50 0, 99.2 16.7, 92.4 78.197, 50 100, 7.6 78.197" style="fill:transparent;stroke:#211056; stroke-width: 2px;" />
+            </svg>
+            <img class="clip-angular-logo-polygon" [src]="hero.picture" [alt]="hero.name" no-image-placeholder>
+          </div>
+        </div>
+        <div class="phrase"> {{hero.phrase}} </div>
+      </div>
+      <div class="bottom">
+          <div class="name">{{hero.name}}</div>
+      </div>
+    </mat-card>
+  </div>
+</div>

src/app/heroes/heroes/heroes.component.scss

@@ -0,0 +1,100 @@
+@import '~style/_variables.scss';
+.main-container{
+  padding: 0px 0 80px;;
+  font-family: Roboto, "Helvetica Neue", sans-serif;
+  text-align: center;
+
+  @media (max-width: 480px) {
+    padding: 0px 0 40px;
+  }
+
+}
+
+.custom-wrapper {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  margin: 0 3%;
+}
+
+mat-card.heroe.mat-card.ng-star-inserted {
+  padding: 26px 20px 20px;
+  border-radius: 3px;
+  box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 -1px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+
+  @media (max-width: 480px) {
+    padding: 16px 10px 10px;
+  }
+}
+
+.heroe {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 0 0 450px;
+  margin: 30px 10px 20px;
+
+  @media (max-width: 480px) {
+    flex-basis: 340px;
+  }
+
+  .top{
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .image-container{
+      flex: 0 0 190px; 
+      padding: 0px;
+      margin-right: 15px;
+
+      @media (max-width: 480px) {
+        flex-basis: 140px;
+        margin-right: 5px;
+      }
+
+      .wrapper {
+        position: relative;
+        width: 100%;
+      }
+
+      svg {
+        position: absolute;
+        z-index: 2;
+        top: -3.5px
+      }
+
+      img { 
+        width: 100%;
+        // max-width: 165px;
+
+        &.clip-angular-logo-polygon {
+          clip-path: polygon(0% 16.7%, 50% -1%, 100% 16.7%, 92.4% 78.197%, 50% 100%, 7.6% 78.197%);
+        }
+      }
+    }
+
+    .phrase {
+      flex: 1 1 auto;
+      color: #211056;
+      font-size: 17px;
+    }
+  }
+
+  .bottom {
+    margin-top: 10px;
+    .name {
+      background-color: #211056;
+      color: #FFF;
+      font-size: 18px;
+      padding: 13px 34px 15px;
+      clip-path: polygon(0% 0%, 50% 20%, 100% 0%, 89% 76%, 50% 90%, 11% 76%);
+      font-size: 20px;
+      margin: 0 auto;
+      display: inline-block;
+    }
+  }
+}
+
+
+

src/app/heroes/heroes/heroes.component.ts

@@ -0,0 +1,32 @@
+import { Component, OnInit } from '@angular/core';
+import { heroesData } from "./heroes.data";
+
+@Component({
+  selector: 'app-heroes',
+  templateUrl: './heroes.component.html',
+  styleUrls: ['./heroes.component.scss']
+})
+export class HeroesComponent implements OnInit {
+
+  people: any;
+
+  heroes: any;
+
+  constructor() { }
+
+  ngOnInit() {
+    this.heroes = heroesData.sort((a, b) =>  (0.5 - Math.random()));
+    this.people = this.createRows(this.heroes);
+  }
+
+  createRows(arrayToReorder){
+    let newArray = [];
+    arrayToReorder.forEach((currentValue, index, initialArray) => {
+      if(index % 2 == 0){
+        newArray.push( initialArray.slice(index, index + 2) );
+      }
+    });
+    return newArray;
+  }
+
+}