Add second covid tract

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

@@ -80,7 +80,17 @@ const routes =
       },
       {
         path: 'covid',
-        component: ImageComponent
+        component: ImageComponent,
+        data: {
+          imageUrl: 'assets/images/tiny/covid_tract.jpg'
+        }
+      },
+      {
+        path: 'covid2',
+        component: ImageComponent,
+        data: {
+          imageUrl: 'assets/images/tiny/covid_tract_2.jpg'
+        }
       },
       {
         path: 'camp',

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

@@ -45,12 +45,12 @@
         <img src="assets/images/home-images/tiny/VBS_small.jpg" style="width:75%; max-width: 350px; position: relative; z-index: 1; box-shadow: 0 0 20px pink;" >
     </div> 
 
-    <div class="row tint" *ngIf="showSpecial" >            
+    <div class="row" *ngIf="showSpecial" >            
         <div class="row-content">            
             <div class="row-content-col-right align-top center">
                 <p ofbFadeInOnScroll class="row-content-header">COVID-19</p>
                 <p ofbFadeInOnScroll> 
-                    Due to the COVID-19 outbreak our church building will be closed until April 1st. Video 
+                    Due to the COVID-19 outbreak our church building will be closed until May 1st. Video 
                     and audio services will be posted online during this time. 
                 </p>
                 <br>
@@ -61,10 +61,30 @@
                     <i ofbicon>headset</i> <a routerLink="/sermons" class="align-top">Click here to listen online</a>
                 </p>
                 <p ofbFadeInOnScroll class="action">
-                    <i ofbicon>insert_photo</i> <a routerLink="/covid" class="align-top">Click here for coronavirus encouragement</a>
+                    <i ofbicon>insert_photo</i> <a routerLink="/covid2" class="align-top">Click here for coronavirus encouragement</a>
                 </p>
             </div>  
             <div class="row-content-col-left"> 
+                <a routerLink="/covid2" >
+                    <img class="w-100pct" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid_header_2.jpg" > 
+                </a>                              
+            </div>                      
+        </div>
+    </div>
+
+    <div class="row tint" *ngIf="showSpecial" >            
+        <div class="row-content">            
+            <div class="row-content-col-left align-top center">
+                <p ofbFadeInOnScroll class="row-content-header">Days of Uncertainty</p>
+                <p ofbFadeInOnScroll> 
+                    Days of uncertainty are looming over us. There is fear of loss - of life, jobs and income. Restricted gatherings. Food & medical equipment shortages. The future is concerning. Fear produces a negative atmospher, tormenting us, agitating our minds. Fear is crippling to those caught in its grip.
+                </p>
+                <br>
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>insert_photo</i> <a routerLink="/covid2" class="align-top">There is Hope! There is an Answer! Click Here!</a>
+                </p>
+            </div>  
+            <div class="row-content-col-right"> 
                 <a routerLink="/covid" >
                     <img class="w-100pct" ofbFadeInOnScroll src="assets/images/home-images/tiny/covid_header.jpg" > 
                 </a>                              
@@ -108,7 +128,7 @@
 
     <div class="row">
         <div class="row-content">
-            <div class="row-content-col-left align-top">
+            <div class="row-content-col-right align-top">
                 <p ofbFadeInOnScroll class="row-content-header">...that ye also may have fellowship with us...</p>                
                 <p ofbFadeInOnScroll>It is exciting to gather together in the name of the Lord and
                    we sincerily hope that YOU will join us. Guests are always welcome at Old Fashion
@@ -116,7 +136,7 @@
                 <p class="verse" ofbFadeInOnScroll>For where two or three are gathered together in my name, there am I in the midst of them. - Matthew 18:20</p>
                 <p ofbFadeInOnScroll class="action"><i ofbicon>info_outline</i> <a href="#" routerLink="/whoweare" class="align-top">Learn more about us</a></p>
             </div>
-            <div class="row-content-col-right">
+            <div class="row-content-col-left">
                 <!-- <img ofbFadeInOnScroll src="assets/images/home-images/2-church-color.png"> -->
                 <a routerLink="/whoweare"><img ofbFadeInOnScroll src="assets/images/home-images/tiny/family.jpg"></a>
             </div>

Client/src/app/components/image/image.component.html

@@ -1,13 +1,13 @@
 <secondary-page-component [hideSideBarOnMobile]="true" >
     <div mainContent class="mapWrapper">        
-        <img style="width: 100%" src="assets/images/tiny/covid_tract.jpg">
+        <img style="width: 100%" src="{{imageUrl}}">
-        <div class="fab-buttons" >
+        <!-- <div class="fab-buttons" >
             <button mat-fab (click)="share()"><i ofbicon>share</i></button>
-        </div>  
+        </div>   -->
     </div>
     <div sideBar ofbFadeInOnScroll>
-        <div class="side-bar">
+        <!-- <div class="side-bar">
             <button style="width: 100%;" mat-stroked-button (click)="share()"><i ofbicon>share</i> Share</button>
-        </div>        
+        </div>         -->
     </div>
 </secondary-page-component>

Client/src/app/components/image/image.component.ts

@@ -1,8 +1,9 @@
 import { BibleVerseService } from './../../services/bible-verse.service';
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, Inject, Input } from '@angular/core';
 import { MatDialogConfig, MatDialog } from '@angular/material';
 import { SharePopupComponent } from '../popups/share-popup/share-popup.component';
 import { DOCUMENT } from '@angular/platform-browser';
+import { Router, ActivatedRouteSnapshot, ActivatedRoute } from '@angular/router';
 
 @Component({
   selector: 'image-component',
@@ -11,9 +12,11 @@ import { DOCUMENT } from '@angular/platform-browser';
 })
 export class ImageComponent implements OnInit {
 
-  public shareUrl: string;
+  public imageUrl: string;
 
-  constructor(private dialog: MatDialog, @Inject(DOCUMENT) private document) { }
+  constructor(private dialog: MatDialog, @Inject(DOCUMENT) private document, private route: ActivatedRoute) {
+    this.imageUrl = this.route.snapshot.data.imageUrl;
+   }
 
   ngOnInit() {
     // this.bibleVerseService.randomVerse().subscribe(