current progress

2023-12-26 22:56:58 -05:00
commit 7843c7b084
99 changed files with 42808 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,5 @@
+/src
+/node_modules
+/config/db.php
+.env
+.vscode
--- a/404.php
+++ b/404.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- 404 Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-bricks"></i>
+    <h1 class="text-2xl p-4 underline ">404 Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/archive.php
+++ b/archive.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Archive Page Fallback Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-archive"></i>
+    <h1 class="text-2xl p-4 underline ">Archive Fallback Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/assets/css/bootstrap-icons.css
+++ b/assets/css/bootstrap-icons.css
--- a/assets/css/font-awesome.css
+++ b/assets/css/font-awesome.css
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
--- a/assets/fonts/Arvo/Arvo-Bold.ttf
+++ b/assets/fonts/Arvo/Arvo-Bold.ttf
--- a/assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf
+++ b/assets/fonts/Libre_Baskerville/LibreBaskerville-Regular.ttf
--- a/assets/fonts/Open_Sans/OpenSans-Medium.ttf
+++ b/assets/fonts/Open_Sans/OpenSans-Medium.ttf
--- a/assets/fonts/Roboto/Roboto-Light.ttf
+++ b/assets/fonts/Roboto/Roboto-Light.ttf
--- a/assets/fonts/Roboto/Roboto-Medium.ttf
+++ b/assets/fonts/Roboto/Roboto-Medium.ttf
--- a/assets/fonts/bootstrap-icons.woff
+++ b/assets/fonts/bootstrap-icons.woff
--- a/assets/fonts/bootstrap-icons.woff2
+++ b/assets/fonts/bootstrap-icons.woff2
--- a/assets/fonts/fa-brands-400.ttf
+++ b/assets/fonts/fa-brands-400.ttf
--- a/assets/fonts/fa-brands-400.woff2
+++ b/assets/fonts/fa-brands-400.woff2
--- a/assets/fonts/fa-regular-400.ttf
+++ b/assets/fonts/fa-regular-400.ttf
--- a/assets/fonts/fa-regular-400.woff2
+++ b/assets/fonts/fa-regular-400.woff2
--- a/assets/fonts/fa-solid-900.ttf
+++ b/assets/fonts/fa-solid-900.ttf
--- a/assets/fonts/fa-solid-900.woff2
+++ b/assets/fonts/fa-solid-900.woff2
--- a/assets/fonts/fa-v4compatibility.ttf
+++ b/assets/fonts/fa-v4compatibility.ttf
--- a/assets/fonts/fa-v4compatibility.woff2
+++ b/assets/fonts/fa-v4compatibility.woff2
--- a/assets/images/bgs/backsplash.png
+++ b/assets/images/bgs/backsplash.png
--- a/assets/images/bgs/daily-living-and-housing.png
+++ b/assets/images/bgs/daily-living-and-housing.png
--- a/assets/images/bgs/goals-and-objectives.png
+++ b/assets/images/bgs/goals-and-objectives.png
--- a/assets/images/bgs/login_bg.jpeg
+++ b/assets/images/bgs/login_bg.jpeg
--- a/assets/images/bgs/managing-your-finances.png
+++ b/assets/images/bgs/managing-your-finances.png
--- a/assets/images/bgs/mental-health-and-wellness.png
+++ b/assets/images/bgs/mental-health-and-wellness.png
--- a/assets/images/bgs/prep-for-univerisity.png
+++ b/assets/images/bgs/prep-for-univerisity.png
--- a/assets/images/bgs/preparing-for-college-and-university.png
+++ b/assets/images/bgs/preparing-for-college-and-university.png
--- a/assets/images/bgs/resources-and-additional-information.png
+++ b/assets/images/bgs/resources-and-additional-information.png
--- a/assets/images/bgs/tinified.zip
+++ b/assets/images/bgs/tinified.zip
--- a/assets/images/extras/Placeholder-Image---Landscape.svg
+++ b/assets/images/extras/Placeholder-Image---Landscape.svg
@@ -0,0 +1,4 @@
+<svg width="1280" height="720" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1280" height="720" fill="#DBDBDB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M740 300C740 288.954 731.046 280 720 280H560C548.954 280 540 288.954 540 300V420C540 431.046 548.954 440 560 440H720C731.046 440 740 431.046 740 420V300ZM615 310C623.284 310 630 316.716 630 325C630 333.284 623.284 340 615 340C606.716 340 600 333.284 600 325C600 316.716 606.716 310 615 310ZM705 410C707.761 410 710 407.762 710 405V401.6C709.993 400.519 709.643 399.469 709 398.6L666.5 341.9C665.533 340.677 664.059 339.964 662.5 339.964C660.941 339.964 659.467 340.677 658.5 341.9L629.7 379.1C628.746 380.347 627.27 381.085 625.7 381.1C624.227 381.102 622.832 380.441 621.9 379.3L607.4 361.8C606.437 360.644 605.005 359.983 603.5 360C602.127 360.144 600.868 360.827 600 361.9L571.1 398.6C570.387 399.437 569.996 400.501 570 401.6V405C570 407.762 572.239 410 575 410H705Z" fill="black" fill-opacity="0.15"/>
+</svg>
--- a/assets/images/extras/Placeholder-Video---Landscape.svg
+++ b/assets/images/extras/Placeholder-Video---Landscape.svg
@@ -0,0 +1,4 @@
+<svg width="1280" height="720" viewBox="0 0 1280 720" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1280" height="720" fill="#DBDBDB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M560 280H720C731.046 280 740 288.954 740 300V420C740 431.046 731.046 440 720 440H560C548.954 440 540 431.046 540 420V300C540 288.954 548.954 280 560 280ZM631.7 392.2L670.6 366.2C672.696 364.834 673.96 362.502 673.96 360C673.96 357.498 672.696 355.166 670.6 353.8L631.7 327.8C629.403 326.248 626.438 326.089 623.988 327.387C621.539 328.685 620.005 331.228 620 334V386C620.005 388.772 621.539 391.315 623.988 392.613C626.438 393.911 629.403 393.752 631.7 392.2Z" fill="black" fill-opacity="0.15"/>
+</svg>
--- a/assets/images/extras/company-logo.svg
+++ b/assets/images/extras/company-logo.svg
@@ -0,0 +1,6 @@
+<svg width="63" height="27" viewBox="0 0 63 27" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.564453 21H13.2485V17.444H5.10045V0.980011H0.564453V21Z" fill="white"/>
+<path d="M21.587 18.228C19.291 18.228 18.003 16.548 18.003 13.748V13.524C18.003 10.724 19.347 9.10001 21.587 9.10001C23.855 9.10001 25.171 10.78 25.171 13.58V13.776C25.171 16.548 23.855 18.228 21.587 18.228ZM21.559 21.308C25.955 21.308 29.287 18.368 29.287 13.748V13.524C29.287 8.96001 25.983 6.02001 21.587 6.02001C17.191 6.02001 13.859 9.01601 13.859 13.608V13.832C13.859 18.396 17.191 21.308 21.559 21.308Z" fill="white"/>
+<path d="M37.6649 26.404C42.4809 26.404 45.3649 24.192 45.3929 19.852V6.35601H41.3609V8.54001C40.5209 7.05601 39.0929 6.02001 36.7129 6.02001C33.0729 6.02001 30.2729 8.96001 30.2729 13.16V13.356C30.2729 17.696 33.1009 20.356 36.6569 20.356C38.8129 20.356 40.5489 19.068 41.3609 17.64V19.852C41.3609 22.148 40.1289 23.436 37.6649 23.436C35.5929 23.436 34.6689 22.596 34.4169 21.308H30.3849C30.7769 24.332 32.9329 26.404 37.6649 26.404ZM37.8609 17.304C35.8449 17.304 34.4169 15.792 34.4169 13.356V13.132C34.4169 10.724 35.6769 9.10001 37.9449 9.10001C40.1569 9.10001 41.4729 10.612 41.4729 13.104V13.3C41.4729 15.792 39.9889 17.304 37.8609 17.304Z" fill="white"/>
+<path d="M54.9617 18.228C52.6657 18.228 51.3777 16.548 51.3777 13.748V13.524C51.3777 10.724 52.7217 9.10001 54.9617 9.10001C57.2297 9.10001 58.5457 10.78 58.5457 13.58V13.776C58.5457 16.548 57.2297 18.228 54.9617 18.228ZM54.9337 21.308C59.3297 21.308 62.6617 18.368 62.6617 13.748V13.524C62.6617 8.96001 59.3577 6.02001 54.9617 6.02001C50.5657 6.02001 47.2337 9.01601 47.2337 13.608V13.832C47.2337 18.396 50.5657 21.308 54.9337 21.308Z" fill="white"/>
+</svg>
--- a/assets/images/extras/image.svg
+++ b/assets/images/extras/image.svg
@@ -0,0 +1,4 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="300" height="300" fill="#E0E0E0"/>
+<path d="M174 168.75V132C174 129.112 171.638 126.75 168.75 126.75H132C129.112 126.75 126.75 129.112 126.75 132V168.75C126.75 171.638 129.112 174 132 174H168.75C171.638 174 174 171.638 174 168.75ZM141.188 154.312L147.75 162.214L156.938 150.375L168.75 166.125H132L141.188 154.312Z" fill="#C2C2C2"/>
+</svg>
--- a/assets/images/extras/placeholder-image.svg
+++ b/assets/images/extras/placeholder-image.svg
@@ -0,0 +1,4 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="#DBDBDB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M600 440C600 428.954 591.046 420 580 420H420C408.954 420 400 428.954 400 440V560C400 571.046 408.954 580 420 580H580C591.046 580 600 571.046 600 560V440ZM475 450C483.284 450 490 456.716 490 465C490 473.284 483.284 480 475 480C466.716 480 460 473.284 460 465C460 456.716 466.716 450 475 450ZM565 550C567.761 550 570 547.762 570 545V541.6C569.993 540.519 569.643 539.469 569 538.6L526.5 481.9C525.533 480.677 524.059 479.964 522.5 479.964C520.941 479.964 519.467 480.677 518.5 481.9L489.7 519.1C488.746 520.347 487.27 521.085 485.7 521.1C484.227 521.102 482.832 520.441 481.9 519.3L467.4 501.8C466.437 500.644 465.005 499.983 463.5 500C462.127 500.144 460.868 500.827 460 501.9L431.1 538.6C430.387 539.437 429.996 540.501 430 541.6V545C430 547.762 432.239 550 435 550H565Z" fill="black" fill-opacity="0.15"/>
+</svg>
--- a/assets/images/extras/placeholder-video-thumbnail.svg
+++ b/assets/images/extras/placeholder-video-thumbnail.svg
@@ -0,0 +1,4 @@
+<svg width="1000" height="1000" viewBox="0 0 1000 1000" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="1000" height="1000" fill="#DBDBDB"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M420 420H580C591.046 420 600 428.954 600 440V560C600 571.046 591.046 580 580 580H420C408.954 580 400 571.046 400 560V440C400 428.954 408.954 420 420 420ZM491.7 532.2L530.6 506.2C532.696 504.834 533.96 502.502 533.96 500C533.96 497.498 532.696 495.166 530.6 493.8L491.7 467.8C489.403 466.248 486.438 466.089 483.988 467.387C481.539 468.685 480.005 471.228 480 474V526C480.005 528.772 481.539 531.315 483.988 532.613C486.438 533.911 489.403 533.752 491.7 532.2Z" fill="black" fill-opacity="0.15"/>
+</svg>
--- a/assets/images/logos/Tribal
+++ b/assets/images/logos/Tribal
--- a/Councils/keewaytinook_okimakanak_logo.jpg
+++ b/Councils/keewaytinook_okimakanak_logo.jpg
--- a/Councils/matawa_first_nations_logo.jpg
+++ b/Councils/matawa_first_nations_logo.jpg
--- a/Councils/mushkegowuk_council_logo.jpg
+++ b/Councils/mushkegowuk_council_logo.jpg
--- a/Councils/shibogama_first_nations_logo.jpg
+++ b/Councils/shibogama_first_nations_logo.jpg
--- a/Councils/wabum_tribal_council_logo.jpg
+++ b/Councils/wabum_tribal_council_logo.jpg
--- a/Councils/windigo_first_nations_council_logo.jpg
+++ b/Councils/windigo_first_nations_council_logo.jpg
--- a/assets/images/logos/faded-red-bear-head.svg
+++ b/assets/images/logos/faded-red-bear-head.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1611 1570.33"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.05;mix-blend-mode:multiply;}.cls-3{fill:#951f21;}</style></defs><title>red-bear-head_1</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><path class="cls-3" d="M1086.08,578.46S1124,505,1181.83,466.62c61.85-41,102.85-127.24-27.52-152-86-30.45-134,49.09-134,49.09,67.8,48.69,116.73,20.61,143-5.57,10.66.3,35.59,3.59,38,27.6C1204.39,416.3,1068.74,482.59,1086.08,578.46Z"/><path class="cls-3" d="M430.69,466.62c57.83,38.33,95.75,111.84,95.75,111.84,17.34-95.87-118.31-162.16-115.25-192.75,2.36-23.59,26.47-27.17,37.43-27.58,26.29,26.17,75.22,54.23,143,5.55,0,0-48.35-80.16-135-48.77C328.22,340.11,369.09,425.78,430.69,466.62Z"/><path class="cls-3" d="M1005.75,422.69s-43.27,36.61-21.08,111,21.08,157.53,21.08,157.53,38.56-71.54,10-160.86C995,465.38,1005.75,422.69,1005.75,422.69Z"/><path class="cls-3" d="M1027.71,148.67c-72.91,20.22-152.32,68-222.21,69.66-69.89-1.67-149.3-49.44-222.21-69.66C433.06,107,372.82,224.51,372.82,224.51c31.62-42.31,157.26-79.18,267.93-24.26,96.89,48.09,164.75,48.26,164.75,48.26s67.86-.17,164.75-48.26c110.67-54.92,236.31-18.05,267.93,24.26C1238.18,224.51,1177.94,107,1027.71,148.67Z"/><path class="cls-3" d="M605.25,422.69s10.78,42.69-10,107.62c-28.57,89.32,10,160.86,10,160.86s-1.11-83.2,21.08-157.53S605.25,422.69,605.25,422.69Z"/><path class="cls-3" d="M689,422.69C737.27,357.24,805.5,326.2,805.5,326.2s68.23,31,116.49,96.49c0,0-51.59-124.25-116.49-127.58C740.6,298.44,689,422.69,689,422.69Z"/><path class="cls-3" d="M805.5,834.3c218.84,4.15,160.59-131.47,160.59-131.47,0,17.47-15.81,16.64-15.81,16.64,1.67-76.55-71.56-78.22-93.19-71.56s-51.59,6.66-51.59,6.66-30,0-51.59-6.66-94.86-5-93.19,71.56c0,0-15.81.83-15.81-16.64C644.91,702.83,586.66,838.45,805.5,834.3Z"/><path class="cls-3" d="M1536.06,228.54c33.29-29.95,114.28-148.66,52.15-197.48s-178.62,6.66-240.75,10-222.8-5.29-280.69-15.3C934.66,2.89,805.5,0,805.5,0S676.34,2.89,544.23,25.75c-57.89,10-218.56,18.62-280.69,15.3S84.92-17.76,22.79,31.06,41.65,198.59,74.94,228.54,86,310.64,66.06,378.32-20.48,589.11,16.14,624.61s46.59,87.65,46.59,87.65c21.08-21.09-1.11-75.45-12.2-112.06s0-61,23.3-76.55,64.5,56.93,128.41,115.11c68.79,62.6,99,120.65,99,120.65s-31.62-114.83-111.5-202.48-84.87-128.69-51.59-331.71S291.28,127,512.17,82.1C676.75,48.62,805.5,50.71,805.5,50.71s128.75-2.09,293.33,31.39c220.89,44.93,340.71-59.91,374,143.12s28.28,244.07-51.59,331.71-111.5,202.48-111.5,202.48,30.23-58,99-120.65c63.91-58.18,105.11-130.64,128.41-115.11s34.39,39.94,23.3,76.55-33.28,91-12.2,112.06c0,0,10-52.15,46.59-87.65S1564.91,446,1544.94,378.32,1502.78,258.5,1536.06,228.54Z"/><path class="cls-3" d="M1299.75,295.11c12.68,32.4,31.07,102.25,4.44,183.05-15.07,45.75-78.49,206.36-78.49,206.36-72.39,206.36-193.89,241.3-193.89,241.3,58.24,1.67,129.82-66.56,169.76-68.23s25,66.57,25,66.57c-37.54,132.35,13.73,149.77,13.73,149.77-31.21-58.24,57.83-121.48,27.87-259.6s38.28-244.63,38.28-244.63C1399.6,379.7,1299.75,295.11,1299.75,295.11Z"/><path class="cls-3" d="M390.11,684.52S326.7,523.91,311.62,478.16c-26.63-80.8-8.24-150.65,4.44-183,0,0-99.85,84.59-6.66,274.59,0,0,68.23,106.5,38.28,244.63s59.08,201.36,27.87,259.6c0,0,51.28-17.42,13.73-149.77,0,0-15-68.23,25-66.57S525.76,927.49,584,925.82C584,925.82,462.5,890.88,390.11,684.52Z"/><path class="cls-3" d="M973.12,942.47s-196.79,39.7-315.73,6.65v477.62s-1.21,32.43.36,53.77a48.67,48.67,0,0,0,.8,7.94,32.75,32.75,0,0,0,1.93,8.28h0c4.1,14.4,14,37.12,37.58,70.09q42.9,3.47,86.67,3.5c1.28,0,2.55,0,3.83,0-30.44-28.26-56-66.47-56-115.2,0-4.82-.13-9.22-.36-13.3V1015.69s75.71-39.94,146.06,6.65S922,1222,868.74,1283.15c0,0,115.7-45,85.32-184.67C927.55,976.57,973.12,942.47,973.12,942.47Z"/></g></g></g></g></svg>
--- a/assets/images/logos/header__logo.png
+++ b/assets/images/logos/header__logo.png
--- a/assets/images/logos/logo-primary.png
+++ b/assets/images/logos/logo-primary.png
--- a/assets/images/logos/logo-secondary.png
+++ b/assets/images/logos/logo-secondary.png
--- a/assets/images/logos/logo-stacked.png
+++ b/assets/images/logos/logo-stacked.png
--- a/assets/images/logos/logo-white.png
+++ b/assets/images/logos/logo-white.png
--- a/assets/images/logos/logo_and_name-dark.svg
+++ b/assets/images/logos/logo_and_name-dark.svg
--- a/assets/images/logos/logo_and_name-white.svg
+++ b/assets/images/logos/logo_and_name-white.svg
--- a/assets/images/logos/nan-login-logo.png
+++ b/assets/images/logos/nan-login-logo.png
--- a/assets/images/logos/nan_bear_head.svg
+++ b/assets/images/logos/nan_bear_head.svg
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -0,0 +1,219 @@
+/******/ (() => { // webpackBootstrap
+/******/ 	"use strict";
+/******/ 	var __webpack_modules__ = ({
+
+/***/ "./src/modules/CollapsePanel.js":
+/*!**************************************!*\
+  !*** ./src/modules/CollapsePanel.js ***!
+  \**************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+class CollapsePanel {
+  constructor() {
+    this.toggles = document.querySelectorAll('.accordion-toggle');
+    this.toggleCollapse();
+  }
+  toggleCollapse() {
+    this.toggles.forEach(toggle => {
+      toggle.addEventListener('click', () => {
+        toggle.parentNode.parentNode.classList.toggle('active');
+      });
+    });
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (CollapsePanel);
+
+/***/ }),
+
+/***/ "./src/modules/NavControl.js":
+/*!***********************************!*\
+  !*** ./src/modules/NavControl.js ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+class Nav {
+  constructor() {
+    this.toggleMenuBtn = document.getElementById('toggle-nav');
+    this.toggleSlideOutMenu = document.getElementById('slide-out-menu');
+    this.accordions = document.querySelectorAll('.accordion');
+    this.toggleCollapse();
+    this.events();
+  }
+  events() {
+    // Open and Close the Nav Menu
+    this.toggleMenuBtn.addEventListener('click', () => this.toggleNavMenu());
+  }
+  toggleNavMenu() {
+    this.toggleMenuBtn.classList.toggle('active');
+    this.toggleSlideOutMenu.classList.toggle('open');
+    document.body.classList.toggle('noScroll');
+    this.toggleCollapse();
+  }
+  toggleCollapse() {
+    setTimeout(() => {
+      this.accordions.forEach(accordion => {
+        accordion.classList.remove('active');
+      });
+    }, 600);
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Nav);
+
+/***/ }),
+
+/***/ "./src/modules/SplashScreen.js":
+/*!*************************************!*\
+  !*** ./src/modules/SplashScreen.js ***!
+  \*************************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+class SplashScreen {
+  constructor() {
+    this.enterBtn = document.getElementById('app-enter');
+    this.splashScreen = document.getElementById('splash-screen');
+    this.headerNav = document.getElementById('header-nav');
+    this.footerNav = document.getElementById('footer-nav');
+    this.events();
+  }
+  events() {
+    // Open and Close the Nav Menu
+    if (this.enterBtn) {
+      this.enterBtn.addEventListener('click', () => this.enterApp());
+    }
+  }
+  enterApp() {
+    this.splashScreen.classList.add('close');
+    setTimeout(() => {
+      this.headerNav.classList.add('in-view');
+      this.footerNav.classList.add('in-view');
+      this.splashScreen.classList.add('hidden');
+    }, 600);
+    setTimeout(() => {
+      this.headerNav.classList.remove('out-of-view');
+      this.footerNav.classList.remove('out-of-view');
+      this.headerNav.classList.remove('in-view');
+      this.footerNav.classList.remove('in-view');
+    }, 2000);
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (SplashScreen);
+
+/***/ }),
+
+/***/ "./src/modules/TestModule.js":
+/*!***********************************!*\
+  !*** ./src/modules/TestModule.js ***!
+  \***********************************/
+/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
+
+__webpack_require__.r(__webpack_exports__);
+/* harmony export */ __webpack_require__.d(__webpack_exports__, {
+/* harmony export */   "default": () => (__WEBPACK_DEFAULT_EXPORT__)
+/* harmony export */ });
+class Test {
+  constructor() {
+    console.log('This Module is for testing purposes');
+  }
+}
+/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Test);
+
+/***/ })
+
+/******/ 	});
+/************************************************************************/
+/******/ 	// The module cache
+/******/ 	var __webpack_module_cache__ = {};
+/******/ 	
+/******/ 	// The require function
+/******/ 	function __webpack_require__(moduleId) {
+/******/ 		// Check if module is in cache
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
+/******/ 		}
+/******/ 		// Create a new module (and put it into the cache)
+/******/ 		var module = __webpack_module_cache__[moduleId] = {
+/******/ 			// no module.id needed
+/******/ 			// no module.loaded needed
+/******/ 			exports: {}
+/******/ 		};
+/******/ 	
+/******/ 		// Execute the module function
+/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
+/******/ 	
+/******/ 		// Return the exports of the module
+/******/ 		return module.exports;
+/******/ 	}
+/******/ 	
+/************************************************************************/
+/******/ 	/* webpack/runtime/define property getters */
+/******/ 	(() => {
+/******/ 		// define getter functions for harmony exports
+/******/ 		__webpack_require__.d = (exports, definition) => {
+/******/ 			for(var key in definition) {
+/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
+/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
+/******/ 				}
+/******/ 			}
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
+/******/ 	(() => {
+/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
+/******/ 	})();
+/******/ 	
+/******/ 	/* webpack/runtime/make namespace object */
+/******/ 	(() => {
+/******/ 		// define __esModule on exports
+/******/ 		__webpack_require__.r = (exports) => {
+/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
+/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+/******/ 			}
+/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
+/******/ 		};
+/******/ 	})();
+/******/ 	
+/************************************************************************/
+var __webpack_exports__ = {};
+// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
+(() => {
+/*!**********************!*\
+  !*** ./src/index.js ***!
+  \**********************/
+__webpack_require__.r(__webpack_exports__);
+/* harmony import */ var _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./modules/TestModule */ "./src/modules/TestModule.js");
+/* harmony import */ var _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./modules/NavControl */ "./src/modules/NavControl.js");
+/* harmony import */ var _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./modules/CollapsePanel */ "./src/modules/CollapsePanel.js");
+/* harmony import */ var _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./modules/SplashScreen */ "./src/modules/SplashScreen.js");
+// Our modules / classes
+// Import modules e.g import MobileMenu from "./modules/MobileMenu"
+
+
+
+
+
+// Instantiate a new object using our modules/classes
+// e.g var mobileMenu =  new MobileMenu()
+
+var testModule = new _modules_TestModule__WEBPACK_IMPORTED_MODULE_0__["default"]();
+var navControl = new _modules_NavControl__WEBPACK_IMPORTED_MODULE_1__["default"]();
+var collapsePanel = new _modules_CollapsePanel__WEBPACK_IMPORTED_MODULE_2__["default"]();
+var splashScreen = new _modules_SplashScreen__WEBPACK_IMPORTED_MODULE_3__["default"]();
+})();
+
+/******/ })()
+;
+//# sourceMappingURL=index.js.map
--- a/assets/js/index.js.map
+++ b/assets/js/index.js.map
--- a/author.php
+++ b/author.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Author Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-person-circle"></i>
+    <h1 class="text-2xl p-4 underline ">Author Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/category.php
+++ b/category.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Category Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-substack"></i>
+    <h1 class="text-2xl p-4 underline ">Category Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/date.php
+++ b/date.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Date Archive (Year, Month, Day) Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-calendar-event"></i>
+    <h1 class="text-2xl p-4 underline ">Date Archive Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/footer.php
+++ b/footer.php
@@ -0,0 +1,5 @@
+</main>
+<?php wp_footer() ?>
+</body>
+
+</html>
--- a/front-page.php
+++ b/front-page.php
@@ -0,0 +1,53 @@
+<!-- Get Header -->
+<?php get_header();
+require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
+?>
+
+<!-- Front Page/Landing Page Template -->
+<section class="h-full overflow-scroll no-scrollbar pt-16 pb-20">
+
+  <!-- Page Header -->
+  <div class="relative h-20 flex items-center">
+    <h1 class="w-full px-4 font-medium underline relative z-20 text-white text-xl md:text-2xl lg:text-center">Home</h1>
+    <img class="absolute top-0 h-full w-full object-cover" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/backsplash.png" alt="header-banner">
+  </div>
+
+  <!-- Top Level Pages Section -->
+  <div class="px-4 py-2 lg:h-full">
+    <ul class="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:h-full place-items-stretch">
+
+      <!-- Home Top Level Pages Loop -->
+      <?php $pages = get_pages_as_array();
+
+      foreach ($pages as $page) {
+
+        $pageID = $page['page']->ID;
+        $pageTitle = $page['page']->post_title;
+        $pageSlug = $page['page']->post_name;
+        $pageBG = $page['page']->post_name . '.png';
+        $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);
+
+      ?>
+
+        <li class="category-cards flex rounded-md shadow-md relative overflow-hidden w-full" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bgs/<?php echo $pageBG ?>');">
+
+          <a class="w-full py-8 px-8 space-y-2 lg:flex lg:flex-col lg:items-center lg:justify-center" href="<?php echo $pageSlug ?>">
+
+            <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
+            <h2 class="font-bold uppercase"><?php echo $pageTitle ?></h2>
+            <p class="font-medium lg:text-center"><?php echo get_field('description', $pageID); ?></p>
+
+          </a>
+
+        </li>
+
+      <?php } ?>
+
+    </ul>
+  </div>
+
+</section>
+
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/functions.php
+++ b/functions.php
@@ -0,0 +1,41 @@
+<?php
+
+// <----- Variables ----->
+
+// <----- Includes ----->
+include(get_theme_file_path('/includes/front-end/theme_starter_setup.php'));
+include(get_theme_file_path('/includes/front-end/styles_and_scripts.php'));
+include(get_theme_file_path('/includes/back-end/editor_styles_and_scripts.php'));
+include(get_theme_file_path('/includes/front-end/technical_seo.php'));
+include(get_theme_file_path('/includes/front-end/registration_form_message.php'));
+include(get_theme_file_path('/includes/front-end/custom_login_screen.php'));
+// include(get_theme_file_path('/'));
+
+// <----- Hooks ----->
+
+// Theme Starter Features
+add_action('after_setup_theme', 'themeStarter_setup');
+
+// Theme Starter Init
+add_action('init', 'themeStarter_init');
+
+// Enqueue front-end styles and script
+add_action('wp_enqueue_scripts', 'themeStarter_enqueue');
+
+// Enqueue back-end/editor styles and script
+add_action('after_setup_theme', 'themeStarter_editor_enqueue');
+
+// Add Facebook Open Graph and Twitter Card to Head
+add_action('wp_head', 'open_graph_twitter_card', 2);
+
+// Change Registration Message
+add_action('login_message', 'change_reg_message');
+
+// Customize Login Screen Title
+add_filter('login_headertitle', 'ourLoginTitle');
+
+// Change Login Page header url
+add_filter('login_headerurl', 'ourHeaderUrl');
+
+// Enqueue out stylesheet for login screen
+add_action('login_enqueue_scripts', 'ourLoginCSS');
--- a/header.php
+++ b/header.php
@@ -0,0 +1,173 @@
+<!doctype html>
+<html <?php language_attributes(); ?>>
+
+<head>
+    <meta charset="<?php bloginfo('charset'); ?>" />
+    <meta content="width=device-width, initial-scale=1, viewport-fit=cover, shrink-to-fit=no" name="viewport" />
+    <link href="<?php echo get_template_directory_uri(); ?>/assets/images/logos/nan_bear_head.svg" rel="icon" type="image/png" />
+    <?php
+    // Start or resume the session
+    session_start();
+    wp_head();
+    include(get_theme_file_path('/includes/front-end/menu_data.php'));
+    require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
+
+    ?>
+</head>
+
+<body class="h-screen overflow-hidden bg-blue-500" <?php body_class(); ?>>
+    <?php wp_body_open(); ?>
+
+    <main class="h-screen overflow-hidden">
+
+
+        <!-- Header -->
+        <section id="header-nav" class="w-full absolute bg-blue-500 top-0 z-50 <?php if (!isset($_SESSION['splash_shown'])) {
+                                                                                    echo 'out-of-view';
+                                                                                } else echo 'in-view' ?>">
+            <header class="flex items-center justify-between text-center px-4 py-2 space-x-2 lg:space-x-8 bg-blue-800">
+
+                <!-- Header Logo -->
+                <a class="relative z-50 flex items-center space-x-4" href="<?php echo get_site_url(); ?>">
+                    <img width="50px" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/header__logo.png" alt="NAN Logo">
+                    <h1 class="font-bold hidden lg:flex text-white text-2xl">NAN Student Handbook</h1>
+                </a>
+
+                <!-- Header Search  -->
+                <div class="relative lg:w-2/4 flex items-center">
+                    <div class="absolute left-4 h-full flex items-center w-1/12"><i class="text-black bi bi-search"></i></div>
+                    <input class="pl-10 rounded-md bg-gray-300" type="text" placeholder="Search...">
+                </div>
+
+                <!-- Header Buttons -->
+                <div class="text-white">
+                    <button id="toggle-nav" class="toggle-menu"> <i></i> <i></i><i></i> </button>
+                </div>
+
+            </header>
+        </section>
+
+        <!-- Bottom Menu -->
+        <section id="footer-nav" class="w-full text-white absolute bottom-0 z-50 text-center py-4 bg-blue-800 <?php if (!isset($_SESSION['splash_shown'])) {
+                                                                                                                    echo 'out-of-view';
+                                                                                                                } else echo 'in-view' ?>">
+            <ul class="lg:max-w-3xl mx-auto text-3xl grid grid-cols-6">
+
+                <!-- Menu Loop -->
+                <?php foreach ($menuData as $page) { ?>
+
+                    <li>
+                        <a href="<?php echo get_site_url('/') . '/' . $page['slug'];  ?>">
+                            <i class="<?php echo $page['bootstrap_icon'] ?> text-2xl" aria-hidden="true"></i>
+                        </a>
+                    </li>
+
+                <?php } ?>
+
+            </ul>
+        </section>
+
+        <!-- Slide Out Section -->
+        <section id="slide-out-menu" class="fixed z-30 bg-blue-900 w-11/12 sm:w-3/5 lg:w-2/5 xl:w-4/12 2xl:w-3/12 h-full px-2">
+
+            <div class="h-full space-y-8 overflow-x-hidden overflow-y-scroll no-scrollbar pt-24 pb-20">
+
+                <!-- Option/Settings Icon -->
+                <div class="text-white">
+                    <div class="w-full px-4 flex justify-end"><button><i class="text-2xl bi bi-gear-fill"></i></button></div>
+                </div>
+
+                <!-- Menu Section -->
+                <nav class="flex flex-1 flex-col">
+                    <div class="flex flex-1 flex-col gap-y-7">
+
+                        <!-- Primary Menu -->
+                        <div>
+                            <ul role="list" class="-mx-2 text-white space-y-2">
+
+                                <!-- Menu Loop -->
+                                <?php
+                                $pages = get_pages_as_array();
+
+                                foreach ($pages as $page) {
+
+                                    $pageID = $page['page']->ID;
+                                    $pageTitle = $page['page']->post_title;
+                                    $pageSlug = $page['page']->post_name;
+                                    $pageBG = $page['page']->post_name . '.png';
+                                    $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);
+
+                                ?>
+
+                                    <li class="accordion">
+                                        <div class="flex hover:bg-gray-800 px-2 rounded-md justify-between">
+                                            <a href="<?php echo get_site_url() . '/' . $pageSlug;  ?>" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                                                <i class="<?php echo $pageBootstrapIcon ?> text-2xl" aria-hidden="true"></i>
+                                                <p><?php echo $pageTitle ?></p>
+                                            </a>
+
+                                            <?php if ($page['subpages']) { ?>
+                                                <button class="accordion-toggle">
+                                                    <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+                                                    <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+                                                </button>
+                                            <?php } ?>
+
+                                        </div>
+                                        <ul class="accordion-content space-y-2">
+                                            <?php foreach ($page['subpages'] as $subpage) {
+
+                                                $subpageID = $subpage->ID;
+                                                $subpageTitle = $subpage->post_title;
+                                                $subpageSlug = $subpage->post_name;
+                                                $subpageBG = $subpage->post_name . '.png';
+                                                $subpageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
+
+                                            ?>
+                                                <li class="p-2">
+                                                    <a href="<?php echo get_site_url() . '/' . $pageSlug . '/' . $subpageSlug ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
+                                                        <p><?php echo $subpageTitle ?></p>
+                                                    </a>
+                                                </li>
+
+                                            <?php } ?>
+                                        </ul>
+                                    </li>
+
+                                    <!-- Horizontal Rule -->
+                                    <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
+
+                                <?php } ?>
+
+                            </ul>
+                        </div>
+
+                    </div>
+                </nav>
+
+            </div>
+
+        </section>
+
+        <!-- Splash Screen Section -->
+
+        <?php
+
+        // Check if a flag is set in the session to indicate that the code has already run
+        if (!isset($_SESSION['splash_shown'])) {
+
+            $_SESSION['splash_shown'] = true; ?>
+
+
+            <!-- Splash Screen Content-->
+            <section id="splash-screen" class="absolute w-full bottom-0 flex flex-col h-screen items-center justify-center">
+
+                <div class="space-y-8 px-4 text-white flex flex-col justify-center items-center">
+                    <img class="w-56" src="<?php echo get_template_directory_uri(); ?>/assets/images/logos/logo-white.png" alt="">
+                    <h1 class="uppercase text-center font-bold text-xl">A student handbook for post secondary transitions</h1>
+                    <button id="app-enter" class="bg-blue-800 shadow-sm shadow-gray-50 px-12 py-4 rounded-md"><i class="bi bi-box-arrow-in-right pr-4"></i>Enter</button>
+                </div>
+
+            </section>
+
+        <?php } ?>
--- a/home.php
+++ b/home.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Blog (Posts) List Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-house-check"></i>
+    <h1 class="text-2xl p-4 underline">Blog List Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/icon.png
+++ b/icon.png
--- a/includes/back-end/editor_styles_and_scripts.php
+++ b/includes/back-end/editor_styles_and_scripts.php
@@ -0,0 +1,12 @@
+<?php
+
+function themeStarter_editor_enqueue()
+{
+  add_theme_support('editor-styles');
+
+  add_editor_style([
+    'assets/css/styles.css',
+    'assets/css/bootstrap-icons.css',
+    'assets/css/font-awesome.css'
+  ]);
+}
--- a/includes/back-end/helper_functions.php
+++ b/includes/back-end/helper_functions.php
@@ -0,0 +1,64 @@
+<?php
+
+// Get List of Sub Categories for Slug
+function getSubpagesForSlug($arrayOfWPPages, $slug)
+{
+  foreach ($arrayOfWPPages as $page) {
+    if ($page['page']->post_name === $slug) {
+      return $page['subpages'];
+    }
+  }
+  // Return an empty array if the slug is not found
+  return [];
+}
+
+// Return WordPress Page For A Slug
+function getPageForSlug($arrayOfWPPages, $slug)
+{
+  foreach ($arrayOfWPPages as $page) {
+    if ($page['page']->post_name === $slug) {
+      return $page['page'];
+    }
+
+    foreach ($page['subpages'] as $index => $subpage) {
+      if ($subpage->post_name === $slug) {
+
+        return $page['subpages'][$index];
+      }
+    }
+  }
+
+  // Return an empty array if the slug is not found
+  return [];
+}
+
+function ddd($variable)
+{
+  echo '<pre>';
+  var_dump($variable);
+  echo '<pre>';
+}
+
+// Get An Array of Top Level Pages and their Subpages
+function get_pages_as_array()
+{
+  $pages = get_pages();
+  $page_hierarchy = array();
+
+  foreach ($pages as $page) {
+    $parent_id = $page->post_parent;
+
+    // If it's a top-level page
+    if ($parent_id == 0) {
+      $page_hierarchy[$page->ID] = array(
+        'page' => $page,
+        'subpages' => array()
+      );
+    } else {
+      // If it's a child page, add it under its parent
+      $page_hierarchy[$parent_id]['subpages'][] = $page;
+    }
+  }
+
+  return $page_hierarchy;
+}
--- a/includes/front-end/custom_login_screen.php
+++ b/includes/front-end/custom_login_screen.php
@@ -0,0 +1,19 @@
+<?php
+
+// Change Login Page header url
+function ourHeaderUrl()
+{
+  return esc_url(site_url('/'));
+}
+
+// Make login title the name of our website
+function ourLoginTitle()
+{
+  return get_bloginfo('name');
+}
+
+// Enqueue out stylesheet for login screen
+function ourLoginCSS()
+{
+  wp_enqueue_style('login styles', get_theme_file_uri('/assets/css/styles.css'));
+}
--- a/includes/front-end/menu_data.php
+++ b/includes/front-end/menu_data.php
@@ -0,0 +1,101 @@
+<?php
+
+$menuData = [
+
+  // Goals and Objectives
+  [
+    'slug' => 'goals-and-objectives',
+    'title' => 'Goals and Objectives',
+    'description' => 'Clarify aspirations, set achievable targets, and foster personal growth.',
+    'subcategories' => [
+      ['title' => 'Career Goals', 'slug' => 'career-goals', 'description' => 'What kind of work you would like to do'],
+      ['title' => 'Educational Goals', 'slug' => 'educational-goals', 'description' => 'To get the career and life you want'],
+      ['title' => 'Financial Goals', 'slug' => 'financial-goals', 'description' => 'Will help you achieve your other goals'],
+      ['title' => 'Personal Goals', 'slug' => 'personal-goals', 'description' => 'What you want for yourself in life'],
+    ],
+    'bootstrap_icon' => 'bi-bullseye',
+  ],
+
+  // Preparing for College or University
+  [
+    'slug' => 'preparing-for-college-and-university',
+    'title' => 'Preparing for College and University',
+    'description' => 'Navigate academia successfully with insights on admissions, majors, and preparation.',
+    'subcategories' => [
+      ['title' => 'Applying to Post Secondary', 'slug' => 'applying-to-post-secondary', 'description' => ''],
+      ['title' => 'Education Level Differences', 'slug' => 'education-level-differences', 'description' => ''],
+      ['title' => 'Online Learning and Remote Work', 'slug' => 'online-learning-and-remote-work', 'description' => ''],
+      ['title' => 'Strategies For Success', 'slug' => 'strategies-for-success', 'description' => ''],
+      ['title' => 'Support and Accommodations', 'slug' => 'support-and-accommodations', 'description' => ''],
+    ],
+    'bootstrap_icon' => 'bi-journal-bookmark-fill',
+  ],
+
+  // Managing Your Finances
+  [
+    'slug' => 'managing-your-finances',
+    'title' => 'Managing Your Finances',
+    'description' => 'Master budgeting, savings, and financial literacy for a secure financial future.',
+    'subcategories' => [
+      ['title' => 'Band Funding', 'slug' => 'band-funding', 'description' => ''],
+      ['title' => 'Budgeting Your Money', 'slug' => 'budgeting-your-money', 'description' => ''],
+      ['title' => 'Financial Awards For Students With Special Needs', 'slug' => 'special-needs-financial-awards', 'description' => ''],
+      ['title' => 'Grants, Bursaries and Loans', 'slug' => 'grants-bursaries-and-loans', 'description' => ''],
+      ['title' => 'Income Tax', 'slug' => 'income-tax', 'description' => ''],
+      ['title' => 'Tips To Increase Income', 'slug' => 'tips-to-increase-income', 'description' => ''],
+      ['title' => 'Tips To Reduce Expenses', 'slug' => 'tips-to-reduce-expenses', 'description' => ''],
+    ],
+    'bootstrap_icon' => 'bi-cash-coin',
+  ],
+
+  // Daily Living and Housing
+  [
+    'slug' => 'daily-living-and-housing',
+    'title' => 'Daily Living and Housing',
+    'description' => 'Tips for independent living, housing options, and creating a comfortable daily routine.',
+    'subcategories' => [
+      ['title' => 'Before Signing The Lease', 'slug' => 'before-signing-the-lease', 'description' => ''],
+      ['title' => 'Finding A Place To Stay', 'slug' => 'finding-a-place-to-stay', 'description' => ''],
+      ['title' => 'First Time Renting FAQs', 'slug' => 'first-time-renting-faqs', 'description' => ''],
+      ['title' => 'House vs. Apartment', 'slug' => 'house-vs-apartment', 'description' => ''],
+      ['title' => 'Off Campus Housing', 'slug' => 'off-campus-housing', 'description' => ''],
+      ['title' => 'Students With Children', 'slug' => 'students-with-children', 'description' => ''],
+      ['title' => 'Transportation', 'slug' => 'transportation', 'description' => ''],
+    ],
+    'bootstrap_icon' => 'bi-building',
+  ],
+
+  // Mental Health and Wellness
+  [
+    'slug' => 'mental-health-and-wellness',
+    'title' => 'Mental Health and Wellness',
+    'description' => 'Prioritize well-being with strategies for mental health, stress management, and resilience.',
+    'subcategories' => [
+      ['title' => 'Gender Identity and Sexual Orientation', 'slug' => 'gender-identity-and-sexual-orientation', 'description' => ''],
+      ['title' => 'Living In Balance', 'slug' => 'living-in-balance', 'description' => ''],
+      ['title' => 'Making Healthy Choices', 'slug' => 'making-healthy-choices', 'description' => ''],
+      ['title' => 'Managing Stress', 'slug' => 'managing-stress', 'description' => ''],
+      ['title' => 'Physical Health', 'slug' => 'physical-health', 'description' => ''],
+      ['title' => 'Safety', 'slug' => 'safety', 'description' => ''],
+      ['title' => 'Sexual Health', 'slug' => 'sexual-health', 'description' => ''],
+      ['title' => 'Stay in Touch', 'slug' => 'stay-in-touch', 'description' => ''],
+    ],
+    'bootstrap_icon' => 'bi-heart-pulse-fill',
+  ],
+
+  // Forms and Additional Information
+  [
+    'slug' => 'resources-and-additional-information',
+    'title' => 'Resources and Additional Information',
+    'description' => 'Access a wealth of tools, guides, and external links for comprehensive support.',
+    'subcategories' => [
+      ['title' => 'NAN Map', 'slug' => 'nan-map', 'description' => ''],
+      ['title' => 'NAN Tribe Councils', 'slug' => 'nan-tribe-councils', 'description' => ''],
+      ['title' => 'Ontario Native Education Counseling Associations', 'slug' => 'ontario-native-education-counseling-associations', 'description' => ''],
+      ['title' => 'Resources Samples', 'slug' => 'resources-samples', 'description' => ''],
+      ['title' => 'Understanding Your Treaties', 'slug' => 'understanding-your-treaties', 'description' => ''],
+    ],
+    'bootstrap_icon' => 'bi-info-circle-fill',
+  ],
+
+];
--- a/includes/front-end/registration_form_message.php
+++ b/includes/front-end/registration_form_message.php
@@ -0,0 +1,13 @@
+<?php
+
+// Change Registration Message
+function change_reg_message($message)
+{
+  // change messages that contain 'Register'
+  if (strpos($message, 'Register') !== FALSE) {
+    $newMessage = "Register with " . get_bloginfo('name');
+    return '<p class="message register">' . $newMessage . '</p>';
+  } else {
+    return $message;
+  }
+}
--- a/includes/front-end/styles_and_scripts.php
+++ b/includes/front-end/styles_and_scripts.php
@@ -0,0 +1,23 @@
+<?php
+
+// Enqueue styles and scripts
+function themeStarter_enqueue()
+{
+
+  /* Register and Enqueue Scripts */
+
+  wp_register_script('themeStarter-app', get_parent_theme_file_uri('/assets/js/index.js'), [], '1.0', true);
+  wp_enqueue_script('themeStarter-app');
+
+
+  /* Register and Enqueue Styles */
+
+  wp_register_style('themeStarter-styles', get_parent_theme_file_uri('/assets/css/styles.css'), [], '1.0', 'all');
+  wp_enqueue_style('themeStarter-styles');
+
+  wp_register_style('bootstrap-icons', get_parent_theme_file_uri('/assets/css/bootstrap-icons.css'), [], '1.11.1', 'all');
+  wp_enqueue_style('bootstrap-icons');
+
+  wp_register_style('font-awesome', get_parent_theme_file_uri('/assets/css/font-awesome.css'), [], '6.4.2', 'all');
+  wp_enqueue_style('font-awesome');
+}
--- a/includes/front-end/technical_seo.php
+++ b/includes/front-end/technical_seo.php
@@ -0,0 +1,35 @@
+<?php
+
+function open_graph_twitter_card()
+{
+  // Get the post or page ID
+  $post_id = get_the_ID();
+
+  // Get the post or page title
+  $title = get_the_title($post_id);
+
+  // Get the post or page excerpt (description)
+  $description = (get_the_excerpt()) ? get_the_excerpt() : get_bloginfo('description');
+
+  // Get the post or page URL
+  $url = get_permalink($post_id);
+
+  // Set default image url
+  $default_image_url = get_theme_file_uri('/screenshot.png');
+
+  // Get the post thumbnail (featured image) URL
+  $thumbnail = get_the_post_thumbnail_url($post_id);
+?>
+  <!-- Open Graph meta tags -->
+  <meta property="og:title" content="<?php echo $title . ' - ' . get_bloginfo('name');  ?>" />
+  <meta property="og:description" content="<?php echo $description ?>" />
+  <meta property="og:url" content="<?php echo $url ?>" />
+  <meta property="og:image" content="<?php echo $default_image_url ?>" />
+  <!-- Twitter Card meta tags -->
+  <meta name="twitter:card" content="summary" />
+  <meta name="twitter:title" content="<?php echo $title . ' - ' . get_bloginfo('name');  ?>" />
+  <meta name="twitter:description" content="<?php echo $description ?>" />
+  <meta name="twitter:image" content="<?php echo $default_image_url ?>" />
+<?php
+
+}
--- a/includes/front-end/theme_starter_setup.php
+++ b/includes/front-end/theme_starter_setup.php
@@ -0,0 +1,79 @@
+<?php
+
+function themeStarter_setup()
+{
+
+  /*
+   * Make theme available for translation.
+   * Translations can be filed in the /languages/ directory.
+   */
+
+  load_theme_textdomain('themeStarter', get_template_directory() . '/languages');
+
+  // Add default posts and comments RSS feed links to head.
+  add_theme_support('automatic-feed-links');
+
+  /*
+   * Let WordPress manage the document title.
+   */
+  add_theme_support('title-tag');
+
+  /*
+   * Enable support for Post Thumbnails on posts and pages.
+   */
+  add_theme_support('post-thumbnails');
+  //Support custom logo
+  add_theme_support('custom-logo');
+
+  // Add menus.
+  register_nav_menus(
+    array(
+      'primary' => __('Primary Menu', 'themeStarter'),
+      'secondary' => __('Secondary Menu', 'themeStarter'),
+    )
+  );
+
+  /*
+   * Switch default core markup for search form, comment form, and comments
+   * to output valid HTML5.
+   */
+
+  add_theme_support(
+    'html5',
+    array(
+      'search-form',
+      'comment-form',
+      'comment-list',
+      'gallery',
+      'caption',
+      'style',
+      'script'
+    )
+  );
+
+  /*
+   * Enable support for Post Formats.
+   */
+
+  add_theme_support(
+    'post-formats',
+    array(
+      'aside',
+      'image',
+      'video',
+      'quote',
+      'link',
+      'gallery',
+      'status',
+      'audio',
+      'chat'
+    )
+  );
+}
+
+function themeStarter_init()
+{
+  // Use categories and tags with attachments
+  register_taxonomy_for_object_type('category', 'attachment');
+  register_taxonomy_for_object_type('post_tag', 'attachment');
+}
--- a/index.php
+++ b/index.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Index/Fall Back Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-hand-index"></i>
+    <h1 class="text-2xl p-4 underline ">Index Fallback Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "starter",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev:tailwind": "npx tailwindcss -i ./src/scss/vendors/tailwind/_source.scss -o ./src/scss/vendors/tailwind/_tailwind.scss --watch",
+    "build:tailwind": "npx tailwindcss -i ./src/scss/vendors/tailwind/_source.scss -o ../src/scss/vendors/tailwind/_tailwind.scss --minify",
+    "dev:sass": "npx sass --watch --no-source-map ./src/scss/styles.scss:./assets/css/styles.css",
+    "build:wp": "wp-scripts build",
+    "dev:wp": "wp-scripts start --output-path=assets/js --webpack-no-externals",
+    "sync": "browser-sync start --proxy playground.test --files '**/*.scss, **/*.js, **/*.php",
+    "dev": "npm-run-all --parallel dev:tailwind dev:sass dev:wp"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@tailwindcss/container-queries": "^0.1.1",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.9",
+    "@wordpress/scripts": "*",
+    "autoprefixer": "^10.4.14",
+    "axios": "^1.6.0",
+    "browser-sync": "^2.23.7",
+    "cssnano": "^6.0.0",
+    "npm-run-all": "^4.1.5",
+    "postcss": "^8.4.21",
+    "postcss-cli": "^10.1.0",
+    "postcss-import": "^15.1.0",
+    "postcss-preset-env": "^8.3.1",
+    "prettier": "^3.1.0",
+    "sass": "^1.61.0",
+    "tailwindcss": "^3.4.0"
+  }
+}
--- a/page.php
+++ b/page.php
@@ -0,0 +1,61 @@
+<!-- Get Header -->
+<?php
+
+get_header(); ?>
+
+<section class="h-full overflow-scroll no-scrollbar bg-white pt-16 pb-[65px]">
+
+  <?php $pages = get_pages_as_array();
+
+  foreach ($pages as $page) {
+
+    $pageID = $page['page']->ID;
+    $pageTitle = $page['page']->post_title;
+    $pageSlug = $page['page']->post_name;
+    $pageBG = $page['page']->post_name . '.png';
+    $pageBootstrapIcon = get_field('bootstrap_icon', $page['page']->ID);
+
+    if (is_page($pageSlug)) { ?>
+
+      <?php get_template_part('/templates/partials/page_header'); ?>
+
+      <div class="my-4 px-4 text-center">
+        <h2 class="font-medium underline uppercase">Overview</h2>
+      </div>
+
+      <!-- Page Editor Content -->
+      <div class="prose max-w-7xl mx-auto">
+        <?php the_content(); ?>
+      </div>
+
+      <?php get_template_part('/templates/top-level/' . $pageSlug); ?>
+      <?php get_template_part('/templates/partials/subcategory_cards'); ?>
+
+      <?php }
+
+    foreach ($page['subpages'] as $subpage) {
+
+      $pageID = $subpage->ID;
+      $pageTitle = $subpage->post_title;
+      $pageSlug = $subpage->post_name;
+      $pageBG = $subpage->post_name . '.png';
+      $pageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
+
+      if (is_page($pageSlug)) {
+        get_template_part('/templates/partials/page_header');
+        get_template_part('/templates/internal/' . $pageSlug); ?>
+        <!-- Page Editor Content -->
+        <div class="prose max-w-7xl mx-auto">
+          <?php the_content(); ?>
+        </div>
+  <?php }
+    }
+  }
+
+  ?>
+
+
+
+</section>
+
+<?php get_footer();
--- a/screenshot.png
+++ b/screenshot.png
--- a/search.php
+++ b/search.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Search Results Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-search"></i>
+    <h1 class="text-2xl p-4 underline ">Search Results Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/searchform.php
+++ b/searchform.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Search Results Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-binoculars"></i>
+    <h1 class="text-2xl p-4 underline ">Search Form</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/single.php
+++ b/single.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Single Post Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-sticky"></i>
+    <h1 class="text-2xl p-4 underline ">Single Post Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/style.css
+++ b/style.css
@@ -0,0 +1,14 @@
+/*
+Theme Name: ThemeStarter
+Theme URI: https://thecreatorpriz.com
+Author: Prospect Ogujiuba
+Author URI: https://thecreatpriz.com/
+Description: This theme was created for Nishnawbe Aski Nation Post Secondary Transitions Handbook for Students.
+Version: 1.0
+Requires at least: 5.9
+Tested up to: 6.4.1
+Requires PHP: 7.2
+License: GNU General Public License v2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+Text Domain: themestarter
+*/
--- a/tag.php
+++ b/tag.php
@@ -0,0 +1,12 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Tag Archive Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-tag"></i>
+    <h1 class="text-2xl p-4 underline ">Tag Archive Page Template</h1>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -0,0 +1,167 @@
+const theme_starter_colors = {
+  gray: {
+    50: '#f9fafb',
+    100: '#f3f4f6',
+    200: '#e5e7eb',
+    300: '#d1d5db',
+    400: '#9ca3af',
+    500: '#6b7280',
+    600: '#4b5563',
+    700: '#374151',
+    800: '#1f2937',
+    900: '#111827',
+  },
+
+  red: {
+    50: '#faf0f5',
+    100: '#f5e1ea',
+    200: '#e6b8ca',
+    300: '#d490a5',
+    400: '#b54e61',
+    500: '#951d20',
+    600: '#85171a',
+    700: '#6e0f12',
+    800: '#590a0c',
+    900: '#420607',
+    950: '#2b0303',
+  },
+
+  orange: {
+    50: '#fcf8f2',
+    100: '#faf2e6',
+    200: '#f5dec4',
+    300: '#f0c8a3',
+    400: '#e39162',
+    500: '#d75428',
+    600: '#c24621',
+    700: '#a13416',
+    800: '#80250e',
+    900: '#611909',
+    950: '#3d0d04',
+  },
+
+  copper: {
+    50: '#fcfaf5',
+    100: '#fcf8f0',
+    200: '#f5e7d5',
+    300: '#f0d7bd',
+    400: '#e6b391',
+    500: '#da8a67',
+    600: '#c47352',
+    700: '#a35539',
+    800: '#823a24',
+    900: '#612514',
+    950: '#401409',
+  },
+
+  yellow: {
+    50: '#fffdf5',
+    100: '#fcf8e8',
+    200: '#faeec5',
+    300: '#f5e0a2',
+    400: '#f0c362',
+    500: '#e7a026',
+    600: '#d1891d',
+    700: '#ad6915',
+    800: '#8c4d0e',
+    900: '#693507',
+    950: '#421e03',
+  },
+
+  green: {
+    50: '#f0f7f7',
+    100: '#dff0ef',
+    200: '#b4d9d6',
+    300: '#8abfbb',
+    400: '#4c918a',
+    500: '#1e6159',
+    600: '#18574c',
+    700: '#10473b',
+    800: '#0b3b2c',
+    900: '#062b1e',
+    950: '#031c11',
+  },
+
+  blue: {
+    50: '#ebf2f5',
+    100: '#d8e5eb',
+    200: '#a3becc',
+    300: '#7698ad',
+    400: '#315370',
+    500: '#0a1c32',
+    600: '#08192e',
+    700: '#061326',
+    800: '#040e1f',
+    900: '#020917',
+    950: '#01050f',
+  },
+
+  cadet: {
+    50: '#f7fafa',
+    100: '#f5f7f7',
+    200: '#e1ebea',
+    300: '#cedbda',
+    400: '#aec2bf',
+    500: '#8ea8a4',
+    600: '#749690',
+    700: '#507d72',
+    800: '#346656',
+    900: '#1d4d3a',
+    950: '#0c3020',
+  },
+
+  indigo: {
+    50: '#eef2ff',
+    100: '#e0e7ff',
+    200: '#c7d2fe',
+    300: '#a5b4fc',
+    400: '#818cf8',
+    500: '#6366f1',
+    600: '#4f46e5',
+    700: '#4338ca',
+    800: '#3730a3',
+    900: '#312e81',
+  },
+
+  purple: {
+    50: '#f5f3ff',
+    100: '#ede9fe',
+    200: '#ddd6fe',
+    300: '#c4b5fd',
+    400: '#a78bfa',
+    500: '#8b5cf6',
+    600: '#7c3aed',
+    700: '#6d28d9',
+    800: '#5b21b6',
+    900: '#4c1d95',
+  },
+
+  pink: {
+    50: '#fdf2f8',
+    100: '#fce7f3',
+    200: '#fbcfe8',
+    300: '#f9a8d4',
+    400: '#f472b6',
+    500: '#ec4899',
+    600: '#db2777',
+    700: '#be185d',
+    800: '#9d174d',
+    900: '#831843',
+  },
+}
+
+// const theme_starter_fonts = {}
+
+// const theme_starter_backgrounds = {}
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./*.{html,js,cjs,php}', './src/**/*.{html,js,cjs,php}', './templates/**/*.{html,js,cjs,php}'],
+  theme: {
+    extend: {
+      colors: theme_starter_colors, //<-- Use the theme_starter_colors for colors
+      // fontFamily: theme_starter_fonts, //<-- Use the theme_starter_fonts for fonts,
+    },
+  },
+  plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/container-queries')],
+}
--- a/taxonomy.php
+++ b/taxonomy.php
@@ -0,0 +1,13 @@
+<!-- Get Header -->
+<?php get_header(); ?>
+
+<!-- Taxonomy Archive Page Template -->
+<section class="flex flex-col h-full overflow-scroll py-16">
+  <div class="flex h-full items-center justify-center">
+    <i class="text-4xl bi-bookmark"></i>
+    <h1 class="text-2xl p-4 underline ">Taxonomy Archive Page Template</h1>
+  </div>
+</section>
+
+<!-- Get Footer -->
+<?php get_footer(); ?>
--- a/templates/internal/career-goals.php
+++ b/templates/internal/career-goals.php
@@ -0,0 +1,41 @@
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="font-mono py-8 px-12">
+      <p class="max-w-7xl mx-auto">What you want for yourself in life</p>
+    </div>
+
+    <div class="py-8 px-2 bg-white text-cadet-900">
+      <div class="max-w-7xl mx-auto">
+
+        <div class="px-6">
+          <h3 class="text-xl font-medium mb-4">To determine your personal goals ask yourself:</h3>
+          <ul class="list-disc space-y-2 px-4">
+            <li>
+              <p>Where do you want to live and work?</p>
+            </li>
+            <li>
+              <p>How important is family in your life? How will you stay connected?</p>
+            </li>
+            <li>
+              <p>Do you want to travel?</p>
+            </li>
+            <li>
+              <p>What do you want your life to look like in 10, 15 or 50 years?</p>
+            </li>
+          </ul>
+        </div>
+
+        <div class="mt-8 px-4 py-4 w-full text-white bg-cadet-900 shadow-md">
+          <p class="italic font-medium mb-4">Career Cruising is a self-exploration and planning program that helps people of all ages achieve their potential in school, career and life.</p>
+          <a href="https://public.careercruising.com/en/">https://public.careercruising.com/en/</a>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</article>
--- a/templates/internal/educational-goals.php
+++ b/templates/internal/educational-goals.php
@@ -0,0 +1,21 @@
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="font-mono py-8 px-12">
+      <p class="max-w-7xl mx-auto">To get the career and life you want</p>
+    </div>
+
+    <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900">
+      <ul class="max-w-7xl mx-auto space-y-4 list-disc list-inside">
+        <li>A program for everyone: You might pick a program because it is your favourite or best subject in school. You might pick a program because it will lead you towards the job you want. There are also general programs for when you don’t yet know which program is the one for you.</li>
+        <li>It is important to find a program that is a good fit for you. It is a great idea to talk to other students who have been in the program.</li>
+        <li>Sometimes students have a dream about a program but when they get there it is not what they expected. This is normal and you can change programs.</li>
+        <li>Research what you will need in your chosen career. Be sure your final diploma or degree will get you the job you want.</li>
+        <li>Most programs have admission requirements. That means there are certain courses and marks that you require to get into programs. Be sure you have all the courses you need by the end of Grade 12.</li>
+      </ul>
+    </div>
+
+  </div>
+
+</article>
--- a/templates/internal/financial-goals.php
+++ b/templates/internal/financial-goals.php
@@ -0,0 +1,20 @@
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="font-mono py-8 px-12">
+      <p class="max-w-7xl mx-auto">Will help you achieve your other goals</p>
+    </div>
+
+    <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900">
+      <ul class="max-w-7xl mx-auto space-y-4 list-disc list-inside">
+        <li>How much money will you need to attend college or university?</li>
+        <li>Think of all the things you may need: travel, books, food, housing, tuition, childcare, recreation, cell phone, etc.</li>
+        <li>Funding organizations have application deadlines for each session: Fall/Winter and Spring/Summer. Get your application in early!</li>
+        <li>You will find some suggestions under the <a href="<?php echo get_site_url() . '/managing-your-finances'; ?>" class="font-medium underline">Finances section</a></li>
+      </ul>
+    </div>
+
+  </div>
+
+</article>
--- a/templates/internal/personal-goals.php
+++ b/templates/internal/personal-goals.php
@@ -0,0 +1,40 @@
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="font-mono py-8 px-12">
+      <p class="max-w-7xl mx-auto">What you want for yourself in life</p>
+    </div>
+
+    <div class="py-8 px-4 bg-cadet-500 text-cadet-900">
+      <div class="max-w-7xl mx-auto">
+
+        <div class="px-4">
+          <h3 class="text-xl font-medium mb-4">To determine your personal goals ask yourself:</h3>
+          <ul class="list-disc space-y-2 px-4">
+            <li>
+              <p>Where do you want to live and work?</p>
+            </li>
+            <li>
+              <p>How important is family in your life? How will you stay connected?</p>
+            </li>
+            <li>
+              <p>Do you want to travel?</p>
+            </li>
+            <li>
+              <p>What do you want your life to look like in 10, 15 or 50 years?</p>
+            </li>
+          </ul>
+        </div>
+
+        <div class="mt-8 px-4 py-4 w-full bg-white shadow-sm">
+          <p class="italic font-medium">Be honest with yourself. The career and education you choose should guide you to achieve your personal goals.</p>
+        </div>
+
+      </div>
+
+    </div>
+
+  </div>
+
+</article>
--- a/templates/partials/page_header.php
+++ b/templates/partials/page_header.php
@@ -0,0 +1,28 @@
+<!-- Page Header -->
+<?php 
+$current_slug = get_post_field('post_name', get_post());
+
+$pages = get_pages_as_array();
+$page = getPageForSlug($pages, $current_slug);
+$pageID = $page->ID;
+$pageTitle = $page->post_title;
+$pageSlug = $page->post_name;
+
+if ($page->post_parent !== 0) {
+  $parent_page = $pages[$page->post_parent]['page'];
+  $pageBG = $parent_page->post_name . '.png';
+} else {
+  $pageBG = $page->post_name . '.png';
+}
+
+?>
+<!-- Header Banner -->
+<div id="header-banner" class="relative h-24 md:h-56 lg:h-1/3 flex items-center md:justify-center">
+  <h1 class="shadow-md px-4 py-2 bg-white bg-opacity-40 text-blue-800 font-medium relative z-20 text-xl md:text-2xl lg:text-center"><?php echo $pageTitle ?></h1>
+  <img class="absolute top-0 h-full w-full object-cover" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/<?php echo $pageBG; ?>" alt="header-banner">
+</div>
+
+
+<h1 class="max-w-7xl mx-auto font-serif text-2xl text-cadet-900 px-4 lg:px-0 lg:text-4xl my-4"><?php echo $pageTitle ?></h1>
+
+<?php get_template_part('/templates/partials/quick_links'); ?>
--- a/templates/partials/quick_links.php
+++ b/templates/partials/quick_links.php
@@ -0,0 +1,36 @@
+<!-- Quick Links Section -->
+<?php
+
+$current_slug = get_post_field('post_name', get_post());
+$pages = get_pages_as_array();
+$subpages = getSubpagesForSlug($pages, $current_slug);
+
+if (count($subpages) > 0) { ?>
+
+  <!-- Quick Links -->
+  <div class="px-2">
+    <ul role="list" class="max-w-7xl mx-auto text-blue-500 bg-white border-blue-500 border py-4 mb-4 rounded-md">
+      <li class="accordion">
+        <div class="flex px-2 rounded-md justify-between">
+          <div class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+            <p>Quick Links</p>
+          </div>
+          <button class="accordion-toggle">
+            <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+            <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+          </button>
+        </div>
+        <ul class="accordion-content space-y-2">
+          <?php
+          foreach ($subpages as $subpage) { ?>
+            <li class="p-2">
+              <a href="<?php echo get_site_url() . '/' . $pages[$subpage->post_parent]['page']->post_name . '/' . $subpage->post_name ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
+                <p><?php echo $subpage->post_title ?></p>
+              </a>
+            </li>
+          <?php } ?>
+        </ul>
+      </li>
+    </ul>
+  </div>
+<?php }
--- a/templates/partials/subcategory_accordions.php
+++ b/templates/partials/subcategory_accordions.php
@@ -0,0 +1,47 @@
+<!-- Quick Links Section -->
+<?php
+
+require(get_theme_file_path('/includes/front-end/menu_data.php'));
+
+$current_slug = get_post_field('post_name', get_post());
+$subcategories = getSubcategoriesBySlug($menuData, $current_slug);
+
+
+if (count($subcategories) > 0) { ?>
+
+  <?php
+  foreach ($subcategories as $subcategory) {
+
+    $content = $subcategory['description'] ?? $subcategory['title']
+
+  ?>
+
+
+    <div class="px-2">
+      <ul role="list" class="max-w-7xl mx-auto text-blue-500 bg-white border-blue-500 border py-4 mb-4 rounded-md">
+        <li class="accordion">
+          <div class="flex px-2 rounded-md justify-between">
+            <div class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+              <p><?php echo $subcategory['title']; ?></p>
+            </div>
+            <button class="accordion-toggle">
+              <i class="fas fa-chevron-down items-center ml-auto rounded-md bg-gray-900 px-2.5 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+              <i class="fas fa-times items-center ml-auto rounded-md bg-gray-900 px-3 py-2 text-white ring-1 ring-inset ring-gray-700" aria-hidden="true"></i>
+            </button>
+          </div>
+          <ul class="accordion-content space-y-2">
+
+
+            <li class="p-2">
+              <a href="<?php echo get_site_url() . '/' . $current_slug . '/' . $subcategory['slug'] ?>" class="flex space-x-2 items-center"><i class="bi-caret-right-fill"></i>
+                <p><?php echo $content ?></p>
+              </a>
+            </li>
+
+          </ul>
+        </li>
+      </ul>
+    </div>
+
+<?php }
+}
--- a/templates/partials/subcategory_cards.php
+++ b/templates/partials/subcategory_cards.php
@@ -0,0 +1,38 @@
+<!-- Quick Links Section -->
+<?php
+
+$current_slug = get_post_field('post_name', get_post());
+$pages = get_pages_as_array();
+$subpages = getSubpagesForSlug($pages, $current_slug);
+
+
+if (count($subpages) > 0) { ?>
+
+  <!-- Sub Level Pages Section -->
+  <div class="p-4 lg:h-full">
+    <ul class="grid grid-cols-1 lg:grid-cols-2 gap-2 lg:h-full place-items-stretch">
+      <?php
+      foreach ($subpages as $subpage) {
+
+        $pageID = $subpage->ID;
+
+      ?>
+
+        <li class="category-cards flex rounded-md shadow-md relative overflow-hidden w-full" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/bgs/<?php echo $subpage->post_name ?>.png');">
+          <a class="w-full py-8 px-8 space-y-2 lg:flex lg:flex-col lg:items-center lg:justify-center" href="<?php echo get_site_url() . '/' . $pages[$subpage->post_parent]['page']->post_name . '/' . $subpage->post_name ?>">
+
+
+            <h2 class="font-bold uppercase"><?php echo $subpage->post_title ?></h2>
+            
+            <?php if (get_field('description', $pageID) != '') { ?>
+              <p class="lg:text-center"><?php echo get_field('description', $pageID); ?></p>
+            <?php } ?>
+          </a>
+
+        </li>
+
+      <?php } ?>
+    </ul>
+  </div>
+
+<?php }
--- a/templates/top-level/daily-living-and-housing.php
+++ b/templates/top-level/daily-living-and-housing.php
--- a/templates/top-level/goals-and-objectives.php
+++ b/templates/top-level/goals-and-objectives.php
--- a/templates/top-level/managing-your-finances.php
+++ b/templates/top-level/managing-your-finances.php
--- a/templates/top-level/mental-health-and-wellness.php
+++ b/templates/top-level/mental-health-and-wellness.php
--- a/templates/top-level/preparing-for-college-and-university.php
+++ b/templates/top-level/preparing-for-college-and-university.php
@@ -0,0 +1,24 @@
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="font-mono py-8 px-12 text-white bg-prep-for-col-uni">
+      <p class="max-w-7xl mx-auto">Take some time to look at what you want for your
+        future. Talk to your family, friends, teachers and
+        other people who will listen to help you decide
+        where you want to go.</p>
+    </div>
+
+    <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
+      <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
+        <i class="bi-quote text-7xl inline text-cadet-300"></i>
+        <p class="font-medium inline text-xl">Set goals and work hard. This is an
+          opportunity to explore your future!”</p>
+        <p class="mt-4 mb-2 font-medium">Daeshawn Sutherland, Constance Lake First Nation</p>
+        <p>Industrial Millwright Program, Northern College</p>
+      </div>
+    </div>
+
+  </div>
+
+</article>
--- a/templates/top-level/resources-and-additional-information.php
+++ b/templates/top-level/resources-and-additional-information.php
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1611 1570.33"><defs><style>.cls-1{isolation:isolate;}.cls-2{opacity:0.05;mix-blend-mode:multiply;}.cls-3{fill:#951f21;}</style></defs><title>red-bear-head_1</title><g class="cls-1"><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g class="cls-2"><path class="cls-3" d="M1086.08,578.46S1124,505,1181.83,466.62c61.85-41,102.85-127.24-27.52-152-86-30.45-134,49.09-134,49.09,67.8,48.69,116.73,20.61,143-5.57,10.66.3,35.59,3.59,38,27.6C1204.39,416.3,1068.74,482.59,1086.08,578.46Z"/><path class="cls-3" d="M430.69,466.62c57.83,38.33,95.75,111.84,95.75,111.84,17.34-95.87-118.31-162.16-115.25-192.75,2.36-23.59,26.47-27.17,37.43-27.58,26.29,26.17,75.22,54.23,143,5.55,0,0-48.35-80.16-135-48.77C328.22,340.11,369.09,425.78,430.69,466.62Z"/><path class="cls-3" d="M1005.75,422.69s-43.27,36.61-21.08,111,21.08,157.53,21.08,157.53,38.56-71.54,10-160.86C995,465.38,1005.75,422.69,1005.75,422.69Z"/><path class="cls-3" d="M1027.71,148.67c-72.91,20.22-152.32,68-222.21,69.66-69.89-1.67-149.3-49.44-222.21-69.66C433.06,107,372.82,224.51,372.82,224.51c31.62-42.31,157.26-79.18,267.93-24.26,96.89,48.09,164.75,48.26,164.75,48.26s67.86-.17,164.75-48.26c110.67-54.92,236.31-18.05,267.93,24.26C1238.18,224.51,1177.94,107,1027.71,148.67Z"/><path class="cls-3" d="M605.25,422.69s10.78,42.69-10,107.62c-28.57,89.32,10,160.86,10,160.86s-1.11-83.2,21.08-157.53S605.25,422.69,605.25,422.69Z"/><path class="cls-3" d="M689,422.69C737.27,357.24,805.5,326.2,805.5,326.2s68.23,31,116.49,96.49c0,0-51.59-124.25-116.49-127.58C740.6,298.44,689,422.69,689,422.69Z"/><path class="cls-3" d="M805.5,834.3c218.84,4.15,160.59-131.47,160.59-131.47,0,17.47-15.81,16.64-15.81,16.64,1.67-76.55-71.56-78.22-93.19-71.56s-51.59,6.66-51.59,6.66-30,0-51.59-6.66-94.86-5-93.19,71.56c0,0-15.81.83-15.81-16.64C644.91,702.83,586.66,838.45,805.5,834.3Z"/><path class="cls-3" d="M1536.06,228.54c33.29-29.95,114.28-148.66,52.15-197.48s-178.62,6.66-240.75,10-222.8-5.29-280.69-15.3C934.66,2.89,805.5,0,805.5,0S676.34,2.89,544.23,25.75c-57.89,10-218.56,18.62-280.69,15.3S84.92-17.76,22.79,31.06,41.65,198.59,74.94,228.54,86,310.64,66.06,378.32-20.48,589.11,16.14,624.61s46.59,87.65,46.59,87.65c21.08-21.09-1.11-75.45-12.2-112.06s0-61,23.3-76.55,64.5,56.93,128.41,115.11c68.79,62.6,99,120.65,99,120.65s-31.62-114.83-111.5-202.48-84.87-128.69-51.59-331.71S291.28,127,512.17,82.1C676.75,48.62,805.5,50.71,805.5,50.71s128.75-2.09,293.33,31.39c220.89,44.93,340.71-59.91,374,143.12s28.28,244.07-51.59,331.71-111.5,202.48-111.5,202.48,30.23-58,99-120.65c63.91-58.18,105.11-130.64,128.41-115.11s34.39,39.94,23.3,76.55-33.28,91-12.2,112.06c0,0,10-52.15,46.59-87.65S1564.91,446,1544.94,378.32,1502.78,258.5,1536.06,228.54Z"/><path class="cls-3" d="M1299.75,295.11c12.68,32.4,31.07,102.25,4.44,183.05-15.07,45.75-78.49,206.36-78.49,206.36-72.39,206.36-193.89,241.3-193.89,241.3,58.24,1.67,129.82-66.56,169.76-68.23s25,66.57,25,66.57c-37.54,132.35,13.73,149.77,13.73,149.77-31.21-58.24,57.83-121.48,27.87-259.6s38.28-244.63,38.28-244.63C1399.6,379.7,1299.75,295.11,1299.75,295.11Z"/><path class="cls-3" d="M390.11,684.52S326.7,523.91,311.62,478.16c-26.63-80.8-8.24-150.65,4.44-183,0,0-99.85,84.59-6.66,274.59,0,0,68.23,106.5,38.28,244.63s59.08,201.36,27.87,259.6c0,0,51.28-17.42,13.73-149.77,0,0-15-68.23,25-66.57S525.76,927.49,584,925.82C584,925.82,462.5,890.88,390.11,684.52Z"/><path class="cls-3" d="M973.12,942.47s-196.79,39.7-315.73,6.65v477.62s-1.21,32.43.36,53.77a48.67,48.67,0,0,0,.8,7.94,32.75,32.75,0,0,0,1.93,8.28h0c4.1,14.4,14,37.12,37.58,70.09q42.9,3.47,86.67,3.5c1.28,0,2.55,0,3.83,0-30.44-28.26-56-66.47-56-115.2,0-4.82-.13-9.22-.36-13.3V1015.69s75.71-39.94,146.06,6.65S922,1222,868.74,1283.15c0,0,115.7-45,85.32-184.67C927.55,976.57,973.12,942.47,973.12,942.47Z"/></g></g></g></g></svg>