Update docker/nginx.conf

.github/workflows/website.yaml

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

LICENSE

@@ -1,7 +1,11 @@
-Copyright (c) 2023 Zakary Timson
+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

@@ -1,31 +1,31 @@
-worker_processes  auto;
+worker_processes  auto;
-pid /var/run/nginx.pid;
+pid /var/run/nginx.pid;
-
+
-events {
+events {
-    worker_connections  1024;
+    worker_connections  1024;
-}
+}
-
+
-http {
+http {
-  include       mime.types;
+  include       mime.types;
-  default_type  application/octet-stream;
+  default_type  application/octet-stream;
-
+
-  gzip on;
+  gzip on;
-  gzip_proxied any;
+  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_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_vary on;
-  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
+  gzip_disable "MSIE [1-6]\.(?!.*SV1)";
-
+
-  sendfile off;
+  sendfile off;
-  keepalive_timeout 65;
+  keepalive_timeout 65;
-
+
-  server {
+  server {
-    listen 80;
+    listen 80;
-    index index.html;
+    index index.html;
-    root /usr/share/nginx/html;
+    root /usr/share/nginx/html;
-    autoindex off;
+    autoindex off;
-
+
-    location / {
+    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,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 {
+	.carousel-image {
-	//	display: none;
+		display: block;
-	//}
+		max-width: 95%;
-	//.carousel-previous {
+		max-height: 95%;
-	//	display: none;
+		object-fit: cover;
-	//}
+		width: auto;
-	//.carousel-pause {
+		height: auto;
-	//	display: none;
+	}
-	//}
-	//
-	//&:hover {
-	//	.carousel-next {
-	//		display: flex;
-	//	}
-	//	.carousel-previous {
-	//		display: flex;
-	//	}
-	//	.carousel-pause {
-	//		display: flex;
-	//	}
-	//}
-}
 
-.carousel-background {
+	.carousel-next, .carousel-previous {
-	width: 100%;
+		position: absolute;
-	height: 100%;
+		top: 0;
-	filter: blur(10px);
+		bottom: 0;
-	-webkit-filter: blur(10px);
+		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 {
+		&.carousel-next {
-	position: absolute;
+			right: 0;
-	top: 5%;
+		}
-	left: 50%;
-	transform: translate(-50%);
-	height: 90%;
-	width: auto;
-}
 
-.carousel-next {
+		&.carousel-previous {
-	position: absolute;
+			left: 0;
-	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;
 
-	&:hover {
+		&:hover {
-		color: white;
+			color: white;
-		background: rgba(0,0,0,0.25);
+			background: rgba(0,0,0,0.25);
-		filter: none;
+			filter: none;
-	}
+		}
-}
+	}
-
+
-.carousel-previous {
+	.carousel-pause {
-	position: absolute;
+		position: absolute;
-	top: calc(50% - 28px);
+		bottom: 0;
-	left: 0;
+		left: 50%;
-	height: 56px;
+		height: 56px;
-	width: 56px;
+		width: 56px;
-	color: rgba(255, 255, 255, 0.75);
+		transform: translate(-50%, -50%);
-	filter: drop-shadow(3px 3px 5px black);
+		color: rgba(255, 255, 255, 0.75);
-	cursor: pointer;
+		filter: drop-shadow(3px 3px 5px black);
-	padding: 1rem;
+		cursor: pointer;
-	border-radius: 50%;
+		padding: 1rem;
-	transition: 0.25s;
+		border-radius: 50%;
-
+		transition: 0.25s;
-	&:hover {
+
-		color: white;
+		&:hover {
-		background: rgba(0,0,0,0.25);
+			color: white;
-		filter: none;
+			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>Email: <a href="mailto:pelicanlanding2002@gmail.com" target="_blank">pelicanlanding2002&#64;gmail.com</a></li>
-					<li>Social Media:
+					<li>Social Media: <a href="https://www.facebook.com/MorsonsPelicanLanding" target="_blank">Facebook</a></li>
-						<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">
+	<button mat-button routerLink="/" class="d-flex align-items-center">Pelican Landing</button>
-
-		<h1 class="d-none d-sm-inline">Pelican Landing</h1>
-	</button>
 	<span class="mx-auto"></span>
 	<span>
-		<button mat-button routerLink="/coming-soon">Restaurant</button>
+		<span class="d-none d-sm-inline">
-	    <button mat-button routerLink="/coming-soon">Hunting</button>
+			<button *ngFor="let n of navItems" mat-button [routerLink]="n[1]">{{n[0]}}</button>
-	    <button mat-button routerLink="/coming-soon">Fishing</button>
+	    </span>
-	    <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 *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="bg-white" style="height: 100vh">
-	<div class="m-5 p-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 under development</h2>
+		<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">
+<!-- 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>
+				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon>
-	<div class="d-flex justify-content-around flex-wrap cap-width py-5">
+				<h3>Restaurant</h3>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+				<p class="mb-0">Our on site restaurant is the best around. Open 11am - 8pm</p>
-			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">restaurant</mat-icon>
+				<br>
-			<h3>Restaurant</h3>
+				<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>
-			<p class="mb-0">Our on site restaurant is the best around. Open 11am - 8pm</p>
+			</div>
-			<br>
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/fall.png') no-repeat; background-size: cover;">
-			<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>
+				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">gps_fixed</mat-icon>
-		</div>
+				<h3>Hunting</h3>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+				<p class="mb-0">We offer guided tours to hunt black bear, white tail dear, birds & small game</p>
-			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">gps_fixed</mat-icon>
+				<br>
-			<h3>Hunting</h3>
+				<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>
-			<p class="mb-0">We offer guided tours to hunt black bear, white tail dear, birds & small game</p>
+			</div>
-			<br>
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/summer.png') no-repeat; background-size: cover;">
-			<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>
+				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">phishing</mat-icon>
-		</div>
+				<h3>Fishing</h3>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+				<p class="mb-0">We offer guided tours to fish for walleye, pike, crappie, bass, trout, sturgeon & muskie</p>
-			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">phishing</mat-icon>
+				<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>
-			<h3>Fishing</h3>
+			</div>
-			<p class="mb-0">We offer guided tours to fish for walleye, pike, crappie, bass, trout, sturgeon & muskie</p>
+			<div class="card p-4 text-center mb-5 text-white" style="width: 250px; background: url('/assets/winter.png') no-repeat; background-size: cover;">
-			<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>
+				<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">cottage</mat-icon>
-		</div>
+				<h3>Lodging</h3>
-		<div class="card p-3 text-center mb-5" style="width: 225px">
+				<p class="mb-0">Reserve a cottage or RV parking spot. Package with a hunting/fishing trip for more savings</p>
-			<mat-icon class="mx-auto my-3" style="width: 64px; height: 64px; font-size: 64px">cottage</mat-icon>
+				<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>
-			<h3>Lodging</h3>
+			</div>
-			<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>
 		</div>
 	</div>
 </section>
-<section class="bg-white p-5 text-center">
+<!-- Restaurant -->
-	<h2 class="mb-5">Contact Us</h2>
+<section class="py-5 bg-white">
-	<div class="mx-auto" style="max-width: 750px">
+	<div class="py-5 cap-width d-flex flex-column flex-wrap flex-md-row align-items-center justify-content-around">
-		<app-contact></app-contact>
+		<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="bg-white p-5" style="height: 80vh">
-	<div class="card my-5 mx-auto p-5 text-center" style="max-width: 400px">
+	<div class="pt-5">
-		<h1 style="font-size: 4em">404</h1>
+		<div class="mt-5 mx-auto card p-5 text-center" style="max-width: 400px">
-		<h2 class="mt-3">Page not found</h2>
+			<h1 style="font-size: 4em">404</h1>
-		<button class="btn btn-outline-secondary rounded-pill px-4 mt-3" (click)="back()">Back</button>
+			<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:url" content="https://pelican-landing.zakscode.com">
-	<meta property="og:image" content="https://pelicanlandingcanada.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 Huntint & Fishing Lodge">
+	<meta property="og:description" content="Morson's Pelican Landing Hunting & Fishing Lodge">
-	<meta name="description" content="Morson's Pelican Landing Huntint & Fishing Lodge">
+	<meta name="description" content="Morson's Pelican Landing Hunting & Fishing Lodge">
-	<meta name="twitter:card" content="Morson's Pelican Landing Huntint & 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),
+		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 {