About and faq pages

src/web/src/pages/About.vue

@@ -0,0 +1,100 @@
+<template>
+  <b-container fluid>
+    <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
+    <div class="centered-boxes">
+      <div class="column-section">
+        <div class="categoryBox border m-2 mb-4">
+          <h3 class="category-title">What is Yacs?</h3>
+          <p>Yet Another Course Scheduler, or better known as Yacs, was created with the goal of making students' lives a little easier. It allows users to avoid the clunky UIs of proprietary Catalog Management and Student Information Systems, replacing these unpleasant experiences with easy browsing and searching of courses, and adds the additional functionality of easy schedule generation, and much more.</p>
+          <p>But Yacs has grown to be much more than a simple schedule generator. Our mission at Yacs is the following:</p>
+          <ol>
+            <li class = li-inner-element>To alleviate the stress around academic and extracurricular planning for Students, Faculty and Staff by offering a free, easy-to-use interface to supplement or replace traditional academic information and management systems.</li>
+            <li class = li-inner-element>To enable innovative, disruptive applications in the academic space by breaking down proprietary information silos and providing consistent, digestible, Open Data.</li>
+            <li>To empower students to take control of their academic experience and excel their careers through learning about and contributing to Open Source.</li>
+          </ol>
+          <p>Further, Yacs aims to provide the best experience possible to as many people as possible by serving as many universities as we can. Yacs is built from the ground up to be modular and flexible, and as such can use data from any source, and even combine data from many sources in an intelligent way.</p>
+          <p>We have made it as easy as possible to connect Yacs to your university, and have designed this process to be accessible to developers of nearly any skill level. Please read through this documentation or contact us if you'd like to bring Yacs to your school, and help us make Yacs as great as it can be.</p>
+          <p>Yacs owes its creation and continued maintenance to <a href="https://new.rcos.io/">RCOS</a>, the Rensselaer Center for Open Source, and is developed in collaboration with <a href="https://bugsnyu.com/">BUGS</a>, NYU&apos;s Open Source Club.</p>
+        </div>
+      </div>
+    </div>
+    <div class="centered-boxes">
+      <div class="column-section">
+        <div class="categoryBox border m-2 mb-4">
+          <h3 class="category-title">What can Yacs do?</h3>
+          <p>Yacs has a variety of features that include but are not limited to:</p>
+          <ul>
+            <li>Allow students to view courses from the current and previous semesters</li>
+            <li>Allow students to create a mock schedule using their desired courses</li>
+            <li>Allow students to view information and requirements of current HASS pathways</li>
+            <li>Allow students to view information on RPI professors</li>
+            <li>Allow students to make a mock schedule for their final exams</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="centered-boxes">
+      <div class="column-section">
+        <div class="categoryBox border m-2 mb-4">
+          <h3 class="category-title">How to Contribute</h3>
+          <p>The Yacs team has conviently created an <a href="https://github.com/YACS-RCOS/yacs.n-onboarding/blob/main/YACS.n%20onboarding%20guide.pdf">onboarding guide</a> for your personal use!</p>
+          <p>Documentation for Yacs can be found <a href="https://github.com/YACS-RCOS/docs">here</a>. For ease of use, documentation is divided into the following subsections:</p>
+          <ul>
+            <li>Contributing: Here you will find installation instructions, project management information, and tips on how and where to get started.</li>
+            <li>Architecture: Here you will find the nitty-gritty details about how Yacs works. This is a useful resource if you are looking to tackle a larger issue, or want to work towards bringing Yacs to your university.</li>
+            <li>User Guides: This section contains user guides specific to each of the roles that use yacs. This section is currenrly under construction.</li>
+            <li>API: Yacs has a public API which can be used to build all sorts of interesting, useful, or silly applications using the power of open data. If you have an idea for something to build using the Yacs API, or are looking for inspiration, we'd love to hear from you!</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+
+
+<script>
+export default {
+data() {
+  return {
+    breadcrumbNav: [
+      {
+        text: "YACS",
+        to: "/",
+      },
+      {
+        text: "About",
+      },
+    ],
+  };
+},
+};
+</script>
+
+<style>
+.category-title {
+  color: hsl(211, 100%, 60%);
+  background: rgba(108, 90, 90, 0.15);
+  border-bottom: rgba(108, 90, 90, 0.1) solid 1px;
+  padding: 10px; /* Add padding to match the background */
+  margin-top: 0; /* Remove default margin */
+}
+
+.centered-boxes {
+  display: flex;
+  justify-content: center;
+  margin-bottom: 20px; /* Adjust spacing between boxes */
+}
+
+.column-section {
+  width: 70%;
+}
+
+p {
+  margin: 10px;
+}
+
+.li-inner-element {
+  padding-bottom: 10px;
+}
+</style>

