Organised components into directories

src/components/PageStrcture/PageTitle.vue

@@ -0,0 +1,42 @@
+<template>
+  <div class="page-titles">
+    <h1>{{ title }}</h1>
+    <span class="subtitle">{{ description }}</span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'PageTitle',
+  props: {
+    title: String,
+    description: String,
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+.page-titles {
+  display: flex;
+  flex-direction: column;
+  h1 {
+    color: var(--primary);
+    // background: -webkit-linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    // background: linear-gradient(to left top, #9F86FF, #1CA8DD, #007AE1);
+    // -webkit-background-clip: text;
+    // -webkit-text-fill-color: transparent;
+    font-size: 3rem;
+    margin: 0;
+  }
+  span.subtitle {
+    color: var(--primary-transparent);
+    font-style: italic;
+    text-shadow: 1px 1px 2px #130f23;
+  }
+  @media screen and (max-width: 600px) {
+    text-align: center;
+    padding: 0.25rem 0;
+  }
+}
+</style>