Update docker/nginx.conf

.github/workflows/website.yaml

@@ -20,7 +20,6 @@ jobs:
               run: npm run build
 
             - name: Upload Artifacts
-              if: ${{inputs.artifacts}} != "false"
               uses: actions/upload-artifact@v3
               with:
                   name: website

LICENSE

@@ -1,7 +1,11 @@
 Copyright (c) 2023 Zakary Timson
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+All Rights Reserved.
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -46,7 +46,7 @@ Pelican Landing is a family run year-round hunting & fishing lodge. It's located
 
 ### Demo
 
-Website: https://git.zakscode.com
+Website: https://pelica-landing.zakscode.com
 
 ### Built With
 [![Angular](https://img.shields.io/badge/Angular-DD0031?style=for-the-badge&logo=angular)](https://angular.io/)

docker/nginx.conf

@@ -25,7 +25,7 @@ http {
     autoindex off;
 
     location / {
-      try_files $uri$args $uri$args/ /index.html;
+      try_files $uri $uri/ /index.html;
     }
   }
 }

package-lock.json

@@ -18,7 +18,7 @@
 				"@angular/platform-browser": "^17.0.0",
 				"@angular/platform-browser-dynamic": "^17.0.0",
 				"@angular/router": "^17.0.0",
-				"bootstrap": "^4.6.2",
+				"bootstrap": "^5.3.2",
 				"hammerjs": "^2.0.8",
 				"rxjs": "~7.8.0",
 				"tslib": "^2.3.0",
@@ -3761,6 +3761,16 @@
 				"node": ">=14"
 			}
 		},
+		"node_modules/@popperjs/core": {
+			"version": "2.11.8",
+			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+			"integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+			"peer": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
+		},
 		"node_modules/@schematics/angular": {
 			"version": "17.0.7",
 			"resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-17.0.7.tgz",
@@ -4797,9 +4807,9 @@
 			"dev": true
 		},
 		"node_modules/bootstrap": {
-			"version": "4.6.2",
+			"version": "5.3.2",
-			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
+			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
-			"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+			"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
 			"funding": [
 				{
 					"type": "github",
@@ -4811,8 +4821,7 @@
 				}
 			],
 			"peerDependencies": {
-				"jquery": "1.9.1 - 3",
+				"@popperjs/core": "^2.11.8"
-				"popper.js": "^1.16.1"
 			}
 		},
 		"node_modules/brace-expansion": {
@@ -7970,12 +7979,6 @@
 				"jiti": "bin/jiti.js"
 			}
 		},
-		"node_modules/jquery": {
-			"version": "3.7.1",
-			"resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz",
-			"integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==",
-			"peer": true
-		},
 		"node_modules/js-tokens": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
@@ -9838,17 +9841,6 @@
 				"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
 			}
 		},
