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

253
resources/js/views/front-pages/front-page-footer.vue Normal file
View File

@@ -0,0 +1,253 @@
<script setup>
import appleImg from '@images/front-pages/landing-page/apple-icon.png'
import googlePlayImg from '@images/front-pages/landing-page/google-play-icon.png'
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
const menus = [
{
name: 'Pricing',
to: { name: 'front-pages-pricing' },
},
{
name: 'Payment',
to: { name: 'front-pages-payment' },
isNew: true,
},
{
name: 'Maintenance',
to: { name: 'pages-misc-under-maintenance' },
},
{
name: 'Comming Soon',
to: { name: 'pages-misc-coming-soon' },
},
]
</script>
<template>
<div class="footer">
<VSheet
class="footer-top pt-15"
theme="dark"
>
<VContainer>
<VRow>
<!-- 👉 Footer -->
<VCol
cols="12"
lg="5"
>
<div class="mb-4 footer-form">
<div class="d-flex align-center gap-x-3 mb-6">
<VNodeRenderer :nodes="themeConfig.app.logo" />
<div class="footer-title">
MATERIO
</div>
</div>
<div class="text-body-1 footer-text mb-6">
Most Powerful & Comprehensive 🤩 Vuejs Admin Template with Elegant Material Design & Unique Layouts.
</div>
<VForm class="subscribe-form d-flex align-center gap-4">
<VTextField
label="Subscribe to newsletter"
placeholder="john@email.com"
theme="dark"
density="compact"
class="footer-text"
/>
<VBtn>Subscribe</VBtn>
</VForm>
</div>
</VCol>
<!-- 👉 Pages -->
<VCol>
<div class="d-flex justify-space-between flex-grow-1 gap-x-16 gap-y-8 flex-md-row flex-column">
<div>
<div class="footer-heading mb-6">
Pages
</div>
<ul style="list-style: none;">
<li
v-for="(item, index) in menus"
:key="index"
class="mb-4"
>
<RouterLink
class="footer-text text-no-wrap"
:to="item.to"
>
<div class="d-flex align-center">
<div>{{ item.name }}</div>
<template v-if="item.isNew">
<VChip
color="primary"
variant="elevated"
size="small"
class="ms-2"
>
New
</VChip>
</template>
</div>
</RouterLink>
</li>
</ul>
</div>
<!-- 👉 Products -->
<div>
<div class="footer-heading mb-6">
Products
</div>
<ul>
<li
v-for="(item, index) in ['Page Builder', 'Admin Dashboards', 'UI Kits', 'Illustrations']"
:key="index"
class="mb-4"
style="list-style: none;"
>
<RouterLink
to=""
class="footer-text text-no-wrap"
>
{{ item }}
</RouterLink>
</li>
</ul>
</div>
<!-- 👉 Download App -->
<div>
<div class="footer-heading mb-6">
Download our app
</div>
<div>
<VBtn
v-for="(item, index) in [
{ image: appleImg, store: 'App Store' },
{ image: googlePlayImg, store: 'Google Play' },
]"
:key="index"
color="#211B2C"
size="x-large"
class="mb-4 d-block"
>
<template #default>
<div class="d-flex gap-x-3">
<div>
<VImg
:src="item.image"
height="34"
width="34"
/>
</div>
<div>
<div class="text-body-2 text-white">
Download on the
</div>
<div class="text-body-2 font-weight-medium text-white">
{{ item.store }}
</div>
</div>
</div>
</template>
</VBtn>
</div>
</div>
</div>
</VCol>
</VRow>
</VContainer>
</VSheet>
<div class="footer-line w-100">
<VContainer>
<div class="d-flex justify-space-between flex-wrap gap-y-4">
<span class="d-flex align-center">
&copy;
{{ new Date().getFullYear() }},
Made with ❤️ by <a
href="https://themeselection.com"
target="_blank"
rel="noopener noreferrer"
class="ms-1 font-weight-medium"
style="color: rgba(255,255,255,var(--v-high-emphasis-opacity));"
>ThemeSelection</a>
</span>
<div class="d-flex gap-x-2">
<template
v-for="(item, index) in [
{ title: 'github', icon: 'bxl-github', href: 'https://github.com/themeselection' },
{ title: 'facebook', icon: 'bxl-facebook', href: 'https://www.facebook.com/ThemeSelections/' },
{ title: 'twitter', icon: 'bxl-twitter', href: 'https://twitter.com/Theme_Selection' },
{ title: 'instagram', icon: 'bxl-linkedin', href: 'https://in.linkedin.com/company/themeselection' },
]"
:key="index"
>
<IconBtn
:href="item.href"
size="small"
target="_blank"
color="#fff"
rel="noopener noreferrer"
>
<VIcon :icon="item.icon" />
</IconBtn>
</template>
</div>
</div>
</VContainer>
</div>
</div>
</template>
<style lang="scss" scoped>
.footer-top {
background: url("@images/front-pages/backgrounds/footer-bg.png") lightgray 50% / cover no-repeat;
}
.footer-heading{
color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
font-weight: 500;
}
.footer-text{
color: rgba(255, 255, 255, var(--v-medium-emphasis-opacity));
}
.footer-title{
color: rgba(255, 255, 255, var(--v-high-emphasis-opacity));
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.15px;
line-height: 1.5rem;
}
.footer-line {
background: #211b2c;
color: rgba(255, 255, 255, var(--v-medium-emphasis-opacity));
font-size: 13px;
line-height: 20px;
}
.footer{
color: rgba(255, 255, 255, 70%);
}
</style>
<style lang="scss">
.footer {
@media (min-width: 600px) and (max-width: 960px) {
.v-container {
padding-inline: 2rem !important;
}
}
}
.footer-form{
@media (min-width: 1280px) {
max-inline-size: 400px;
}
}
</style>

526
resources/js/views/front-pages/front-page-navbar.vue Normal file
View File

