rename: banner directory

Author: jalyn-lee

src/components/PageSection.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-col cols="12" md="7" lg="5">
+    <div class="d-flex flex-col justify-between ga-10">
+      <div class="text-sm-left text-center">
+        <slot name="title"></slot>
+      </div>
+
+      <div class="d-flex flex-col ga-3 pr-0 pr-md-10">
+        <v-btn color="secondary" flat>
+          Get ticket now
+        </v-btn>
+        <v-btn variant="outlined" color="secondary" flat>
+          Find out more
+        </v-btn>
+      </div>
+    </div>
+  </v-col>
+</template>
+
+
+<script>
+export default {
+  name: "Banner",
+  props: {
+    title: String,
+    subtitle: String
+  },
+  data() {
+    return {};
+  }
+};
+</script>

src/components/banners/Banner.vue

@@ -77,7 +77,7 @@
 
 <script>
 // import GlobeIcon from './icons/GlobeIcon.vue'
-import { useGlobalStore } from '../store';
+import { useGlobalStore } from '@/store';
 import { mapState } from 'pinia';
 
 export default {

src/components/banners/BannerComingSoon.vue renamed to src/components/banners/ComingSoonBanner.vue

@@ -1,17 +1,18 @@
 export { default as NewsBanner } from './NewsBanner.vue'
 
-
-export { default as Banner } from './banners/Banner.vue'
-export { default as Banner404 } from './banners/Banner404.vue'
-export { default as BannerComingSoon } from './banners/BannerComingSoon.vue'
-export { default as MainBanner } from './banners/MainBanner.vue'
+export { default as MainBanner } from './banners/custom/MainBanner.vue'
+export { default as NotFoundBanner } from './banners/NotFoundBanner.vue'
+export { default as ComingSoonBanner } from './banners/ComingSoonBanner.vue'
 
 export { default as EventCards } from './cards/EventCards.vue'
 export { default as SpeakerCards } from './cards/SpeakerCards.vue'
 
-export { default as PageFooter } from './PageFooter.vue'
-export { default as Navbar } from './Navbar.vue'
-export { default as PageSection } from './PageSection.vue'
+export { default as PageFooter } from './footer/PageFooter.vue'
+
+export { default as Navbar } from './navigation/Navbar.vue'
+
+export { default as PageSection } from './sections/PageSection.vue'
+
 export { default as TabBox } from './TabBox.vue'
 export { default as Sponsors } from './Sponsors.vue'
 export { default as TicketItem } from './TicketItem.vue'

src/components/banners/MainBanner.vue

@@ -7,7 +7,7 @@
       </router-link>
     </template>
 
-    <v-spacer></v-spacer>
+    <v-spacer />
 
     <template v-if="!isXs">
       <router-link v-for="(menu) in menus" :key="menu.name" class="pl-4 router-link" :to="{ path: `/${menu.name}` }">
@@ -45,10 +45,55 @@
 </template>
 
 
+<script setup>
+import { BaseIcon } from '@/components'
+import { useGlobalStore } from '@/store';
+import { mapState } from 'pinia';
+import { watch, onMounted, reactive, ref } from 'vue';
+
+const drawer = ref(null);
+const isXs = ref(false);
+
+const props = defineProps({
+  menus: {
+    type: Array,
+    default: [
+      {
+        name: 'sponsor'
+      },
+      {
+        name: 'events'
+      },
+    ]
+  }
+})
 
-<script>
-import { BaseIcon } from '.'
-import { useGlobalStore } from '../store';
+const pages = reactive(mapState(useGlobalStore, ['pages']))
+
+watch(isXs, value => {
+  if (!value) {
+    if (this.drawer) {
+      this.drawer = false;
+    }
+  }
+})
+
+
+onMounted(() => {
+  onResize();
+  window.addEventListener("resize", onResize, { passive: true });
+})
+
+function onResize() {
+  isXs.value = window.innerWidth < 500;
+}
+
+</script>
+
+
+<!-- <script>
+import { BaseIcon } from '@/components'
+import { useGlobalStore } from '@/store';
 import { mapState } from 'pinia';
 
 export default {
@@ -99,7 +144,7 @@ export default {
   },
 
 }
-</script>
+</script> -->
 
 <style scoped>
 .router-link {

src/components/banners/Banner404.vue renamed to src/components/banners/NotFoundBanner.vue

@@ -0,0 +1,66 @@
+<template>
+  <v-row :class="bg ? `bg-${bg}` : ''">
+    <v-responsive class="mx-auto py-10" max-width="960">
+      <h2>{{ props.title }}</h2>
+      <slot></slot>
+    </v-responsive>
+  </v-row>
+</template>
+
+
+<script setup>
+import { useGlobalStore } from '@/store';
+import { mapState } from 'pinia';
+
+const props = defineProps({
+  titleId: {
+    type: String,
+    required: true
+  },
+  title: {
+    type: String,
+    default: ''
+  },
+  subtitle: {
+    type: String
+  },
+  body: {
+    type: String,
+    default: ''
+  },
+  fullWidth: {
+    type: Boolean,
+    default: false
+  },
+  bg: {
+    type: String
+  }
+})
+
+</script>
+
+
+<style scoped>
+a.anchor {
+  display: block;
+  position: relative;
+  top: -15vh;
+  visibility: hidden;
+}
+
+h2::before {
+  display: block;
+  content: " ";
+  margin-top: -50px;
+  height: 50px;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+@media screen and (max-width: 1280px) {
+  h2::before {
+    margin-top: -80px;
+    height: 80px;
+  }
+}
+</style>