Nearing completion

assets/css/styles.css

@@ -1452,6 +1452,10 @@ select {
   z-index: 50;
 }
 
+.col-span-3 {
+  grid-column: span 3/span 3;
+}
+
 .-mx-2 {
   margin-left: -0.5rem;
   margin-right: -0.5rem;
@@ -1462,11 +1466,20 @@ select {
   margin-right: auto;
 }
 
+.my-2 {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
 .my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -1475,6 +1488,10 @@ select {
   margin-left: auto;
 }
 
+.mt-2 {
+  margin-top: 0.5rem;
+}
+
 .mt-4 {
   margin-top: 1rem;
 }
@@ -1483,10 +1500,6 @@ select {
   margin-top: 2rem;
 }
 
-.mb-2 {
-  margin-bottom: 0.5rem;
-}
-
 .inline {
   display: inline;
 }
@@ -1503,6 +1516,10 @@ select {
   display: none;
 }
 
+.aspect-video {
+  aspect-ratio: 16/9;
+}
+
 .h-20 {
   height: 5rem;
 }
@@ -1511,6 +1528,10 @@ select {
   height: 6rem;
 }
 
+.h-56 {
+  height: 14rem;
+}
+
 .h-full {
   height: 100%;
 }
@@ -1523,10 +1544,18 @@ select {
   width: 8.333333%;
 }
 
+.w-1\/3 {
+  width: 33.333333%;
+}
+
 .w-11\/12 {
   width: 91.666667%;
 }
 
+.w-3\/5 {
+  width: 60%;
+}
+
 .w-4\/5 {
   width: 80%;
 }
@@ -1539,14 +1568,31 @@ select {
   width: 100%;
 }
 
+.max-w-64 {
+  max-width: 16rem;
+}
+
 .max-w-7xl {
   max-width: 80rem;
 }
 
+.max-w-xl {
+  max-width: 36rem;
+}
+
 .flex-1 {
   flex: 1 1 0%;
 }
 
+.shrink {
+  flex-shrink: 1;
+}
+
+.-skew-y-6 {
+  --tw-skew-y: -6deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .list-inside {
   list-style-position: inside;
 }
@@ -1559,6 +1605,14 @@ select {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
 
+.grid-cols-2 {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.grid-cols-5 {
+  grid-template-columns: repeat(5, minmax(0, 1fr));
+}
+
 .grid-cols-6 {
   grid-template-columns: repeat(6, minmax(0, 1fr));
 }
@@ -1591,6 +1645,10 @@ select {
   gap: 0.5rem;
 }
 
+.gap-4 {
+  gap: 1rem;
+}
+
 .gap-x-3 {
   -moz-column-gap: 0.75rem;
   column-gap: 0.75rem;
@@ -1674,11 +1732,26 @@ select {
   background-color: rgb(2 9 23/var(--tw-bg-opacity));
 }
 
+.bg-cadet-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 247 247/var(--tw-bg-opacity));
+}
+
+.bg-cadet-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(206 219 218/var(--tw-bg-opacity));
+}
+
 .bg-cadet-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(142 168 164/var(--tw-bg-opacity));
 }
 
+.bg-cadet-800 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(52 102 86/var(--tw-bg-opacity));
+}
+
 .bg-cadet-900 {
   --tw-bg-opacity: 1;
   background-color: rgb(29 77 58/var(--tw-bg-opacity));
@@ -1699,11 +1772,31 @@ select {
   background-color: rgb(17 24 39/var(--tw-bg-opacity));
 }
 
+.bg-green-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(24 87 76/var(--tw-bg-opacity));
+}
+
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(149 29 32/var(--tw-bg-opacity));
+}
+
+.bg-red-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(133 23 26/var(--tw-bg-opacity));
+}
+
 .bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255/var(--tw-bg-opacity));
 }
 
+.bg-yellow-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(245 224 162/var(--tw-bg-opacity));
+}
+
 .bg-opacity-40 {
   --tw-bg-opacity: 0.4;
 }
@@ -1780,6 +1873,10 @@ select {
   padding-bottom: 5rem;
 }
 
+.pb-8 {
+  padding-bottom: 2rem;
+}
+
 .pb-\[65px\] {
   padding-bottom: 65px;
 }
@@ -1800,6 +1897,10 @@ select {
   padding-top: 6rem;
 }
 
+.pt-4 {
+  padding-top: 1rem;
+}
+
 .text-center {
   text-align: center;
 }
@@ -1885,6 +1986,11 @@ select {
   color: rgb(4 14 31/var(--tw-text-opacity));
 }
 