@@ -0,0 +1,526 @@
<script setup>
import { useWindowScroll } from '@vueuse/core'
import { useDisplay } from 'vuetify'
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
import navImgDark from '@images/front-pages/misc/nav-img-dark.png'
import navImgLight from '@images/front-pages/misc/nav-img-light.png'
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
import { themeConfig } from '@themeConfig'
const props = defineProps({ activeId: String })
const display = useDisplay()
const route = useRoute()
const router = useRouter()
const navImg = useGenerateImageVariant(navImgLight, navImgDark)
const { y } = useWindowScroll()
const sidebar = ref(false)
watch(() => display, () => {
return display.mdAndUp ? sidebar.value = false : sidebar.value
}, { deep: true })
const isMenuOpen = ref(false)
const menuItems = [
{
listTitle: 'Page',
listIcon: 'ri-layout-grid-line',
navItems: [
{
name: 'Pricing',
to: { name: 'front-pages-pricing' },
},
{
name: 'Payment',
to: { name: 'front-pages-payment' },
},
{
name: 'Checkout',
to: { name: 'front-pages-checkout' },
},
{
name: 'Help Center',
to: { name: 'front-pages-help-center' },
},
],
},
{
listTitle: 'Auth Demo',
listIcon: 'ri-lock-unlock-line',
navItems: [
{
name: 'Login (Basic)',
to: { name: 'pages-authentication-login-v1' },
},
{
name: 'Login (Cover)',
to: { name: 'pages-authentication-login-v2' },
},
{
name: 'Register (Basic)',
to: { name: 'pages-authentication-register-v1' },
},
{
name: 'Register (Cover)',
to: { name: 'pages-authentication-register-v2' },
},
{
name: 'Register (Multi-steps)',
to: { name: 'pages-authentication-register-multi-steps' },
},
{
name: 'Forgot Password (Basic)',
to: { name: 'pages-authentication-forgot-password-v1' },
},
{
name: 'Forgot Password (Cover)',
to: { name: 'pages-authentication-forgot-password-v2' },
},
{
name: 'Reset Password (Basic)',
to: { name: 'pages-authentication-reset-password-v1' },
},
{
name: 'Reset Password (cover )',
to: { name: 'pages-authentication-reset-password-v2' },
},
],
},
{
listTitle: 'Other',
listIcon: 'ri-image-line',
navItems: [
{
name: 'Under Maintenance',
to: { name: 'pages-misc-under-maintenance' },
},
{
name: 'Coming Soon',
to: { name: 'pages-misc-coming-soon' },
},
{
name: 'Not Authorized',
to: { path: '/not-authorized' },
},
{
name: 'Verify Email (Basic)',
to: { name: 'pages-authentication-verify-email-v1' },
},
{
name: 'Verify Email (Cover)',
to: { name: 'pages-authentication-verify-email-v2' },
},
{
name: 'Two Steps (Basic)',
to: { name: 'pages-authentication-two-steps-v1' },
},
{
name: 'Two Steps (Cover)',
to: { name: 'pages-authentication-two-steps-v2' },
},
],
},
]
const isCurrentRoute = to => {
return route.matched.some(_route => _route.path === router.resolve(to).path)
}
const isPageActive = computed(() => menuItems.some(item => item.navItems.some(listItem => isCurrentRoute(listItem.to))))
</script>
<template>
<!-- 👉 Navigation drawer for mobile devices -->
<VNavigationDrawer
v-model="sidebar"
disable-resize-watcher
>
<!-- Nav items -->
<div>
<div class="d-flex flex-column gap-y-4 pa-4">
<RouterLink
v-for="(item, index) in ['Home', 'Features', 'Team', 'FAQ', 'Contact us']"
:key="index"
:to="{ name: 'front-pages-landing-page', hash: `#${item.toLowerCase().replace(' ', '-')}` }"
class="font-weight-medium"
:class="[props.activeId?.toLocaleLowerCase().replace('-', ' ') === item.toLocaleLowerCase() ? 'active-link' : 'text-high-emphasis']"
>
{{ item }}
</RouterLink>
<div
class="text-high-emphasis font-weight-medium cursor-pointer"
:class="isPageActive ? 'active-link' : 'text-high-emphasis'"
>
<div
:class="isMenuOpen ? 'mb-6' : ''"
@click="isMenuOpen = !isMenuOpen"
>
Pages <VIcon :icon="isMenuOpen ? 'ri-arrow-up-s-line' : 'ri-arrow-down-s-line'" />
</div>
<div
v-for="(item, index) in menuItems"
:key="index"
:class="isMenuOpen ? 'd-block' : 'd-none'"
>
<div class="d-flex align-center gap-x-3 mb-4">
<VAvatar
variant="tonal"
color="primary"
rounded
:icon="item.listIcon"
/>
<div class="text-body-1 text-high-emphasis font-weight-medium">
{{ item.listTitle }}
</div>
</div>
<ul class="mb-6">
<li
v-for="listItem in item.navItems"
:key="listItem.name"
style="list-style: none;"
class="text-body-1 mb-4"
>
<RouterLink
:to="listItem.to"
:target="item.listTitle === 'Page' ? '_self' : '_blank'"
class="mega-menu-item"
:class="isCurrentRoute(listItem.to) ? 'active-link' : ''"
>
<VIcon
icon="ri-circle-line"
:size="10"
class="me-2"
/>
<span> {{ listItem.name }}</span>
</RouterLink>
</li>
</ul>
</div>
</div>
<RouterLink
to="/"
target="_blank"
class="text-body-1 font-weight-medium nav-link px-0"
>
Admin
</RouterLink>
</div>
</div>
<!-- Navigation drawer close icon -->
<VIcon
id="navigation-drawer-close-btn"
icon="ri-close-line"
size="20"
@click="sidebar = !sidebar"
/>
</VNavigationDrawer>
<!-- 👉 Navbar for desktop devices -->
<div class="front-page-navbar">
<VAppBar
:class="y > 20 ? 'front-page-navbar-box-shadow' : ''"
elevation="0"
class="rounded-b-lg"
>
<!-- toggle icon for mobile device -->
<VAppBarNavIcon
:class="$vuetify.display.mdAndUp ? 'd-none' : 'd-inline-block'"
class="ms-0 me-1"
color="high-emphasis"
@click="() => sidebar = !sidebar"
/>
<!-- Title and Landing page sections -->
<div class="d-flex align-center">
<VAppBarTitle class="me-6">
<RouterLink
to="/"
class="d-flex gap-x-4"
:class="$vuetify.display.mdAndUp ? 'd-none' : 'd-block'"
>
<div class="d-flex gap-x-3 align-center">
<VNodeRenderer :nodes="themeConfig.app.logo" />
<div
class="nav-title text-uppercase text-truncate"
:class="[$vuetify.display.lgAndUp ? 'd-block' : 'd-none', $vuetify.display.mdAndUp ? 'd-none' : 'd-block']"
>
{{ themeConfig.app.title }}
</div>
</div>
</RouterLink>
</VAppBarTitle>
<!-- landing page sections -->
<div
:class="$vuetify.display.mdAndUp ? 'd-flex' : 'd-none'"
class="text-base align-center gap-x-2"
>
<RouterLink
v-for="(item, index) in ['Home', 'Features', 'Team', 'FAQ', 'Contact us']"
:key="index"
:to="{ name: 'front-pages-landing-page', hash: `#${item.toLowerCase().replace(' ', '-')}` }"
class="nav-link font-weight-medium"
:class="[props.activeId?.toLocaleLowerCase().replace('-', ' ') === item.toLocaleLowerCase() ? 'active-link' : '']"
>
{{ item }}
</RouterLink>
<!-- Pages Menu -->
<span
class="font-weight-medium cursor-pointer nav-link"
:class="isPageActive ? 'active-link' : 'text-high-emphasis'"
>
Pages
<VIcon
icon="ri-arrow-down-s-line"
size="20"
class="ms-2"
/>
<VMenu
open-on-hover
activator="parent"
transition="slide-y-transition"
location="bottom center"
offset="16"
content-class="mega-menu"
location-strategy="static"
close-on-content-click
>
<VCard max-width="1000">
<VCardText class="pa-8">
<div class="nav-menu">
<div
v-for="(item, index) in menuItems"
:key="index"
>
<div class="d-flex align-center gap-x-3 mb-6">
<VAvatar
variant="tonal"
color="primary"
rounded
:icon="item.listIcon"
/>
<div class="text-body-1 text-high-emphasis font-weight-medium">
{{ item.listTitle }}
</div>
</div>
<ul>
<li
v-for="listItem in item.navItems"
:key="listItem.name"
style="list-style: none;"
class="text-body-1 mb-4 text-no-wrap"
>
<RouterLink
class="mega-menu-item"
:to="listItem.to"
:target="item.listTitle === 'Page' ? '_self' : '_blank'"
:class="isCurrentRoute(listItem.to) ? 'active-link' : ''"
>
<div class="d-flex align-center">
<VIcon
icon="ri-circle-line"
:size="10"
class="me-2"
/>
<span>{{ listItem.name }}</span>
</div>
</RouterLink>
</li>
</ul>
</div>
<img
:src="navImg"
alt="Navigation Image"
class="d-inline-block rounded-lg"
style="border: 10px solid rgb(var(--v-theme-background));"
:width="$vuetify.display.lgAndUp ? '330' : '250'"
:height="$vuetify.display.lgAndUp ? '330' : '250'"
>
</div>
</VCardText>
</VCard>
</VMenu>
</span>
<RouterLink
to="/"
target="_blank"
class="nav-link font-weight-medium"
>
Admin
</RouterLink>
</div>
</div>
<VSpacer />
<div class="d-flex gap-x-4 align-center">
<NavbarThemeSwitcher class="me-0 me-sm-2" />
<VBtn
v-if="$vuetify.display.lgAndUp"
prepend-icon="ri-shopping-cart-line"
variant="elevated"
color="primary"
href="https://themeselection.com/item/materio-vuetify-vuejs-laravel-admin-template/"
target="_blank"
rel="noopener noreferrer"
>
Purchase Now
</VBtn>
<VBtn
v-else
variant="elevated"
color="primary"
href="https://themeselection.com/item/materio-vuetify-vuejs-admin-template/"
target="_blank"
rel="noopener noreferrer"
>
<VIcon icon="ri-shopping-cart-line" />
</VBtn>
</div>
</VAppBar>
</div>
</template>
<style lang="scss" scoped>
.front-page-navbar-box-shadow{
/* stylelint-disable-next-line max-line-length */
box-shadow: 0 4px 8px -4px rgba(var(--v-shadow-key-umbra-color), 42%) !important;
}
.nav-menu{
display: flex;
gap: 3rem;
}
.nav-title{
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity)) !important;
font-size: 1.25rem;
font-weight: 600;
letter-spacing: 0.15px;
line-height: 1.5rem;
}
.nav-link{
padding-inline: 0.625rem;
&:not(:hover){
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
}
}
@media (min-width: 1920px) {
.front-page-navbar {
.v-toolbar {
max-inline-size: calc(1440px - 32px);
}
}
}
@media (min-width: 1280px) and (max-width: 1919px) {
.front-page-navbar {
.v-toolbar {
max-inline-size: calc(1200px - 32px);
}
}
}
@media (min-width: 960px) and (max-width: 1279px) {
.front-page-navbar {
.v-toolbar {
max-inline-size: calc(900px - 32px);
}
}
.nav-menu{
gap: 2rem;
}
}
@media (min-width: 600px) and (max-width: 959px) {
.front-page-navbar {
.v-toolbar {
max-inline-size: calc(100% - 64px);
}
}
}
@media (max-width: 600px) {
.front-page-navbar {
.v-toolbar {
max-inline-size: calc(100% - 32px);
}
}
}
.nav-item-img {
border: 10px solid rgb(var(--v-theme-background));
border-radius: 10px;
}
.active-link {
color: rgb(var(--v-theme-primary)) !important;
}
.mega-menu-item {
&:not(:hover){
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity))
}
}
</style>
<style lang="scss">
@use "@layouts/styles/mixins" as layoutMixins;
.mega-menu{
position: fixed !important;
inset-block-start: 4.1rem;
inset-inline-start: 50%;
transform: translateX(-50%);
}
.front-page-navbar {
.v-toolbar__content {
padding-inline: 2rem !important;
}
.v-toolbar {
inset-inline: 0 !important;
margin-inline: auto !important;
}
}
#navigation-drawer-close-btn {
position: absolute;
cursor: pointer;
inset-block-start: 0.5rem;
inset-inline-end: 1rem;
}
@media (max-width: 600px) {
.front-page-navbar {
.v-toolbar__content {
padding-inline: 0.75rem !important;
}
}
}
@media (min-width: 600px) and (max-width: 959px) {
.front-page-navbar {
.v-toolbar__content {
padding-inline: 1rem !important;
}
}
}
</style>

