TelemedPro/hgh_admin
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first commit

Browse Source
This commit is contained in:
Inshal
2024-05-29 22:34:28 +05:00
commit e63fc41a20
1470 changed files with 174828 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
resources/js/pages/front-pages/checkout.vue Normal file
View File

@@ -0,0 +1,153 @@
<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'
definePage({ meta: { layout: 'blank' } })
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: 9.25rem 5.25rem;
}
@media (max-width: 960px) and (min-width: 600px) {
.checkout-page {
.v-container {
padding-inline: 2rem !important;
}
}
}
</style>

140
resources/js/pages/front-pages/help-center/article/[title].vue Normal file
View File

@@ -0,0 +1,140 @@
<script setup>
import Footer from '@/views/front-pages/front-page-footer.vue'
import Navbar from '@/views/front-pages/front-page-navbar.vue'
const breadCrumbItems = [
{
title: 'Help Center',
to: { name: 'front-pages-help-center' },
},
{ title: 'Buying and item support' },
{ title: 'Template kits' },
]
definePage({ meta: { layout: 'blank' } })
const articleData = ref()
const { data, error } = await useApi('/pages/help-center/article')
if (error.value)
console.log(error.value)
else
articleData.value = data.value
</script>
<!-- eslint-disable vue/no-v-html -->
<template>
<div class="bg-surface help-center-article">
<!-- 👉 Navbar -->
<Navbar />
<!-- 👉 Content -->
<VContainer>
<div
class="d-flex gap-6 flex-lg-row flex-column"
style=" margin-block: 9.25rem 5.25rem"
>
<div>
<div>
<VBreadcrumbs
class="px-0 py-2 flex-wrap"
:items="breadCrumbItems"
>
<template #item="{ item, index }">
<div class="d-flex align-center">
<VIcon
size="20"
icon="ri-star-fill"
class="me-1"
:class="index === breadCrumbItems.length - 1 ? 'text-high-emphasis' : 'text-medium-emphasis'"
/>
<div
class="text-body-1"
:class="index === breadCrumbItems.length - 1 ? 'text-high-emphasis' : 'text-medium-emphasis'"
>
{{ item.title }}
</div>
</div>
</template>
</VBreadcrumbs>
<h4 class="text-h4 mb-2">
{{ articleData?.title }}
</h4>
<div class="text-body-1">
{{ articleData?.lastUpdated }}
</div>
</div>
<VDivider class="my-6" />
<div
class="mb-6"
v-html="articleData?.productContent"
/>
<VImg :src="articleData?.productImg" />
<p class="my-6 text-body-1">
{{ articleData?.checkoutContent }}
</p>
<VImg :src="articleData?.checkoutImg" />
</div>
<div style="min-inline-size: 300px;">
<VTextField
prepend-inner-icon="ri-search-line"
placeholder="Search..."
class="pt-2 mb-6"
/>
<div>
<!-- 👉 Article List -->
<h5
class="text-h5 px-4 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
>
<template #append>
<VIcon
size="20"
icon="ri-arrow-right-s-line"
color="disabled"
/>
</template>
<VListItemTitle>
{{ item }}
</VListItemTitle>
</VListItem>
</VList>
</div>
</div>
</div>
</VContainer>
<!-- 👉 Footer -->
<Footer />
</div>
</template>
<style lang="scss" scoped>
.card-list {
--v-card-list-gap: 1rem;
}
.help-center-article{
@media (min-width: 600px) and (max-width: 960px) {
.v-container {
padding-inline: 2rem !important;
}
}
}
</style>

97
resources/js/pages/front-pages/help-center/index.vue Normal file
View File

@@ -0,0 +1,97 @@
<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'
// fetching data from fake-api
definePage({ meta: { layout: 'blank' } })
const { data: faqData } = await useApi('/pages/help-center')
const apiData = faqData.value
</script>
<template>
<div class="help-center-page">
<Navbar />
<div v-if="apiData">
<AppSearchHeader
title="Hello, how can we help?"
subtitle="Common troubleshooting topics: eCommerce, Blogging to payment"
custom-class="rounded-0"
/>
<!-- 👉 Popular Articles -->
<div class="bg-surface help-center-section">
<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="bg-surface help-center-section">
<VContainer>
<h4 class="text-h4 text-center mb-6">
Keep Learning
</h4>
<HelpCenterLandingArticlesOverview :articles="apiData.keepLearning" />
</VContainer>
</div>
<!-- 👉 Still need help? -->
<HelpCenterLandingFooter />
<Footer />
</div>
</div>
</template>
<style lang="scss">
.help-center-page {
.search-header {
background-size: cover !important;
padding-block-start: 9rem !important;
}
}
@media (max-width: 960px) and (min-width: 600px) {
.help-center-page {
.v-container {
padding-inline: 2rem !important;
}
.search-header {
padding: 5rem !important;
}
}
}
@media (max-width: 599px) {
.help-center-page {
.search-header {
padding-block: 4rem 2rem !important;
padding-inline: 2rem !important;
}
}
}
</style>
<style lang="scss" scoped>
.help-center-section{
padding-block: 5.25rem;
}
</style>

