From 5907bf3d7d9a63a900d9ea98c1c7fc1d0ff5c19e Mon Sep 17 00:00:00 2001
From: neveTsyUU <steven_yu@dlsu.edu.ph>
Date: Sun, 6 Aug 2023 18:57:05 +0800
Subject: [PATCH] about page (tell me if i forgot something there)  -> Posted
 at main

---
 src/components/NavigationBar.vue |  3 ++
 src/router/index.js              |  6 ++++
 src/views/AboutView.vue          | 55 ++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+)
 create mode 100644 src/views/AboutView.vue

diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index 62ce5970..17475a74 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -64,6 +64,9 @@ defineProps({
         <div class="navbar-item" id="search-bar">
             <SearchBar />
         </div>
+        <div class="navbar-item" id="about-us">
+            <RouterLink to="/about" id="about-link">About Compact Discs</RouterLink>
+        </div>
         <div class="navbar-item" v-if="loggedInStore.username" id="user-panel">
             <span v-if="useMediaQuery('(min-width: 1024px)').value">
                 <span>{{ dayMessage() }}, </span>
diff --git a/src/router/index.js b/src/router/index.js
index 692a9c00..5357db7f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -45,6 +45,12 @@ const router = createRouter({
             component: SearchView,
             props: (route) => ({ query: route.query.q })
         },
+        {
+            path: '/about',
+            name: 'about',
+            component: AboutView,
+            props: true
+        },
         {
             path: '/profile/:username',
             name: 'profile',
diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
new file mode 100644
index 00000000..f92ebb16
--- /dev/null
+++ b/src/views/AboutView.vue
@@ -0,0 +1,55 @@
+<script setup>
+import { useMediaQuery } from '@vueuse/core'
+import { Waypoint } from 'vue-waypoint'
+
+// Import components
+import NavigationBar from '../components/NavigationBar.vue'
+//import ThemeSwitch from '../components/ThemeSwitch.vue'
+
+</script>
+
+
+<template>
+    <NavigationBar />
+    <div id="details">
+        <h1> Facts About Compact Discs </h1>
+        <h4></h4>
+        <h2> About: </h2>
+        <h4> - Compact Discs is a forum web application created in fulfillment for the course Web Application Development (CCAPDEV). </h4>
+        <h4> - This web application is made using HTML, CSS, JavaScript following the Vue Framework. </h4>
+        <h4> - Other tools used include MongoDB, NodeJS, Azure Websites, GitHub, Microsoft VS Code</h4>
+        <h4></h4>
+        <h2> Goal: </h2>
+        <h4> - The goal of Compact Discs is to allow users to share their thoughts in a forum that will help create sweet and memorable experiences for all to see. </h4>
+        <h4></h4>
+        <h2> NPM Packages and Third-Patry Libraries Used: </h2>
+        <h4> - dev: vite</h4>
+        <h3> dependencies </h3>
+        <h4> - @vueuse/core: ^10.2.0 </h4>
+        <h4> - dotenv: ^16.3.1</h4>
+        <h4> - jwt-decode: ^3.1.2</h4>
+        <h4> - moment: ^2.29.4</h4>
+        <h4> - pinia: ^2.0.36</h4>
+        <h4> - vite-plugin-vuetify: ^1.0.2</h4>
+        <h4> - vue: ^3.3.4</h4>
+        <h4> - vue-cookies: ^1.8.3</h4>
+        <h4> - vue-router: ^4.2.0</h4>
+        <h4> - vue-waypoint: ^4.2.5</h4>
+        <h4> - vuetify: ^3.3.5</h4>
+        <h4></h4>
+        <h1> The Compact Discs team appreciates you for using this forum page!</h1>
+
+    </div>
+</template>
+
+<style scoped>
+    .details{
+        width: 100%;
+        border-radius: 5px;
+        border: none;
+        font-size: 1.5rem;
+        font-weight: 700;
+        color: var(--color-dark-pink);
+        outline: none;
+    }
+</style>
\ No newline at end of file