src/web/src/pages/FAQ.vue

@@ -0,0 +1,79 @@
+<template>
+  <b-container fluid>
+    <b-breadcrumb :items="breadcrumbNav"></b-breadcrumb>
+    <div class="centered-boxes">
+      <div class="column-section">
+        <div class="categoryBox border m-2 mb-4">
+          <h3 class="category-title">Can I bring Yacs to my school?</h3>
+          <p>Yes! You can view the documentation or contact us to help bring Yacs to your school or University</p>
+          <h3 class="category-title">Who can contribute to Yacs?</h3>
+          <p>Anyone can contribute to Yacs by creating commits, issues, or pull requests</p>
+          <h3 class="category-title">How can I download my course schedule from Yacs?</h3>
+          <p>Scroll to the bottom of the schedule page, and select the "Export Data" button next to where your current credit load is displayed</p>
+          <h3 class="category-title">Can I see schedules from previous semesters?</h3>
+          <p>Yes! You can view, edit, and even create new schedules for prior semesters that have course data uploaded to Yacs</p>
+          <h3 class="category-title">Can Yacs tell me if I am ineligble for a course due to my major, minor, or prerequisites?</h3>
+          <p>No, at this moment Yacs does not have the capability to tell users this information. If you would like to check this information, we advise looking at SIS or the RPI course website</p>
+        </div>
+      </div>
+    </div>
+  </b-container>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      breadcrumbNav: [
+        {
+          text: "YACS",
+          to: "/",
+        },
+        {
+          text: "FAQ",
+        },
+      ],
+    };
+  },
+};
+</script>
+
+  <style>
+  .gridContainer {
+    display: inline-grid;
+    grid-template-columns: auto auto;
+    justify-content: center;
+    align-content: center;
+  }
+
+  .categoryBox {
+    text-align: center;
+  }
+
+  .category-title {
+    color: hsl(211, 100%, 60%);
+    background: rgba(108, 90, 90, 0.15);
+    border-bottom: rgba(108, 90, 90, 0.1), solid, 1px;
+  }
+
+  .pathway-button {
+    display: inline-block;
+    background: white;
+    border-style: none;
+    text-align: justify;
+    width: 95%;
+  }
+
+  .pathway-button:hover {
+    background: rgba(108, 90, 90, 0.15) !important;
+  }
+
+  .courseInPath {
+    cursor: pointer;
+  }
+
+  .courseInPath:hover {
+    background-color: rgba(39, 130, 230, 0.5);
+  }
+  </style>
+

src/web/src/routes.js

@@ -13,6 +13,8 @@ const PathwayPage = () => import("./pages/Pathway");
 const SubjectExplorerPage = () => import("./pages/SubjectExplorer");
 const NotFoundPage = () => import("./pages/NotFound");
 const FinalExamScheduler = () => import("./pages/FinalExamScheduler");
+const AboutPage = () => import("./pages/About");
+const FAQPage = () => import("./pages/FAQ");
 
 var router = new VueRouter({
   routes: [
@@ -72,6 +74,18 @@ var router = new VueRouter({
           name: "ProfPage",
           props: true,
         },
+        {
+          path: "/about",
+          component: AboutPage,
+          name: "About",
+          props: true,
+        },
+        {
+          path: "/faq",
+          component: FAQPage,
+          name: "FAQ",
+          props: true,
+        },
       ],
     },
     {