Updated About page with more Info.

package.json

@@ -11,6 +11,7 @@
   },
   "private": true,
   "dependencies": {
+    "@agm/core": "^1.0.0-beta.3",
     "@angular/animations": "^6.0.3",
     "@angular/common": "^6.0.3",
     "@angular/compiler": "^6.0.3",
@@ -20,6 +21,9 @@
     "@angular/platform-browser": "^6.0.3",
     "@angular/platform-browser-dynamic": "^6.0.3",
     "@angular/router": "^6.0.3",
+    "@google/maps": "^0.5.5",
+    "@ng-bootstrap/ng-bootstrap": "^3.2.0",
+    "@types/googlemaps": "^3.30.13",
     "bootstrap": "^4.1.3",
     "core-js": "^2.5.4",
     "font-awesome": "^4.7.0",

src/app/about/about.component.css

@@ -0,0 +1,89 @@
+.img-fluid {
+  /*width: 2000px;*/
+  width:100%;
+  /*padding-top: 20px;*/
+  padding-bottom: 20px;
+  /*height: 100vh;*/
+  height: 50vh;
+}
+
+div .a{
+  text-align-last: center;
+  font-weight: bold;
+  font-size: 40px;
+}
+
+div .g1{
+  display:inline-block;
+  vertical-align:top;
+  font-weight:bold;
+}
+
+div .g1\.1{
+  display:inline-block;
+  vertical-align:bottom;
+  margin-top:5px;
+}
+
+div .g2{
+  /*display:inline;*/
+  vertical-align:top;
+}
+
+div .g2\.2{
+  display:inline-block;
+  vertical-align:bottom;
+  font-weight:bold;
+}
+
+div .g3{
+  /*display:inline;*/
+  vertical-align:top;
+}
+
+div .g3\.3{
+  display:inline-block;
+  vertical-align:bottom;
+  font-weight:bold;
+}
+
+div .g4{
+  /*display:inline;*/
+  vertical-align:top;
+}
+
+div .g4\.4{
+  display:inline-block;
+  vertical-align:bottom;
+  font-weight:bold;
+}
+
+div .g5{
+  /*display:inline;*/
+  vertical-align:top;
+}
+
+div .g5\.5{
+  display:inline-block;
+  vertical-align:bottom;
+  font-weight:bold;
+}
+
+div .g6{
+  /*display:inline;*/
+  vertical-align:top;
+}
+
+div .g6\.6{
+  display:inline-block;
+  vertical-align:bottom;
+  font-weight:bold;
+}
+
+.loc1{
+  text-align-last: center;
+  font-weight: bold;
+  font-size: 40px;
+}
+
+

src/app/about/about.component.html

@@ -0,0 +1,80 @@
+<div class="container-fluid">
+  <div class="row">
+    <p>
+      <img
+        class="img-fluid"
+        src="https://www.hubspot.com/hubfs/assets/hubspot.com/about/Our_Story_Header_Background.jpg?t=1536220385114"
+        alt="About Us" width="100%" height="100%">
+    </p>
+  </div>
+</div>
+<div class="container">
+  <div class = "a"><p>Our Team</p></div>
+  <div class="row">
+    <div class="col-sm-6 col-xs-12 g1">
+      <img
+           src="https://rev-upyourresume.com.au/wp-content/uploads/2018/03/Goverment-.png"
+           class="rounded-circle"
+           alt="XYZ" width="200" height="200">
+      <div class="g1.1">
+        <p>Mr. abc <br>Executive Head</p>
+        </div>
+    </div>
+       <div class="col-sm-6 col-xs-12 g2">
+      <img src="https://www.humanexventures.com/wp-content/uploads/2012/12/person_31.png"
+           class="rounded-circle"
+           alt="XYZ" width="200" height="200">
+         <div class="g2.2">
+           <p>Mr. abc <br>Executive Head</p>
+         </div>
+    </div>
+    <div class="col-sm-6 col-xs-12 g3">
+      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTWKedOAEbTLzkt04SDehJcDCPZ7B6jQ-gQXeFan-tvtge6N2lC"
+           class="rounded-circle"
+           alt="XYZ" width="200" height="200">
+      <div class="g3.3">
+        <p>Mr. abc <br>Executive Head</p>
+      </div>
+    </div>
+    <div class="col-sm-6 col-xs-12 g4">
+      <img src="https://24j80g1p9hzhqaoz63jhs1m1-wpengine.netdna-ssl.com/wp-content/uploads/2015/04/Service_Support1-400x400.png"
+           class="rounded-circle"
+           alt="XYZ" width="200" height="200">
+      <div class="g4.4">
+        <p>Mr. abc <br>Executive Head</p>
+      </div>
+    </div>
+    <div class="col-sm-6 col-xs-12 g5">
+      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSaIS2xJX_22VWSklpZbw7kBoMcjTux2LCKwTaZloerJkCnJ0qX3w"
+           class="rounded-circle"
+           alt="XYZ" width="200" height="200">
+      <div class="g5.5">
+        <p>Mr. abc <br>Executive Head</p>
+      </div>
+    </div>
+    <div class="col-sm-6 col-xs-12 g6">
+      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlH5kczkj4JZFZo48HBdLinksadT0jtR4br2DObuApevviEkPtOw"
+           class="rounded-circle"
+           alt="XYZ" width="200" height="200">
+      <div class="g6.6">
+        <p>Mr. abc <br>Executive Head</p>
+      </div>
+    </div>
+  </div>
+</div>
+<br>
+<div class = "container">
+  <div class = "loc1">
+    <p>Our Locations</p>
+  </div>
+  <div class = "row">
+    <div class = "col-sm-9 col-xs-12">
+      <div class ="map">
+       <pm-map></pm-map>
+      </div>
+    </div>
+    <div class = "col-sm-3 col-xs-12">
+      <p>Betatest Solutions Pvt Ltd.<br>18th Main 2nd Cross<br>Kodihalli Bangalore Karnataka</p>
+    </div>
+  </div>
+</div>

src/app/about/about.component.ts

@@ -0,0 +1,21 @@
+import { Component, Input, ViewChild, NgZone, OnInit } from '@angular/core';
+import { MapsAPILoader, AgmMap } from '@agm/core';
+import { GoogleMapsAPIWrapper } from '@agm/core/services';
+import { createClient, GoogleMapsClient } from '@google/maps';
+import { } from '@types/googlemaps';
+
+@Component({
+  selector: 'pm-about',
+  templateUrl: './about.component.html',
+  styleUrls: ['./about.component.css']
+})
+export class AboutComponent implements OnInit{
+
+  constructor() {
+
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/about/about.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+import { BrowserModule } from '@angular/platform-browser';
+import { AboutComponent } from './about.component';
+import { FormsModule} from "@angular/forms";
+import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { AgmCoreModule, GoogleMapsAPIWrapper } from '@agm/core';
+import { MapComponent } from './map/map.component';
+
+@NgModule({
+  imports: [
+    RouterModule.forChild([
+      { path: 'about', component: AboutComponent }
+    ])
+    ,BrowserModule,
+    FormsModule
+    // ,AgmCoreModule.forRoot({apiKey: 'AIzaSyCtJSuEcCHpS4r5I-NikkuYhnuPr7E3bvs'}),
+    // NgbModule.forRoot()
+  ],
+  providers: [
+    GoogleMapsAPIWrapper // <---
+  ],
+  declarations: [
+    AboutComponent,
+    MapComponent]})
+export class AboutModule { }

src/app/about/map/map.component.css

@@ -0,0 +1,5 @@
+/*.sebm-google-map-container {*/
+  /*height: 300px;*/
+/*}*/
+/*.gmap{width:100%;height:400px;}*/
+

src/app/about/map/map.component.html

@@ -0,0 +1,12 @@
+<!--<agm-map [(latitude)]="location.lat" [(longitude)]="location.lng" [(zoom)]="location.zoom" [disableDefaultUI]="true" [zoomControl]="true" [(fitBounds)]='location.viewport'>-->
+  <!--<agm-marker [(latitude)]="location.marker.lat" [(longitude)]="location.marker.lng"-->
+              <!--[markerDraggable]="location.marker.draggable"></agm-marker>-->
+
+  <!--<agm-circle [latitude]="location.lat" [longitude]="location.lng"-->
+              <!--[(radius)]="circleRadius"-->
+              <!--[fillColor]="'blue'"-->
+              <!--[circleDraggable]="true"-->
+              <!--[editable]="true"></agm-circle>-->
+<!--</agm-map>-->
+
+<div #gmap style="width:100%;height:400px"></div>

src/app/about/map/map.component.spec.ts

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

src/app/about/map/map.component.ts

@@ -0,0 +1,24 @@
+import { Component, Input, ViewChild, NgZone, OnInit } from '@angular/core';
+import { MapsAPILoader, AgmMap } from '@agm/core';
+import { GoogleMapsAPIWrapper } from '@agm/core/services';
+import { } from '@types/googlemaps';
+
+@Component({
+  selector: 'pm-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.css']
+})
+export class MapComponent implements OnInit {
+  @ViewChild('gmap') gmapElement: any;
+  map: google.maps.Map;
+
+  ngOnInit() {
+    var mapProp = {
+      center: new google.maps.LatLng(77.643583, 12.962849),
+      zoom: 15,
+      mapTypeId: google.maps.MapTypeId.ROADMAP
+    };
+    this.map = new google.maps.Map(this.gmapElement.nativeElement, mapProp);
+  }
+
+}

src/app/app.component.css

@@ -23,4 +23,8 @@
   .navbar-fixed-top {
     min-height: 80px;
   }
+  .bg-company-dark {
+    /*background-color: #343a40;*/
+    background-color: #343a40;
+  }
 }