+.text-blue-900 {
+  --tw-text-opacity: 1;
+  color: rgb(2 9 23/var(--tw-text-opacity));
+}
+
 .text-cadet-300 {
   --tw-text-opacity: 1;
   color: rgb(206 219 218/var(--tw-text-opacity));
@@ -1895,6 +2001,11 @@ select {
   color: rgb(29 77 58/var(--tw-text-opacity));
 }
 
+.text-red-500 {
+  --tw-text-opacity: 1;
+  color: rgb(149 29 32/var(--tw-text-opacity));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255/var(--tw-text-opacity));
@@ -2005,12 +2116,24 @@ html {
   .lg\:flex {
     display: flex;
   }
+  .lg\:grid {
+    display: grid;
+  }
   .lg\:h-1\/3 {
     height: 33.333333%;
   }
   .lg\:h-full {
     height: 100%;
   }
+  .lg\:w-1\/2 {
+    width: 50%;
+  }
+  .lg\:w-1\/3 {
+    width: 33.333333%;
+  }
+  .lg\:w-1\/4 {
+    width: 25%;
+  }
   .lg\:w-2\/4 {
     width: 50%;
   }
@@ -2182,7 +2305,7 @@ body.login {
   position: absolute;
   opacity: 0;
   transition: all 600ms ease-in-out;
-  padding: 1rem 1rem 1rem 2rem;
+  padding: 1rem;
 }
 @media (min-width: 1024px) {
   .accordion-content {
@@ -2350,6 +2473,36 @@ body.login {
   background-position: center;
 }
 
+.bg-attending-college-or-university {
+  background-image: url(../../assets/images/bgs/attending-college-or-university.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.iceberg-illusion {
+  background-image: url(../../assets/images/bgs/attending-college-or-university.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center;
+}
+
+.differences-columns:nth-child(odd) {
+  background-color: var(--copper-200); /* Odd row background color */
+}
+
+.tips-columns:nth-child(odd) {
+  background-color: var(--cadet-500); /* Odd row background color */
+}
+
+.terms-columns:nth-child(even) {
+  background-color: var(--cadet-500); /* Odd row background color */
+}
+
+.comparisons-columns:nth-child(even) {
+  background-color: var(--copper-200); /* Odd row background color */
+}
+
 .flip {
   transform: scaleX(-1);
 }

assets/js/index.js

@@ -43,7 +43,7 @@ class Nav {
   constructor() {
     this.toggleMenuBtn = document.getElementById('toggle-nav');
     this.toggleSlideOutMenu = document.getElementById('slide-out-menu');
-    this.accordions = document.querySelectorAll('.accordion');
+    this.accordions = document.querySelectorAll('#slide-out-menu .accordion');
     this.toggleCollapse();
     this.events();
   }

front-page.php

@@ -12,6 +12,32 @@ require_once(get_theme_file_path('/includes/back-end/helper_functions.php'));
     <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>
 
+  <section class="bg-white">
+    <div class="max-w-7xl mx-auto">
+      <div class="bg-white">
+        <h2 class="text-3xl p-4 text-red-500 font-bold">Attending College or University</h2>
+        <div class="px-4 py-8 bg-attending-college-or-university">
+          <p class="text-white">
+            Transitioning from high school to college or university is a big change. If you are coming from a small First Nation, the school will likely have more students than the population of your community! There will also be students from around the world who will be learning alongside you.
+          </p>
+        </div>
+      </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">There’s so much opportunities for yourself to take,
+            such as meeting new people, participating in extracurricular
+            activities and you can do what interests
+            you. Also, you will notice the way you feel your
+            mind opening up in a way that you enjoy.”</p>
+          <p class="mt-4 mb-2 font-medium">Keara Isaac, Moose Cree First Nation</p>
+          <p>Social Service Worker – Indigenous Specialization at Cambrian College</p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+
   <!-- 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">

header.php

@@ -53,7 +53,7 @@
                                                                                                                 } else echo 'in-view' ?>">
             <ul class="lg:max-w-3xl mx-auto text-3xl grid grid-cols-6">
 
-                <!-- Menu Loop -->
+                <!-- Menu Icons Loop -->
                 <?php foreach ($menuData as $page) { ?>
 
                     <li>
@@ -149,8 +149,6 @@
 
         </section>
 
-        <!-- Splash Screen Section -->
-
         <?php
 
         // Check if a flag is set in the session to indicate that the code has already run

page.php

@@ -42,11 +42,14 @@ get_header(); ?>
       $pageBootstrapIcon = get_field('bootstrap_icon', $subpage->ID);
 
       if (is_page($pageSlug)) {
-        get_template_part('/templates/partials/page_header');
-        get_template_part('/templates/internal/' . $pageSlug); ?>
+        get_template_part('/templates/partials/page_header'); ?>
+
+        <div class="max-w-7xl mx-auto">
+          <?php get_template_part('/templates/internal/' . $pageSlug); ?>
+        </div>
         <!-- Page Editor Content -->
         <div class="prose max-w-7xl mx-auto">
-          <?php the_content(); ?>
+          <?php /** the_content(); */ ?>
         </div>
   <?php }
     }

templates/internal/applying-to-post-secondary.php

@@ -0,0 +1,37 @@
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-xl p-4 text-red-500 font-bold">Post-Secondary Admission</h2>
+    <div class="px-4">
+      <p class="">
+        Check with your teachers, counsellors, and the university or college calendar to:
+      </p>
+      <ul class="list-disc px-8 space-y-2 py-2">
+        <li>Make sure you have all of the prerequisites for the program.</li>
+        <li>Sign up for all the courses you want or need
+          to take.</li>
+        <li>If you don’t have all the courses needed, ask if they offer upgrading courses or programs such as Native Access Program.</li>
+        <li>February 1st is the college Equal Consideration Date: if you apply after this date, the college will only look at applications as first come first serve until the program is filled.</li>
+        <li>Mid-January is the deadline to complete your Ontario Universities’ Application Centre application to attend a University.</li>
+        <li>If you are applying to a private college or university, like an Indigenous post-secondary institute, you will need to get the application information from them.</li>
+        <li>Apply early to make sure all the forms you
+          need have been filled out and the institution
+          has them.</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="mt-8 px-4 space-y-4 py-4 w-full text-white bg-cadet-900 shadow-md">
+    <p class="italic font-medium">In Ontario, post-secondary applications are done online.</p>
+    <p class="">To apply to a college, go to:</p>
+    <a class="underline" href="https://www.ontariocolleges.ca/en/">https://www.ontariocolleges.ca/en/</a>
+  </div>
+
+  <div class="py-8 px-8 space-y-4">
+    <div class="max-w-64 mx-auto bg-yellow-300 px-12 py-16 shadow-md">
+      <p class="-skew-y-6 font-bold text-center">MID-JANUARY IS THE DEADLINE TO APPLY TO COLLEGE OR UNIVERSITY</p>
+    </div>
+  </div>
+
+
+</article>

templates/internal/band-funding.php

@@ -0,0 +1,20 @@
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-l p-4 text-red-500 font-bold">Ask your band about post-secondary funding and what is available to you.</h2>
+    <div class="px-4">
+      <p class="p-4 bg-cadet-300">
+        While some First Nations directly administer funding for their students, others must go through a tribal council or educational organization, such as the <a class="font-medium underline" href="https://www.nnec.on.ca/">Northern Nishnawbe Education Council (NNEC).</a> Each of these will have different policies and procedures that you will need to follow when applying for funding. Note: not every student will get the same amount of money, and some students may not meet the criteria for the funder at that time.
+      </p>
+      <ul class="list-disc px-8 space-y-2 py-2">
+        <li>As soon as you can, talk to your school counsellor or your community’s Education Director to find out how to apply for this funding.</li>
+        <li>There are additional funding and supports for full time students living with dependents (children) including access to free childcare. More information in <a class="font-medium underline" href="<?= site_url('/daily-living-and-housing/students-with-children/') ?>">Students With Children</a></li>
+      </ul>
+    </div>
+  </div>
+
+  <div class=" mt-8 px-4 space-y-4 py-4 w-full text-white bg-cadet-900 shadow-md">
+    <p class="italic font-medium text-center">Be sure to apply early!
+  </div>
+
+</article>

templates/internal/before-signing-the-lease.php

@@ -0,0 +1,63 @@
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-l p-4 text-red-500 font-bold">Questions to ask the landlords</h2>
+
+    <div class="p-4 bg-cadet-800 text-white">
+
+      <p>Here are a few questions to ask your future landlord about the rental:</p>
+
+      <ul class="list-disc px-4 space-y-2 py-2">
+        <li>What is the total square footage and room configuration?</li>
+        <li>Are some or all of the utilities covered by the rent? If not, can you give me an estimate for those costs?</li>
+        <li>What are your parking options?</li>
+        <li>Is there on-site maintenance, security, and/or property managers?</li>
+        <li>What is the refund policy for security deposits?</li>
+        <li>Is there a secure area for mail and inbound packages?</li>
+        <li>What types of customizations can you make to a property (paint, nails for hanging pictures, etc.)? Which ones are prohibited?</li>
+        <li>Will facilities staff conduct inspections, and how much notice do they need to give?</li>
+        <li>Are there any safety or health concerns associated with the property (mould, lead paint, etc.)?</li>
+        <li>When are quiet hours?</li>
+        <li>Are there guest restrictions?</li>
+        <li>Are there any fees associated with the rental that we haven’t discussed?</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <div class="p-4">
+    <div class="px-4 space-y-2 py-4 bg-cadet-300">
+      <p class="font-bold">Walkthrough</p>
+      <p class="font-medium">You should always conduct a formal walkthrough with your landlord or property manager before signing a lease.</p>
+    </div>
+  </div>
+
+  <div class="bg-white">
+    <div class="p-4">
+      <h2 class="text-l text-red-500 font-bold mb-2">Review the Lease</h2>
+      <p>Always read the entire lease agreement. You may notice some restrictions and procedures you were not expecting on how the terms of a lease agreement work. Most lease agreements are detailed to avoid any uncertainties.</p>
+    </div>
+
+    <div class="px-4">
+
+
+      <ul class=" bg-cadet-800 text-white list-disc list-inside p-4 space-y-2">
+        <li>What is the total square footage and room configuration?</li>
+        <li>What charges are you liable for?</li>
+        <li>If you decide to move away during summer break on a one-year lease, are you allowed to sublet your room for those months?</li>
+        <li>Are you allowed to add roommates to your lease?</li>
+        <li>Pet policies?</li>
+      </ul>
+    </div>
+
+  </div>
+
+  <div class="p-4 font-medium">
+    <p>The Landlord Tennent Act outlines the legal rights and responsibilities of the Landlord and you, the Tenant. You can learn more at: <a class="font-bold underline" href="http://www.ontario.ca/page/renting-ontario-your-rights">Renting in Ontario: Your rights</a></p>
+  </div>
+
+  <div class="flex justify-center max-w-xl mx-auto mb-4">
+    <img class="w-3/5" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/housing-graphics.png" alt="The Iceberg Illusion">
+  </div>
+
+</article>

templates/internal/budgeting-your-money.php

@@ -0,0 +1,93 @@
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-l p-4 text-red-500 font-bold">Going to college or university can be expensive.</h2>
+    <div class="px-4">
+      <div class="p-4 bg-cadet-800 text-white">
+
+        <p>For most students, there is never enough money for everything you need or want to do.</p>
+
+        <ul class="list-disc px-8 space-y-2 py-2">
+          <li>Be practical</li>
+          <li>Prioritize your spending</li>
+          <li>Don’t spend more than you can afford</li>
+          <li>Build in an “emergency fund” for any unexpected things that may come up</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+
+  <div class="px-4 pb-8 pt-4">
+    <p class="">
+      The following links provide information about money that may be available to you and how to make your money go further. See page 36 for a sample monthly budget.
+    </p>
+
+    <div class="mt-4">
+      <h3 class="font-bold">My Money Coach</h3>
+      <a class="font-medium underline" href="https://www.mymoneycoach.ca/">(www.mymoneycoach.ca)</a>
+      <!-- Links -->
+      <div class="accordion bg-cadet-500 my-2">
+        <div class="flex px-2 rounded-md justify-between">
+          <a href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+            <p class="font-bold">Quick Links</p>
+          </a>
+
+          <button class="accordion-toggle">
+            <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+            <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+          </button>
+
+        </div>
+        <div class="accordion-content space-y-4">
+          <ul class="space-y-2">
+            <li><a class="underline" href="https://www.mymoneycoach.ca/money-management/budgeting-plan-for-future">7 Steps to Help You Budget</a></li>
+            <li><a class="underline" href="https://www.mymoneycoach.ca/budgeting/budgeting-calculators-tools/budgeting-spreadsheet">Free Interactive Budget Calculator Spreadsheet</a></li>
+            <li><a class="underline" href="https://www.mymoneycoach.ca/budgeting/budgeting-videos/1-4">Free Online Videos about Budgeting</a></li>
+          </ul>
+        </div>
+      </div>
+
+      <p class="mt-2">
+        This website provides free resources and videos to help you learn to make a budget that will work for you. This will help you as you begin your post-secondary studies as well as after you graduate. These include:
+      </p>
+    </div>
+
+    <!-- Horizontal Rule -->
+    <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
+    
+    <div class="mt-4">
+      <h3 class="font-bold">Ontario Native Education Counsellors Association (ONECA)</h3>
+      <a class="font-medium underline" href="https://www.onceca.ca/">(wwwoneca.ca)</a>
+      <!-- Links -->
+      <div class="accordion bg-cadet-500 my-2">
+        <div class="flex px-2 rounded-md justify-between">
+          <a href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+            <p class="font-bold">Quick Links</p>
+          </a>
+
+          <button class="accordion-toggle">
+            <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+            <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+          </button>
+
+        </div>
+        <div class="accordion-content space-y-4">
+          <ul class="space-y-2">
+            <li><a class="underline" href="https://oneca.com/transitions/secondary-to-post-secondary/">Secondary to Post-Secondary Transitions</a></li>
+            <li>
+              <p>ONECA also has online resources you can use to prepare your budget. An example is included to show what a typical budget might include.</p><a class="underline" href="https://oneca.com/transitions/financial-supports-scholarships-and-bursaries/">Financial Supports, Scholarships, and Bursaries</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <p class="mt-2">
+        ONECA provides information about managing your finances.
+      </p>
+    </div>
+
+  </div>
+
+
+
+</article>

templates/internal/career-goals.php

@@ -2,8 +2,8 @@
 
   <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 class="py-8 px-4"">
+      <p class=" max-w-7xl italic font-medium text-red-500 mx-auto">What you want for yourself in life</p>
     </div>
 
     <div class="py-8 px-2 bg-white text-cadet-900">

templates/internal/education-level-differences.php

@@ -0,0 +1,202 @@
+<?php
+
+$educationLevelDifferences = [
+
+  [
+    'title' => 'Registering for School',
+    'high-school-info' => [
+      'Registration is only needed for Grade 9, or if the student is new to the school.',
+      'There are no fees to attend high school.'
+    ],
+    'college-university-info' => [
+      'Students must apply to college or university by completing the necessary forms. There are fees to apply.',
+      'Tuition and other fees must be paid in order to register.',
+      'More information on page 10'
+    ]
+  ],
+  [
+    'title' => 'Registering for Classes',
+    'high-school-info' => [
+      'Students choose courses in February or March for the following school year.',
+      'Some classes have a limited number of spaces, so you need to register early.'
+    ],
+    'college-university-info' => [
+      'Students must ensure they have the correct prerequisites and meet grade requirements. Many courses are only available to students in certain programs.',
+      'Some classes or programs have limited student capacity, so you need to apply early and/or complete additional paperwork to be considered.'
+    ]
+  ],
+  [
+    'title' => 'Class Size',
+    'high-school-info' => ['Classes are usually less than 30.'],
+    'college-university-info' => [
+      'College classroom sizes range from 25-150.',
+      'University Class sizes range from 50-400.',
+      'Class size tends to shrink as classes and years progress.',
+      'Supplementary class (i.e., labs) sizes range from 15 to 60 people.'
+    ]
+  ],
+  [
+    'title' => 'Teachers',
+    'high-school-info' => [
+      'You see your teachers every day.',
+      'Teachers are available after school if you need help.'
+    ],
+    'college-university-info' => [
+      'You might only see your instructors one to three times a week.',
+      'Instructors are usually the primary source of instruction in both lectures and labs.',
+      'Generally, you must make an appointment to talk with your instructor during their office hours.',
+      'Most teacher/professors will meet with you before or after class for a quick discussion.'
+    ]
+  ],
+  [
+    'title' => 'Routines',
+    'high-school-info' => [
+      'Students are given a schedule which is the same for most days.',
+      'There are classes every day.',
+      'School hours are between 8:30 a.m. to 4 p.m.'
+    ],
+    'college-university-info' => [
+      'Students choose classes in June - July based on program requirements.',
+      'Most classes are held 1 to 3 times a week.',
+      'Classes are held between 8 a.m. - 10 p.m.'
+    ]
+  ],
+  [
+    'title' => 'Responsibility',
+    'high-school-info' => [
+      'Teachers assign work, make deadlines, and remind you of due dates.',
+      'The office will call home if you are not at school. The teachers may send work home if you miss a class.',
+      'If you miss an exam or test, you can write it later.'
+    ],
+    'college-university-info' => [
+      'You must make sure your assignments are completed and handed in on time. Instructors may not remind you of due dates.',
+      'Some courses do track attendance and may be a contributor to marks, however it is your responsibility to obtain any notes missed.',
+      'If you think you will miss an exam or test, you must talk with your instructor. You won’t be able to write it later if you fail to make arrangements.'
+    ]
+  ],
+  [
+    'title' => 'How Clases Are Taught',
+    'high-school-info' => [
+      'Teachers use different methods when they teach.',
+      'Often there is time during class to work on assignments and homework.'
+    ],
+    'college-university-info' => [
+      'Instructors often lecture and there is no time for independent work during class. A lot of your learning will be done through reading (i.e., textbooks, assigned materials) and online components.',
+      'Labs typically spend 50% of the time teaching and 50% of the time for practice or completion of assignments. Labs are a great time to ask questions and seek additional support from instructors. Labs are often taught by Graduate Assistants or Teaching Assistants.'
+    ]
+  ],
+  [
+    'title' => 'Individual Support',
+    'high-school-info' => [
+      'Education assistants and special education teachers are provided by the school.',
+      'The school ensures any assessments are done.',
+      'Students get an Individual Education Plan'
+    ],
+    'college-university-info' => [
+      'Students must talk to student services to get special accommodations or supports.',
+      'Students must provide assessments if necessary. If the student wants to get an assessment, they need to self-advocate by going to the student support center.',
+      'Students create a Post-Secondary Learning Plan with the Student Support Centre.',
+    ]
+  ], [
+    'title' => 'Assignments, Tests and Grades',
+    'high-school-info' => [
+      'Different kinds of assignments are given. Late assignments are usually accepted.',
+      'Teachers prepare students before a test (reviews, how to write the test, how to study)',
+      'Final grades are based on many assignments.'
+    ],
+    'college-university-info' => [
+      'Read course syllabus carefully!',
+      'Assignments have strict deadlines. Marks are taken off for late assignments.',
+      'If you are caught plagiarizing, you will be given an automatic ZERO and can be expelled.',
+      'Students are responsible for preparing for exams and tests.',
+      'Exams may be written in classrooms or gyms with students from other courses.',
+      'Some courses base marks on multiple assignments, lab performance and tests. Some courses will only base marks on 2-3 tests.'
+    ]
+  ]
+
+];
+
+
+?>
+
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="py-4 bg-red-500 px-6">
+      <p class="font-bold text-white">DIFFERENCES BETWEEN HIGH SCHOOL AND POST-SECONDARY</p>
+    </div>
+
+    <!-- Differences Section -->
+    <nav class="flex flex-1 flex-col">
+      <div class="flex flex-1 flex-col gap-y-7">
+
+        <div>
+          <ul role="list" class="text-blue-900">
+
+            <!-- Differences Loop -->
+            <?php
+
+            foreach ($educationLevelDifferences as $difference) {
+
+            ?>
+
+              <li class="accordion differences-columns">
+                <div class="flex px-2 rounded-md justify-between">
+                  <a href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <p><?php echo $difference['title'] ?></p>
+                  </a>
+
+                  <button class="accordion-toggle">
+                    <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+                    <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                  </button>
+
+                </div>
+                <div class="accordion-content space-y-4">
+
+                  <!-- High School Information  -->
+                  <div>
+                    <h3 class="font-medium underline mb-2">High School</h3>
+                    <ul class="list-disc">
+                      <?php
+                      foreach ($difference['high-school-info'] as $info) { ?>
+                        <li class="mb-2">
+                          <?php echo $info ?>
+                        </li>
+
+                      <?php } ?>
+                    </ul>
+                  </div>
+
+                  <!-- College University Information  -->
+                  <div>
+                    <h3 class="font-medium underline mb-2">College/University</h3>
+                    <ul class="list-disc">
+                      <?php
+                      foreach ($difference['college-university-info'] as $info) { ?>
+                        <li class="mb-2">
+                          <?php echo $info ?>
+                        </li>
+
+                      <?php } ?>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+
+
+            <?php } ?>
+
+          </ul>
+        </div>
+
+      </div>
+    </nav>
+
+
+
+
+  </div>
+
+</article>

templates/internal/educational-goals.php

@@ -2,10 +2,11 @@
 
   <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 class="py-8 px-4"">
+      <p class=" max-w-7xl italic font-medium text-red-500 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>

templates/internal/financial-goals.php

@@ -2,8 +2,8 @@
 
   <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 class="py-8 px-4">
+      <p class="max-w-7xl italic font-medium text-red-500 mx-auto">Will help you achieve your other goals</p>
     </div>
 
     <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900">

templates/internal/finding-a-place-to-stay.php

@@ -0,0 +1,58 @@
+<article>
+
+  <div class="bg-white">
+
+    <div class="px-4">
+      <p class="font-medium">
+        There are a few choices for accommodation, depending on what you want and what is available.
+      </p>
+
+
+      <ul class="space-y-4 py-2">
+
+        <li>
+          <div class="lg:grid grid-cols-5 gap-4">
+            <div>
+              <h3 class="font-bold">Residence</h3>
+              <img class="mb-2" src="<?= get_template_directory_uri() ?>/assets/images/bgs/residence.png" alt="Residence">
+            </div>
+            <p class="col-span-3">This is on-campus accommodation and ideal for schools away from home. It is a single or shared room, with access to a common bathroom, laundry, and common room. Students in residence often get a meal plan at the cafeteria. You will meet with many other students, and many lifelong friendships are made!</p>
+          </div>
+          <!-- Horizontal Rule -->
+          <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
+        </li>
+
+        <li>
+          <div class="lg:grid grid-cols-5 gap-4">
+            <div>
+              <h3 class="font-bold">Rent a room or apartment</h3>
+              <img class="mb-2" src="<?= get_template_directory_uri() ?>/assets/images/bgs/rent-apartment.png" alt="Rent Room/Apartment">
+            </div>
+            <p class="col-span-3">This is off-campus housing. Depending on what you want and what you can afford, you might get a room in a house or apartment. Remember to consider the costs that are not included in the rent.</p>
+          </div>
+          <!-- Horizontal Rule -->
+          <div class="horizontal-rule w-4/5 mt-4 mx-auto bg-gray-800"></div>
+        </li>
+
+        <li>
+          <div class="lg:grid grid-cols-5 gap-4">
+            <div>
+              <h3 class="font-bold">Room with friends or family</h3>
+              <img class="mb-2" src="<?= get_template_directory_uri() ?>/assets/images/bgs/room-with-family-or-friends.png" alt="Room with friends or family">
+            </div>
+            <p class="col-span-3">If you have friends or family living in the city, you may be able to live with them. Again, ask questions about sharing their home.</p>
+          </div>
+        </li>
+
+      </ul>
+
+      <h2 class="text-l p-4 text-red-500 font-bold">Whatever you decide, make your arrangements as early as you can.</h2>
+
+      <div class="py-8 space-y-4 lg:grid grid-cols-2 mx-auto items-center">
+        <img class="lg:w-1/2 mx-auto" src="<?= get_template_directory_uri() ?>/assets/images/bgs/make-plans-early.png" alt="Fit School Into Life">
+      </div>
+
+
+    </div>
+
+</article>

templates/internal/grants-bursaries-and-loans.php

@@ -0,0 +1,130 @@
+<?php
+
+$studentFinancialTerms = [
+  [
+    'title' => 'Grant',
+    'content' => [
+      'DOES NOT have to be repaid',
+      'Usually provided by the government See: <a class="underline" href="http://www.ontario.ca/page/osap-ontario-student-assistance-program">(Ontario Student Assistance Program - OSAP).</a>.',
+      'Students MUST meet the funding criteria'
+    ]
+  ], [
+    'title' => 'Bursary',
+    'content' => [
+      'DOES NOT have to be repaid',
+      'For students with a demonstrated financial need',
+      'Various needs in the application process'
+    ]
+  ],
+  [
+    'title' => 'Loan',
+    'content' => [
+      'MUST be repaid',
+      'Repayment usually begins after you have graduated or been out of school for 6 months (Student Line of Credit through bank, OSAP, etc.)',
+      'Students must meet criteria set out by the lender'
+    ]
+  ],
+  [
+    'title' => 'Award or Scholarship',
+    'content' => [
+      'DOES NOT have to be repaid',
+      'Students must meet specific criteria, such as marks or community involvement'
+    ]
+  ]
+];
+
+?>
+
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-l p-4 text-red-500 font-bold">Talk to Student Services or your Educational Advisor about available funding opportunities.</h2>
+
+    <!-- Student Financial Terms -->
+    <div class="flex flex-col bg-white mb-4">
+
+      <div class="py-4 bg-green-600 px-6">
+        <p class="font-bold text-white">Financial Support For Students</p>
+      </div>
+
+      <!-- Terms Loop -->
+      <div class="flex flex-1 flex-col">
+        <div class="flex flex-1 flex-col gap-y-7">
+
+          <div>
+            <ul role="list" class="text-blue-900">
+
+              <!-- Differences Loop -->
+              <?php
+
+              foreach ($studentFinancialTerms as $term) {
+
+              ?>
+
+                <li class="accordion terms-columns">
+                  <div class="flex px-2 rounded-md justify-between">
+                    <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                      <p><?php echo $term['title'] ?></p>
+                    </div>
+
+                    <button class="accordion-toggle">
+                      <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+                      <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                    </button>
+
+                  </div>
+                  <div class="accordion-content space-y-4">
+
+                    <!-- Term Content  -->
+                    <div>
+                      <ul class="<?php
+                                  if (count($term['content']) > 1) {
+                                    echo (count($term['content']) > 1) ? 'list-disc' : '';
+                                  } ?>">
+                        <?php
+                        foreach ($term['content'] as $info) { ?>
+                          <li class="mb-2">
+                            <?php echo $info ?>
+                          </li>
+                        <?php } ?>
+                      </ul>
+                    </div>
+                  </div>
+                </li>
+
+
+              <?php } ?>
+
+            </ul>
+          </div>
+
+        </div>
+      </div>
+
+    </div>
+
+    <div class="px-4">
+      <p>
+        For more information about grants, bursaries, loans, and scholarships, talk to the financial aid office at your college or university. You can also find information on the following websites:
+      </p>
+      <div class="px-4 mt-4 space-y-2 py-4 bg-cadet-300">
+
+        <p class="font-bold">Links</p>
+
+        <ul class="space-y-2">
+          <li><a class="underline" href="http://www.ontario.ca/page/osap-ontario-student-assistance-program">Ontario Student Assistance Program</a></li>
+          <li><a class="underline" href="https://www.sac-isc.gc.ca/eng/1351185180120/1351685455328">Indigenous Bursaries Search Tool</a></li>
+          <li><a class="underline" href="https://www.canada.ca/en/services/benefits/education/student-aid.html">Student Loan and other funding programs</a></li>
+          <li><a class="underline" href="http://aboriginalstudents.ca/resources/">AboriginalStudents.ca</a></li>
+          <li><a class="underline" href="https://indspire.ca/programs/students/bursaries-scholarships/">Indspire</a></li>
+        </ul>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="py-8 space-y-4 px-4 lg:w-1/2  mx-auto">
+    <img class="lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/check-all-your-options.png" alt="Online Learning">
+  </div>
+
+</article>

templates/internal/income-tax.php

@@ -0,0 +1,23 @@
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-xl p-4 text-red-500 font-bold">If you have a part-time job, you will have to file your income tax.</h2>
+    <div class="px-4">
+      <ul class="list-disc px-8 space-y-2 py-2">
+        <li>Your employer will give you a T4 document. This shows how much money you made in the year and how much tax and other deductions were taken off.</li>
+        <li>You will receive your T4 in February. You will need to use this to complete your Income Tax Return.</li>
+        <li>Students who are also funded through OSAP will be required to submit their T4A when they file their income tax. These forms are found on your National Student Loans Service Centre (NSLSC) account.</li>
+        <li>You can complete your Income Tax Form yourself by hand, online, or through a tax professional for a fee (like H&R Block). Be sure to keep a copy for yourself.</li>
+        <li>Submit your Income Tax Return by mail or electronically no later than April 30.</li>
+        <li>You may get money back from the government after they process your income tax.</li>
+        <li>Keep your Income Tax Return and tax documents for 7 years.</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="flex justify-center max-w-xl mx-auto my-4">
+    <img class="w-4/5 lg:w-1/3" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/income-tax-t4.png" alt="The Iceberg Illusion">
+  </div>
+
+
+</article>

templates/internal/off-campus-housing.php

@@ -0,0 +1,195 @@
+<?php
+
+$rentProsCons = [
+  [
+    'title' => 'Apartment',
+    'pros' => [
+      'Secure and private entry to the building and unit',
+      'Typically fewer tenants per unit than are found in a house',
+      'Greater chance of an onsite, and more responsive, landlord or property manager'
+    ],
+    'cons' => [
+      'Shared space with all other residents, especially laundry rooms, mail areas, and lounges',
+      'Buildings with many units have a greater potential for noise issues and hazards',
+      'Apartment hallways, trash rooms, and entryways may be neglected or abused'
+    ]
+  ],
+  [
+    'title' => 'House',
+    'pros' => [
+      'Typically more spacious than an apartment holding the same number of tenants',
+      'Much better way to live with a large group of people, which is one of the cheapest ways to rent',
+      'Better chance pets are permitted, especially if the house comes with a yard',
+      'More likely to have private amenities, such as a washer and dryer'
+    ],
+    'cons' => [
+      'Oftentimes homes are less secure than apartments, especially if the property is isolated',
+      'Homes may require more maintenance, which can mean more reliance on the landlord',
+      'The fewer people you live with, or the nicer the house, the pricier the rent will be. Total rent for a house will tend to be more than the apartment equivalent',
+      'Shared bathroom, kitchen, and living areas can mean less privacy overall'
+    ]
+  ]
+];
+
+?>
+
+
+<article>
+
+  <div class="px-4">
+    <p class="font-medium">
+      Living off-campus can be a great choice when attending post-secondary school. Remember to do your research and ask questions!
+    </p>
+    <p class="p-4 text-red-500 font-bold">Renting can be costly, and you will also need to think about any one-time costs:</p>
+    <ul class="list-disc px-8 space-y-2 py-2">
+      <li>First and Last Month’s Rent</li>
+      <li>Security Deposit</li>
+      <li>Pet Deposits</li>
+    </ul>
+  </div>
+
+  <div class="px-4 mt-4 space-y-2 py-4 bg-cadet-300">
+
+    <p class="font-bold">Remember, monthly costs include:</p>
+
+    <ul class="space-y-2">
+      <li>- Rent</li>
+      <li>- Utilities</li>
+      <li>- Miscellaneous Services Offered Onsite (Internet, Phone, Cable, etc.)</li>
+    </ul>
+
+  </div>
+
+  <div class="px-4 space-y-2 py-4">
+
+    <p class="">Some landlords will include one or more utilities in the rent. Any utility not included with the rent will need to be paid separately.</p>
+
+    <ul class="list-disc px-8 space-y-2">
+      <li>Water: cities charge for water being sent to the unit.</li>
+      <li>Electricity: this can be called Hydro One or Synergy North.</li>
+      <li>Heating: some units use natural gas from Enbridge to heat the property.</li>
+    </ul>
+
+  </div>
+
+  <div class="p-4 space-y-2 bg-cadet-900 text-white ">
+    <p class="font-bold">What rental period is best for you?</p>
+    <p>
+      In formal leasing agreements, there are different rental periods.
+    </p>
+    <ul class="list-disc px-8 space-y-2 py-2">
+      <li>One-year Lease (the most common)</li>
+      <li>Eight-month Lease (slightly difficult to find)</li>
+      <li>Month-to-month Lease (more difficult to find)</li>
+    </ul>
+  </div>
+
+
+  <div class="bg-white">
+    <h2 class="text-l p-4 text-red-500 font-bold">What kind of property should you rent?</h2>
+
+    <!-- Property Rental Pros and Cons -->
+    <div class="flex flex-col bg-white mb-4">
+
+      <div class="flex flex-1 flex-col">
+        <div class="flex flex-1 flex-col">
+
+
+
+          <?php
+
+          foreach ($rentProsCons as $comparison) {
+
+          ?>
+
+            <div class="py-4 bg-red-600 px-6">
+              <p class="font-bold text-white"><?php echo $comparison['title'] . ' Pros & Cons' ?></p>
+            </div>
+
+            <div>
+              <ul role="list" class="text-blue-900">
+
+                <!-- Pros Loop -->
+                <li class="accordion comparisons-columns">
+                  <div class="flex px-2 rounded-md justify-between">
+                    <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                      <p>Pros</p>
+                    </div>
+
+                    <button class="accordion-toggle">
+                      <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+                      <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                    </button>
+
+                  </div>
+                  <div class="accordion-content space-y-4">
+
+                    <ul class="space-y-2 list-disc px-4">
+
+                      <?php foreach ($rentProsCons[0]['pros'] as $pro) { ?>
+
+                        <li><?= $pro ?></li>
+
+                      <?php } ?>
+
+                    </ul>
+
+                  </div>
+                </li>
+
+                <!-- Cons Loop -->
+                <li class="accordion comparisons-columns">
+                  <div class="flex px-2 rounded-md justify-between">
+                    <div href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                      <p>Cons</p>
+                    </div>
+
+                    <button class="accordion-toggle">
+                      <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+                      <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                    </button>
+
+                  </div>
+                  <div class="accordion-content space-y-4">
+
+                    <ul class="space-y-2 list-disc px-4">
+
+                      <?php foreach ($rentProsCons[1]['cons'] as $con) { ?>
+
+                        <li><?= $con ?></li>
+
+                      <?php } ?>
+
+                    </ul>
+
+                  </div>
+                </li>
+
+
+              </ul>
+            </div>
+          <?php } ?>
+
+        </div>
+      </div>
+
+    </div>
+
+
+  </div>
+
+  <div class="py-4 space-y-4 px-4 lg:w-1/2  mx-auto">
+    <img class="w-3/5 lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/pros-and-cons-list.png" alt="Online Learning">
+  </div>
+
+  <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
+    <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
+      <i class="bi-quote text-7xl inline text-cadet-300"></i>
+      <p class="font-medium inline text-l">Overall, establishing safe and supportive allies, accessing resources, and participating in cultural events helped me the most when transitioning from high school to post-secondary and ensured my success when completing my program. I encourage all Indigenous students to access culturally safe supports and settings when moving onto post-secondary because it can make an immense difference in your overall well-being and success!”</p>
+      <p class="mt-4 mb-2 font-medium">Mackenzie Young, Mattagami First Nation</p>
+      <p>Northern College Graduate – Social Services Program</p>
+    </div>
+  </div>
+
+
+</article>

templates/internal/online-learning-and-remote-work.php

@@ -0,0 +1,210 @@
+<?php
+
+$onlineLearningTips = [
+
+  [
+    'title' => 'Gave Goals',
+    'content' => [
+      'Define your reasons for studying, set daily, weekly, and monthly goals for studying and doing assignments'
+    ]
+  ],
+  [
+    'title' => 'Be Focused',
+    'content' => [
+      'Create a quiet, organized study space'
+    ]
+  ],
+  [
+    'title' => 'Identify what works for you',
+    'content' => [
+      'Be aware of your daily responsibilities, how you study, and your energy levels during certain parts of the day, etc.'
+    ]
+  ],
+  [
+    'title' => 'Schedule your time',
+    'content' => [
+      'You are in charge of creating a routine that works for you'
+    ]
+  ],
+  [
+    'title' => 'Organize your work',
+    'content' => [
+      'Know your workload & due dates'
+    ]
+  ],
+  [
+    'title' => 'Attend your classes',
+    'content' => [
+      'Visit classes when they are live or set a schedule for you to do your async coursework'
+    ]
+  ],
+  [
+    'title' => 'Make the most of what your College/University has to offer',
+    'content' => [
+      'Contact the Student Support Centre for help managing your timetable and choosing courses',
+      'Career and employability resources e.g., help with writing or choosing a career path',
+      'Help for students with disabilities',
+      'Resources to help you learn the technology skills your course requires',
+      'Resources to improve your study skills',
+      'Connect with tutors'
+    ]
+  ],
+  [
+    'title' => 'Connect',
+    'content' => [
+      'Socialize and work with other online learners'
+    ]
+  ],
+  [
+    'title' => 'Make sure you have supports in place',
+    'content' => [
+      'Family & Friends',
+      'Childcare needs',
+      'Financial assistance',
+      'Employer communication'
+    ]
+  ],
+  [
+    'title' => 'Talk to your employer',
+    'content' => [
+      'Sponsorship: some companies may be able to fund or even partially fund your studies',
+      'Study leave: they may be willing to work around your exams or big assignments',
+      'Flexible work arrangement: your work may have a work from home policy which could allow you to use your saved commuting time to study',
+      'Unpaid leave: your company may be able to offer a few unpaid leave days if you need them to fit in your studying'
+    ]
+  ],
+  [
+    'title' => 'Embrace Technology',
+    'content' => [
+      'Make use of free productivity apps',
+      '“Calendar” app on your phone',
+      '“Evernote” for class notes',
+      '“Easybib” for citations or bibliographies',
+      '“Mendely” for sharing and keeping track of your research',
+      '“Doodle” for scheduling meetings'
+    ]
+  ],
+  [
+    'title' => 'Backup EVERYTHING',
+    'content' => [
+      'You never know when your computer will crash or when you might spill your 2:00 a.m. coffee on your computer'
+    ]
+  ],
+  [
+    'title' => 'Be mindful of online etiquette',
+    'content' => [
+      'Read out loud before pressing send. You will be able to check for errors as well as your tone'
+    ]
+  ],
+];
+
+
+?>
+
+<article>
+
+  <div class="bg-white">
+    <h2 class="text-xl p-4 text-red-500 font-bold">Online Learning & Working From Home</h2>
+    <div class="px-4">
+      <p class="font-medium">
+        Benefits of online learning:
+      </p>
+      <ul class="list-disc px-8 space-y-2 py-2">
+        <li>You can study wherever you want</li>
+        <li>Most times you can build your own schedule</li>
+        <li>Could potentially save money (travel,parking, etc.)</li>
+        <li>Learn while balancing life and working</li>
+      </ul>
+
+      <div class="py-8 space-y-4 lg:w-1/2 lg:grid grid-cols-2 mx-auto">
+        <img src="<?= get_template_directory_uri() ?>/assets/images/bgs/online-learning.png" alt="Online Learning">
+        <img class="w-1/3 lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/remote-work.png" alt="Online Learning">
+      </div>
+
+    </div>
+    <div class="px-4">
+      <p class="font-medium">
+        Skills to support online learning:
+      </p>
+      <ul class="list-disc px-8 space-y-2 py-2">
+        <li>Self-regulated</li>
+        <li>Effective Time Management (i.e., short term and long-term goals, due dates)</li>
+        <li>Independent Learner</li>
+        <li>Communication skills (it is important to reach out to your professors to arrange a time to ask questions or speak to them. Just because they are not there in person doesn’t mean you can’t build a good relationship with them).</li>
+      </ul>
+
+      <div class="py-8 space-y-4 lg:grid grid-cols-2 mx-auto items-center">
+        <img src="<?= get_template_directory_uri() ?>/assets/images/bgs/independent-learning.png" alt="Indepenedent Learning">
+        <img class="lg:w-1/2 mx-auto" src="<?= get_template_directory_uri() ?>/assets/images/bgs/fit-school-into-life.png" alt="Fit School Into Life">
+      </div>
+    </div>
+  </div>
+
+  <!-- Tips For Online Learning Success -->
+  <div class="flex flex-col bg-white">
+
+    <div class="py-4 bg-green-600 px-6">
+      <p class="font-bold text-white">Tips for Online Learning Success:</p>
+    </div>
+
+    <!-- Tips Loop -->
+    <div class="flex flex-1 flex-col">
+      <div class="flex flex-1 flex-col gap-y-7">
+
+        <div>
+          <ul role="list" class="text-blue-900">
+
+            <!-- Differences Loop -->
+            <?php
+
+            foreach ($onlineLearningTips as $tip) {
+
+            ?>
+
+              <li class="accordion tips-columns">
+                <div class="flex px-2 rounded-md justify-between">
+                  <a href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <p><?php echo $tip['title'] ?></p>
+                  </a>
+
+                  <button class="accordion-toggle">
+                    <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+                    <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                  </button>
+
+                </div>
+                <div class="accordion-content space-y-4">
+
+                  <!-- Tip Content  -->
+                  <div>
+                    <ul class="<?php
+                                if (count($tip['content']) > 1) {
+                                  echo (count($tip['content']) > 1) ? 'list-disc' : '';
+                                } ?>">
+                      <?php
+                      foreach ($tip['content'] as $info) { ?>
+                        <li class="mb-2">
+                          <?php echo $info ?>
+                        </li>
+                      <?php } ?>
+                    </ul>
+                  </div>
+                </div>
+              </li>
+
+
+            <?php } ?>
+
+          </ul>
+        </div>
+
+      </div>
+    </div>
+
+  </div>
+
+  <div class="py-8 space-y-4 px-4 lg:w-1/2  mx-auto">
+    <img class="lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/share-achievements.png" alt="Online Learning">
+  </div>
+
+</article>

templates/internal/personal-goals.php

@@ -2,8 +2,8 @@
 
   <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 class="py-8 px-4"">
+      <p class=" max-w-7xl italic font-medium text-red-500 mx-auto">What you want for yourself in life</p>
     </div>
 
     <div class="py-8 px-4 bg-cadet-500 text-cadet-900">

templates/internal/special-needs-financial-awards.php

@@ -0,0 +1,30 @@
+<article>
+  <div class="px-4">
+
+    <div class="px-4 mt-4 space-y-2 py-4 bg-cadet-300">
+
+      <p class="font-bold">Ontario funding programs:</p>
+
+      <ul class="space-y-2">
+        <li><a class="underline" href="http://www.ontario.ca/page/osap-ontario-student-assistance-program">Ontario Student Assistance Program</a></li>
+        <li><a class="underline" href="https://www.sac-isc.gc.ca/eng/1351185180120/1351685455328">Indigenous Bursaries Search Tool</a></li>
+        <li><a class="underline" href="https://www.canada.ca/en/services/benefits/education/student-aid.html">Student Loan and other funding programs</a></li>
+        <li><a class="underline" href="http://aboriginalstudents.ca/resources/">AboriginalStudents.ca</a></li>
+        <li><a class="underline" href="https://indspire.ca/programs/students/bursaries-scholarships/">Indspire</a></li>
+      </ul>
+
+    </div>
+
+    <div class="p-4">
+      <p>
+        For more information, go to:
+        <a class="font-medium underline" href="http://www.ohrc.on.ca/en/opportunity-succeed-achieving-barrier-free-education-students-disabilities/post-secondary-education">Barrier Free Education For Students With Disabilities</a>
+      </p>
+    </div>
+
+    <div class="py-2 space-y-4 px-4 lg:w-1/2  mx-auto">
+      <img class="lg:w-1/2 mx-auto" src=" <?= get_template_directory_uri() ?>/assets/images/bgs/cash-in-hand.png" alt="Cash in hand">
+    </div>
+
+  </div>
+</article>

templates/internal/strategies-for-success.php

@@ -0,0 +1,234 @@
+<?php
+
+$strategiesForSuccess = [
+
+  [
+    'title' => 'Get to know your college or university',
+    'subtitle' => 'Visit your college or university before you begin classes. If you can’t go in person, many institutions have videos and virtual tours of their campuses on their websites.',
+    'content' => [
+      "Ontario Native Education Counselling Association (ONECA) has produced videos of many colleges and universities in Ontario. These videos focus on supports, services and programs specifically for Indigenous students. To find your college or university, go to: <a class='underline font-medium' href='http://www.oneca.com/transitions/post-secondary-virtual-tours.html'>Post Secondary Virtual Tours</a>",
+      "Universities Canada has online tools to help you decide which university to attend. <a class='underline font-medium' href='https://www.universitystudy.ca/plan-for-university/'>Plan For University</a>",
+      "Universities Canada has online tools to help you decide which university to attend. <a class='underline font-medium' href='https://www.universitystudy.ca/indigenous-programs-and-services-directory/'>Indigenous Programs and Services</a>"
+    ],
+    'image' => ''
+  ],
+  [
+    'title' => 'Get to know your campus when you arrive.',
+    'subtitle' => 'Explore the campus and find what is there for you:',
+    'content' => [
+      'Locations of the classrooms/lecture halls/labs on your timetable. Before classes begin, locate your classrooms.',
+      'Cafeteria or food court',
+      'Coffee shop',
+      'Library',
+      'Indigenous Students’ Centre',
+      'Student Services',
+      'Athletic facilities',
+      'Financial Aid',
+      'Student Union',
+      'Parking and bus stops',
+      'Security'
+    ],
+    'image' => ''
+  ],
+  [
+    'title' => 'Attend your classes',
+    'subtitle' => '',
+    'content' => [
+      'If you miss a class, ask your instructor or a fellow student to share their notes with you. You can do the same for other students. (If you think you need help with note taking in class, ask for help at the academic support centre)',
+      'Instructors provide information that may not be in your readings.',
+      'Asking questions can help you get a better idea of what to expect on exams, tests and assignments. Most instructors don’t do reviews in class before exams or tests.'
+    ],
+    'image' => 'attend-your-classes.png'
+  ],
+  [
+    'title' => 'Get to know your instructors and fellow students.',
+    'subtitle' => '',
+    'content' => [
+      'Unless you make an appointment with your instructor, you will only see them during class hours. Meeting with instructors is a great way to ask for assistance with assignments.',
+      'It is important to talk to other students about assignments and readings, or to share notes if you miss a class. Some students like to study alone, while others like to study with classmates.',
+      'You will meet instructors and fellow students from other provinces and nationalities at college and university. Keep an open mind to the diversity.'
+    ],
+    'image' => ''
+  ],
+  [
+    'title' => 'Advocate for Yourself',
+    'subtitle' => '',
+    'content' => [
+      'If you need a better explanation from your instructor.',
+      'If you require learning assistance, contact the Student Accessibility Centre.',
+      'When in doubt, ask for help! This is part of your self-care and is important for your success!'
+    ],
+    'image' => 'advocate-for-yourself.png'
+  ],
+  [
+    'title' => 'Essay writing',
+    'subtitle' => '',
+    'content' => [
+      'You will be expected to write essays, reports, and create presentations.',
+      'If you need help, ask at the academic support centre. You might get free tutoring.',
+      'Always have someone read your work before you hand it in. Even good writers can miss their own mistakes.',
+      'Follow the essay guidelines outlined by your instructor as closely as possible.',
+      'Be sure to reference and cite all work that is not your own to avoid plagiarism.'
+    ],
+    'image' => ''
+  ],
+  [
+    'title' => 'Effective study skills',
+    'subtitle' => '',
+    'content' => [
+      'Be sure to visit the Student Support Services office when you arrive on campus.',
+      'You can get help through your student services office, or online.'
+    ],
+    'image' => ''
+  ],
+  [
+    'title' => 'Submitting assignments',
+    'subtitle' => '',
+    'content' => [
+      'There are strict deadlines for handing in assignments. In some cases, late assignments will not be accepted, or marks are deducted per day it’s late. Always check your course syllabus.',
+      'Talk to your instructor if you are having difficulty with an assignment or if you need an extension.',
+      'If you have personal or family emergencies that prevent you from finishing an assignment, inform your instructors and education counsellor as soon as possible.'
+    ],
+    'image' => 'discipline-over-motivation.png'
+  ],
+  [
+    'title' => 'Effective communication skills',
+    'subtitle' => '',
+    'content' => [
+      'Listening – Be attentive in your classes. Listen in class because exams will cover content from lectures, textbooks, assignments and handouts.',
+      'Speaking – Practice speaking in front of people as you might need to give presentations in class.',
+      'Reading – Courses require a lot of reading. Some tips for reading include looking for important information; highlighting key concepts; and making notes for yourself as you read.',
+      'Writing – Learn to write effectively for class notes, essays, assignments, tests and exams.'
+    ],
+    'image' => 'effective-communication-skills.png'
+  ],
+  [
+    'title' => 'Use the Academic Support Services',
+    'subtitle' => '',
+    'content' => [
+      'Tutors and Academic Advisors are available to all students to help with reading, writing, study skills, exam preparation, course selection and other academic concerns.',
+      'You can also find academic supports online',
+      "Visit here to <a href='https://www.youthcentral.vic.gov.au/study-and-training/help-with-study/how-to-study-better/top-10-study-tips' class='underline font-medium'>Find Study Tips</a>",
+      "Visit here to <a href='https://www.youthcentral.vic.gov.au/study-and-training/help-with-study/how-to-study-better/top-10-exam-tips' class='underline font-medium'>Find Exam Tips</a>"
+    ],
+    'image' => ''
+  ],
+  [
+    'title' => 'Short-Term and Long-Term Planning',
+    'subtitle' => 'Use a calendar to mark important dates and times:',
+    'content' => [
+      'Due dates for assignments',
+      'Exam and test dates',
+      'Holidays',
+      'Reading Week (Some schools schedule one in each semester.)',
+      'Birthdays',
+      'Appointments',
+      'Cultural events',
+      'Indigenous Initiatives events',
+      'Recreation (sports, movies, etc.)',
+      'Family events',
+      'Exercise / Gym'
+    ],
+    'image' => ''
+  ],
+
+];
+
+
+
+?>
+
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <div class="py-4 px-6">
+      <p class="font-bold text-red-500">WHAT DOES IT TAKE TO BE SUCCESSFUL?</p>
+    </div>
+
+    <div class="mx-auto max-w-7xl mb-4">
+      <img class="" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/iceberg-illusion.png" alt="The Iceberg Illusion">
+    </div>
+
+    <!-- Strategies Section -->
+    <nav class="flex flex-1 flex-col">
+      <div class="flex flex-1 flex-col gap-y-7">
+
+        <div>
+          <ul role="list" class="text-blue-900">
+
+            <!-- Strategies Loop -->
+            <?php
+
+            foreach ($strategiesForSuccess as $strategy) {
+
+            ?>
+
+              <li class="accordion differences-columns">
+                <div class="flex px-2 rounded-md justify-between">
+                  <a href="" class="gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold flex items-center align-middle">
+                    <p><?php echo $strategy['title'] ?></p>
+                  </a>
+
+                  <button class="accordion-toggle">
+                    <i class="fas fa-chevron-down items-center ml-auto rounded-m px-2.5 py-2 " aria-hidden="true"></i>
+                    <i class="fas fa-times items-center ml-auto rounded-md px-3 py-2" aria-hidden="true"></i>
+                  </button>
+
+                </div>
+
+                <div class="accordion-content space-y-4">
+
+                  <!-- Strategy Information  -->
+                  <div>
+                    <?php if ($strategy['subtitle']) : ?>
+                      <h3 class="italic mb-2 font-medium"><?= $strategy['subtitle'] ?></h3>
+                    <?php endif; ?>
+
+                    <ul class="list-disc space-y-2">
+
+                      <?php foreach ($strategy['content'] as $content) { ?>
+                        <li>
+                          <?php echo $content ?>
+                        </li>
+                      <?php } ?>
+
+                    </ul>
+                    <?php if ($strategy['image']) : ?>
+                      <div class="py-8 space-y-4 lg:w-1/2 mx-auto">
+                        <img src="<?php echo get_template_directory_uri() . '/assets/images/bgs/' . $strategy['image'] ?>" alt="Strategy Info Image">
+                      </div>
+                    <?php endif; ?>
+
+                  </div>
+                </div>
+              </li>
+
+
+            <?php } ?>
+
+          </ul>
+        </div>
+
+      </div>
+    </nav>
+
+    <!-- Helpful Tips -->
+    <div class="p-4">
+      <div class="p-4 space-y-4 w-full text-white bg-cadet-900 shadow-md">
+        <p class="font-medium">Helpful tips:</p>
+        <ul class="list-disc px-4 space-y-2">
+          <li>Get a year-long calendar or planner. You can usually get these at the college or university bookstore.</li>
+          <li>Have a monthly or weekly calendar on your wall so you can see it every day.</li>
+          <li>Create a weekly study schedule. You should include at least 2-3 hours to study and work on assignments. You can buy student agendas/calendars or use a digital calendar. Free templates are available online at: <a class="underline" href="https://www.calendarpedia.com/weekly-schedule-word-templates.html">Weekly Schedule Template</a></li>
+          <li>Need some motivation? Watch this! <a class="underline" href="http://www.ted.com/talks/angela_lee_duckworth_grit_the_power_of_passion_and_perseverance">The Power of Passion and Perserverance.</a></li>
+        </ul>
+      </div>
+    </div>
+
+
+
+
+  </div>
+
+</article>

templates/internal/support-and-accommodations.php

@@ -0,0 +1,123 @@
+<article>
+
+  <div class="flex flex-col bg-white">
+
+    <!-- Student Needing Accomodations -->
+    <div class="py-4 px-6">
+
+      <p class="font-bold text-red-500">STUDENTS NEEDING ACADMENIC ACCOMODATIONS</p>
+
+      <p class="mt-4 font-medium">
+        Ontario colleges and universities are required to provide a variety of supports for students to help them be successful.
+      </p>
+
+      <ul class="list-disc px-8 space-y-2 py-2">
+
+        <li>Contact your Student Accessibility Centre for more information.</li>
+        <li>For information about the supports that are available and how to access them, the Government of Ontario has several resources online at: <a class="font-medium underline" href="https://www.transitionresourceguide.ca/resources">Transition Resource Guide</a></li>
+        <li>For information about your rights in Ontario colleges and universities, go to: <a class="font-medium underline" href="https://www.ohrc.on.ca/en/opportunity-succeed-achieving-barrier-free-education-students-disabilities/post-secondary-education">Barrier Free Education For Students With Disabilities</a></li>
+
+      </ul>
+
+      <p class="mt-4">
+        The Ontario Native Education Counsellors Association has information about how to get additional supports. Visit: <br> <a class="font-medium underline" href="https://oneca.com/transitions/finding-support-for-school/">Finding Support for School</a> for more information
+      </p>
+
+    </div>
+
+    <!-- Connecting For Success -->
+    <div class="py-4 px-4">
+      <p class="font-bold text-red-500 mb-4">CONNECTING FOR SUCCESS</p>
+
+      <div>
+
+        <div class="p-4 space-y-4 w-full bg-cadet-100 shadow-md">
+
+          <p class="mt-4 font-medium">
+            Everyone needs some help at one time or another. The following are services found in most post-secondary institutions and in the community.
+          </p>
+
+          <ul class="list-disc px-8 space-y-2 py-2">
+            <li>Student services</li>
+            <li>Indigenous support services</li>
+            <li>Finance Office</li>
+            <li>Post-Secondary funding counsellor</li>
+            <li>Academic advisor</li>
+            <li>Mentor / Tutor</li>
+            <li>Health Services</li>
+            <li>FAmily Doctor</li>
+            <li>Your family and friends</li>
+          </ul>
+
+          <p class="mt-4">
+            Use the My Contacts form at <a class="font-medium underline" href="<?= site_url('/resources-and-additional-information/resources-samples/') ?>/">Resources and Additional Information</a> to write down contact information for these people and services.
+          </p>
+
+          <div class="py-8 space-y-4 lg:w-1/4 mx-auto">
+            <img src="<?php echo get_template_directory_uri() . '/assets/images/bgs/you-got-this.png' ?>" alt="You Can Do It">
+          </div>
+
+        </div>
+
+      </div>
+    </div>
+
+    <!-- Quote -->
+    <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">Accessing the available resources in my college such as cultural rooms, the Indigenous student advisor, the campus elder, my peers, my professors, and program coordinator allowed me to create my own support system in the facility that was easily accessible and created a sense of security for myself in this new chapter of my life.</p>
+        <img class="inline h-56 aspect-video object-cover mt-4" src="<?= get_template_directory_uri() ?>/assets/images/people/student_image.png" alt="">
+      </div>
+    </div>
+
+    <!-- Indigenous Support Services -->
+    <div class="p-4">
+      <div class="p-4 space-y-4 w-full text-white bg-cadet-900 shadow-md">
+        <p class="font-medium">Indigenous Support Services</p>
+        <p>Along with student services for all students,
+          Ontario colleges and universities have Indigenous
+          support centres. These centres may offer the
+          following:</p>
+        <ul class="list-disc px-4 space-y-2">
+          <li>Cultural activities</li>
+          <li>Occasional food and drop-in feasts</li>
+          <li>Elder support and guidance</li>
+          <li>Study tips (i.e., essay writing, managing time, meeting deadlines and meeting your personal goals)</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Orientation Activities -->
+    <div class="py-4 px-6">
+
+      <p class="font-bold text-red-500">Orientation Activities</p>
+
+      <ul class="list-disc px-8 space-y-2 py-2">
+
+        <li>College and university programs usually have orientations in September. This is a good place to meet new friends and familiarize yourself with the campus, programs and supports offered by your school.</li>
+        <li>Some orientations for Indigenous students are held off-campus in various urban centres.</li>
+
+      </ul>
+
+    </div>
+
+    <div class="max-w-7xl mx-auto lg:flex flex-col items-center">
+      <div class="italic py-8 px-8 bg-cadet-500 text-cadet-900 space-y-4">
+        <i class="bi-quote text-7xl inline text-cadet-300"></i>
+        <p class="font-medium inline text-xl">Participating in cultural events on my campus allowed
+          me to connect with these supports on a personal level
+          while also connecting to my culture. Connecting to my
+          culture was also important in ensuring my well-being
+          and creating the balance between traditional and
+          contemporary life that many of us Indigenous students
+          often are faced with.</p>
+        <p class="mt-4 mb-2 font-medium">Mackenzie Young, Mattagami First Nation</p>
+        <p>Northern College Graduate – Social Services Program</p>
+      </div>
+    </div>
+
+
+  </div>
+
+</article>

templates/internal/tips-to-increase-income.php

@@ -0,0 +1,25 @@
+<article>
+
+  <div class="py-4 px-6">
+    <p class="font-bold text-red-500">Some things you can do to increase your income</p>
+  </div>
+
+  <div class="flex justify-center max-w-xl mx-auto mb-4">
+    <img class="w-3/5" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/increasing-income.png" alt="The Iceberg Illusion">
+  </div>
+
+  <!-- Income Tips -->
+  <div class="p-4">
+    <div class="p-4 space-y-4 w-full text-white bg-cadet-900 shadow-md">
+      <ul class="list-disc px-4 space-y-2">
+        <li>Get a part-time job as soon possible but remember that education is the priority.</li>
+        <li>Apply for grants, bursaries, and scholarships.</li>
+        <li>Complete your funding applications and visit your post-secondary counsellors.</li>
+        <li>Save money throughout high school.</li>
+        <li>Work during the summer while in high school.</li>
+        <li>Volunteer at events and you might get an honorarium.</li>
+      </ul>
+    </div>
+  </div>
+
+</article>

templates/internal/tips-to-reduce-expenses.php

@@ -0,0 +1,26 @@
+<article>
+
+  <div class="py-4 px-6">
+    <p class="font-bold text-red-500">Some things you can do to reduce your expenses</p>
+  </div>
+
+  <!-- Expenses Tips -->
+  <div class="px-4">
+    <div class="p-4 space-y-4 w-full text-white bg-cadet-900 shadow-md">
+      <ul class="list-disc px-4 space-y-2">
+        <li>Buy what you need, not what you want.</li>
+        <li>Visit your school and community food banks for assistance when needed.</li>
+        <li>Look for coupons to save money on food. (Flipp App is an app for coupons).</li>
+        <li>Look for an all-inclusive apartment with roommates to reduce costs.</li>
+        <li>Limit your spending on expensive clothing. Consider shopping at thrift stores.</li>
+        <li>Share taxi rides or carpool with someone you know.</li>
+        <li>Take the bus. Students usually have a bus pass included with their student fees, so be sure to check with your funders.</li>
+      </ul>
+    </div>
+  </div>
+
+  <div class="flex justify-center max-w-xl mx-auto my-4">
+    <img class="w-4/5 lg:w-1/3" src="<?php echo get_template_directory_uri(); ?>/assets/images/bgs/expense-reduction.png" alt="The Iceberg Illusion">
+  </div>
+
+</article>

templates/partials/page_header.php

@@ -1,4 +1,3 @@
-<!-- Page Header -->
 <?php 
 $current_slug = get_post_field('post_name', get_post());
 

templates/partials/quick_links.php

@@ -1,4 +1,3 @@
-<!-- Quick Links Section -->
 <?php
 
 $current_slug = get_post_field('post_name', get_post());
@@ -8,7 +7,7 @@ $subpages = getSubpagesForSlug($pages, $current_slug);
 if (count($subpages) > 0) { ?>
 
   <!-- Quick Links -->
-  <div class="px-2">
+  <div class="px-2 mt-4">
     <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">