Update docker/nginx.conf

.github/workflows/website.yaml

@@ -1,54 +1,53 @@
-name: Build Website
-run-name: Build Website
-
-on:
-    push:
-
-jobs:
-    build:
-        name: Build NPM Project
-        runs-on: ubuntu-latest
-        container: node
-        steps:
-            - name: Clone Repository
-              uses: ztimson/actions/clone@develop
-
-            - name: Install Dependencies
-              run: npm i
-
-            - name: Build Project
-              run: npm run build
-
-            - name: Upload Artifacts
-              if: ${{inputs.artifacts}} != "false"
-              uses: actions/upload-artifact@v3
-              with:
-                  name: website
-                  path: dist
-                  retention-days: 7
-
-    tag:
-        name: Tag Version
-        needs: build
-        runs-on: ubuntu-latest
-        container: node
-        steps:
-            - name: Clone Repository
-              uses: ztimson/actions/clone@develop
-
-            - name: Get Version Number
-              run: echo "VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')" >> $GITHUB_ENV
-
-            - name: Tag Version
-              uses: ztimson/actions/tag@develop
-              with:
-                  tag: ${{env.VERSION}}
-
-    publish:
-        name: Build & Push Dockerfile
-        needs: build
-        uses: ztimson/actions/.github/workflows/docker.yaml@develop
-        with:
-            name: ztimson/pelican-landing
-            repository: ${{github.server_url}}/${{github.repository}}.git
-            pass: ${{secrets.DEPLOY_TOKEN}}
+name: Build Website
+run-name: Build Website
+
+on:
+    push:
+
+jobs:
+    build:
+        name: Build NPM Project
+        runs-on: ubuntu-latest
+        container: node
+        steps:
+            - name: Clone Repository
+              uses: ztimson/actions/clone@develop
+
+            - name: Install Dependencies
+              run: npm i
+
+            - name: Build Project
+              run: npm run build
+
+            - name: Upload Artifacts
+              uses: actions/upload-artifact@v3
+              with:
+                  name: website
+                  path: dist
+                  retention-days: 7
+
+    tag:
+        name: Tag Version
+        needs: build
+        runs-on: ubuntu-latest
+        container: node
+        steps:
+            - name: Clone Repository
+              uses: ztimson/actions/clone@develop
+
+            - name: Get Version Number
+              run: echo "VERSION=$(cat package.json | grep version | grep -Eo ':.+' | grep -Eo '[[:alnum:]\.\/\-]+')" >> $GITHUB_ENV
+
+            - name: Tag Version
+              uses: ztimson/actions/tag@develop
+              with:
+                  tag: ${{env.VERSION}}
+
+    publish:
+        name: Build & Push Dockerfile
+        needs: build
+        uses: ztimson/actions/.github/workflows/docker.yaml@develop
+        with:
+            name: ztimson/pelican-landing
+            repository: ${{github.server_url}}/${{github.repository}}.git
+            pass: ${{secrets.DEPLOY_TOKEN}}

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:
-
-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, 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.
+Copyright (c) 2023 Zakary Timson
+
+All Rights Reserved.
+
+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.

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