51
resources/js/views/front-pages/landing-page/banner.vue Normal file
View File

@@ -0,0 +1,51 @@
<script setup>
import ctaDashborad from '@images/front-pages/landing-page/cta-dashboard.png'
</script>
<template>
<div class="landing-cta position-relative bg-surface">
<VContainer>
<div class="d-flex align-center justify-sm-space-between flex-column flex-md-row gap-y-4 pt-9">
<div class="text-sm-start text-center py-8">
<div class="banner-text pb-1">
Ready to Get Started?
</div>
<div class="text-body-1 font-weight-medium mb-8">
Start your project with a 14-day free trial
</div>
<VBtn
color="primary"
:append-icon="$vuetify.locale.isRtl ? 'ri-arrow-left-line' : 'ri-arrow-right-line'"
:to="{ name: 'front-pages-payment' }"
>
Get Started
</VBtn>
</div>
<VImg
:src="ctaDashborad"
:max-width="$vuetify.display.mdAndUp ? 600 : ''"
max-height="250"
width="auto"
class="mb-n4"
/>
</div>
</VContainer>
</div>
</template>
<style lang="scss" scoped>
.landing-cta {
background-image: url("@images/front-pages/backgrounds/cta-bg.png");
background-size: cover;
margin-block: auto;
}
.banner-text{
color: rgb(var(--v-theme-primary));
font-size: 32px;
font-weight: 700;
letter-spacing: 0.25px;
line-height: 42px;
}
</style>