83
resources/js/pages/front-pages/landing-page/index.vue Normal file
View File

@@ -0,0 +1,83 @@
<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'
definePage({ meta: { layout: 'blank' } })
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 -->
<CustomersReview />
<!-- 👉 Our Team -->
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
<OurTeam ref="refTeam" />
</div>
<!-- 👉 Pricing Plans -->
<PricingPlans />
<!-- 👉 Product stats -->
<ProductStats />
<!-- 👉 FAQ Section -->
<FaqSection ref="refFaq" />
<!-- 👉 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>

313
resources/js/pages/front-pages/payment.vue Normal file
View File

@@ -0,0 +1,313 @@
<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'
const visa = useGenerateImageVariant(visaLight, visaDark)
const paypal = useGenerateImageVariant(paypalLight, paypalDark)
definePage({ meta: { layout: 'blank' } })
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="8"
:class="$vuetify.display.mdAndUp ? 'border-e' : 'border-b'"
>
<VCardText
class="pa-8"
:class="$vuetify.display.smAndDown ? 'pb-5' : '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">
<img
:src="item.images"
height="34"
width="58"
>
<div class="text-body-1 text-high-emphasis">
{{ item.title }}
</div>
</div>
</template>
</CustomRadios>
<!-- billing Details -->
<div class="mb-7">
<h4 class="text-h4 mb-6">
Billing Details
</h4>
<VRow class="my-0">
<VCol
cols="12"
md="6"
>
<VTextField
label="Email Address"
type="email"
placeholder="johndoe@email.com"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<VTextField
label="Password"
autocomplete="on"
type="password"
placeholder="············"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<VSelect
v-model="selectedCountry"
label="Billing Country"
:items="['USA', 'Canada', 'UK', 'AUS']"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<VTextField
label="Biling Zip/Postal Code"
type="number"
placeholder="129211"
/>
</VCol>
</VRow>
</div>
<!-- Credit card info -->
<div :class="selectedRadio === 'paypal' ? 'd-none' : 'd-block'">
<h4 class="text-h4 mb-6">
Credit Card Info
</h4>
<VRow class="my-0">
<VCol cols="12">
<VTextField
label="Card Number"
placeholder="8787 2345 3458"
type="number"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<VTextField
label="Card Holder"
placeholder="John Doe"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<VTextField
label="Exp. date"
placeholder="05/2020"
/>
</VCol>
<VCol
cols="12"
md="4"
>
<VTextField
label="CVV"
type="number"
placeholder="784"
/>
</VCol>
</VRow>
</div>
</VCardText>
</VCol>
<VCol
cols="12"
md="4"
>
<VCardText
class="pa-8"
:class="$vuetify.display.smAndDown ? '' : '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 fulfilment.
</div>
</div>
<VCard
flat
color="rgba(var(--v-theme-on-surface), var(--v-hover-opacity))"
>
<VCardText class="pa-6">
<div>
<div class="text-body-1">
A simple start for everyone
</div>
<div class="my-4">
<h1 class="text-h1 d-inline-block">
$59.99
</h1> <div class="text-body-1 font-weight-medium d-inline-block">
/ month
</div>
</div>
<VBtn
variant="outlined"
block
@click="isPricingPlanDialogVisible = !isPricingPlanDialogVisible"
>
Change Plan
</VBtn>
</div>
</VCardText>
</VCard>
<div class="my-5">
<div class="d-flex justify-space-between mb-2">
<div class="text-body-1">
Subscription
</div>
<div class="text-body-1 font-weight-medium text-high-emphasis">
$85.99
</div>
</div>
<div class="d-flex justify-space-between">
<div class="text-body-1">
Tax
</div>
<div class="text-body-1 font-weight-medium text-high-emphasis">
$4.99
</div>
</div>
<VDivider class="my-4" />
<div class="d-flex justify-space-between">
<div class="text-body-1">
Total
</div>
<div class="text-body-1 font-weight-medium text-high-emphasis">
$90.98
</div>
</div>
</div>
<VBtn
:append-icon="$vuetify.locale.isRtl ? 'ri-arrow-left-line' : 'ri-arrow-right-line'"
block
color="success"
class="mb-8"
>
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: 9.25rem 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>

409
resources/js/pages/front-pages/pricing.vue Normal file
View File

