Victory Gospel Crusade

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

@@ -7,6 +7,14 @@ a{
     color: inherit;
 }
 
+a {
+    text-decoration: underline;
+}
+
+a:hover {
+    cursor: pointer;
+}
+
 a:visited{
     color: inherit;
 }

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

@@ -45,7 +45,41 @@
         <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" *ngIf="showSpecial" >            
+    <div class="row tint" *ngIf="showSpecial" >            
+        <div class="row-content">
+            <div class="row-content-col-left center">                    
+                <img style="max-height:500px" ofbFadeInOnScroll src="assets/images/original/VictoryGospelCrusade.png" height="500">
+            </div>
+            <div class="row-content-col-right align-top">
+                <p ofbFadeInOnScroll class="row-content-header">Victory Gospel Crusade</p>
+                <br />
+                <p ofbFadeInOnScroll class="bold">
+                    When
+                </p>
+                <p ofbFadeInOnScroll>
+                    August 4 - 9 @ 7PM
+                    <br />
+                    August 11 - 15 @ 7 PM
+                </p>
+                <br>
+                <p ofbFadeInOnScroll class="bold">
+                    Where
+                </p>
+                <p ofbFadeInOnScroll>
+                    Behind Pizza Ranch
+                    <br />
+                    1839 Longfellow St, Butte, Mt
+                    <br /><br />
+                    <i ofbicon>directions</i> <a target="_blank" class="align-top" href="https://www.google.com/maps/place/1839+Longfellow+St,+Butte,+MT+59701/@45.9732501,-112.513401,17z/data=!3m1!4b1!4m6!3m5!1s0x535b07e062beaaf7:0x827616c9ef692eed!8m2!3d45.9732464!4d-112.5108261!16s%2Fg%2F11v03h9chf?entry=ttu">View Map</a>
+                </p>
+                <p ofbFadeInOnScroll class="action">
+                    <i ofbicon>play_arrow</i> <a (click)="playVictoryGospelCrusade()" class="align-top">Click Here To Watch The Trailer</a>
+                </p>
+            </div>                        
+        </div>
+    </div>
+
+    <div class="row" *ngIf="showSpecial && 1 === 2" >            
         <div class="row-content">
             <div class="row-content-col-left center">                    
                 <img style="max-height:500px" ofbFadeInOnScroll src="assets/images/home-images/tiny/Cowboy Carnival.jpg" height="500">

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

@@ -5,6 +5,7 @@ import { environment } from '../../../environments/environment';
 import { Countdown } from './countdown';
 import { HttpClient } from '@angular/common/http';
 import { VideoServices } from './video-services';
+import { YoutubePopupComponent } from '../popups/youtube-popup/youtube-popup.component';
 
 @Component({
   selector: 'home-component',
@@ -15,7 +16,7 @@ export class HomeComponent {
   backgroundTop: string = "0px";
   public get showSpecial() : boolean {
 
-    let maxDate = new Date(2022,8,18,11); // September 18th 2018 -- Set the month one month behind since JavaScript dates are 0 based
+    let maxDate = new Date(2024,7,15,11); // September 18th 2018 -- Set the month one month behind since JavaScript dates are 0 based
     let now = new Date();
     if (now.getFullYear() > maxDate.getFullYear()) return false;
     if (now.getFullYear() == maxDate.getFullYear()) {
@@ -64,6 +65,16 @@ export class HomeComponent {
     });
   }
 
+  playVictoryGospelCrusade() {
+    const url = 'https://drive.google.com/file/d/1gPdCTLkJEtNWEyn_y8FQ78PaDi40MU7N/preview'
+
+    let opts = new MatDialogConfig;
+    opts.data = { title: 'Victory Gospel Crusade', embedUrl: url };
+    let dialog = this.dialog.open(YoutubePopupComponent, opts);
+  }
+
+
+
   @HostListener('window:scroll', ['$event'])
   onScroll(event){
     let scrollTop = event.target.documentElement.scrollTop || event.target.body.scrollTop || window.pageYOffset;