141
resources/js/views/front-pages/landing-page/contact-us.vue Normal file
View File

@@ -0,0 +1,141 @@
<script setup>
import ConnectImg from '@images/front-pages/landing-page/lets-contact.png'
import sectionTitleIcon from '@images/pages/section-title-icon.png'
const name = ref('')
const email = ref('')
const message = ref('')
</script>
<template>
<VContainer id="contact-us">
<!-- 👉 Headers -->
<div class="contact-us-section">
<div class="headers d-flex justify-center flex-column align-center pb-15">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
CONTACT US
</div>
</div>
<div class="mb-2 text-center">
<span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
Let's work
</span> <span class="text-h5 d-inline-block">together</span>
</div>
<p class="text-body-1 font-weight-medium text-center mb-0">
Any question or remark? just write us a message
</p>
</div>
<div class="mb-15">
<VRow class="match-height">
<VCol
cols="12"
md="4"
sm="6"
>
<VCard
flat
elevation="0"
color="primary"
theme="dark"
>
<VCardText class="pa-8">
<h6 class="text-h6 mb-1">
Let's contact with us
</h6>
<h4 class="text-h4">
Share your ideas or requirement with our experts.
</h4>
<VImg
:src="ConnectImg"
class="my-5"
/>
<div class="text-body-1">
Looking for more customization, more features, and more anything? Don't worry, We've provide you with an entire team of experienced professionals.
</div>
</VCardText>
</VCard>
</VCol>
<VCol
cols="12"
md="8"
sm="6"
>
<VCard
flat
elevation="0"
>
<VCardText>
<div class="text-h5 mb-5">
Share your ideas
</div>
<VForm @submit.prevent="() => {}">
<VRow>
<VCol
cols="12"
md="6"
>
<VTextField
v-model="name"
placeholder="John Doe"
label="Full Name"
/>
</VCol>
<VCol
cols="12"
md="6"
>
<VTextField
v-model="email"
placeholder="johndoe@gmail.com"
label="Email address"
/>
</VCol>
<VCol cols="12">
<VTextarea
v-model="message"
placeholder="Type Your message"
label="Message"
/>
</VCol>
<VCol>
<VBtn type="submit">
Send Inquiry
</VBtn>
</VCol>
</VRow>
</VForm>
</VCardText>
</VCard>
</VCol>
</VRow>
</div>
</div>
</VContainer>
</template>
<style lang="scss" scoped>
.contact-us-section {
margin-block: 5.25rem;
}
</style>

300
resources/js/views/front-pages/landing-page/customers-review.vue Normal file
View File

