Added getting started page

src/app/app.module.ts

@@ -11,12 +11,14 @@ import {FourOFourComponent} from './views/404/404.component';
 import {CalendarComponent} from './views/events/calendar/calendar.component';
 import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
+import {GettingStartedComponent} from './views/reenact/getting-started/getting-started.component';
 import {RulesComponent} from './views/reenact/rules/rules.component';
 
 export const APP_COMPONENTS = [
 	AppComponent,
 	BannerComponent,
 	CalendarComponent,
+	GettingStartedComponent,
 	FooterComponent,
 	FourOFourComponent,
 	GalleryComponent,

src/app/app.routing.ts

@@ -4,12 +4,14 @@ import {FourOFourComponent} from './views/404/404.component';
 import {CalendarComponent} from './views/events/calendar/calendar.component';
 import {GalleryComponent} from './views/gallery/gallery.component';
 import {HomeComponent} from './views/home/home.component';
+import {GettingStartedComponent} from './views/reenact/getting-started/getting-started.component';
 import {RulesComponent} from './views/reenact/rules/rules.component';
 
 const routes: Routes = [
 	{path: '', pathMatch: 'full', component: HomeComponent},
 	{path: 'calendar', component: CalendarComponent},
 	{path: 'gallery', component: GalleryComponent},
+	{path: 'getting-started', component: GettingStartedComponent},
 	{path: 'rules', component: RulesComponent},
 	{path: '**', component: FourOFourComponent}
 ];

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

@@ -58,7 +58,7 @@
 				<br><br>
 				Legio XXX is looking for new recruits.
 				<br><br>
-				Check out the <a routerLink="/getting-starterd">Getting Started</a> page to learn more
+				Check out the <a routerLink="/getting-started">Getting Started</a> page to learn more
 				<br><br>
 				or <a routerLink="/login">register here.</a>
 			</p>

src/app/views/reenact/getting-started/getting-started.component.html

@@ -0,0 +1,52 @@
+<div class="invert">
+	<div class="container py-4 px-3">
+		<div>
+			<h1 class="mb-4">Getting Started</h1>
+			<mat-divider></mat-divider>
+			<div class="mx-5 my-5 text-center text-muted">
+				<h3 class="text-center mb-1 ms-3">Sacramentum Militare - Military Sacrament (Oath of Alligence)</h3>
+				<p class="fst-italic">Iurant autem milites omnia se strenue facturos quae praeceperit imperator, numquam deserturos militiam nec mortem recusaturos pro Romana republica!</p>
+				<p>But the soldiers swear that they shall faithfully execute all that the Emperor commands, that they shall never desert the service, and that they shall not seek to avoid death for the Roman republic!</p>
+				<p class="text-end fst-italic me-3">~ Vegetius 2. 5</p>
+			</div>
+			<mat-divider class="mb-4"></mat-divider>
+			<div>
+				<p>
+					Historically, prospective legionaries had to be at least 17 years old, however exceptions can made for mature individuals. Members must be able to physically perform the role that they portray in a
+					realistic manner.
+				</p>
+				<p>
+					If reenacting is something you would seriously like to do, great! Interest in the history of Rome is the primary requirement and you are in the right place. This guide walk you through everything
+					you need to know to get started. Aquiring a full kit may take some time & cost a couple thousand dollars (USD/CAD) however we provide manuals to build equipment yourself to save on costs.
+					With enough notice we may be able to loan any equipment you are missing for an event, please let us know.
+				</p>
+				<h3>Steps</h3>
+				<ul>
+					<li>Familiarize yourself with <a routerLink="/rules">our rules</a></li>
+					<li>Pick out a name:</li>
+					<ul>
+						<li>Period correct</li>
+						<li>Can be fictional or non-fictional</li>
+						<li>Avoide any famous names</li>
+					</ul>
+					<li>Assemble your kit (in order of priority) choosing to either <a routerLink="/vendors">purchase</a> or <a href="/diy">assemble</a> your equipment:</li>
+					<ul>
+						<li><span class="fw-bold"><span class="fst-italic">Tunica</span>/Tunic</span> - A large shirt/dress held at the waist by a cord or cloth belt</li>
+						<li><span class="fw-bold"><span class="fst-italic">Caligae</span>/Sandles</span> - Modern leather sandles will do in a pinch</li>
+						<li><span class="fw-bold"><span class="fst-italic">Balteus</span>/Belt</span> - A lether ordimental apron used to afix weapons</li>
+						<li><span class="fw-bold"><span class="fst-italic">Pugio</span>/Dagger</span> - Attached to the Balteus</li>
+						<li><span class="fst-italic">Cassis</span>/Helmet - To protect the noggin!</li>
+						<li><span class="fst-italic">Gladius</span>/Sword - The primary weapon of the empire</li>
+						<li><span class="fst-italic">Scutum</span>/Shield - A large semicircle shield</li>
+						<li><span class="fst-italic">Lorica</span>/Armour - Segmata, hamata or plumata/squamta</li>
+						<li><span class="fst-italic">Subarmalis</span>/Padded Vest - Additional comfort & protection</li>
+						<li><span class="fst-italic">Focale</span>/Scarf - Protects the neck from chaifing</li>
+						<li><span class="fst-italic">Pilum</span>/Javlin - A ranged weapon</li>
+					</ul>
+					<li>Submit an <a href="#">application</a></li>
+				</ul>
+			</div>
+			<br>
+		</div>
+	</div>
+</div>

src/app/views/reenact/getting-started/getting-started.component.ts

@@ -0,0 +1,7 @@
+import {Component} from '@angular/core';
+
+@Component({
+	selector: 'xxx-getting-started',
+	templateUrl: './getting-started.component.html'
+})
+export class GettingStartedComponent { }