124 lines
3.1 KiB
Vue
124 lines
3.1 KiB
Vue
|
<script setup>
|
|||
|
|
import Footer from '@/views/front-pages/front-page-footer.vue'
|
|||
|
|
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
|||
|
|
import HelpCenterLandingArticlesOverview from '@/views/pages/help-center/HelpCenterLandingArticlesOverview.vue'
|
|||
|
|
import HelpCenterLandingFooter from '@/views/pages/help-center/HelpCenterLandingFooter.vue'
|
|||
|
|
import HelpCenterLandingKnowledgeBase from '@/views/pages/help-center/HelpCenterLandingKnowledgeBase.vue'
|
|||
|
|
import { useConfigStore } from '@core/stores/config'
|
|||
|
|
|
|||
|
|
// fetching data from fake-api
|
|||
|
|
const store = useConfigStore()
|
|||
|
|
|
|||
|
|
store.skin = 'default'
|
|||
|
|
definePage({
|
|||
|
|
meta: {
|
|||
|
|
layout: 'blank',
|
|||
|
|
public: true,
|
|||
|
|
},
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const apiData = ref()
|
|||
|
|
|
|||
|
|
// // ℹ️ Check if MSW service worker is registered and ready to intercept requests
|
|||
|
|
setTimeout(async () => {
|
|||
|
|
const faqData = await $api('/pages/help-center')
|
|||
|
|
|
|||
|
|
apiData.value = faqData
|
|||
|
|
}, 1000)
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<div class="help-center-page">
|
|||
|
|
<Navbar />
|
|||
|
|
<div v-if="apiData && apiData.allArticles.length">
|
|||
|
|
<AppSearchHeader
|
|||
|
|
subtitle="Common troubleshooting topics: eCommerce, Blogging to payment"
|
|||
|
|
custom-class="rounded-0"
|
|||
|
|
placeholder="Search"
|
|||
|
|
>
|
|||
|
|
<template #title>
|
|||
|
|
<h4
|
|||
|
|
class="text-h4 font-weight-medium"
|
|||
|
|
style="color: rgba(var(--v-theme-primary), 1);"
|
|||
|
|
>
|
|||
|
|
Hello, how can we help?
|
|||
|
|
</h4>
|
|||
|
|
</template>
|
|||
|
|
</AppSearchHeader>
|
|||
|
|
|
|||
|
|
<!-- 👉 Popular Articles -->
|
|||
|
|
<div class="help-center-section bg-surface">
|
|||
|
|
<VContainer>
|
|||
|
|
<h4 class="text-h4 text-center mb-6">
|
|||
|
|
Popular Articles
|
|||
|
|
</h4>
|
|||
|
|
<HelpCenterLandingArticlesOverview :articles="apiData.popularArticles" />
|
|||
|
|
</VContainer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 👉 Knowledge Base -->
|
|||
|
|
<div class="help-center-section">
|
|||
|
|
<VContainer>
|
|||
|
|
<h4 class="text-h4 text-center mb-6">
|
|||
|
|
Knowledge Base
|
|||
|
|
</h4>
|
|||
|
|
<HelpCenterLandingKnowledgeBase :categories="apiData.allArticles" />
|
|||
|
|
</VContainer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 👉 Keep Learning -->
|
|||
|
|
<div class="help-center-section bg-surface">
|
|||
|
|
<VContainer>
|
|||
|
|
<h4 class="text-h4 text-center mb-6">
|
|||
|
|
Keep Learning
|
|||
|
|
</h4>
|
|||
|
|
<HelpCenterLandingArticlesOverview :articles="apiData.keepLearning" />
|
|||
|
|
</VContainer>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 👉 Still need help? -->
|
|||
|
|
<div class="help-center-section">
|
|||
|
|
<HelpCenterLandingFooter />
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div>
|
|||
|
|
<Footer />
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.help-center-page {
|
|||
|
|
.search-header {
|
|||
|
|
background-size: cover !important;
|
|||
|
|
padding-block: 9.25rem 4.75rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-center-section {
|
|||
|
|
padding-block: 5.25rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 960px) and (min-width: 600px) {
|
|||
|
|
.help-center-page {
|
|||
|
|
.v-container {
|
|||
|
|
padding-inline: 2rem !important;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 599px) {
|
|||
|
|
.help-center-page {
|
|||
|
|
.search-header {
|
|||
|
|
padding-block: 7rem 2rem !important;
|
|||
|
|
padding-inline: 2rem !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.help-center-section {
|
|||
|
|
padding-block: 3.5rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|