@@ -0,0 +1,300 @@
<script setup>
import { register } from 'swiper/element/bundle'
import { useGenerateImageVariant } from '@/@core/composable/useGenerateImageVariant'
import logo1dark from '@images/front-pages/branding/logo-1-dark.png'
import logo1light from '@images/front-pages/branding/logo-1-light.png'
import logo1 from '@images/front-pages/branding/logo-1.png'
import logo2dark from '@images/front-pages/branding/logo-2-dark.png'
import logo2light from '@images/front-pages/branding/logo-2-light.png'
import logo2 from '@images/front-pages/branding/logo-2.png'
import logo3dark from '@images/front-pages/branding/logo-3-dark.png'
import logo3light from '@images/front-pages/branding/logo-3-light.png'
import logo3 from '@images/front-pages/branding/logo-3.png'
import logo4dark from '@images/front-pages/branding/logo-4-dark.png'
import logo4light from '@images/front-pages/branding/logo-4-light.png'
import logo4 from '@images/front-pages/branding/logo-4.png'
import logo5dark from '@images/front-pages/branding/logo-5-dark.png'
import logo5light from '@images/front-pages/branding/logo-5-light.png'
import sectionTitleIcon from '@images/pages/section-title-icon.png'
register()
const brandLogo1 = useGenerateImageVariant(logo1light, logo1dark)
const brandLogo2 = useGenerateImageVariant(logo2light, logo2dark)
const brandLogo3 = useGenerateImageVariant(logo3light, logo3dark)
const brandLogo4 = useGenerateImageVariant(logo4light, logo4dark)
const brandLogo5 = useGenerateImageVariant(logo5light, logo5dark)
const reviewData = [
{
desc: 'I\'ve never used a theme as versatile and flexible as Vuexy. It\'s my go to for building dashboard sites on almost any project.',
img: logo1,
rating: 5,
name: 'Eugenia Moore',
position: 'Founder of Hubspot',
},
{
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
img: logo2,
rating: 5,
name: 'Tommy haffman',
position: 'Founder of Levis',
},
{
desc: 'This template is superior in so many ways. The code, the design, the regular updates, the support.. It\'s the whole package. Excellent Work.',
img: logo3,
rating: 4,
name: 'Eugenia Moore',
position: 'CTO of Airbnb',
},
{
desc: 'All the requirements for developers have been taken into consideration, so I\'m able to build any interface I want.',
img: logo4,
rating: 5,
name: 'Sara Smith',
position: 'Founder of Continental',
},
{
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
img: logo2,
rating: 5,
name: 'Tommy haffman',
position: 'Founder of Levis',
},
{
desc: 'I\'ve never used a theme as versatile and flexible as Vuexy. It\'s my go to for building dashboard sites on almost any project.',
img: logo1,
rating: 5,
name: 'Eugenia Moore',
position: 'Founder of Hubspot',
},
{
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
img: logo2,
rating: 5,
name: 'Tommy haffman',
position: 'Founder of Levis',
},
{
desc: 'This template is superior in so many ways. The code, the design, the regular updates, the support.. It\'s the whole package. Excellent Work.',
img: logo3,
rating: 4,
name: 'Eugenia Moore',
position: 'CTO of Airbnb',
},
{
desc: 'All the requirements for developers have been taken into consideration, so I\'m able to build any interface I want.',
img: logo4,
rating: 5,
name: 'Sara Smith',
position: 'Founder of Continental',
},
{
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
img: logo2,
rating: 5,
name: 'Tommy haffman',
position: 'Founder of Levis',
},
]
</script>
<template>
<div class="customer-reviews">
<!-- 👉 Headers -->
<div class="headers d-flex justify-center flex-column align-center mb-8">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
REAL CUSTOMERS REVIEWS
</div>
</div>
<div class="mb-2 text-center">
<span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
Success stories
</span> <span class="text-h5 d-inline-block">from clients</span>
</div>
<p
class="text-body-1 font-weight-medium text-center"
style="letter-spacing: 0.15px !important;"
>
See what our customers have to say about their experience.
</p>
</div>
<div class="swiper-reviews-carousel py-4 mb-6">
<!-- eslint-disable vue/attribute-hyphenation -->
<swiper-container
slides-per-view="1"
space-between="5"
centered-slides="true"
loop="true"
autoplay-delay="3000"
autoplay-disable-on-interaction="false"
events-prefix="swiper-"
:pagination="{
clickable: 'true',
}"
:injectStyles="[
`
.swiper-pagination{
position: static;
margin-block: 1rem;
},
.swiper-pagination-bullet-active{
width: 1rem;
}
`]"
:breakpoints="{
1400: {
slidesPerView: 4,
spaceBetween: 20,
},
992: {
slidesPerView: 3,
spaceBetween: 20,
},
768: {
slidesPerView: 2,
spaceBetween: 20,
},
}"
>
<swiper-slide
v-for="(data, index) in reviewData"
:key="index"
>
<VCard class="h-100 d-flex align-stretch">
<VCardText class="pa-4 pa-sm-6 pa-md-8 d-flex flex-column justify-space-between align-center">
<img
:src="data.img"
style="block-size: 1.75rem;"
>
<div class="text-body-1 text-high-emphasis text-center">
{{ data.desc }}
</div>
<div>
<VRating
:model-value="data.rating"
color="warning"
readonly
/>
</div>
<div class="text-center">
<div class="text-body-1 text-high-emphasis font-weight-medium">
{{ data.name }}
</div>
<div class="text-body-2">
{{ data.position }}
</div>
</div>
</VCardText>
</VCard>
</swiper-slide>
</swiper-container>
</div>
<!-- 👉 Brand-logo Swiper -->
<div class="swiper-brands-carousel mt-4">
<swiper-container
slides-per-view="1"
loop="true"
events-prefix="swiper-"
:breakpoints="{
992: {
slidesPerView: 5,
},
768: {
centeredSlides: true,
slidesPerView: 3,
},
580: {
centeredSlides: true,
slidesPerView: 2,
},
}"
>
<swiper-slide
v-for="(img, index) in [brandLogo1, brandLogo2, brandLogo3, brandLogo4, brandLogo5]"
:key="index"
>
<VImg
:src="img"
height="28"
/>
</swiper-slide>
</swiper-container>
</div>
</div>
</template>
<style lang="scss">
@use "swiper/css/bundle";
swiper-container::part(bullet-active) {
border-radius: 6px;
background-color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
inline-size: 38px;
}
swiper-container::part(bullet) {
background-color: rgba(var(--v-theme-on-background));
}
swiper-container::part(pagination) {
margin-block: 1.5rem;
}
.swiper-reviews-carousel {
swiper-container {
--swiper-pagination-bullet-width: 10px;
--swiper-pagination-bullet-height: 10px;
--swiper-pagination-bullet-horizontal-gap: 6px;
.swiper {
padding-block-end: 3rem;
}
}
swiper-slide {
block-size: auto;
opacity: 0.5;
padding-block: 1rem;
padding-block-end: 1rem;
transition: all 0.35s ease;
&.swiper-slide-active {
opacity: 1;
padding-block: 0;
}
}
.swiper-pagination {
inset-block: 0 0 !important;
}
}
</style>
<style lang="scss" scoped>
.customer-reviews {
margin-block: 6.25rem;
}
</style>

96
resources/js/views/front-pages/landing-page/faq-section.vue Normal file
View File

