Added about page.

frontend/components/MainHeader.vue

@@ -22,6 +22,9 @@
 			<a class="nav-item is-tab" href="#" v-link="{ path: '/team' }">
 				Team
 			</a>
+			<a class="nav-item is-tab" href="#" v-link="{ path: '/about' }">
+				About
+			</a>
 			<a class="nav-item is-tab" href="#" v-link="{ path: '/news' }">
 				News
 			</a>

frontend/components/pages/About.vue

@@ -0,0 +1,75 @@
+<template>
+	<div class='app'>
+		<main-header></main-header>
+		<div class='container'>
+			<div class='card is-fullwidth'>
+				<header class='card-header'>
+					<p class='card-header-title'>
+						The project
+					</p>
+				</header>
+				<div class='card-content'>
+					<div class='content'>
+						<p>
+							Musare is an open-source music website where you can listen to real-time genre specific music stations, or join community stations created by users.
+						</p>
+					</div>
+				</div>
+			</div>
+			<div class='card is-fullwidth'>
+				<header class='card-header'>
+					<p class='card-header-title'>
+						How you can help
+					</p>
+				</header>
+				<div class='card-content'>
+					<div class='content'>
+						<p>
+							There are multiple ways you can help us:
+							<ol>
+								<li>
+									Reporting bugs. No website is perfect, but we try to eliminate as many bugs as possible.
+									If you find a bug, we would highly appreciate it if you could create an issue on the GitHub project with steps to reproduce the issue, so we can fix it as soon as possible.
+								</li>
+								<li>
+									Sending us feedback. Your comments and/or suggestions are extremely valuable to us. In order to improve
+									we need to know what you like, don't like and what you might want on the website.
+								</li>
+								<li>
+									Sharing the joy. The more people enjoying Musare, the better.
+									Telling your friends or relatives about Musare would increase the amount of users we have, which would motivate us and cause Musare to grow faster.
+								</li>
+							</ol>
+						</p>
+					</div>
+				</div>
+			</div>
+		</div>
+		<main-footer></main-footer>
+	</div>
+</template>
+
+<script>
+	import MainHeader from '../MainHeader.vue';
+	import MainFooter from '../MainFooter.vue';
+	import io from '../../io';
+
+	export default {
+		components: { MainHeader, MainFooter },
+		methods: {
+
+		},
+		data() {
+			return {
+
+			}
+		},
+		ready: function () {
+
+		}
+	}
+</script>
+
+<style lang='scss' scoped>
+	.card { margin-top: 50px; }
+</style>

frontend/main.js

@@ -9,6 +9,7 @@ import Home from './components/pages/Home.vue';
 import Station from './components/Station/Station.vue';
 import Admin from './components/pages/Admin.vue';
 import News from './components/pages/News.vue';
+import About from './components/pages/About.vue';
 import Terms from './components/pages/Terms.vue';
 import Privacy from './components/pages/Privacy.vue';
 import Team from './components/pages/Team.vue';
@@ -80,6 +81,9 @@ router.map({
 	'/news': {
 		component: News
 	},
+	'/about': {
+		component: About
+	},
 	'/u/:username': {
 		component: User
 	},