@@ -0,0 +1,409 @@
<script setup>
import Footer from '@/views/front-pages/front-page-footer.vue'
import Navbar from '@/views/front-pages/front-page-navbar.vue'
import poseFs9 from '@images/pages/pose-fs-9.png'
definePage({ meta: { layout: 'blank' } })
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: 'What counts towards the 100 responses limit?',
answer: 'Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, varius pulvinar diam eros in elit. Pellentesque convallis laoreet laoreet.',
},
{
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: 'Do you have a money-back guarantee?',
answer: '2Checkout accepts all types of credit and debit cards.',
},
{
question: 'I have more questions. Where can I get help?',
answer: 'Yes. You may request a refund within 30 days of your purchase without any additional explanations.',
},
]
</script>
<template>
<div class="pricing-page">
<Navbar />
<VCard class="pricing-card">
<!-- 👉 App Pricing components -->
<VContainer>
<div class="pricing-section">
<AppPricing
md="4"
cols="12"
>
<template #heading>
<h2 class="text-h2 pb-2">
Pricing Plans
</h2>
</template>
</AppPricing>
</div>
</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 py-10 px-10 px-sm-0">
<h4 class="text-h4 text-primary mb-2">
Still not convinced? Start with a 14-day FREE trial!
</h4>
<p class="text-body-1">
You will get full access to all the features for 14 days.
</p>
<VBtn
class="mt-4"
:to="{ name: 'front-pages-payment' }"
>
Start-14-day FREE trial
</VBtn>
</div>
<div class="free-trial-illustrator">
<VImg
:src="poseFs9"
:width="250"
/>
</div>
</div>
</VContainer>
</div>
<!-- 👉 Plans -->
<VContainer>
<div class="pricing-section">
<div class="text-center pb-6">
<h4 class="text-h4 mb-2">
Pick a plan that works best for you
</h4>
<p class="text-body-1 mb-0">
Stay cool, we have a 48-hour money back guarantee!
</p>
</div>
<!-- 👉 Features & Tables -->
<VTable class="text-no-wrap border rounded pricing-table">
<!-- 👉 Table head -->
<thead>
<tr>
<th
scope="col"
class="py-4"
>
TIME
</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'"
rounded="lg"
color="primary"
size="18"
class="position-absolute ms-2"
style="inset-block-start: -0.25rem;"
>
<VIcon
icon="ri-star-s-fill"
size="14"
/>
</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-high-emphasis">
{{ feature.feature }}
</td>
<td class="text-center">
<VIcon
v-if="!feature.addOnAvailable.starter"
:color="feature.starter ? 'primary' : ''"
size="20"
:icon="feature.starter ? 'ri-checkbox-circle-line' : 'ri-close-circle-line'"
/>
<VChip
v-if="feature.addOnAvailable.starter"
color="primary"
size="small"
>
Add-On-Available
</VChip>
</td>
<td class="text-center">
<VIcon
v-if="!feature.addOnAvailable.pro"
:color="feature.pro ? 'primary' : ''"
size="20"
:icon="feature.pro ? 'ri-checkbox-circle-line' : 'ri-close-circle-line'"
/>
<VChip
v-if="feature.addOnAvailable.pro"
color="primary"
size="small"
>
Add-On-Available
</VChip>
</td>
<td class="text-center">
<VIcon
v-if="!feature.addOnAvailable.enterprise"
:color="feature.enterprise ? 'primary' : ''"
size="20"
:icon="feature.enterprise ? 'ri-checkbox-circle-line' : 'ri-close-circle-line'"
/>
<VChip
v-if="feature.addOnAvailable.enterprise"
color="primary"
size="small"
>
Add-On-Available
</VChip>
</td>
</tr>
</tbody>
<!-- 👉 Table footer -->
<tfoot>
<tr>
<td class="py-4" />
<td class="text-center py-4">
<VBtn
variant="outlined"
:to="{ name: 'front-pages-payment' }"
>
Choose Plan
</VBtn>
</td>
<td class="text-center py-4">
<VBtn :to="{ name: 'front-pages-payment' }">
Choose Plan
</VBtn>
</td>
<td class="text-center py-4">
<VBtn
variant="outlined"
:to="{ name: 'front-pages-payment' }"
>
Choose Plan
</VBtn>
</td>
</tr>
</tfoot>
</VTable>
</div>
</VContainer>
<!-- 👉 FAQ -->
<div class="bg-background">
<VContainer>
<div class="pricing-section">
<div class="text-center">
<h4 class="text-h4 mb-2">
FAQ's
</h4>
<p class="text-body-1 mb-0">
Let us help answer the most common questions.
</p>
</div>
<div class="pt-6">
<VExpansionPanels>
<VExpansionPanel
v-for="faq in faqs"
:key="faq.question"
:title="faq.question"
:text="faq.answer"
/>
</VExpansionPanels>
</div>
</div>
</VContainer>
</div>
<Footer />
</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), 0.16);
}
.pricing-card {
padding-block-start: 4rem !important;
}
.pricing-table-title{
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 2rem;
font-weight: 500;
line-height: 2.625rem;
}
@media screen and (min-width: 960px) {
.free-trial-illustrator {
position: absolute;
inset-block-end: -1rem !important;
inset-inline-end: 5%;
}
}
@media screen and (max-width: 959px) {
.free-trial-illustrator {
position: relative;
inset-block-end: -1rem !important;
}
}
</style>
<style lang="scss">
.pricing-table{
--v-table-header-color: rgb(var(--v-theme-surface));
&.v-table{
.v-table__wrapper{
table{
thead {
tr{
th{
border-block-end: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity)) !important;
}
}
}
tbody{
tr:nth-child(even){
background: rgba(var(--v-theme-on-surface), var(--v-hover-opacity));
}
}
}
}
}
}
.pricing-page{
@media (min-width: 600px) and (max-width: 960px) {
.v-container {
padding-inline: 2rem !important;
}
}
}
</style>