Updated styling, added contact info, & restaurant

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/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>
@@ -53,7 +53,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/view/coming-soon/coming-soon.component.html

@@ -1,9 +1,7 @@
-<div class="bg-white p-5" style="height: 80vh">
+<div class="bg-white" style="height: 100vh">
-	<div class="pt-5 mt-5">
+	<div class="text-center" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">
-		<div class="mt-5 text-center">
 		<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>
-</div>

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

@@ -1,49 +1,111 @@
+<!-- Banner -->
 <div style="height: 75vh; width: 100%; background: url('/assets/islands.png') no-repeat fixed bottom; background-size: cover;">
 	<img src="/assets/sign.jpg" 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="pt-5 text-center bg-white" style="background: url('/assets/texture.png') repeat;">
+<!-- Services -->
-	<h2>Services</h2>
+<section class="py-5 bg-white" style="background: url('/assets/texture.png') repeat;">
-	<div class="d-flex justify-content-around flex-wrap cap-width py-5">
+	<div class="py-5 cap-width text-center ">
-		<div class="card p-3 text-center mb-5 text-white" style="width: 225px; background: url('/assets/spring.png') no-repeat; background-size: cover;">
+		<h2 class="mb-5">Services</h2>
+		<div class="d-flex justify-content-around justify-content-lg-between 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-3 text-center mb-5 text-white" style="width: 225px; background: url('/assets/fall.png') no-repeat; background-size: cover;">
+			<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-3 text-center mb-5 text-white" style="width: 225px; background: url('/assets/summer.png') no-repeat; background-size: cover;">
+			<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-3 text-center mb-5 text-white" style="width: 225px; background: url('/assets/winter.png') no-repeat; background-size: cover;">
+			<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>
-<div style="height: 60vh; width: 100%; background: url('/assets/pelican.png') no-repeat fixed center; background-size: cover;"></div>
+<!-- Restaurant -->
+<section class="py-5 bg-white">
+	<div class="py-5 cap-width d-flex align-items-center justify-content-between">
+		<div class="m-5">
+			<img src="/assets/resturant.png" 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 & hotdogs.</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 [ngStyle]="{'font-weight-bold': day == 0}"><td>Sunday</td><td>11 am - 8 pm</td></tr>
+				<tr [ngStyle]="{'font-weight-bold': day == 1}"><td>Monday</td><td>11 am - 8 pm</td></tr>
+				<tr [ngStyle]="{'font-weight-bold': day == 2}"><td>Tuesday</td><td>11 am - 8 pm</td></tr>
+				<tr [ngStyle]="{'font-weight-bold': day == 3}"><td>Wednesday</td><td>11 am - 8 pm</td></tr>
+				<tr [ngStyle]="{'font-weight-bold': day == 4}"><td>Thursday</td><td>11 am - 8 pm</td></tr>
+				<tr [ngStyle]="{'font-weight-bold': day == 5}"><td>Friday</td><td>11 am - 8 pm</td></tr>
+				<tr [ngStyle]="{'font-weight-bold': day == 6}"><td>Saturday</td><td>11 am - 8 pm</td></tr>
+			</table>
+		</div>
+	</div>
+</section>
+<!-- Resources -->
+<div style="height: 60vh; width: 100%; background: url('/assets/pelican.png') no-repeat fixed center; background-size: cover;">
+
+</div>
+<!-- About -->
 <section class="w-100 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 outdoorsman 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>
+<!-- Contact -->
 <section class="p-5 text-center" style="background: url('/assets/texture.png') repeat;">
 	<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>
+			<div class="d-block d-md-none my-4 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>
+	</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="350" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
+	<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="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/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">