@@ -1,31 +1,31 @@
-worker_processes  auto;
-pid /var/run/nginx.pid;
-
-events {
-    worker_connections  1024;
-}
-
-http {
-  include       mime.types;
-  default_type  application/octet-stream;
-
-  gzip on;
-  gzip_proxied any;
-  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
-  gzip_vary on;
-  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
-
-  sendfile off;
-  keepalive_timeout 65;
-
-  server {
-    listen 80;
-    index index.html;
-    root /usr/share/nginx/html;
-    autoindex off;
-
-    location / {
-      try_files $uri$args $uri$args/ /index.html;
-    }
-  }
-}
+worker_processes  auto;
+pid /var/run/nginx.pid;
+
+events {
+    worker_connections  1024;
+}
+
+http {
+  include       mime.types;
+  default_type  application/octet-stream;
+
+  gzip on;
+  gzip_proxied any;
+  gzip_types text/plain text/css application/xml application/xhtml+xml application/rss+xml application/javascript application/x-javascript application/json application/x-font-woff;
+  gzip_vary on;
+  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+
+  sendfile off;
+  keepalive_timeout 65;
+
+  server {
+    listen 80;
+    index index.html;
+    root /usr/share/nginx/html;
+    autoindex off;
+
+    location / {
+      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",
-			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.6.2.tgz",
-			"integrity": "sha512-51Bbp/Uxr9aTuy6ca/8FbFloBUJZLHwnhTcnjIeRn2suQWsWzcuJhGjKDB5eppVte/8oCdOL3VuwxvZDUggwGQ==",
+			"version": "5.3.2",
+			"resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.2.tgz",
+			"integrity": "sha512-D32nmNWiQHo94BKHLmOrdjlL05q1c8oxbtBphQFb9Z5to6eGRDCm0QgeaZ4zFBHzfg2++rqa2JkqCcxDy0sH0g==",
 			"funding": [
 				{
 					"type": "github",
@@ -4811,8 +4821,7 @@
 				}
 			],
 			"peerDependencies": {
-				"jquery": "1.9.1 - 3",
-				"popper.js": "^1.16.1"
+				"@popperjs/core": "^2.11.8"
 			}
 		},
 		"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">
-	<img *ngIf="background" class="carousel-background" [src]="gallery[index]" alt="background">
+<div class="carousel-container"  [style.height]="height" style="background: #282d31">
 	<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,106 +1,72 @@
 .carousel-container {
 	position: relative;
 	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 
+	.carousel-background {
+		width: 100%;
+		height: 100%;
+		filter: blur(10px);
+		-webkit-filter: blur(10px);
+	}
 
-	//.carousel-next {
-	//	display: none;
-	//}
-	//.carousel-previous {
-	//	display: none;
-	//}
-	//.carousel-pause {
-	//	display: none;
-	//}
-	//
-	//&:hover {
-	//	.carousel-next {
-	//		display: flex;
-	//	}
-	//	.carousel-previous {
-	//		display: flex;
-	//	}
-	//	.carousel-pause {
-	//		display: flex;
-	//	}
-	//}
-}
+	.carousel-image {
+		display: block;
+		max-width: 95%;
+		max-height: 95%;
+		object-fit: cover;
+		width: auto;
+		height: auto;
+	}
 
-.carousel-background {
-	width: 100%;
-	height: 100%;
-	filter: blur(10px);
-	-webkit-filter: blur(10px);
-}
+	.carousel-next, .carousel-previous {
+		position: absolute;
+		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-image {
-	position: absolute;
-	top: 5%;
-	left: 50%;
-	transform: translate(-50%);
-	height: 90%;
-	width: auto;
-}
+		&.carousel-next {
+			right: 0;
+		}
 
-.carousel-next {
-	position: absolute;
-	top: calc(50% - 28px);
-	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;
+		&.carousel-previous {
+			left: 0;
+		}
 
-	&:hover {
-		color: white;
-		background: rgba(0,0,0,0.25);
-		filter: none;
-	}
-}
-
-.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;
-		background: rgba(0,0,0,0.25);
-		filter: none;
-	}
-}
-
-
-
-.carousel-pause {
-	position: absolute;
-	bottom: 0;
-	left: 50%;
-	height: 56px;
-	width: 56px;
-	transform: translate(-50%, -50%);
-	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;
+		&:hover {
+			color: white;
+			background: rgba(0,0,0,0.25);
+			filter: none;
+		}
+	}
+
+	.carousel-pause {
+		position: absolute;
+		bottom: 0;
+		left: 50%;
+		height: 56px;
+		width: 56px;
+		transform: translate(-50%, -50%);
+		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;
+		}
 	}
 }

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

@@ -1,5 +1,5 @@
 <footer class="w-100 text-white app-footer">
