Initial commit
This commit is contained in:
169
resources/js/pages/front-pages/checkout.vue
Normal file
169
resources/js/pages/front-pages/checkout.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import AddressContent from '@/views/wizard-examples/checkout/Address.vue'
|
||||
import CartContent from '@/views/wizard-examples/checkout/Cart.vue'
|
||||
import ConfirmationContent from '@/views/wizard-examples/checkout/Confirmation.vue'
|
||||
import PaymentContent from '@/views/wizard-examples/checkout/Payment.vue'
|
||||
import googleHome from '@images/pages/google-home.png'
|
||||
import iphone11 from '@images/pages/iphone-11.png'
|
||||
import customAddress from '@images/svg/address.svg'
|
||||
import customCart from '@images/svg/cart.svg'
|
||||
import customPayment from '@images/svg/payment.svg'
|
||||
import customTrending from '@images/svg/trending.svg'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
|
||||
const checkoutSteps = [
|
||||
{
|
||||
title: 'Cart',
|
||||
icon: customCart,
|
||||
},
|
||||
{
|
||||
title: 'Address',
|
||||
icon: customAddress,
|
||||
},
|
||||
{
|
||||
title: 'Payment',
|
||||
icon: customPayment,
|
||||
},
|
||||
{
|
||||
title: 'Confirmation',
|
||||
icon: customTrending,
|
||||
},
|
||||
]
|
||||
|
||||
const checkoutData = ref({
|
||||
cartItems: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Google - Google Home - White',
|
||||
seller: 'Google',
|
||||
inStock: true,
|
||||
rating: 4,
|
||||
price: 299,
|
||||
discountPrice: 359,
|
||||
image: googleHome,
|
||||
quantity: 1,
|
||||
estimatedDelivery: '18th Nov 2021',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Apple iPhone 11 (64GB, Black)',
|
||||
seller: 'Apple',
|
||||
inStock: true,
|
||||
rating: 4,
|
||||
price: 899,
|
||||
discountPrice: 999,
|
||||
image: iphone11,
|
||||
quantity: 1,
|
||||
estimatedDelivery: '20th Nov 2021',
|
||||
},
|
||||
],
|
||||
promoCode: '',
|
||||
orderAmount: 1198,
|
||||
deliveryAddress: 'home',
|
||||
deliverySpeed: 'free',
|
||||
deliveryCharges: 0,
|
||||
addresses: [
|
||||
{
|
||||
title: 'John Doe (Default)',
|
||||
desc: '4135 Parkway Street, Los Angeles, CA, 90017',
|
||||
subtitle: '1234567890',
|
||||
value: 'home',
|
||||
},
|
||||
{
|
||||
title: 'ACME Inc.',
|
||||
desc: '87 Hoffman Avenue, New York, NY, 10016',
|
||||
subtitle: '1234567890',
|
||||
value: 'office',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const currentStep = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="checkout-page">
|
||||
<Navbar />
|
||||
<VContainer>
|
||||
<div class="checkout-card">
|
||||
<VCard>
|
||||
<VCardText>
|
||||
<!-- 👉 Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
class="checkout-stepper"
|
||||
:items="checkoutSteps"
|
||||
:direction="$vuetify.display.mdAndUp ? 'horizontal' : 'vertical'"
|
||||
align="center"
|
||||
/>
|
||||
</VCardText>
|
||||
<VDivider />
|
||||
<VCardText>
|
||||
<!-- 👉 stepper content -->
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
:touch="false"
|
||||
>
|
||||
<VWindowItem>
|
||||
<CartContent
|
||||
v-model:current-step="currentStep"
|
||||
v-model:checkout-data="checkoutData"
|
||||
/>
|
||||
</VWindowItem>
|
||||
<VWindowItem>
|
||||
<AddressContent
|
||||
v-model:current-step="currentStep"
|
||||
v-model:checkout-data="checkoutData"
|
||||
/>
|
||||
</VWindowItem>
|
||||
<VWindowItem>
|
||||
<PaymentContent
|
||||
v-model:current-step="currentStep"
|
||||
v-model:checkout-data="checkoutData"
|
||||
/>
|
||||
</VWindowItem>
|
||||
<VWindowItem>
|
||||
<ConfirmationContent v-model:checkout-data="checkoutData" />
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VContainer>
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.checkout-card {
|
||||
margin-block: 10.5rem 5.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 960px) and (min-width: 600px) {
|
||||
.checkout-page {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.checkout-card {
|
||||
margin-block-start: 6rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
156
resources/js/pages/front-pages/help-center/article/[title].vue
Normal file
156
resources/js/pages/front-pages/help-center/article/[title].vue
Normal file
@@ -0,0 +1,156 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const articleData = ref()
|
||||
|
||||
setTimeout(async () => {
|
||||
const { data, error } = await useApi('/pages/help-center/article')
|
||||
if (error.value)
|
||||
console.log(error.value)
|
||||
else
|
||||
articleData.value = data.value
|
||||
}, 1000)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div class="bg-surface help-center-article">
|
||||
<!-- 👉 Navbar -->
|
||||
<Navbar />
|
||||
|
||||
<!-- 👉 Content -->
|
||||
<VContainer>
|
||||
<div
|
||||
v-if="articleData && articleData?.title"
|
||||
class="article-section"
|
||||
>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
>
|
||||
<div>
|
||||
<VBreadcrumbs
|
||||
class="px-0 pb-2 pt-0 help-center-breadcrumbs"
|
||||
:items="[{ title: 'Help Center', to: { name: 'front-pages-help-center' }, class: 'text-primary' }, { title: 'how to add product in cart' }]"
|
||||
/>
|
||||
<h4 class="text-h4 mb-2">
|
||||
{{ articleData?.title }}
|
||||
</h4>
|
||||
<div class="text-body-1">
|
||||
{{ articleData?.lastUpdated }}
|
||||
</div>
|
||||
</div>
|
||||
<VDivider class="my-6" />
|
||||
<!-- eslint-disable vue/no-v-html -->
|
||||
<div
|
||||
class="mb-6 text-body-1"
|
||||
v-html="articleData?.productContent"
|
||||
/>
|
||||
<VImg
|
||||
class="rounded-lg"
|
||||
:src="articleData?.productImg"
|
||||
/>
|
||||
<p class="my-6 text-body-1">
|
||||
{{ articleData?.checkoutContent }}
|
||||
</p>
|
||||
<VImg
|
||||
class="rounded-lg"
|
||||
:src="articleData?.checkoutImg"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<VTextField
|
||||
prepend-inner-icon="tabler-search"
|
||||
placeholder="Search..."
|
||||
class="mb-6"
|
||||
/>
|
||||
<div>
|
||||
<!-- 👉 Article List -->
|
||||
<h5
|
||||
class="text-h5 px-6 py-2 mb-4 rounded"
|
||||
style="background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));"
|
||||
>
|
||||
Articles in this section
|
||||
</h5>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(item, index) in articleData?.articleList"
|
||||
:key="index"
|
||||
link
|
||||
class="text-disabled"
|
||||
>
|
||||
<template #append>
|
||||
<VIcon
|
||||
:icon="$vuetify.locale.isRtl ? 'tabler-chevron-left' : 'tabler-chevron-right'"
|
||||
size="20"
|
||||
/>
|
||||
</template>
|
||||
<div class="text-body-1 text-high-emphasis">
|
||||
{{ item }}
|
||||
</div>
|
||||
</VListItem>
|
||||
</VList>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.article-section {
|
||||
margin-block: 10.5rem 5.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.article-section {
|
||||
margin-block-start: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-list {
|
||||
--v-card-list-gap: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@media (max-width: 960px) and (min-width: 600px) {
|
||||
.help-center-article {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.help-center-breadcrumbs {
|
||||
&.v-breadcrumbs {
|
||||
.v-breadcrumbs-item {
|
||||
padding: 0 !important;
|
||||
|
||||
&.v-breadcrumbs-item--disabled {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
resources/js/pages/front-pages/help-center/index.vue
Normal file
123
resources/js/pages/front-pages/help-center/index.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<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>
|
||||
98
resources/js/pages/front-pages/landing-page/index.vue
Normal file
98
resources/js/pages/front-pages/landing-page/index.vue
Normal file
@@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import Banner from '@/views/front-pages/landing-page/banner.vue'
|
||||
import ContactUs from '@/views/front-pages/landing-page/contact-us.vue'
|
||||
import CustomersReview from '@/views/front-pages/landing-page/customers-review.vue'
|
||||
import FaqSection from '@/views/front-pages/landing-page/faq-section.vue'
|
||||
import Features from '@/views/front-pages/landing-page/features.vue'
|
||||
import HeroSection from '@/views/front-pages/landing-page/hero-section.vue'
|
||||
import OurTeam from '@/views/front-pages/landing-page/our-team.vue'
|
||||
import PricingPlans from '@/views/front-pages/landing-page/pricing-plans.vue'
|
||||
import ProductStats from '@/views/front-pages/landing-page/product-stats.vue'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const activeSectionId = ref()
|
||||
const refHome = ref()
|
||||
const refFeatures = ref()
|
||||
const refTeam = ref()
|
||||
const refContact = ref()
|
||||
const refFaq = ref()
|
||||
|
||||
useIntersectionObserver([
|
||||
refHome,
|
||||
refFeatures,
|
||||
refTeam,
|
||||
refContact,
|
||||
refFaq,
|
||||
], ([{ isIntersecting, target }]) => {
|
||||
if (isIntersecting)
|
||||
activeSectionId.value = target.id
|
||||
}, { threshold: 0.25 })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="landing-page-wrapper">
|
||||
<Navbar :active-id="activeSectionId" />
|
||||
|
||||
<!-- 👉 Hero Section -->
|
||||
<HeroSection ref="refHome" />
|
||||
|
||||
<!-- 👉 Useful features -->
|
||||
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
||||
<Features ref="refFeatures" />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Customer Review -->
|
||||
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
||||
<CustomersReview />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Our Team -->
|
||||
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
||||
<OurTeam ref="refTeam" />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Pricing Plans -->
|
||||
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
||||
<PricingPlans />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Product stats -->
|
||||
<ProductStats />
|
||||
|
||||
<!-- 👉 FAQ Section -->
|
||||
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
||||
<FaqSection ref="refFaq" />
|
||||
</div>
|
||||
|
||||
<!-- 👉 Banner -->
|
||||
<Banner />
|
||||
|
||||
<!-- 👉 Contact Us -->
|
||||
<ContactUs ref="refContact" />
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<Footer />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@media (max-width: 960px) and (min-width: 600px) {
|
||||
.landing-page-wrapper {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
308
resources/js/pages/front-pages/payment.vue
Normal file
308
resources/js/pages/front-pages/payment.vue
Normal file
@@ -0,0 +1,308 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import paypalDark from '@images/icons/payments/img/paypal-dark.png'
|
||||
import paypalLight from '@images/icons/payments/img/paypal-light.png'
|
||||
import visaDark from '@images/icons/payments/img/visa-dark.png'
|
||||
import visaLight from '@images/icons/payments/img/visa-light.png'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
|
||||
const visa = useGenerateImageVariant(visaLight, visaDark)
|
||||
const paypal = useGenerateImageVariant(paypalLight, paypalDark)
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const radioContent = [
|
||||
{
|
||||
title: 'Credit Card',
|
||||
value: 'credit card',
|
||||
images: visa.value,
|
||||
},
|
||||
{
|
||||
title: 'PayPal',
|
||||
value: 'paypal',
|
||||
images: paypal.value,
|
||||
},
|
||||
]
|
||||
|
||||
const selectedRadio = ref('credit card')
|
||||
const selectedCountry = ref('USA')
|
||||
const isPricingPlanDialogVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- eslint-disable vue/attribute-hyphenation -->
|
||||
|
||||
<div class="payment-page">
|
||||
<!-- 👉 Navbar -->
|
||||
<Navbar />
|
||||
|
||||
<!-- 👉 Payment card -->
|
||||
<VContainer>
|
||||
<div class="d-flex justify-center align-center payment-card">
|
||||
<VCard width="100%">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="7"
|
||||
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
|
||||
>
|
||||
<VCardText class="pa-8 pe-5">
|
||||
<!-- Checkout header -->
|
||||
<div>
|
||||
<h4 class="text-h4 mb-2">
|
||||
Checkout
|
||||
</h4>
|
||||
<div class="text-body-1">
|
||||
All plans include 40+ advanced tools and features to boost your product. Choose the best plan to fit your needs.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<CustomRadios
|
||||
v-model:selected-radio="selectedRadio"
|
||||
:radio-content="radioContent"
|
||||
:grid-column="{ cols: '12', sm: '6' }"
|
||||
class="my-8"
|
||||
>
|
||||
<template #default="{ item }">
|
||||
<div class="d-flex align-center gap-x-4 ms-3">
|
||||
<img
|
||||
:src="item.images"
|
||||
height="34"
|
||||
>
|
||||
<h6 class="text-h6">
|
||||
{{ item.title }}
|
||||
</h6>
|
||||
</div>
|
||||
</template>
|
||||
</CustomRadios>
|
||||
|
||||
<!-- billing Details -->
|
||||
<div class="mb-8">
|
||||
<h4 class="text-h4 mb-6">
|
||||
Billing Details
|
||||
</h4>
|
||||
<VForm>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
label="Email Address"
|
||||
type="email"
|
||||
placeholder="johndoe@email.com"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
label="Password"
|
||||
type="password"
|
||||
placeholder="············"
|
||||
autocomplete="on"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppSelect
|
||||
v-model="selectedCountry"
|
||||
label="Billing Country"
|
||||
:items="['USA', 'Canada', 'UK', 'AUS']"
|
||||
/>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
label="Billing Zip/Postal Code"
|
||||
type="number"
|
||||
placeholder="129211"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</div>
|
||||
|
||||
<!-- Credit card info -->
|
||||
<div
|
||||
class="mb-8"
|
||||
:class="selectedRadio === 'paypal' ? 'd-none' : 'd-block'"
|
||||
>
|
||||
<h4 class="text-h4 mb-6">
|
||||
Credit Card Info
|
||||
</h4>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<AppTextField
|
||||
label="Card Number"
|
||||
placeholder="8787 2345 3458"
|
||||
type="number"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AppTextField
|
||||
label="Card Holder"
|
||||
placeholder="John Doe"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AppTextField
|
||||
label="Exp. date"
|
||||
placeholder="05/2020"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
>
|
||||
<AppTextField
|
||||
label="CVV"
|
||||
type="number"
|
||||
placeholder="784"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="5"
|
||||
>
|
||||
<VCardText class="pa-8 ps-5">
|
||||
<!-- order summary -->
|
||||
<div class="mb-8">
|
||||
<h4 class="text-h4 mb-2">
|
||||
Order Summary
|
||||
</h4>
|
||||
<div class="text-body-1">
|
||||
It can help you manage and service orders before, during, and after fulfillment.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VCard
|
||||
flat
|
||||
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="text-body-1">
|
||||
A simple start for everyone
|
||||
</div>
|
||||
<h1 class="text-h1 my-4">
|
||||
$59.99<span class="text-body-1 font-weight-medium">/month</span>
|
||||
</h1>
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
block
|
||||
@click="isPricingPlanDialogVisible = !isPricingPlanDialogVisible"
|
||||
>
|
||||
Change Plan
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
|
||||
<div class="my-5">
|
||||
<div class="d-flex justify-space-between mb-2">
|
||||
<span>Subscription</span>
|
||||
<h6 class="text-h6">
|
||||
$85.99
|
||||
</h6>
|
||||
</div>
|
||||
<div class="d-flex justify-space-between">
|
||||
<span>Tax</span>
|
||||
<h6 class="text-h6">
|
||||
$4.99
|
||||
</h6>
|
||||
</div>
|
||||
<VDivider class="my-4" />
|
||||
<div class="d-flex justify-space-between">
|
||||
<span>Total</span>
|
||||
<h6 class="text-h6">
|
||||
$90.98
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
color="success"
|
||||
class="mb-8"
|
||||
>
|
||||
<template #append>
|
||||
<VIcon
|
||||
icon="tabler-arrow-right"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</template>
|
||||
Proceed With Payment
|
||||
</VBtn>
|
||||
|
||||
<div class="text-body-1">
|
||||
By continuing, you accept to our Terms of Services and Privacy Policy. Please note that payments are non-refundable.
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VCard>
|
||||
</div>
|
||||
</VContainer>
|
||||
|
||||
<!-- 👉 Footer -->
|
||||
<Footer />
|
||||
|
||||
<PricingPlanDialog v-model:is-dialog-visible="isPricingPlanDialogVisible" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
position: static !important;
|
||||
inline-size: 100%;
|
||||
inset-block-end: 0;
|
||||
}
|
||||
|
||||
.payment-card {
|
||||
margin-block: 10.5rem 5.25rem;
|
||||
}
|
||||
|
||||
.payment-page {
|
||||
@media (min-width: 600px) and (max-width: 960px) {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.payment-card {
|
||||
.custom-radio {
|
||||
.v-radio {
|
||||
margin-block-start: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
406
resources/js/pages/front-pages/pricing.vue
Normal file
406
resources/js/pages/front-pages/pricing.vue
Normal file
@@ -0,0 +1,406 @@
|
||||
<script setup>
|
||||
import Footer from '@/views/front-pages/front-page-footer.vue'
|
||||
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
||||
import { useConfigStore } from '@core/stores/config'
|
||||
import laptopGirl from '@images/illustrations/laptop-girl.png'
|
||||
|
||||
const store = useConfigStore()
|
||||
|
||||
store.skin = 'default'
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
public: true,
|
||||
},
|
||||
})
|
||||
|
||||
const features = [
|
||||
{
|
||||
feature: '14-days free trial',
|
||||
starter: true,
|
||||
pro: true,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'No user limit',
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'Product Support',
|
||||
starter: false,
|
||||
pro: true,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'Email Support',
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: true,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'Integrations',
|
||||
starter: false,
|
||||
pro: true,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'Removal of Front branding',
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: true,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'Active maintenance & support',
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
feature: 'Data storage for 365 days',
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: true,
|
||||
addOnAvailable: {
|
||||
starter: false,
|
||||
pro: false,
|
||||
enterprise: false,
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: 'How do you process payments?',
|
||||
answer: 'We accept Visa®, MasterCard®, American Express®, and PayPal®. So you can be confident that your credit card information will be kept safe and secure.',
|
||||
},
|
||||
{
|
||||
question: 'What counts towards the 100 responses limit?',
|
||||
answer: 'We count all responses submitted through all forms in a month.If you already received 100 responses this month, you won\'t be able to receive any more of them until next month when the counter resets.',
|
||||
},
|
||||
{
|
||||
question: 'What payment methods do you accept?',
|
||||
answer: 'Checkout accepts all type of credit and debit cards.',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="pricing-page">
|
||||
<Navbar />
|
||||
|
||||
<VCard class="pricing-card">
|
||||
<!-- 👉 App Pricing components -->
|
||||
<VContainer>
|
||||
<AppPricing md="4" />
|
||||
</VContainer>
|
||||
|
||||
<!-- 👉 Free trial Banner -->
|
||||
|
||||
<div class="page-pricing-free-trial-banner-bg">
|
||||
<VContainer>
|
||||
<div class="d-flex align-center flex-md-row flex-column position-relative">
|
||||
<div class="text-center text-md-start pb-5 px-10 px-sm-0 pt-8">
|
||||
<h4 class="text-h4 text-primary mb-2">
|
||||
Still not convinced? Start with a 14-day FREE trial!
|
||||
</h4>
|
||||
<p class="text-body-1 mb-11">
|
||||
You will get full access to all the features for 14 days.
|
||||
</p>
|
||||
<VBtn :to="{ name: 'front-pages-payment' }">
|
||||
Start 14-day FREE trial
|
||||
</VBtn>
|
||||
</div>
|
||||
<div class="free-trial-illustrator">
|
||||
<VImg
|
||||
:src="laptopGirl"
|
||||
:width="238"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Plans -->
|
||||
<VContainer>
|
||||
<VCardText class="text-center py-16 pricing-section">
|
||||
<h3 class="text-h3 mb-2">
|
||||
Pick a plan that works best for you
|
||||
</h3>
|
||||
<p class="text-body-1">
|
||||
Stay cool, we have a 48-hour money back guarantee!
|
||||
</p>
|
||||
<!-- 👉 Features & Tables -->
|
||||
<VTable class="text-no-wrap border rounded pricing-table">
|
||||
<!-- 👉 Table head -->
|
||||
<thead>
|
||||
<tr>
|
||||
<th
|
||||
scope="col"
|
||||
class="py-4"
|
||||
>
|
||||
<div>
|
||||
Features
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
Native Font Features
|
||||
</div>
|
||||
</th>
|
||||
<th
|
||||
v-for="{ plan, price } in [
|
||||
{ plan: 'Starter', price: 'Free' },
|
||||
{ plan: 'Pro', price: '$7.5/Month' },
|
||||
{ plan: 'Enterprise', price: '$16/Month' },
|
||||
]"
|
||||
:key="plan"
|
||||
scope="col"
|
||||
class="text-center py-4"
|
||||
>
|
||||
<div class="position-relative">
|
||||
{{ plan }}
|
||||
<VAvatar
|
||||
v-if="plan === 'Pro'"
|
||||
size="20"
|
||||
class="ms-2 position-absolute"
|
||||
variant="elevated"
|
||||
color="primary"
|
||||
style="inset-block-end: 7px;"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-star"
|
||||
size="14"
|
||||
color="white"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
{{ price }}
|
||||
</div>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<!-- 👉 Table Body -->
|
||||
<tbody>
|
||||
<tr
|
||||
v-for="feature in features"
|
||||
:key="feature.feature"
|
||||
>
|
||||
<td class="text-start text-body-1 text-high-emphasis">
|
||||
{{ feature.feature }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<VAvatar
|
||||
variant="tonal"
|
||||
size="20"
|
||||
:color="feature.starter ? 'primary' : 'secondary'"
|
||||
>
|
||||
<VIcon
|
||||
v-if="!feature.addOnAvailable.starter"
|
||||
:color="feature.starter ? 'primary' : 'secondary'"
|
||||
size="14"
|
||||
:icon="feature.starter ? 'tabler-check' : 'tabler-x'"
|
||||
/>
|
||||
</VAvatar>
|
||||
<VChip
|
||||
v-if="feature.addOnAvailable.starter"
|
||||
color="primary"
|
||||
size="small"
|
||||
label
|
||||
>
|
||||
Add-On Available
|
||||
</VChip>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<VChip
|
||||
v-if="feature.addOnAvailable.pro"
|
||||
color="primary"
|
||||
size="small"
|
||||
label
|
||||
>
|
||||
Add-On Available
|
||||
</VChip>
|
||||
<VAvatar
|
||||
v-else
|
||||
size="20"
|
||||
variant="tonal"
|
||||
:color="feature.pro ? 'primary' : 'secondary'"
|
||||
>
|
||||
<VIcon
|
||||
:color="feature.pro ? 'primary' : 'secondary'"
|
||||
size="14"
|
||||
:icon="feature.pro ? 'tabler-check' : 'tabler-x'"
|
||||
/>
|
||||
</VAvatar>
|
||||
</td>
|
||||
<td class="text-center">
|
||||
<VChip
|
||||
v-if="feature.addOnAvailable.enterprise"
|
||||
label
|
||||
color="primary"
|
||||
size="small"
|
||||
>
|
||||
Add-On Available
|
||||
</VChip>
|
||||
<VAvatar
|
||||
v-else
|
||||
size="20"
|
||||
variant="tonal"
|
||||
:color="feature.enterprise ? 'primary' : 'disabled'"
|
||||
>
|
||||
<VIcon
|
||||
:color="feature.enterprise ? 'primary' : 'disabled'"
|
||||
size="14"
|
||||
:icon="feature.enterprise ? 'tabler-check' : 'tabler-x'"
|
||||
/>
|
||||
</VAvatar>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<!-- 👉 Table footer -->
|
||||
<tfoot>
|
||||
<tr>
|
||||
<td class="py-2" />
|
||||
<td class="text-center py-2">
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
:to="{ name: 'front-pages-payment' }"
|
||||
>
|
||||
Choose Plan
|
||||
</VBtn>
|
||||
</td>
|
||||
<td class="text-center py-2">
|
||||
<VBtn :to="{ name: 'front-pages-payment' }">
|
||||
Choose Plan
|
||||
</VBtn>
|
||||
</td>
|
||||
<td class="text-center py-2">
|
||||
<VBtn
|
||||
variant="tonal"
|
||||
:to="{ name: 'front-pages-payment' }"
|
||||
>
|
||||
Choose Plan
|
||||
</VBtn>
|
||||
</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</VTable>
|
||||
</VCardText>
|
||||
</VContainer>
|
||||
|
||||
<!-- 👉 FAQ -->
|
||||
<div style="background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));">
|
||||
<VContainer>
|
||||
<VCardText class="py-10 py-sm-16 pricing-section">
|
||||
<div class="text-center">
|
||||
<h4 class="text-h4 mb-2">
|
||||
FAQ's
|
||||
</h4>
|
||||
<p class="text-body-1 mb-6">
|
||||
Let us help answer the most common questions.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<VExpansionPanels>
|
||||
<VExpansionPanel
|
||||
v-for="(faq, index) in faqs"
|
||||
:key="faq.question"
|
||||
:title="faq.question"
|
||||
:text="faq.answer"
|
||||
:value="index"
|
||||
/>
|
||||
</VExpansionPanels>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VContainer>
|
||||
</div>
|
||||
|
||||
<div style="background-color: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));">
|
||||
<Footer />
|
||||
</div>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.pricing-section {
|
||||
padding-block: 5.25rem !important;
|
||||
padding-inline: 0 !important;
|
||||
}
|
||||
|
||||
.page-pricing-free-trial-banner-bg {
|
||||
/* stylelint-disable-next-line color-function-notation */
|
||||
background-color: rgba(var(--v-theme-primary), var(--v-activated-opacity));
|
||||
margin-block-start: 8.9375rem !important;
|
||||
}
|
||||
|
||||
.pricing-card {
|
||||
padding-block-start: 10.5rem !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 960px) {
|
||||
.free-trial-illustrator {
|
||||
position: absolute;
|
||||
inset-block-end: -1rem !important;
|
||||
inset-inline-end: 0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 959px) {
|
||||
.free-trial-illustrator {
|
||||
position: relative;
|
||||
inset-block-end: -1rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.pricing-table {
|
||||
tr:nth-child(even) {
|
||||
background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.pricing-page {
|
||||
@media (min-width: 600px) and (max-width: 960px) {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user