-		"node_modules/popper.js": {
-			"version": "1.16.1",
-			"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
-			"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
-			"deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
-			"peer": true,
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/popperjs"
-			}
-		},
 		"node_modules/portscanner": {
 			"version": "2.2.0",
 			"resolved": "https://registry.npmjs.org/portscanner/-/portscanner-2.2.0.tgz",

package.json

@@ -19,7 +19,7 @@
 		"@angular/platform-browser": "^17.0.0",
 		"@angular/platform-browser-dynamic": "^17.0.0",
 		"@angular/router": "^17.0.0",
-		"bootstrap": "^4.6.2",
+		"bootstrap": "^5.3.2",
 		"hammerjs": "^2.0.8",
 		"rxjs": "~7.8.0",
 		"tslib": "^2.3.0",

src/app/components/carousel/carousel.component.html

@@ -1,11 +1,10 @@
-<div class="carousel-container"  [style.height]="height">
+<div class="carousel-container"  [style.height]="height" style="background: #282d31">
-	<img *ngIf="background" class="carousel-background" [src]="gallery[index]" alt="background">
 	<img class="carousel-image" [src]="gallery[index]" [alt]="'slide ' + index">
 	<div class="carousel-previous" (click)="previous()">
-		<mat-icon>skip_previous</mat-icon>
+		<mat-icon>keyboard_arrow_left</mat-icon>
 	</div>
 	<div class="carousel-next" (click)="next()">
-		<mat-icon>skip_next</mat-icon>
+		<mat-icon>keyboard_arrow_right</mat-icon>
 	</div>
 	<div class="carousel-pause" (click)="pause = !pause">
 		<mat-icon *ngIf="!pause">pause</mat-icon>

src/app/components/carousel/carousel.component.scss

@@ -1,30 +1,9 @@
 .carousel-container {
 	position: relative;
 	width: 100%;
-
+	display: flex;
-
+	align-items: center;
-	//.carousel-next {
+	justify-content: center;
-	//	display: none;
-	//}
-	//.carousel-previous {
-	//	display: none;
-	//}
-	//.carousel-pause {
-	//	display: none;
-	//}
-	//
-	//&:hover {
-	//	.carousel-next {
-	//		display: flex;
-	//	}
-	//	.carousel-previous {
-	//		display: flex;
-	//	}
-	//	.carousel-pause {
-	//		display: flex;
-	//	}
-	//}
-}
 
 	.carousel-background {
 		width: 100%;
@@ -34,46 +13,34 @@
 	}
 
 	.carousel-image {
-	position: absolute;
+		display: block;
-	top: 5%;
+		max-width: 95%;
-	left: 50%;
+		max-height: 95%;
-	transform: translate(-50%);
+		object-fit: cover;
-	height: 90%;
 		width: auto;
+		height: auto;
 	}
 
-.carousel-next {
+	.carousel-next, .carousel-previous {
 		position: absolute;
-	top: calc(50% - 28px);
+		top: 0;
+		bottom: 0;
+		width: 56px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: rgba(255, 255, 255, 0.75);
+		filter: drop-shadow(3px 3px 5px black);
+		cursor: pointer;
+		transition: 0.25s;
+
+		&.carousel-next {
 			right: 0;
-	height: 56px;
-	width: 56px;
-	color: rgba(255, 255, 255, 0.75);
-	filter: drop-shadow(3px 3px 5px black);
-	cursor: pointer;
-	padding: 1rem;
-	border-radius: 50%;
-	transition: 0.25s;
-
-	&:hover {
-		color: white;
-		background: rgba(0,0,0,0.25);
-		filter: none;
-	}
 		}
 
-.carousel-previous {
+		&.carousel-previous {
-	position: absolute;
-	top: calc(50% - 28px);
 			left: 0;
-	height: 56px;
+		}
-	width: 56px;
-	color: rgba(255, 255, 255, 0.75);
-	filter: drop-shadow(3px 3px 5px black);
-	cursor: pointer;
-	padding: 1rem;
-	border-radius: 50%;
-	transition: 0.25s;
 
 		&:hover {
 			color: white;
@@ -82,8 +49,6 @@
 		}
 	}
 
-
-
 	.carousel-pause {
 		position: absolute;
 		bottom: 0;
@@ -104,3 +69,4 @@
 			filter: none;
 		}
 	}
+}

src/app/components/carousel/carousel.component.ts

@@ -10,7 +10,6 @@ export class CarouselComponent implements OnDestroy, AfterViewInit {
 
 	background = true;
 	gallery: string[] = [
-		'/assets/gallery/sign.jpg',
 		'/assets/gallery/0e2343c77df8a7a889ac415c8e7a7e21.jpg',
 		'/assets/gallery/2a291f871aa431321815427bd0da7b47.jpg',
 		'/assets/gallery/3daf84c720d7cc1a1cee552ed8aaa950.png',
@@ -41,7 +40,7 @@ export class CarouselComponent implements OnDestroy, AfterViewInit {
 	speed = 5000;
 	pause = false;
 	index = 0 ?? ~~(Math.random() * this.gallery.length);
-	height = '300px';
+	height = '500px';
 
 	ngAfterViewInit() {
 		this.timer = setInterval(() => {

src/app/components/contact/contact.component.html

@@ -1,4 +1,7 @@
 <form class="mx-auto w-100">
+	<div *ngIf="error" class="alert alert-danger py-2">
+		Coming Soon: This feature is under development
+	</div>
 	<div>
 		<mat-form-field appearance="fill" class="w-100">
 			<mat-label>Name</mat-label>
@@ -28,7 +31,7 @@
 			<mat-checkbox color="primary">Send me a copy</mat-checkbox>
 		</div>
 		<div>
-			<button class="btn btn-outline-secondary rounded-pill px-4 mt-3">Send</button>
+			<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" type="button" (click)="error = true">Send</button>
 		</div>
 	</div>
 </form>

src/app/components/contact/contact.component.ts

@@ -4,4 +4,6 @@ import {Component} from '@angular/core';
 	selector: 'app-contact',
 	templateUrl: './contact.component.html'
 })
-export class ContactComponent { }
+export class ContactComponent {
+	error = false;
+}

src/app/components/footer/footer.component.html

@@ -14,7 +14,7 @@
 				<ul>
 					<li>Phone: <a href="tel:18074885511" target="_blank">+1 (807) 488-5511</a></li>
 					<li>Toll Free: <a href="tel:18886908070" target="_blank">+1 (888) 690-8070</a></li>
-					<li>Email: <a href="mailto:pelicanlanding2002@gmail.com">pelicanlanding2002&#64;gmail.com</a></li>
+					<li>Email: <a href="mailto:pelicanlanding2002@gmail.com" target="_blank">pelicanlanding2002&#64;gmail.com</a></li>
 					<li>Social Media: <a href="https://www.facebook.com/MorsonsPelicanLanding" target="_blank">Facebook</a></li>
 				</ul>
 			</div>
@@ -22,17 +22,22 @@
 				<h4>Resources</h4>
 				<ul>
 					<li>
-						<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">Arrive Canada</a>
+						Border:
+						<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Canada</a> /
+						<a href="https://www.cbp.gov/travel/us-citizens" target="_blank">USA</a>
 					</li>
 					<li>
-						<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Border Crossing</a> /
+						Declarations:
+						<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">ArriveCan</a> /
 						<a href="https://www.rcmp-grc.gc.ca/wam/media/2347/original/d369a605ac3363b569af5ea5dc40c88d.pdf" target="_blank">Firearms</a>
 					</li>
-					<li>Regulations:
+					<li>
+						Regulations:
 						<a href="https://www.ontario.ca/files/2023-05/mnrf-2023-hunting-regulations-summary-en-2023-05-03.pdf" target="_blank">Hunting</a> /
 						<a href="https://www.ontario.ca/files/2023-12/mnrf-2024-ontario-fishing-regulations-summary-en-2023-12-11-v2.pdf" target="_blank">Fishing</a>
 					</li>
-					<li>Weather:
+					<li>
+						Weather:
 						<a href="https://www.accuweather.com/en/ca/morson/p0w/daily-weather-forecast/54891" target="_blank">Morson</a> /
 						<a href="https://weather.gc.ca/marine/forecast_e.html?mapID=09&siteID=08100" target="_blank">Marine</a>
 					</li>
@@ -53,7 +58,7 @@
 	<div style="background: #282d31" class="p-3">
 		<div class="row">
 			<p class="mx-auto text-center mb-0">
-				Copyright © Morson's Pelican Landing 2023 | All Rights Reserved
+				Copyright © Morson's Pelican Landing 2024 | All Rights Reserved
 				<br/>
 				Created By <a href="https://zakscode.com" target="_blank">Zak Timson</a>
 			</p>

src/app/components/toolbar/toolbar.component.html

@@ -1,24 +1,16 @@
-<mat-toolbar class="d-print-none">
+<mat-toolbar class="d-print-none text-white" style="background: rgba(0,0,0,0.5); position: absolute; top: 0; left: 0; right: 0;">
 	<img routerLink="/" class="curs-pointer" src="/assets/logo.png" alt="Logo" height="46px" width="auto">
 	<button mat-button routerLink="/" class="d-flex align-items-center">Pelican Landing</button>
 	<span class="mx-auto"></span>
 	<span>
 		<span class="d-none d-sm-inline">
-			<button mat-button routerLink="/coming-soon">Restaurant</button>
+			<button *ngFor="let n of navItems" mat-button [routerLink]="n[1]">{{n[0]}}</button>
-		    <button mat-button routerLink="/coming-soon">Hunting</button>
-		    <button mat-button routerLink="/coming-soon">Fishing</button>
-		    <button mat-button routerLink="/coming-soon">Lodging</button>
 	    </span>
-
 	</span>
-
 	<button class="d-inline d-sm-none" mat-icon-button [matMenuTriggerFor]="menu">
 		<mat-icon>menu</mat-icon>
 	</button>
 	<mat-menu #menu="matMenu">
-		<button mat-menu-item routerLink="/coming-soon">Restaurant</button>
+		<button *ngFor="let n of navItems" mat-menu-item [routerLink]="n[1]">{{n[0]}}</button>
-		<button mat-menu-item routerLink="/coming-soon">Hunting</button>
-		<button mat-menu-item routerLink="/coming-soon">Fishing</button>
-		<button mat-menu-item routerLink="/coming-soon">Lodging</button>
 	</mat-menu>
 </mat-toolbar>

src/app/components/toolbar/toolbar.component.ts

@@ -4,4 +4,11 @@ import {Component} from '@angular/core';
 	selector: 'app-toolbar',
 	templateUrl: './toolbar.component.html'
 })
-export class ToolbarComponent { }
+export class ToolbarComponent {
+	navItems: [string, string][] = [
+		['Restaurant', '/coming-soon'],
+		['Hunting', '/coming-soon'],
+		['Fishing', '/coming-soon'],
+		['Lodging', '/coming-soon'],
+	]
+}

src/app/view/coming-soon/coming-soon.component.html

@@ -1,6 +1,6 @@
-<div class="bg-white p-5" style="height: 80vh">
+<div class="bg-white" style="height: 100vh">
-	<div class="mt-5 pt-5 text-center">
+	<div class="text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
-		<h1 style="font-size: 4em">Coming Soon</h1>
+		<h1 class="mt-5" style="font-size: 4em">Coming Soon</h1>
 		<h2 class="mt-3">This page is still being built</h2>
 		<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
 	</div>

src/app/view/home/home.component.html

@@ -1,49 +1,169 @@
-<div class="w-100">
+<!-- Banner -->
-	<img src="/assets/background.png" alt="Banner" width="100%" height="400px">
+<div style="height: 75vh; width: 100%; background: url('/assets/islands.png') no-repeat fixed bottom; background-size: cover;">
-	<h1></h1>
+	<img src="/assets/sign.jpg" alt="Logo" style="width: min(424px, 75%); height: auto; position: absolute; left: 50%; top: 37.5vh; transform: translate(-50%, -50%); filter: drop-shadow(10px 10px 15px black)">
 </div>
-<section class="bg-white p-5 text-center cap-width">
+<!-- Services -->
-	<h2 class="mb-5">About Us</h2>
+<section class="py-5 bg-white" style="background: url('/assets/texture.png') repeat;">
-	<p class="mb-5">Pelican Landing is a family run year-round hunting & fishing lodge. It's located on the beautiful southern shores of Lake of Woods and offers the outdoors-man a tailor made experience.  With both road and water access this resort can meet the needs of the angler, hunter, or nature enthusiast. Our goal at Pelican Landing is to make your stay with us a memorable, relaxing experience that you will want to repeat.</p>
+	<div class="py-5 cap-width text-center ">
-	<app-carousel></app-carousel>
+		<h2 class="mb-5">Services</h2>
-</section>
+		<div class="d-flex justify-content-around flex-wrap cap-width">
-<section class="pt-5 text-center" style="background: #f1f1f1">
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/spring.png') no-repeat; background-size: cover;">
-	<h2>Services</h2>
-	<div class="d-flex justify-content-around flex-wrap cap-width py-5">
-		<div class="card p-3 text-center mb-5" style="width: 225px">
 				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon>
 				<h3>Restaurant</h3>
 				<p class="mb-0">Our on site restaurant is the best around. Open 11am - 8pm</p>
 				<br>
-			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">Menu <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+				<a routerLink="/coming-soon" class="mt-4 mb-2 btn btn-outline-light rounded-pill d-flex align-items-center justify-content-center">Menu <mat-icon>keyboard_double_arrow_right</mat-icon></a>
 			</div>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/fall.png') no-repeat; background-size: cover;">
 				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">gps_fixed</mat-icon>
 				<h3>Hunting</h3>
 				<p class="mb-0">We offer guided tours to hunt black bear, white tail dear, birds & small game</p>
 				<br>
-			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+				<a routerLink="/coming-soon" class="mt-4 mb-2 btn btn-outline-light rounded-pill d-flex align-items-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
 			</div>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/summer.png') no-repeat; background-size: cover;">
 				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">phishing</mat-icon>
 				<h3>Fishing</h3>
 				<p class="mb-0">We offer guided tours to fish for walleye, pike, crappie, bass, trout, sturgeon & muskie</p>
-			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+				<button routerLink="/coming-soon" class="mt-4 mb-2 btn btn-outline-light rounded-pill d-flex align-items-center justify-content-center">More <mat-icon>keyboard_double_arrow_right</mat-icon></button>
 			</div>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/winter.png') no-repeat; background-size: cover;">
 				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">cottage</mat-icon>
 				<h3>Lodging</h3>
 				<p class="mb-0">Reserve a cottage or RV parking spot. Package with a hunting/fishing trip for more savings</p>
-			<a routerLink="/coming-soon" class="my-2 d-flex align-content-center justify-content-center">Rates <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+				<a routerLink="/coming-soon" class="mt-4 mb-2 btn btn-outline-light rounded-pill d-flex align-items-center justify-content-center">Rates <mat-icon>keyboard_double_arrow_right</mat-icon></a>
+			</div>
 		</div>
 	</div>
 </section>
-<section class="bg-white p-5 text-center">
+<!-- Restaurant -->
+<section class="py-5 bg-white">
+	<div class="py-5 cap-width d-flex flex-column flex-wrap flex-md-row align-items-center justify-content-around">
+		<div class="m-4">
+			<img src="/assets/resturant.png" alt="Restaurant icon" style="width: 200px; height: auto;">
+		</div>
+		<div class="m-5" style="flex: 1 0 0">
+			<h2 class="mb-0">Restaurant</h2>
+			<p class="pe-md-5">Stop in at our restaurant, open 7 days a week, and enjoy our pub food which will make you feel at home. We offer a full menu including appetisers, sandwiches, beverages, hamburgers, hot dogs & soft-serve ice cream.</p>
+			<a routerLink="/coming-soon" class="btn btn-outline-dark rounded-pill d-flex align-items-center justify-content-center">
+				Menu <mat-icon>keyboard_double_arrow_right</mat-icon>
+			</a>
+		</div>
+		<div class="m-5">
+			<h3 class="mb-0 text-muted" style="font-size: 1.1rem">Hours:</h3>
+			<table style="line-height: 1em" class="text-muted">
+				<tr [style.font-weight]="day == 0 ? 'bold' : 'normal'"><td>Sunday</td><td>11 am - 8 pm</td></tr>
+				<tr [style.font-weight]="day == 1 ? 'bold' : 'normal'"><td>Monday</td><td>11 am - 8 pm</td></tr>
+				<tr [style.font-weight]="day == 2 ? 'bold' : 'normal'"><td>Tuesday</td><td>11 am - 8 pm</td></tr>
+				<tr [style.font-weight]="day == 3 ? 'bold' : 'normal'"><td>Wednesday</td><td>11 am - 8 pm</td></tr>
+				<tr [style.font-weight]="day == 4 ? 'bold' : 'normal'"><td>Thursday</td><td>11 am - 8 pm</td></tr>
+				<tr [style.font-weight]="day == 5 ? 'bold' : 'normal'"><td>Friday</td><td>11 am - 8 pm</td></tr>
+				<tr [style.font-weight]="day == 6 ? 'bold' : 'normal'"><td>Saturday</td><td>11 am - 8 pm</td></tr>
+			</table>
+		</div>
+	</div>
+</section>
+<!-- Divider -->
+<div class="py-5 w-100" style="height: 50vh; background: url('/assets/pelican.png') no-repeat fixed center; background-size: cover;"></div>
+<div class="py-5 w-100" style="background: url('/assets/texture.png') repeat;">
+	<div class="py-5 cap-width">
+		<h2 class="mb-5 text-center">Resources</h2>
+		<div class="d-flex justify-content-around flex-wrap">
+			<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center" style="min-width: 45%; flex: 1 0 0;">
+				<div class="pe-3">
+					<img src="/assets/border.png" alt="Border icon" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Crossing Border</h3>
+					<p class="m-0">Learn about crossing the USA/Canadian border</p>
+					<a href="https://www.cbsa-asfc.gc.ca/travel-voyage/menu-eng.html" target="_blank">Canada</a> / <a href="https://www.cbp.gov/travel/us-citizens" target="_blank">USA</a>
+				</div>
+			</div>
+			<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center" style="min-width: 45%; flex: 1 0 0;">
+				<div class="pe-3">
+					<img src="/assets/leaf.png" alt="Canadian leaf" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Border Declarations</h3>
+					<p class="m-0">Declare firearms & cross faster using ArriveCan</p>
+					<a href="https://www.canada.ca/en/border-services-agency/services/arrivecan.html" target="_blank">ArriveCan</a> /
+					<a href="https://www.rcmp-grc.gc.ca/wam/media/2347/original/d369a605ac3363b569af5ea5dc40c88d.pdf" target="_blank">Firearms</a>
+				</div>
+			</div>
+			<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center" style="min-width: 45%; flex: 1 0 0;">
+				<div class="pe-3">
+					<img src="/assets/regulations.png" alt="Regulations" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Local Regulations</h3>
+					<p class="m-0">Learn the local hunting and fishing laws</p>
+					<a href="https://www.ontario.ca/files/2023-05/mnrf-2023-hunting-regulations-summary-en-2023-05-03.pdf" target="_blank">Hunting</a> /
+					<a href="https://www.ontario.ca/files/2023-12/mnrf-2024-ontario-fishing-regulations-summary-en-2023-12-11-v2.pdf" target="_blank">Fishing</a>
+				</div>
+			</div>
+			<div class="d-flex p-3 pe-4 rounded-1 bg-light m-3 align-items-center" style="min-width: 45%; flex: 1 0 0;">
+				<div class="pe-3">
+					<img src="/assets/weather.png" alt="Regulations" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Weather</h3>
+					<p class="m-0">Stay informed and check the local weather forecast</p>
+					<a href="https://www.accuweather.com/en/ca/morson/p0w/daily-weather-forecast/54891" target="_blank">Morson</a> /
+					<a href="https://weather.gc.ca/marine/forecast_e.html?mapID=09&siteID=08100" target="_blank">Marine</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+<!-- About -->
+<section class="py-5">
+	<div class="py-5 px-3 cap-width text-center">
+		<h2 class="mb-5">About Us</h2>
+		<p class="mb-4">Pelican Landing is a family run, year-round, hunting & fishing lodge. With local guides to help to you navigate the beautiful southern shores of Lake of Woods you are assured to have a successful hunting or fishing trip. Pelican landing offers a multitude of amenities and packages to give any angler, hunter, or outdoorsman the perfect tailor made experience. Our goal at Pelican Landing is to make your stay with us a memorable & relaxing experience that you will want to repeat.</p>
+		<p class="mb-5">Amenities include: road access, water access, boats, a boat launch, cabins, guides, on-site restaurant & shore-side lunches.</p>
+		<app-carousel></app-carousel>
+	</div>
+</section>
+<!-- Contact -->
+<section class="py-5" style="background: url('/assets/texture.png') repeat;">
+	<div class="py-5 px-4 cap-width text-center">
 		<h2 class="mb-5">Contact Us</h2>
-	<div class="mx-auto" style="max-width: 750px">
+		<div class="d-flex flex-column-reverse flex-md-row justify-content-center cap-width">
+			<div style="flex: 2 0 0;">
 				<app-contact></app-contact>
 			</div>
+			<div class="px-3">
+				<div class="d-block d-md-none my-5 border-top border-dark" style="height: 1px; width: 100%;"></div>
+				<div class="d-none d-md-block mx-4 border-end border-dark" style="height: 100%; width: 1px;"></div>
+			</div>
+			<div class="d-flex flex-column text-center text-md-start" style="flex: 1 0 0;">
+				<div class="mb-3">
+					<h3 class="mb-0">Phone</h3>
+					<a href="tel:18074885511" target="_blank">+1 (807) 488-5511</a>
+					<br>
+					<a href="tel:18886908070" target="_blank">+1 (888) 690-8070</a> (Toll Free)
+				</div>
+				<div class="mb-3">
+					<h3 class="mb-0">Email</h3>
+					<a href="mailto:pelicanlanding2002@gmail.com" target="_blank">pelicanlanding2002&#64;gmail.com</a>
+				</div>
+				<div>
+					<h3 class="mb-0">Address</h3>
+					<p>
+						9061 ON-621,<br>
+						Morson, ON POW 1J0,<br>
+						Canada
+					</p>
+				</div>
+				<div>
+					<a href="https://www.facebook.com/MorsonsPelicanLanding" target="_blank">
+						<img src="/assets/facebook.png" alt="facebook" style="height: 2rem; width: auto;">
+					</a>
+				</div>
+			</div>
+		</div>
+	</div>
 </section>
 <section style="background: #343a40">
-	<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20901.5656209322!2d-94.3342870256971!3d49.0924225740941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52bc2793e70efc57%3A0x6f173b50ef0787ba!2sPelican%20Landing!5e0!3m2!1sen!2sca!4v1702654257180!5m2!1sen!2sca" width="100%" height="300" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+	<iframe title="map" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d20901.5656209322!2d-94.3342870256971!3d49.0924225740941!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x52bc2793e70efc57%3A0x6f173b50ef0787ba!2sPelican%20Landing!5e0!3m2!1sen!2sca!4v1702654257180!5m2!1sen!2sca" width="100%" height="450px" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
 </section>

src/app/view/home/home.component.ts

@@ -1,7 +1,13 @@
-import {Component} from '@angular/core';
+import {Component, OnInit} from '@angular/core';
 
 @Component({
 	selector: 'app-root',
 	templateUrl: './home.component.html'
 })
-export class HomeComponent {}
+export class HomeComponent implements OnInit {
+	public day!: number;
+
+	ngOnInit() {
+		this.day = new Date().getDay();
+	}
+}

src/app/view/not-found/not-found.component.html

@@ -1,7 +1,9 @@
 <div class="bg-white p-5" style="height: 80vh">
-	<div class="card mt-5 mx-auto p-5 text-center" style="max-width: 400px">
+	<div class="pt-5">
+		<div class="mt-5 mx-auto card p-5 text-center" style="max-width: 400px">
 			<h1 style="font-size: 4em">404</h1>
 			<h2 class="mt-3">Page not found</h2>
 			<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
 		</div>
 	</div>
+</div>

src/index.html

@@ -12,7 +12,7 @@
 	<meta property="og:title" content="Pelican Landing">
 	<meta property="og:type" content="artical">
 	<meta property="og:url" content="https://pelican-landing.zakscode.com">
-	<meta property="og:image" content="https://pelican-landing.zakscode.com/assets/gallery/sign.jpg">
+	<meta property="og:image" content="https://pelican-landing.zakscode.com/assets/sign.jpg">
 	<meta property="og:description" content="Morson's Pelican Landing Hunting & Fishing Lodge">
 	<meta name="description" content="Morson's Pelican Landing Hunting & Fishing Lodge">
 	<meta name="twitter:card" content="Morson's Pelican Landing Hunting & Fishing Lodge">

src/styles.scss

@@ -6,14 +6,16 @@
 @include mat.core();
 $my-theme: mat.define-light-theme((
 	color: (
-		primary: mat.define-palette(mat.$blue-palette),
+		primary: mat.define-palette(mat.$green-palette, 700),
-		accent: mat.define-palette(mat.$pink-palette, A200),
+		accent: mat.define-palette(mat.$teal-palette, 600),
 	),
 	typography: mat.define-typography-config(),
 	density: 0,
 ));
 @include mat.all-component-themes($my-theme);
 
+.bg-primary { background: #6da043 !important; }
+
 // Globals ==============================================================
 
 html, body {