-	<div class="bg-dark p-3">
+	<div class="bg-dark p-3 pt-4">
 		<div class="d-flex flex-column flex-sm-row flex-md-wrap justify-content-around mx-auto cap-width">
 			<div>
 				<h4>Address</h4>
@@ -14,26 +14,30 @@
 				<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>Social Media:
-						<a href="https://www.facebook.com/MorsonsPelicanLanding" target="_blank">Facebook</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>
 			<div>
 				<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>
@@ -54,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,14 +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">
-
-		<h1 class="d-none d-sm-inline">Pelican Landing</h1>
-	</button>
+	<button mat-button routerLink="/" class="d-flex align-items-center">Pelican Landing</button>
 	<span class="mx-auto"></span>
 	<span>
-		<button mat-button routerLink="/coming-soon">Restaurant</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 class="d-none d-sm-inline">
+			<button *ngFor="let n of navItems" mat-button [routerLink]="n[1]">{{n[0]}}</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 *ngFor="let n of navItems" mat-menu-item [routerLink]="n[1]">{{n[0]}}</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,7 +1,7 @@
-<div class="bg-white p-5">
-	<div class="m-5 p-5 text-center">
-		<h1 style="font-size: 4em">Coming Soon</h1>
-		<h2 class="mt-3">This page is under development</h2>
+<div class="bg-white" style="height: 100vh">
+	<div class="text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
+		<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>
 </div>

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

@@ -1,49 +1,169 @@
-<div class="w-100">
-	<img src="/assets/background.png" alt="Banner" width="100%" height="400px">
-	<h1></h1>
+<!-- Banner -->
+<div style="height: 75vh; width: 100%; background: url('/assets/islands.png') no-repeat fixed bottom; background-size: cover;">
+	<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">
-	<h2 class="mb-5">About Us</h2>
-	<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>
-	<app-carousel></app-carousel>
-</section>
-<section class="pt-5 text-center" style="background: #f1f1f1">
-	<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>
-		</div>
-		<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">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>
-		</div>
-		<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">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>
-		</div>
-		<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">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>
+<!-- Services -->
+<section class="py-5 bg-white" style="background: url('/assets/texture.png') repeat;">
+	<div class="py-5 cap-width text-center ">
+		<h2 class="mb-5">Services</h2>
+		<div class="d-flex justify-content-around flex-wrap cap-width">
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/spring.png') no-repeat; background-size: cover;">
+				<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="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-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="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-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>
+				<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-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="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">
-	<h2 class="mb-5">Contact Us</h2>
-	<div class="mx-auto" style="max-width: 750px">
-		<app-contact></app-contact>
+<!-- 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="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">
-	<div class="card my-5 mx-auto 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 class="bg-white p-5" style="height: 80vh">
+	<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

@@ -8,14 +8,14 @@
 	<meta charset="utf-8">
 	<meta name="robots" content="index, follow">
 	<meta name="viewport" content="width=device-width, user-scalable=no">
-	
+
 	<meta property="og:title" content="Pelican Landing">
 	<meta property="og:type" content="artical">
-	<meta property="og:url" content="https://pelicanlandingcanada.com">
-	<meta property="og:image" content="https://pelicanlandingcanada.com/assets/gallery/sign.jpg">
-	<meta property="og:description" content="Morson's Pelican Landing Huntint & Fishing Lodge">
-	<meta name="description" content="Morson's Pelican Landing Huntint & Fishing Lodge">
-	<meta name="twitter:card" content="Morson's Pelican Landing Huntint & Fishing Lodge">
+	<meta property="og:url" content="https://pelican-landing.zakscode.com">
+	<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">
 </head>
 <body class="mat-typography">
 <app-root>

src/styles.scss

@@ -6,14 +6,16 @@
 @include mat.core();
 $my-theme: mat.define-light-theme((
 	color: (
-		primary: mat.define-palette(mat.$blue-palette),
-		accent: mat.define-palette(mat.$pink-palette, A200),
+		primary: mat.define-palette(mat.$green-palette, 700),
+		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 {