@@ -0,0 +1,96 @@
<script setup>
import sittingGirlWithLaptop from '@images/front-pages/landing-page/sitting-girl-with-laptop.png'
import sectionTitleIcon from '@images/pages/section-title-icon.png'
const faqData = [
{
question: 'Do you charge for each upgrade?',
answer: 'Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.',
},
{
question: 'What is regular license?',
answer: 'Regular license can be used for end products that do not charge users for access or service(access is free and there will be no monthly subscription fee). Single regular license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup). For more info on regular license you can check official description.',
},
{
question: 'What is extended license?',
answer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime! Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis earum ea, incidunt quam possimus cumque.',
},
{
question: 'Which license is applicable for SASS application?',
answer: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi molestias exercitationem ab cum nemo facere voluptates veritatis quia, eveniet veniam at et repudiandae mollitia ipsam quasi labore enim architecto non!',
},
]
</script>
<template>
<VContainer id="faq">
<!-- 👉 Header -->
<div class="faq-section">
<div class="headers d-flex justify-center flex-column align-center my-12">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
FAQ
</div>
</div>
<div class="mb-2 text-center">
<span class="text-h5 d-inline-block">Frequently Asked</span> <span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
questions
</span>
</div>
<p
class="text-body-1 font-weight-medium text-center mb-0"
style="letter-spacing: 0.15px !important;"
>
Browse through these FAQs to find answers to commonly asked questions.
</p>
</div>
<div
class="d-flex align-center justify-space-between flex-wrap flex-md-nowrap"
style="gap: 6.25rem"
>
<VImg
:src="sittingGirlWithLaptop"
height="340"
width="320"
/>
<div>
<VExpansionPanels class="py-4">
<VExpansionPanel
v-for="faq in faqData"
:key="faq.question"
>
<VExpansionPanelTitle>
{{ faq.question }}
</VExpansionPanelTitle>
<VExpansionPanelText>
{{ faq.answer }}
</VExpansionPanelText>
</VExpansionPanel>
</VExpansionPanels>
</div>
</div>
</div>
</VContainer>
</template>
<style lang="scss" scoped>
.faq-section {
margin-block: 5.25rem 4.25rem;
}
</style>

149
resources/js/views/front-pages/landing-page/features.vue Normal file
View File

@@ -0,0 +1,149 @@
<script setup>
import sectionTitleIcon from '@images/pages/section-title-icon.png'
import SelectSolid from '@images/svg/3d-select-solid.svg'
import Edit from '@images/svg/edit.svg'
import GoogleDocs from '@images/svg/google-docs.svg'
import LaptopCharging from '@images/svg/laptop-charging.svg'
import Lifebelt from '@images/svg/lifebelt.svg'
import TransitionUp from '@images/svg/transition-up.svg'
const featuresData = [
{
title: 'Quality Code',
desc: 'Code structure that all developers will easily understand and fall in love with.',
img: LaptopCharging,
},
{
title: 'Continuous Updates',
desc: 'Free updates for the next 12 months, including new demos and features.',
img: TransitionUp,
},
{
title: 'Starter Kit',
desc: 'Start your project quickly without having to remove unnecessary features.',
img: Edit,
},
{
title: 'API Ready',
desc: 'Just change the endpoint and see your own data loaded within seconds.',
img: SelectSolid,
},
{
title: 'Well Documented',
desc: 'An easy-to-follow doc with lots of references and code examples.',
img: Lifebelt,
},
{
title: 'Excellent Support',
desc: 'An easy-to-follow doc with lots of references and code examples.',
img: GoogleDocs,
},
]
</script>
<template>
<VContainer id="features">
<div class="feature-cards">
<div class="headers d-flex justify-center flex-column align-center mb-6">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
USEFUL FEATURES
</div>
</div>
<div class="mb-2 text-center">
<span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
Everything you need
</span> <span class="text-h5 d-inline-block">to start your next project</span>
</div>
<p
class="text-body-1 font-weight-medium text-center"
style="letter-spacing: 0.15px !important;"
>
Not just a set of tools, the package includes ready-to-deploy conceptual application.
</p>
</div>
<VRow>
<VCol
v-for="(data, index) in featuresData"
:key="index"
cols="12"
sm="6"
md="4"
>
<div class="feature d-flex flex-column gap-y-2 align-center justify-center mt-2">
<VAvatar
variant="outlined"
size="84"
color="primary"
class="mb-2"
>
<Component :is="data.img" />
</VAvatar>
<h5 class="text-h5">
{{ data.title }}
</h5>
<p
class="text-center text-medium-emphasis"
style="max-inline-size: 360px;"
>
{{ data.desc }}
</p>
</div>
</VCol>
</VRow>
</div>
</VContainer>
</template>
<style lang="scss" scoped>
.feature-cards {
margin-block-end: 4.25rem;
}
#features{
padding-block-start: 16rem;
}
@media (max-width: 960px ){
#features{
padding-block-start: 6rem;
}
}
@media (max-width: 600px ){
#features{
padding-block-start: 2rem;
}
}
</style>
<style lang="scss" scoped>
.feature{
.v-avatar{
&.v-avatar--variant-outlined{
border: 2px solid rgba(var(--v-theme-primary), 0.32);
&:hover{
background: rgba(var(--v-theme-primary), 0.16);
cursor: pointer;
}
}
}
}
</style>

171
resources/js/views/front-pages/landing-page/hero-section.vue Normal file
View File

