Updated contact form

src/app/app.module.ts

@@ -1,4 +1,5 @@
 import {NgModule} from '@angular/core';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {BrowserModule} from '@angular/platform-browser';
 import {NgxGoogleAnalyticsModule} from 'ngx-google-analytics';
 import {environment} from '../environments/environment';
@@ -50,6 +51,7 @@ export const APP_IMPORTS: any[] = [
 	AppRouting,
 	BrowserAnimationsModule,
 	BrowserModule,
+	ReactiveFormsModule,
 	MaterialModule
 ]
 

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

@@ -1,25 +1,28 @@
 <div class="d-flex flex-column-reverse flex-md-row justify-content-center cap-width">
 	<div style="flex: 2 0 0;">
-		<form>
+		<div *ngIf="error" class="alert alert-danger py-2">
+			Coming Soon: This feature is under development
+		</div>
+		<form [formGroup]="form">
 			<div>
 				<mat-form-field appearance="fill" class="w-100">
 					<mat-label>Email</mat-label>
-					<input matInput>
+					<input matInput formControlName="email">
 				</mat-form-field>
 			</div>
 			<div>
 				<mat-form-field appearance="fill" class="w-100">
 					<mat-label>Subject</mat-label>
-					<mat-select [(value)]="contact">
-						<mat-option value="general">General Inquiry</mat-option>
-						<mat-option value="castra">Castra Event</mat-option>
+					<mat-select [(value)]="contact" formControlName="subject">
+						<mat-option value="General">General Inquiry</mat-option>
+						<mat-option value="Castra">Castra Event</mat-option>
 					</mat-select>
 				</mat-form-field>
 			</div>
 			<div>
 				<mat-form-field appearance="fill" class="w-100">
 					<mat-label>Message</mat-label>
-					<textarea matInput rows="10"></textarea>
+					<textarea matInput rows="10" formControlName="body"></textarea>
 				</mat-form-field>
 			</div>
 			<div class="d-flex justify-content-between align-items-center">
@@ -27,7 +30,8 @@
 					<mat-checkbox color="primary">Send me a copy</mat-checkbox>
 				</div>
 				<div>
-					<button mat-raised-button color="primary">Send</button>
+					<button mat-stroked-button class="me-3" (click)="reset()">Reset</button>
+					<button mat-raised-button color="primary" (click)="error = true">Send</button>
 				</div>
 			</div>
 		</form>

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

@@ -1,9 +1,25 @@
 import {Component} from '@angular/core';
+import {FormBuilder, FormGroup} from '@angular/forms';
 
 @Component({
 	selector: 'app-contact',
 	templateUrl: './contact.component.html'
 })
 export class ContactComponent {
-	contact: string = '';
+	public contact: string = '';
+	public error = false;
+	public form!: FormGroup;
+
+	constructor(private fb: FormBuilder) {
+		this.form = fb.group({
+			email: '',
+			subject: '',
+			body: '',
+		});
+	}
+
+	reset() {
+		this.error = false;
+		this.form.reset();
+	}
 }

src/app/components/navbar/navbar.component.scss

@@ -1,4 +1,5 @@
 .navbar-spacing {
+	position: relative;
 	height: 64px;
 	width: 100%;
 }

src/app/views/about/about.component.html

@@ -88,7 +88,7 @@
 				<p class="mb-2">It continues to host our annual events:</p>
 				<ul class="mt-0">
 					<li>Castra Aestiva (2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2022, 2023)</li>
-					<li>Castra Hiberna (2017, 2018, 2021, 2022)</li>
+					<li>Castra Hiberna (2017, 2018, 2021, 2022, 2023)</li>
 				</ul>
 				<h2>Special Thanks</h2>
 				<p>Robert Sacco - <em>Aquilifer</em> (Eagle bearer) & Legio XXX's president</p>

src/app/views/home/home.component.html

@@ -3,7 +3,7 @@
 	<xxx-banner></xxx-banner>
 </header>
 <!-- ABout -->
-<section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center bg-black fill py-5 py-md-0">
+<section id="about" class="d-flex flex-column flex-md-row align-items-center justify-content-center" style="padding: 10rem 0">
 	<div class="d-none d-md-inline flex-grow-1 text-end" style="flex-basis: 0">
 		<img src="/assets/img/trajan.png" alt="Statue of Trajan" height="450px" width="auto">
 	</div>
@@ -48,8 +48,56 @@
 		</div>
 	</div>
 </section>
+<!-- Resources -->
+<section id="resources" class="d-flex flex-column flex-md-row align-items-center justify-content-center invert" style="padding: 10rem 0">
+	<div class="py-5 container">
+		<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/img/capricorn.png" alt="Regulations" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Legio XXX</h3>
+					<p class="m-0">Learn about Legio XXX, who we are & what we do</p>
+					<a routerLink="/events/calendar">About Us</a> / <a routerLink="/events/castra-aestiva">Gallery</a> / <a routerLink="/events/castra-hiberna">Contact</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/img/event.png" alt="Border icon" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Events</h3>
+					<p class="m-0">See our upcoming events & learn how you can participate</p>
+					<a routerLink="/events/calendar">Calendar</a> / <a routerLink="/events/castra-aestiva">Castra Aestiva</a> / <a routerLink="/events/castra-hiberna">Castra Hiberna</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/img/reenact.png" alt="Canadian leaf" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Reenacting</h3>
+					<p class="m-0">Learn about re-enacting and how you can get involved</p>
+					<a routerLink="/events/calendar">Getting Started</a> / <a routerLink="/events/castra-aestiva">Rules & Regulations</a> / <a routerLink="/events/castra-hiberna">Drill Commands</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/img/helmet.png" alt="Regulations" style="height: 80px; width: auto">
+				</div>
+				<div>
+					<h3 class="mb-1">Equipment</h3>
+					<p class="m-0">Learn how to assemble & maintain your kit</p>
+					<a routerLink="/events/calendar">Buy Equipment</a> / <a routerLink="/events/castra-aestiva">Build Equipment</a> / <a routerLink="/events/castra-hiberna">Maintenance</a>
+				</div>
+			</div>
+		</div>
+	</div>
+</section>
 <!-- Recruitment -->
-<section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center fill invert">
+<section id="recruitment" class="d-flex flex-column flex-md-row align-items-center justify-content-center invert" style="padding: 10rem 0">
 	<div class="flex-grow-1 mt-5 mt-md-0 p-5 pb-0 text-center text-md-end" style="flex-basis: 0">
 		<img src="/assets/img/recruitment.png" alt="I want you for Legio XXX" style="max-width: min(90%, 400px)">
 	</div>
@@ -73,7 +121,7 @@
 	<div style="height: 300px; background: 0 url('/assets/img/formation.png') repeat-x; background-size: auto 300px;"></div>
 </section>
 <!-- Contact -->
-<section id="contact" class="d-flex flex-column align-items-center justify-content-center fill">
+<section id="contact" class="d-flex flex-column align-items-center justify-content-center" style="padding: 10rem 0">
 	<div class="container">
 		<h2 class="text-center mb-5">Contact</h2>
 		<app-contact></app-contact>

src/styles.scss

@@ -64,7 +64,7 @@ h3 { font: 400 18px / 30px Roboto, "Helvetica Neue", sans-serif !important; }
 	margin-right: auto;
 	padding: 5rem 2rem;
 
-	@media screen and (max-width: 400px) {
+	@media screen and (max-width: 1200px) {
 		padding: 3rem 2rem;
 	}