Added resources section

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/view/home/home.component.html

@@ -64,7 +64,57 @@
 	</div>
 </section>
 <!-- Divider -->
-<div class="py-5" style="height: 50vh; width: 100%; background: url('/assets/pelican.png') no-repeat fixed center; background-size: cover;"></div>
+<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">
@@ -76,7 +126,7 @@
 </section>
 <!-- Contact -->
 <section class="py-5" style="background: url('/assets/texture.png') repeat;">
-	<div class="py-5 px-3 cap-width text-center">
+	<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;">