@@ -0,0 +1,171 @@
<script setup>
import { useMouse } from '@vueuse/core'
import { useTheme } from 'vuetify'
import { useGenerateImageVariant } from '@/@core/composable/useGenerateImageVariant'
import darkBg from '@images/front-pages/backgrounds/hero-bg-dark.png'
import lightBg from '@images/front-pages/backgrounds/hero-bg.png'
import heroDashboardImgDark from '@images/front-pages/landing-page/hero-dashboard-dark.png'
import heroDashboardImgLight from '@images/front-pages/landing-page/hero-dashboard-light.png'
import heroElementsImgDark from '@images/front-pages/landing-page/hero-elements-dark.png'
import heroElementsImgLight from '@images/front-pages/landing-page/hero-elements-light.png'
const theme = useTheme()
const isDark = ref(theme.name)
const heroBgUrl = computed(() => {
if (isDark.value === 'dark')
return darkBg
else
return lightBg
})
const heroElementsImg = useGenerateImageVariant(heroElementsImgLight, heroElementsImgDark)
const heroDashboardImg = useGenerateImageVariant(heroDashboardImgLight, heroDashboardImgDark)
const { x, y } = useMouse({ touch: false })
const translateMouse = computed(() => speed => {
if (typeof window !== 'undefined') {
const positionX = computed(() => (window.innerWidth - x.value * speed) / 100)
const positionY = computed(() => Math.max((window.innerHeight - y.value * speed) / 100, -40))
return { transform: `translate(${ positionX.value }px,${ positionY.value }px` }
}
})
</script>
<template>
<section
id="home"
:style="{ 'background-color': 'rgb(var(--v-theme-surface))' }"
>
<div
id="landingHero"
class="landing-hero"
:style="{ backgroundImage: `url(${heroBgUrl})` }"
>
<VContainer>
<div class="text-center px-6">
<div class="mb-4">
<div class="landing-page-title">
All in one sass application
</div>
<div class="landing-page-title">
for your business
</div>
</div>
<div class="text-body-1 font-weight-medium text-high-emphasis pb-8">
<p class="mb-0">
No coding required to make customization
</p>
<p class="mb-0">
The live customer has everything your marketing needs
</p>
</div>
<VBtn
:to="{ name: 'front-pages-landing-page', hash: `#pricing-plan` }"
size="large"
:active="false"
>
Get Early Access
</VBtn>
</div>
<div class="position-relative hero-animation-img">
<div class="hero-dashboard-img text-center">
<RouterLink
to="/"
target="_blank"
>
<img
:src="heroDashboardImg"
class="mx-auto cursor-pointer"
:style="translateMouse(2.5)"
>
</RouterLink>
</div>
<div class="hero-elements-img">
<RouterLink
to="/"
target="_blank"
>
<img
class="cursor-pointer"
:src="heroElementsImg"
:style="translateMouse(5)"
target="_blank"
>
</RouterLink>
</div>
</div>
</VContainer>
</div>
</section>
</template>
<style lang="scss" scoped>
section {
display: block;
padding-block-end: 6.25rem;
}
.landing-hero {
background-position: bottom;
background-repeat: no-repeat;
background-size: cover;
padding-block-start: 9rem;
}
.hero-dashboard-img {
img {
inline-size: 85%;
}
}
.hero-elements-img {
position: absolute;
inline-size: 100%;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
img {
inline-size: 100%;
}
}
.container {
margin-inline: auto;
max-inline-size: 85vw;
}
.feature-cards {
margin-block-start: 6.25rem;
}
.landing-page-title{
color: rgb(var(--v-theme-primary));
font-size: 2.375rem;
font-weight: 800;
line-height: 2.75rem
}
.hero-animation-img{
inset-block-start:0;
margin-block-end: -16rem;
}
@media (max-width: 960px ){
.hero-animation-img{
inset-block-start: 2rem;
margin-block-end: -8rem;
}
}
@media (max-width: 600px ){
.hero-animation-img{
inset-block-start: 1rem;
margin-block-end: -2rem;
}
}
</style>

152
resources/js/views/front-pages/landing-page/our-team.vue Normal file
View File

@@ -0,0 +1,152 @@
<script setup>
import sectionTitleIcon from '@images/pages/section-title-icon.png'
import teamPerson1 from '@images/pages/teamPerson1.png'
import teamPerson2 from '@images/pages/teamPerson2.png'
import teamPerson3 from '@images/pages/teamPerson3.png'
import teamPerson4 from '@images/pages/teamPerson4.png'
const teamData = ref([
{
name: 'Sophie Gilbert',
position: 'Project Manager',
image: teamPerson1,
backgroundColor: 'rgba(144, 85, 253, 0.16)',
borderColor: 'rgba(144, 85, 253,0.38)',
isHover: false,
},
{
name: 'Nannie Ford',
position: 'Development Lead',
image: teamPerson2,
backgroundColor: 'rgba(255, 76, 81, 0.16)',
borderColor: 'rgba(255, 76, 81,0.38)',
isHover: false,
},
{
name: 'Chris Watkins',
position: 'Marketing Manager',
image: teamPerson3,
backgroundColor: 'rgba(86, 202, 0, 0.16)',
borderColor: 'rgba(86, 202, 0,0.38)',
isHover: false,
},
{
name: 'Paul Miles',
position: 'UI Designer',
image: teamPerson4,
backgroundColor: 'rgba(22, 177, 255, 0.16)',
borderColor: 'rgba(22, 177, 255,0.38)',
isHover: false,
},
])
</script>
<template>
<VContainer id="team">
<div class="our-team">
<div class="headers d-flex justify-center flex-column align-center">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
OUR GREAT TEAM
</div>
</div>
<div class="mb-2">
<span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
Supported
</span> <span class="text-h5 d-inline-block">by Real People</span>
</div>
<p
class="text-body-1 font-weight-medium text-center"
style="letter-spacing: 0.15px !important;"
>
Who is behind these great-looking interfaces?
</p>
</div>
<VRow>
<VCol
v-for="(data, index) in teamData"
:key="index"
cols="12"
lg="3"
sm="6"
>
<VCard
flat
variant="outlined"
min-width="267"
class="position-relative overflow-visible mt-16"
:style="data.isHover ? { border: `1px solid ${data.borderColor}` } : {}"
@mouseenter="data.isHover = true"
@mouseleave="data.isHover = false"
>
<VImg
:src="data.image"
height="240px"
class="team-image"
/>
<div :style="{ maxHeight: '185px', minHeight: '185px', backgroundColor: data.backgroundColor }" />
<VCardText class="text-center">
<div class="mb-3">
<h5 class="text-h5">
{{ data.name }}
</h5>
<div class="text-body-1 text-medium-emphasis">
{{ data.position }}
</div>
</div>
<div class="d-flex gap-x-2 align-center justify-center">
<template
v-for="{ icon, color } in [
{ icon: 'ri-facebook-circle-line', color: 'rgba(59, 89, 152, 1)', link: 'https://www.facebook.com/' },
{ icon: 'ri-twitter-line', color: 'rgba(0, 172, 238, 1)', link: 'https://twitter.com/' },
{ icon: 'ri-linkedin-box-line', color: 'rgba(0, 119, 181, 1)', link: 'https://linkedin.com' },
]"
:key="color"
>
<VIcon
:icon="icon"
size="22"
:color="data.isHover ? color : ''"
class="cursor-pointer"
/>
</template>
</div>
</VCardText>
</VCard>
</VCol>
</VRow>
</div>
</VContainer>
</template>
<style lang="scss" scoped>
.team-image {
position: absolute;
inset-block-start: -3.4rem;
inset-inline: 0;
}
.headers {
margin-block-end: 1.25rem;
}
.our-team {
margin-block: 5.25rem;
}
</style>

222
resources/js/views/front-pages/landing-page/pricing-plans.vue Normal file
View File

@@ -0,0 +1,222 @@
<script setup>
import sectionTitleIcon from '@images/pages/section-title-icon.png'
import ListArrowIcon from '@images/svg/list-arrow-icon.svg'
import VectorIcon from '@images/svg/vector.svg'
const pricingPlans = [
{
title: 'Basic Plan',
price: 20,
features: [
'Timeline',
'Basic search',
'Live chat widget',
'Email marketing',
'Custom Forms',
'Traffic analytics',
],
supportType: 'Basic',
supportMedium: 'Only Email',
respondTime: 'AVG. Time: 24h',
current: false,
},
{
title: 'Favourite Plan',
price: 51,
features: [
'Everything in basic',
'Timeline with database',
'Advanced search',
'Marketing automation',
'Advanced chatbot',
'Campaign management',
],
supportType: 'Standard',
supportMedium: 'Email & Chat',
respondTime: 'AVG. Time: 6h',
current: true,
},
{
title: 'Standard Plan',
price: 99,
features: [
'Campaign management',
'Timeline with database',
'Fuzzy search',
'A/B testing sanbox',
'Custom permissions',
'Social media automation',
],
supportType: 'Exclusive',
supportMedium: 'Email, Chat & Google Meet',
respondTime: 'Live Support',
current: false,
},
]
</script>
<template>
<VContainer id="pricing-plan">
<div class="pricing-plans d-flex flex-column gap-12">
<!-- 👉 Headers -->
<div class="headers d-flex justify-center flex-column align-center">
<div class="d-flex gap-x-3 mb-6">
<img
:src="sectionTitleIcon"
alt="section title icon"
height="24"
width="25"
>
<div
class="text-body-1 text-high-emphasis font-weight-medium"
style="letter-spacing: 0.15px !important;"
>
PRICING PLANS
</div>
</div>
<div class="mb-2 text-center">
<span
class="text-h4 d-inline-block font-weight-bold"
style="line-height: 2rem;"
>
Tailored pricing plans
</span> <span class="text-h5 d-inline-block">designed for you</span>
</div>
<p
class="text-body-1 font-weight-medium text-center"
style="letter-spacing: 0.15px !important;"
>
All plans include 40+ advanced tools and features to boost your product. <br>
Choose the best plan to fit your needs.
</p>
</div>
<div class="w-75 mx-auto">
<VSlider
max="999"
model-value="458"
color="primary"
thumb-label="always"
class="mt-12"
/>
</div>
<VRow>
<VCol
v-for="(plan, index) in pricingPlans"
:key="index"
>
<VCard
flat
border
:style="plan.current ? 'border:2px solid rgb(var(--v-theme-primary))' : ''"
>
<VCardText class="pa-lg-8 text-no-wrap">
<div class="d-flex flex-column gap-y-8">
<div class="d-flex flex-column gap-y-3">
<h4 class="text-h4 text-center">
{{ plan.title }}
</h4>
<div class="d-flex align-center gap-x-3">
<div class="d-flex">
<h5
class="text-h5"
style="margin-block-start: 0.35rem;"
>
$
</h5>
<div class="plan-price-text">
{{ plan.price }}
</div>
</div>
<div>
<div class="text-body-1 font-weight-medium text-high-emphasis">
Per month
</div>
<div class="text-body-2">
10% off for yearly subscription
</div>
</div>
</div>
<VectorIcon />
</div>
<div class="d-flex flex-column">
<VList class="card-list">
<VListItem
v-for="(item, i) in plan.features"
:key="i"
>
<template #prepend>
<Component
:is="ListArrowIcon"
class="me-3"
/>
</template>
<h5 class="text-h5">
{{ item }}
</h5>
</VListItem>
</VList>
<VDivider class="my-4" />
<div class="d-flex align-center justify-space-between flex-wrap gap-2">
<div>
<div class="text-body-1 font-weight-medium text-high-emphasis mb-1">
{{ plan.supportType }} Support
</div>
<div class="text-body-2">
{{ plan.supportMedium }}
</div>
</div>
<VChip
variant="tonal"
color="primary"
density="comfortable"
class="font-weight-medium"
>
{{ plan.respondTime }}
</VChip>
</div>
</div>
<VBtn
block
:variant="plan.current ? 'elevated' : 'outlined'"
:to="{ name: 'front-pages-payment' }"
>
Get Started
</VBtn>
</div>
</VCardText>
</VCard>
</VCol>
</VRow>
</div>
</VContainer>
</template>
<style lang="scss">
.card-list {
--v-card-list-gap: 12px;
}
.pricing-plans {
margin-block: 5.25rem;
}
</style>
<style lang="scss" scoped>
.plan-price-text{
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 48px;
font-weight: 700;
line-height: 56px
}
</style>

81
resources/js/views/front-pages/landing-page/product-stats.vue Normal file
View File

@@ -0,0 +1,81 @@
<script setup>
const statData = ref([
{
title: 'Completed Sites',
value: 137,
icon: 'ri-layout-line',
color: 'primary',
isHover: false,
},
{
title: 'Working Hours',
value: 1100,
icon: 'ri-time-line',
color: 'success',
isHover: false,
},
{
title: 'Happy Customers',
value: 137,
icon: 'ri-user-smile-line',
color: 'warning',
isHover: false,
},
{
title: 'Awards Winning',
value: 23,
icon: 'ri-award-line',
color: 'info',
isHover: false,
},
])
</script>
<template>
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
<VContainer>
<div class="py-12">
<VRow>
<VCol
v-for="(product, index) in statData"
:key="index"
>
<VCard flat>
<VCardText class="text-center">
<VAvatar
size="82"
:color="product.color"
:variant="product.isHover ? 'elevated' : 'tonal'"
class="mb-6 cursor-pointer"
@mouseenter="() => product.isHover = true"
@mouseleave="product.isHover = false"
>
<VIcon
:icon="product.icon"
size="42"
/>
</VAvatar>
<div class="product-stat-text">
{{ kFormatter(product.value) }}+
</div>
<div class="text-body-1 font-weight-medium">
{{ product.title }}
</div>
</VCardText>
</VCard>
</VCol>
</VRow>
</div>
</VContainer>
</div>
</template>
<style lang="scss" scoped>
.product-stat-text{
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
font-size: 34px;
font-weight: 700;
letter-spacing: 0.25px;
line-height: 42px;
}
</style>