Initial commit
This commit is contained in:
324
resources/js/views/front-pages/front-page-footer.vue
Normal file
324
resources/js/views/front-pages/front-page-footer.vue
Normal file
@@ -0,0 +1,324 @@
|
||||
<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 footerDarkBg from '@images/front-pages/backgrounds/footer-bg-dark.png'
|
||||
import footerLightBg from '@images/front-pages/backgrounds/footer-bg-light.png'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const footerBg = useGenerateImageVariant(footerLightBg, footerDarkBg)
|
||||
|
||||
const pagesList = [
|
||||
{
|
||||
name: 'Pricing',
|
||||
to: { name: 'front-pages-pricing' },
|
||||
},
|
||||
{
|
||||
name: 'Payment',
|
||||
to: { name: 'front-pages-payment' },
|
||||
isNew: true,
|
||||
},
|
||||
{
|
||||
name: 'Checkout',
|
||||
to: { name: 'front-pages-checkout' },
|
||||
},
|
||||
{
|
||||
name: 'Help Center',
|
||||
to: { name: 'front-pages-help-center' },
|
||||
},
|
||||
{
|
||||
name: 'Login/Register',
|
||||
to: { name: 'pages-authentication-login-v2' },
|
||||
},
|
||||
]
|
||||
|
||||
const demoList = [
|
||||
{
|
||||
title: 'Vertical Layout',
|
||||
to: 'https://demos.pixinvent.com/vuexy-vuejs-laravel-admin-template/demo-1/dashboards/analytics',
|
||||
},
|
||||
{
|
||||
title: 'Horizontal Layout',
|
||||
to: 'https://demos.pixinvent.com/vuexy-vuejs-admin-template/demo-5/dashboards/analytics',
|
||||
},
|
||||
{
|
||||
title: 'Bordered Layout',
|
||||
to: 'https://demos.pixinvent.com/vuexy-vuejs-admin-template/demo-2/dashboards/analytics',
|
||||
},
|
||||
{
|
||||
title: 'Semi Dark Layout',
|
||||
to: 'https://demos.pixinvent.com/vuexy-vuejs-admin-template/demo-3/dashboards/analytics',
|
||||
},
|
||||
{
|
||||
title: 'Dark Layout',
|
||||
to: 'https://demos.pixinvent.com/vuexy-vuejs-admin-template/demo-4/dashboards/analytics',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="footer">
|
||||
<div
|
||||
class="footer-top pt-11"
|
||||
:style="{ 'background-image': `url(${footerBg})` }"
|
||||
>
|
||||
<VContainer>
|
||||
<VRow>
|
||||
<!-- 👉 Footer -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="5"
|
||||
>
|
||||
<div
|
||||
class="mb-4"
|
||||
:class="$vuetify.display.smAndDown ? 'w-100' : 'w-75'"
|
||||
>
|
||||
<div class="app-logo mb-6">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
<h1 class="app-logo-title text-white">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-6"
|
||||
:class="$vuetify.theme.current.dark ? 'text-body-1' : 'text-white-variant'"
|
||||
>
|
||||
Most Powerful & Comprehensive 🤩 Vuejs Admin Template with Elegant Material Design & Unique Layouts.
|
||||
</div>
|
||||
<VForm class="subscribe-form d-flex align-center">
|
||||
<AppTextField
|
||||
label="Subscribe to newsletter"
|
||||
placeholder="john@email.com"
|
||||
/>
|
||||
<VBtn class="align-self-end rounded-s-0">
|
||||
Subscribe
|
||||
</VBtn>
|
||||
</VForm>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Demos -->
|
||||
<VCol
|
||||
md="2"
|
||||
sm="4"
|
||||
xs="6"
|
||||
>
|
||||
<div class="footer-links">
|
||||
<h6 class="footer-title text-h6 mb-6">
|
||||
Demos
|
||||
</h6>
|
||||
<ul style="list-style: none;">
|
||||
<li
|
||||
v-for="(item, index) in demoList"
|
||||
:key="index"
|
||||
class="mb-4"
|
||||
>
|
||||
<a
|
||||
:href="item.to"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
:class="$vuetify.theme.current.dark ? 'text-body-1' : 'text-white-variant'"
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Pages -->
|
||||
<VCol
|
||||
md="2"
|
||||
sm="4"
|
||||
xs="6"
|
||||
>
|
||||
<div class="footer-links">
|
||||
<h6 class="footer-title text-h6 mb-6">
|
||||
Pages
|
||||
</h6>
|
||||
<ul style="list-style: none;">
|
||||
<li
|
||||
v-for="(item, index) in pagesList"
|
||||
:key="index"
|
||||
class="mb-4"
|
||||
>
|
||||
<RouterLink
|
||||
:class="$vuetify.theme.current.dark ? 'text-body-1' : 'text-white-variant'"
|
||||
class="me-2"
|
||||
:to="item.to"
|
||||
>
|
||||
{{ item.name }}
|
||||
</RouterLink>
|
||||
<template v-if="item.isNew">
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="elevated"
|
||||
label
|
||||
size="small"
|
||||
>
|
||||
New
|
||||
</VChip>
|
||||
</template>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- 👉 Download App -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
sm="4"
|
||||
>
|
||||
<div>
|
||||
<h6 class="footer-title text-h6 mb-6">
|
||||
Download our app
|
||||
</h6>
|
||||
|
||||
<div>
|
||||
<VBtn
|
||||
v-for="(item, index) in [
|
||||
{ image: appleImg, store: 'App Store' },
|
||||
{ image: googlePlayImg, store: 'Google Play' },
|
||||
]"
|
||||
:key="index"
|
||||
color="#282c3e"
|
||||
height="56"
|
||||
class="mb-4 d-block"
|
||||
>
|
||||
<template #default>
|
||||
<div class="d-flex align-center gap-x-8 footer-logo-buttons">
|
||||
<VImg
|
||||
:src="item.image"
|
||||
height="34"
|
||||
width="34"
|
||||
/>
|
||||
<div class="d-flex flex-column justify-content-start">
|
||||
<div :class="$vuetify.theme.current.dark ? 'text-body-2' : 'text-white-variant text-body-2'">
|
||||
Download on the
|
||||
</div>
|
||||
<h6
|
||||
class="text-h6 text-start"
|
||||
:class="$vuetify.theme.current.dark ? 'text-body-1' : 'footer-title'"
|
||||
>
|
||||
{{ item.store }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VContainer>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Footer Line -->
|
||||
<div class="footer-line w-100">
|
||||
<VContainer>
|
||||
<div class="d-flex justify-space-between flex-wrap gap-y-5 align-center">
|
||||
<div class="text-body-1 text-white-variant text-wrap me-4">
|
||||
©
|
||||
|
||||
{{ new Date().getFullYear() }}
|
||||
<a
|
||||
href="https://pixinvent.com/"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="font-weight-bold ms-1 text-white"
|
||||
>Pixinvent</a>,
|
||||
Made With ❤️ for a better web.
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-x-6">
|
||||
<template
|
||||
v-for="(item, index) in [
|
||||
{ title: 'github', icon: 'tabler-brand-github-filled', href: 'https://github.com/pixinvent' },
|
||||
{ title: 'facebook', icon: 'tabler-brand-facebook-filled', href: 'https://www.facebook.com/pixinvents/' },
|
||||
{ title: 'twitter', icon: 'tabler-brand-twitter-filled', href: 'https://twitter.com/pixinvents' },
|
||||
{ title: 'google', icon: 'tabler-brand-youtube-filled', href: 'https://www.youtube.com/channel/UClOcB3o1goJ293ri_Hxpklg' },
|
||||
]"
|
||||
:key="index"
|
||||
>
|
||||
<a
|
||||
:href="item.href"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="16"
|
||||
color="white"
|
||||
/>
|
||||
</a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer-title {
|
||||
color: rgba(255, 255, 255, 92%);
|
||||
}
|
||||
|
||||
.footer-top {
|
||||
border-radius: 60px 60px 0 0;
|
||||
background-size: cover;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
.text-white-variant,
|
||||
.text-body-1 {
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-line {
|
||||
background: #282c3e;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.subscribe-form {
|
||||
.v-label {
|
||||
color: rgba(225, 222, 245, 90%) !important;
|
||||
}
|
||||
|
||||
.v-field {
|
||||
border-end-end-radius: 0;
|
||||
border-end-start-radius: 10px;
|
||||
border-start-end-radius: 0;
|
||||
border-start-start-radius: 10px;
|
||||
|
||||
input.v-field__input::placeholder {
|
||||
color: rgba(225, 222, 245, 40%) !important;
|
||||
}
|
||||
|
||||
input.v-field__input {
|
||||
color: rgba(255, 255, 255, 78%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border-radius: 50%;
|
||||
|
||||
@media (min-width: 600px) and (max-width: 960px) {
|
||||
.v-container {
|
||||
padding-inline: 2rem !important;
|
||||
}
|
||||
|
||||
.footer-logo-buttons {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
554
resources/js/views/front-pages/front-page-navbar.vue
Normal file
554
resources/js/views/front-pages/front-page-navbar.vue
Normal file
@@ -0,0 +1,554 @@
|
||||
<script setup>
|
||||
import { useWindowScroll } from '@vueuse/core'
|
||||
import { PerfectScrollbar } from 'vue3-perfect-scrollbar'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import navImg from '@images/front-pages/misc/nav-item-col-img.png'
|
||||
import NavbarThemeSwitcher from '@/layouts/components/NavbarThemeSwitcher.vue'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
|
||||
const props = defineProps({ activeId: String })
|
||||
|
||||
const display = useDisplay()
|
||||
const { y } = useWindowScroll()
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const sidebar = ref(false)
|
||||
|
||||
watch(() => display, () => {
|
||||
return display.mdAndUp ? sidebar.value = false : sidebar.value
|
||||
}, { deep: true })
|
||||
|
||||
const isMenuOpen = ref(false)
|
||||
const isMegaMenuOpen = ref(false)
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
listTitle: 'Page',
|
||||
listIcon: 'tabler-layout-grid',
|
||||
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: 'tabler-lock-open',
|
||||
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: 'tabler-photo',
|
||||
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.startsWith(router.resolve(to).path))
|
||||
|
||||
// ℹ️ Below is much accurate approach if you don't have any nested routes
|
||||
|
||||
// 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"
|
||||
width="275"
|
||||
data-allow-mismatch
|
||||
disable-resize-watcher
|
||||
>
|
||||
<PerfectScrollbar
|
||||
:options="{ wheelPropagation: false }"
|
||||
class="h-100"
|
||||
>
|
||||
<!-- 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="nav-link font-weight-medium"
|
||||
:class="[props.activeId?.toLocaleLowerCase().replace('-', ' ') === item.toLocaleLowerCase() ? 'active-link' : '']"
|
||||
>
|
||||
{{ item }}
|
||||
</RouterLink>
|
||||
|
||||
<div class="font-weight-medium cursor-pointer">
|
||||
<div
|
||||
:class="[isMenuOpen ? 'mb-6 active-link' : '', isPageActive ? 'active-link' : '']"
|
||||
style="color: rgba(var(--v-theme-on-surface));"
|
||||
class="page-link"
|
||||
@click="isMenuOpen = !isMenuOpen"
|
||||
>
|
||||
Pages <VIcon :icon="isMenuOpen ? 'tabler-chevron-up' : 'tabler-chevron-down'" />
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="px-4"
|
||||
:class="isMenuOpen ? 'd-block' : 'd-none'"
|
||||
>
|
||||
<div
|
||||
v-for="(item, index) in menuItems"
|
||||
:key="index"
|
||||
>
|
||||
<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 text-no-wrap"
|
||||
>
|
||||
<RouterLink
|
||||
:to="listItem.to"
|
||||
:target="item.listTitle === 'Page' ? '_self' : '_blank'"
|
||||
class="mega-menu-item"
|
||||
:class="isCurrentRoute(listItem.to) ? 'active-link' : 'text-high-emphasis'"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-circle"
|
||||
:size="10"
|
||||
class="me-2"
|
||||
/>
|
||||
<span> {{ listItem.name }}</span>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<RouterLink
|
||||
to="/"
|
||||
target="_blank"
|
||||
class="font-weight-medium nav-link"
|
||||
>
|
||||
Admin
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation drawer close icon -->
|
||||
<VIcon
|
||||
id="navigation-drawer-close-btn"
|
||||
icon="tabler-x"
|
||||
size="20"
|
||||
@click="sidebar = !sidebar"
|
||||
/>
|
||||
</PerfectScrollbar>
|
||||
</VNavigationDrawer>
|
||||
|
||||
<!-- 👉 Navbar for desktop devices -->
|
||||
<div class="front-page-navbar">
|
||||
<div class="front-page-navbar">
|
||||
<VAppBar
|
||||
:color="$vuetify.theme.current.dark ? 'rgba(var(--v-theme-surface),0.38)' : 'rgba(var(--v-theme-surface), 0.38)'"
|
||||
:class="y > 10 ? 'app-bar-scrolled' : [$vuetify.theme.current.dark ? 'app-bar-dark' : 'app-bar-light', 'elevation-0']"
|
||||
class="navbar-blur"
|
||||
>
|
||||
<!-- toggle icon for mobile device -->
|
||||
<IconBtn
|
||||
id="vertical-nav-toggle-btn"
|
||||
class="ms-n3 me-2 d-inline-block d-md-none"
|
||||
@click="sidebar = !sidebar"
|
||||
>
|
||||
<VIcon
|
||||
size="26"
|
||||
icon="tabler-menu-2"
|
||||
color="rgba(var(--v-theme-on-surface))"
|
||||
/>
|
||||
</IconBtn>
|
||||
<!-- 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="app-logo">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
<h1 class="app-logo-title">
|
||||
{{ themeConfig.app.title }}
|
||||
</h1>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</VAppBarTitle>
|
||||
|
||||
<!-- landing page sections -->
|
||||
<div class="text-base align-center d-none d-md-flex">
|
||||
<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 py-2 px-2 px-lg-4"
|
||||
:class="[props.activeId?.toLocaleLowerCase().replace('-', ' ') === item.toLocaleLowerCase() ? 'active-link' : '']"
|
||||
>
|
||||
{{ item }}
|
||||
</RouterLink>
|
||||
|
||||
<!-- Pages Menu -->
|
||||
<span
|
||||
class="font-weight-medium cursor-pointer px-2 px-lg-4 py-2"
|
||||
:class="isPageActive || isMegaMenuOpen ? 'active-link' : ''"
|
||||
style="color: rgba(var(--v-theme-on-surface));"
|
||||
>
|
||||
Pages
|
||||
<VIcon
|
||||
icon="tabler-chevron-down"
|
||||
size="16"
|
||||
class="ms-2"
|
||||
/>
|
||||
<VMenu
|
||||
v-model="isMegaMenuOpen"
|
||||
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' : 'text-high-emphasis'"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<VIcon
|
||||
icon="tabler-circle"
|
||||
color="primary"
|
||||
: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="font-weight-medium nav-link"
|
||||
>
|
||||
Admin
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<div class="d-flex gap-x-4">
|
||||
<NavbarThemeSwitcher />
|
||||
|
||||
<VBtn
|
||||
v-if="$vuetify.display.lgAndUp"
|
||||
prepend-icon="tabler-shopping-cart"
|
||||
variant="elevated"
|
||||
color="primary"
|
||||
href="https://1.envato.market/vuexy_admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Purchase Now
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
rounded
|
||||
icon
|
||||
variant="elevated"
|
||||
color="primary"
|
||||
href="https://1.envato.market/vuexy_admin"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<VIcon icon="tabler-shopping-cart" />
|
||||
</VBtn>
|
||||
</div>
|
||||
</VAppBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-menu {
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
&:not(:hover) {
|
||||
color: rgb(var(--v-theme-on-surface));
|
||||
}
|
||||
}
|
||||
|
||||
.page-link {
|
||||
&:hover {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1280px) {
|
||||
.nav-menu {
|
||||
gap: 2.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@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;
|
||||
}
|
||||
|
||||
.app-bar-light {
|
||||
border: 2px solid rgba(var(--v-theme-surface), 68%);
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(var(--v-theme-surface), 38%);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.app-bar-dark {
|
||||
border: 2px solid rgba(var(--v-theme-surface), 68%);
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgba(255, 255, 255, 4%);
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.app-bar-scrolled {
|
||||
border: 2px solid rgb(var(--v-theme-surface));
|
||||
border-radius: 0.5rem;
|
||||
background-color: rgb(var(--v-theme-surface)) !important;
|
||||
transition: all 0.1s ease-in-out;
|
||||
}
|
||||
|
||||
.front-page-navbar::after {
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
backdrop-filter: saturate(100%) blur(6px);
|
||||
block-size: 5rem;
|
||||
content: "";
|
||||
inline-size: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@layouts/styles/mixins" as layoutMixins;
|
||||
|
||||
.mega-menu {
|
||||
position: fixed !important;
|
||||
inset-block-start: 5.4rem;
|
||||
inset-inline-start: 50%;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@include layoutMixins.rtl {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.front-page-navbar {
|
||||
.v-toolbar__content {
|
||||
padding-inline: 30px !important;
|
||||
}
|
||||
|
||||
.v-toolbar {
|
||||
inset-inline: 0 !important;
|
||||
margin-block-start: 1rem !important;
|
||||
margin-inline: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.mega-menu-item {
|
||||
&:hover {
|
||||
color: rgb(var(--v-theme-primary)) !important;
|
||||
}
|
||||
}
|
||||
|
||||
#navigation-drawer-close-btn {
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
inset-block-start: 0.5rem;
|
||||
inset-inline-end: 1rem;
|
||||
}
|
||||
</style>
|
||||
62
resources/js/views/front-pages/landing-page/banner.vue
Normal file
62
resources/js/views/front-pages/landing-page/banner.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<script setup>
|
||||
import ctaDashborad from '@images/front-pages/landing-page/cta-dashboard.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="landing-cta bg-surface"
|
||||
:class="$vuetify.theme.current.dark ? 'banner-bg-dark' : 'banner-bg-light'"
|
||||
>
|
||||
<VContainer>
|
||||
<div class="d-flex justify-center justify-md-space-between flex-wrap gap-6 gap-x-10 position-relative pt-12">
|
||||
<div class="align-self-center">
|
||||
<div class="banner-title text-primary mb-1">
|
||||
Ready to Get Started?
|
||||
</div>
|
||||
<h5 class="text-h5 text-medium-emphasis mb-8">
|
||||
Start your project with a 14-day free trial
|
||||
</h5>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:to="{ name: 'front-pages-payment' }"
|
||||
:size="$vuetify.display.smAndUp ? 'large' : 'default' "
|
||||
>
|
||||
Get Started
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<div class="banner-img">
|
||||
<img
|
||||
:src="ctaDashborad"
|
||||
class="w-100"
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.landing-cta {
|
||||
background-size: cover;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
.banner-img {
|
||||
margin-block-end: -22px;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
line-height: 44px;
|
||||
}
|
||||
|
||||
.banner-bg-light {
|
||||
background-image: url("@images/front-pages/backgrounds/cta-bg.png");
|
||||
}
|
||||
|
||||
.banner-bg-dark {
|
||||
background-image: url("@images/front-pages/backgrounds/cta-bg-dark.png");
|
||||
}
|
||||
</style>
|
||||
194
resources/js/views/front-pages/landing-page/contact-us.vue
Normal file
194
resources/js/views/front-pages/landing-page/contact-us.vue
Normal file
@@ -0,0 +1,194 @@
|
||||
<script setup>
|
||||
import ConnectImg from '@images/front-pages/landing-page/contact-customer-service.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-16">
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
class="mb-4"
|
||||
size="small"
|
||||
>
|
||||
Contact Us
|
||||
</VChip>
|
||||
<h4 class="d-flex align-center text-h4 mb-1 flex-wrap justify-center">
|
||||
<div class="position-relative me-2">
|
||||
<div class="section-title">
|
||||
let's work
|
||||
</div>
|
||||
</div>
|
||||
together
|
||||
</h4>
|
||||
<p class="text-body-1 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="5"
|
||||
>
|
||||
<div class="contact-card h-100">
|
||||
<VCard
|
||||
variant="outlined"
|
||||
border
|
||||
class="pa-2"
|
||||
:style="{ borderRadius: '3.75rem 0.375rem 0.375rem 0.375rem' }"
|
||||
>
|
||||
<VImg
|
||||
:src="ConnectImg"
|
||||
:style="{ borderRadius: '3.75rem 0.375rem 0.375rem 0.375rem' }"
|
||||
/>
|
||||
<VCardText class="pa-4 pb-1">
|
||||
<div class="d-flex justify-space-between flex-wrap gap-y-4">
|
||||
<div
|
||||
v-for="(item, index) in [
|
||||
{ title: 'Email', icon: 'tabler-mail', color: 'primary', value: 'example@gmail.com' },
|
||||
{ title: 'Phone', icon: 'tabler-phone-call', color: 'success', value: '+1234 568 963' },
|
||||
]"
|
||||
:key="index"
|
||||
class="d-flex gap-x-3 align-center"
|
||||
>
|
||||
<div>
|
||||
<VAvatar
|
||||
size="36"
|
||||
:color="item.color"
|
||||
variant="tonal"
|
||||
class="rounded-sm"
|
||||
>
|
||||
<VIcon
|
||||
:icon="item.icon"
|
||||
size="24"
|
||||
/>
|
||||
</VAvatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="text-body-1">
|
||||
{{ item .title }}
|
||||
</div>
|
||||
<h6 class="text-h6">
|
||||
{{ item.value }}
|
||||
</h6>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="7"
|
||||
>
|
||||
<VCard>
|
||||
<VCardItem class="pb-0">
|
||||
<h4 class="text-h4 mb-1">
|
||||
Send a message
|
||||
</h4>
|
||||
</VCardItem>
|
||||
|
||||
<VCardText>
|
||||
<p class="mb-6">
|
||||
If you would like to discuss anything related to payment, account, licensing, partnerships, or have pre-sales questions, you’re at the right place.
|
||||
</p>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="name"
|
||||
placeholder="John Doe"
|
||||
label="Full Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<AppTextField
|
||||
v-model="email"
|
||||
placeholder="johndoe@gmail.com"
|
||||
label="Email address"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<AppTextarea
|
||||
v-model="message"
|
||||
placeholder="Write a message"
|
||||
rows="3"
|
||||
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;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
|
||||
background-size: contain;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
font-weight: 800;
|
||||
inline-size: 120%;
|
||||
inset-block-end: 12%;
|
||||
inset-inline-start: -12%;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.contact-card::before {
|
||||
position: absolute;
|
||||
content: url("@images/front-pages/icons/contact-border.png");
|
||||
inset-block-start: -2.5rem;
|
||||
inset-inline-start: -2.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 999px) {
|
||||
.contact-card::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
384
resources/js/views/front-pages/landing-page/customers-review.vue
Normal file
384
resources/js/views/front-pages/landing-page/customers-review.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<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 avatar1 from '@images/avatars/avatar-1.png'
|
||||
import avatar2 from '@images/avatars/avatar-2.png'
|
||||
import avatar3 from '@images/avatars/avatar-3.png'
|
||||
import avatar4 from '@images/avatars/avatar-4.png'
|
||||
import avatar5 from '@images/avatars/avatar-5.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',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
desc: 'This template is really clean & well documented. The docs are really easy to understand and it\'s always easy to find a screenshot from their website.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Curtis Fletcher',
|
||||
position: 'Design Lead at Dribbble',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
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',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
desc: 'All the requirements for developers have been taken into consideration, so I\'m able to build any beautiful interface I want.',
|
||||
img: logo4,
|
||||
rating: 5,
|
||||
name: 'Sara Smith',
|
||||
position: 'Founder of Continental',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
desc: 'Vuexy is awesome, and I particularly enjoy knowing that if I get stuck on something, there is always a helpful community to assist me.',
|
||||
img: logo3,
|
||||
rating: 5,
|
||||
name: 'Tommy haffman',
|
||||
position: 'Founder of Levis',
|
||||
avatar: avatar5,
|
||||
},
|
||||
{
|
||||
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',
|
||||
avatar: avatar1,
|
||||
},
|
||||
{
|
||||
desc: 'Vuexy is awesome, and I particularly enjoy knowing that if I get stuck on something, there is always a helpful community to assist me.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Tommy haffman',
|
||||
position: 'Founder of Levis',
|
||||
avatar: avatar2,
|
||||
},
|
||||
{
|
||||
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',
|
||||
avatar: avatar3,
|
||||
},
|
||||
{
|
||||
desc: 'All the requirements for developers have been taken into consideration, so I\'m able to build any beautiful interface I want.',
|
||||
img: logo4,
|
||||
rating: 4,
|
||||
name: 'Sara Smith',
|
||||
position: 'Founder of Continental',
|
||||
avatar: avatar4,
|
||||
},
|
||||
{
|
||||
desc: 'This template is really clean & well documented. The docs are really easy to understand and it\'s always easy to find a screenshot from their website.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Curtis Fletcher',
|
||||
position: 'Design Lead at Dribbble',
|
||||
avatar: avatar5,
|
||||
},
|
||||
]
|
||||
|
||||
const customerReviewSwiper = ref(null)
|
||||
|
||||
const slide = dir => {
|
||||
const swiper = customerReviewSwiper.value?.swiper
|
||||
if (dir === 'prev')
|
||||
swiper.slidePrev()
|
||||
swiper.slideNext()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
id="customer-review"
|
||||
class="position-relative"
|
||||
>
|
||||
<div class="customer-reviews">
|
||||
<VContainer>
|
||||
<!-- 👉 Headers -->
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="3"
|
||||
>
|
||||
<div
|
||||
class="headers d-flex justify-center flex-column align-start h-100"
|
||||
style="max-inline-size: 275px;"
|
||||
>
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
class="mb-4"
|
||||
size="small"
|
||||
>
|
||||
Real Customers Reviews
|
||||
</VChip>
|
||||
<div class="position-relative mb-1 me-2">
|
||||
<div class="section-title">
|
||||
What people say
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-body-1 mb-12">
|
||||
See what our customers have to say about their experience.
|
||||
</p>
|
||||
<div class="position-relative">
|
||||
<IconBtn
|
||||
class="reviews-button-prev rounded me-4"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
@click="slide('prev')"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-chevron-left"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</IconBtn>
|
||||
|
||||
<IconBtn
|
||||
class="reviews-button-next rounded"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
@click="slide('next')"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-chevron-right"
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</IconBtn>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="9"
|
||||
>
|
||||
<!-- 👉 Customer Review Swiper -->
|
||||
<div class="swiper-reviews-carousel">
|
||||
<!-- eslint-disable vue/attribute-hyphenation -->
|
||||
<swiper-container
|
||||
ref="customerReviewSwiper"
|
||||
slides-per-view="1"
|
||||
space-between="20"
|
||||
loop="true"
|
||||
autoplay-delay="3000"
|
||||
autoplay-disable-on-interaction="false"
|
||||
events-prefix="swiper-"
|
||||
:injectStyles="[
|
||||
`
|
||||
.swiper{
|
||||
padding-block: 12px;
|
||||
padding-inline: 12px;
|
||||
margin-inline: -12px;
|
||||
}
|
||||
.swiper-button-next, .swiper-button-prev{
|
||||
visibility: hidden;
|
||||
}
|
||||
`,
|
||||
]"
|
||||
navigation="{
|
||||
nextEl: '.swiper-button-next',
|
||||
prevEl: '.swiper-button-prev',
|
||||
}"
|
||||
:breakpoints="{
|
||||
1280: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
960: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
600: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(data, index) in reviewData"
|
||||
:key="index"
|
||||
>
|
||||
<VCard class="d-flex h-100 align-stretch">
|
||||
<VCardText class="pa-6 d-flex flex-column justify-space-between align-start">
|
||||
<img
|
||||
:src="data.img"
|
||||
style="block-size: 1.375rem;"
|
||||
class="mb-3"
|
||||
>
|
||||
<p class="text-body-1">
|
||||
{{ data.desc }}
|
||||
</p>
|
||||
|
||||
<VRating
|
||||
:model-value="data.rating"
|
||||
color="warning"
|
||||
density="compact"
|
||||
class="mb-4"
|
||||
readonly
|
||||
/>
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<VAvatar
|
||||
:image="data.avatar"
|
||||
size="32"
|
||||
/>
|
||||
<div>
|
||||
<h6 class="text-h6">
|
||||
{{ data.name }}
|
||||
</h6>
|
||||
|
||||
<div class="text-body-2 text-disabled">
|
||||
{{ data.position }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VContainer>
|
||||
|
||||
<VDivider class="w-100 swiper-divider" />
|
||||
|
||||
<VContainer>
|
||||
<!-- 👉 Brand-logo Swiper -->
|
||||
<div class="swiper-brands-carousel">
|
||||
<swiper-container
|
||||
slides-per-view="2"
|
||||
:space-between="10"
|
||||
events-prefix="swiper-"
|
||||
:autoplay="{
|
||||
delay: 3000,
|
||||
disableOnInteraction: true,
|
||||
}"
|
||||
:breakpoints="{
|
||||
992: {
|
||||
slidesPerView: 5,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 3,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(img, index) in [brandLogo1, brandLogo2, brandLogo3, brandLogo4, brandLogo5]"
|
||||
:key="index"
|
||||
>
|
||||
<VImg
|
||||
:src="img"
|
||||
height="38"
|
||||
/>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</VContainer>
|
||||
</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-divider {
|
||||
margin-block: 72px 1rem;
|
||||
}
|
||||
|
||||
.swiper-reviews-carousel {
|
||||
swiper-container {
|
||||
.swiper {
|
||||
padding-block-end: 3rem;
|
||||
}
|
||||
|
||||
.swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
swiper-slide {
|
||||
block-size: auto;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-reviews {
|
||||
padding-block: 72px 84px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.customer-reviews {
|
||||
padding-block: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#customer-review {
|
||||
border-radius: 3.75rem 3.75rem 0 0;
|
||||
background-color: rgb(var(--v-theme-background));
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom/contain;
|
||||
background-size: contain;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
font-weight: 800;
|
||||
inline-size: 120%;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: -12%;
|
||||
}
|
||||
</style>
|
||||
124
resources/js/views/front-pages/landing-page/faq-section.vue
Normal file
124
resources/js/views/front-pages/landing-page/faq-section.vue
Normal file
@@ -0,0 +1,124 @@
|
||||
<script setup>
|
||||
import boyWithLogo from '@images/front-pages/landing-page/faq-boy-with-logos.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: 'Do I need to purchase a license for each website?',
|
||||
answer: 'Dessert ice cream donut oat cake jelly-o pie sugar plum cheesecake. Bear claw dragée oat cake dragée ice cream halvah tootsie roll. Danish cake oat cake pie macaroon tart donut gummies. Jelly beans candy canes carrot cake. Fruitcake chocolate chupa chups.',
|
||||
},
|
||||
{
|
||||
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>
|
||||
<div id="faq">
|
||||
<VContainer>
|
||||
<!-- 👉 Header -->
|
||||
<div class="faq-section">
|
||||
<div class="headers d-flex justify-center flex-column align-center">
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
size="small"
|
||||
class="mb-4"
|
||||
>
|
||||
FAQ
|
||||
</VChip>
|
||||
<h4 class="d-flex align-center text-h4 mb-1 flex-wrap justify-center">
|
||||
Frequently Asked
|
||||
<div class="position-relative ms-2">
|
||||
<div class="section-title">
|
||||
questions
|
||||
</div>
|
||||
</div>
|
||||
</h4>
|
||||
<p class="text-body-1 mb-0">
|
||||
Browse through these FAQs to find answers to commonly asked questions.
|
||||
</p>
|
||||
</div>
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="5"
|
||||
>
|
||||
<div class="pt-10 d-flex align-center justify-center h-100">
|
||||
<VImg
|
||||
:src="boyWithLogo"
|
||||
height="330"
|
||||
width="330"
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="7"
|
||||
>
|
||||
<VExpansionPanels class="pt-16">
|
||||
<VExpansionPanel
|
||||
v-for="faq in faqData"
|
||||
:key="faq.question"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
{{ faq.question }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
{{ faq.answer }}
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.faq-section {
|
||||
margin-block: 5.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.faq-section {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
#faq {
|
||||
border-radius: 3.75rem 3.75rem 0 0;
|
||||
background-color: rgba(var(--v-theme-background));
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
|
||||
background-size: contain;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
font-weight: 800;
|
||||
inline-size: 130%;
|
||||
inset-block-end: 12%;
|
||||
inset-inline-start: -12%;
|
||||
}
|
||||
</style>
|
||||
133
resources/js/views/front-pages/landing-page/features.vue
Normal file
133
resources/js/views/front-pages/landing-page/features.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<script setup>
|
||||
import check from '@images/svg/Check.svg'
|
||||
import keyboard from '@images/svg/keyboard.svg'
|
||||
import laptop from '@images/svg/laptop.svg'
|
||||
import paper from '@images/svg/paper-send.svg'
|
||||
import rocket from '@images/svg/rocket.svg'
|
||||
import user from '@images/svg/user.svg'
|
||||
|
||||
const featuresData = [
|
||||
{
|
||||
title: 'Quality Code',
|
||||
desc: 'Code structure that all developers will easily understand and fall in love with.',
|
||||
icon: laptop,
|
||||
},
|
||||
{
|
||||
title: 'Continuous Updates',
|
||||
desc: 'Free updates for the next 12 months, including new demos and features.',
|
||||
icon: rocket,
|
||||
},
|
||||
{
|
||||
title: 'Starter Kit',
|
||||
desc: 'Start your project quickly without having to remove unnecessary features.',
|
||||
icon: paper,
|
||||
},
|
||||
{
|
||||
title: 'API Ready',
|
||||
desc: 'Just change the endpoint and see your own data loaded within seconds.',
|
||||
icon: check,
|
||||
},
|
||||
{
|
||||
title: 'Excellent Support',
|
||||
desc: 'An easy-to-follow doc with lots of references and code examples.',
|
||||
icon: user,
|
||||
},
|
||||
{
|
||||
title: 'Well Documented',
|
||||
desc: 'An easy-to-follow doc with lots of references and code examples.',
|
||||
icon: keyboard,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="features">
|
||||
<div class="feature-cards">
|
||||
<div class="headers d-flex justify-center flex-column align-center mb-12">
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
class="mb-4"
|
||||
size="small"
|
||||
>
|
||||
Useful Features
|
||||
</VChip>
|
||||
<div class="d-flex text-h4 mb-1 align-center flex-wrap justify-center">
|
||||
<div class="position-relative me-2">
|
||||
<div class="section-title">
|
||||
Everything you need
|
||||
</div>
|
||||
</div>
|
||||
to start your next project
|
||||
</div>
|
||||
<p class="text-body-1 mb-0">
|
||||
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"
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<div class="d-flex flex-column align-center justify-center gap-4 mx-auto">
|
||||
<VIcon
|
||||
:icon="data.icon"
|
||||
size="64"
|
||||
color="primary"
|
||||
/>
|
||||
<div class="text-center">
|
||||
<h5 class="text-h5 mb-2">
|
||||
{{ data.title }}
|
||||
</h5>
|
||||
<p
|
||||
class="text-body-1 mb-6"
|
||||
style="max-inline-size: 310px;"
|
||||
>
|
||||
{{ data.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feature-cards {
|
||||
margin-block: 3.75rem;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
|
||||
background-size: contain;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
inline-size: 120%;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: -12%;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.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>
|
||||
301
resources/js/views/front-pages/landing-page/hero-section.vue
Normal file
301
resources/js/views/front-pages/landing-page/hero-section.vue
Normal file
@@ -0,0 +1,301 @@
|
||||
<script setup>
|
||||
import { useMouse } from '@vueuse/core'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { useGenerateImageVariant } from '@/@core/composable/useGenerateImageVariant'
|
||||
import joinArrow from '@images/front-pages/icons/Join-community-arrow.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 heroElementsImg = useGenerateImageVariant(heroElementsImgLight, heroElementsImgDark)
|
||||
const heroDashboardImg = useGenerateImageVariant(heroDashboardImgLight, heroDashboardImgDark)
|
||||
const { x, y } = useMouse({ touch: false })
|
||||
|
||||
const translateMouse = computed(() => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const rotateX = ref((window.innerHeight - 1 * y.value) / 100)
|
||||
|
||||
return { transform: `perspective(1200px) rotateX(${ rotateX.value < -40 ? -20 : rotateX.value }deg) rotateY(${ (window.innerWidth - 2 * x.value) / 100 }deg) scale3d(1,1,1)` }
|
||||
}
|
||||
|
||||
// Provide a default return value when `window` is undefined
|
||||
return { transform: 'perspective(1200px) rotateX(0deg) rotateY(0deg) scale3d(1,1,1)' }
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
id="home"
|
||||
:style="{ background: 'rgb(var(--v-theme-surface))' }"
|
||||
>
|
||||
<div id="landingHero">
|
||||
<div
|
||||
class="landing-hero"
|
||||
:class="theme.current.value.dark ? 'landing-hero-dark-bg' : 'landing-hero-light-bg'"
|
||||
>
|
||||
<VContainer>
|
||||
<div class="hero-text-box text-center px-6">
|
||||
<h1 class="hero-title mb-4">
|
||||
One dashboard to manage all your business
|
||||
</h1>
|
||||
<h6 class="mb-6 text-h6">
|
||||
Production-ready & easy to use Admin Template
|
||||
for Reliability and Customizability.
|
||||
</h6>
|
||||
<div class="position-relative">
|
||||
<h6 class="position-absolute hero-btn-item d-md-flex d-none text-h6 text-medium-emphasis">
|
||||
Join Community
|
||||
<VImg
|
||||
:src="joinArrow"
|
||||
class="flip-in-rtl"
|
||||
width="54"
|
||||
height="31"
|
||||
/>
|
||||
</h6>
|
||||
|
||||
<VBtn
|
||||
:size="$vuetify.display.smAndUp ? 'large' : 'default' "
|
||||
:to="{ name: 'front-pages-landing-page', hash: `#pricing-plan` }"
|
||||
:active="false"
|
||||
>
|
||||
Get early Access
|
||||
</VBtn>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VContainer>
|
||||
<div class="position-relative">
|
||||
<div class="blank-section" />
|
||||
<div class="hero-animation-img position-absolute">
|
||||
<RouterLink
|
||||
:to="{ name: 'dashboards-ecommerce' }"
|
||||
target="_blank"
|
||||
>
|
||||
<div
|
||||
class="hero-dashboard-img position-relative"
|
||||
:style="translateMouse"
|
||||
data-allow-mismatch
|
||||
>
|
||||
<img
|
||||
:src="heroDashboardImg"
|
||||
alt="Hero Dashboard"
|
||||
class="animation-img"
|
||||
>
|
||||
<img
|
||||
:src="heroElementsImg"
|
||||
alt="hero elements"
|
||||
class="hero-elements-img animation-img position-absolute"
|
||||
style="transform: translateZ(1rem);"
|
||||
>
|
||||
</div>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.landing-hero {
|
||||
border-radius: 0 0 50px 50px;
|
||||
padding-block: 9.75rem 22rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inline-size: 90%;
|
||||
inset-block-start: -25rem;
|
||||
inset-inline-start: 4.425rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.blank-section {
|
||||
background-color: rgba(var(--v-theme-surface));
|
||||
min-block-size: 25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-width: 1440px) {
|
||||
.blank-section {
|
||||
min-block-size: 18rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
padding-block-end: 22rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inset-block-start: -25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 900px) and (max-width: 1279px) {
|
||||
.blank-section {
|
||||
min-block-size: 13rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
padding-block-end: 14rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inset-block-start: -17rem;
|
||||
inset-inline-start: 2.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 899px) {
|
||||
.blank-section {
|
||||
min-block-size: 12rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
padding-block-end: 12rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inset-block-start: -15rem;
|
||||
inset-inline-start: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 600px) and (max-width: 767px) {
|
||||
.blank-section {
|
||||
min-block-size: 12rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
padding-block-end: 8rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inset-block-start: -11rem;
|
||||
inset-inline-start: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 425px) and (max-width: 600px) {
|
||||
.blank-section {
|
||||
min-block-size: 8rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
padding-block-end: 8rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inset-block-start: -9rem;
|
||||
inset-inline-start: 1.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 300px) and (max-width: 424px) {
|
||||
.blank-section {
|
||||
min-block-size: 4rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
padding-block-end: 6rem;
|
||||
}
|
||||
|
||||
.hero-animation-img {
|
||||
inset-block-start: -7rem;
|
||||
inset-inline-start: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-hero::before {
|
||||
position: absolute;
|
||||
background-repeat: no-repeat;
|
||||
inset-block: 0;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.landing-hero-dark-bg {
|
||||
background-color: #25293c;
|
||||
background-image: url("@images/front-pages/backgrounds/hero-bg.png");
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
.landing-hero-light-bg {
|
||||
background: url("@images/front-pages/backgrounds/hero-bg.png") center no-repeat, linear-gradient(138.18deg, #eae8fd 0%, #fce5e6 94.44%);
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@media (min-width: 650px) {
|
||||
.hero-text-box {
|
||||
inline-size: 38rem;
|
||||
margin-block-end: 1rem;
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 599px) {
|
||||
.hero-title {
|
||||
font-size: 1.5rem !important;
|
||||
line-height: 2.375rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
animation: shine 2s ease-in-out infinite alternate;
|
||||
background: linear-gradient(135deg, #28c76f 0%, #5a4aff 47.92%, #ff3739 100%);
|
||||
// stylelint-disable-next-line property-no-vendor-prefix
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
background-size: 200% auto;
|
||||
font-size: 42px;
|
||||
font-weight: 800;
|
||||
line-height: 48px;
|
||||
-webkit-text-fill-color: rgba(0, 0, 0, 0%);
|
||||
}
|
||||
|
||||
@keyframes shine {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
|
||||
80% {
|
||||
background-position: 50% 90%;
|
||||
}
|
||||
|
||||
100% {
|
||||
background-position: 91% 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-dashboard-img {
|
||||
margin-block: 0;
|
||||
margin-inline: auto;
|
||||
transform-style: preserve-3d;
|
||||
transition: all 0.35s;
|
||||
|
||||
img {
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-elements-img {
|
||||
position: absolute;
|
||||
inset-block: 0;
|
||||
inset-inline-start: 0;
|
||||
}
|
||||
|
||||
.feature-cards {
|
||||
margin-block-start: 6.25rem;
|
||||
}
|
||||
|
||||
.hero-btn-item {
|
||||
inset-block-start: 80%;
|
||||
inset-inline-start: 5%;
|
||||
}
|
||||
</style>
|
||||
150
resources/js/views/front-pages/landing-page/our-team.vue
Normal file
150
resources/js/views/front-pages/landing-page/our-team.vue
Normal file
@@ -0,0 +1,150 @@
|
||||
<script setup>
|
||||
import teamPerson1 from '@images/front-pages/landing-page/team-member-1.png'
|
||||
import teamPerson2 from '@images/front-pages/landing-page/team-member-2.png'
|
||||
import teamPerson3 from '@images/front-pages/landing-page/team-member-3.png'
|
||||
import teamPerson4 from '@images/front-pages/landing-page/team-member-4.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.16)',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
name: 'Paul Miles',
|
||||
position: 'UI Designer',
|
||||
image: teamPerson2,
|
||||
backgroundColor: 'rgba(22, 177, 255, 0.16)',
|
||||
borderColor: 'rgba(22, 177, 255,0.16)',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
name: 'Nannie Ford',
|
||||
position: 'Development Lead',
|
||||
image: teamPerson3,
|
||||
backgroundColor: 'rgba(255, 76, 81, 0.16)',
|
||||
borderColor: 'rgba(255, 76, 81,0.16)',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
name: 'Chris Watkins',
|
||||
position: 'Marketing Manager',
|
||||
image: teamPerson4,
|
||||
backgroundColor: 'rgba(86, 202, 0, 0.16)',
|
||||
borderColor: 'rgba(86, 202, 0,0.16)',
|
||||
isHover: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="team">
|
||||
<div class="our-team pa-">
|
||||
<div class="headers d-flex justify-center flex-column align-center">
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
class="mb-4"
|
||||
size="small"
|
||||
>
|
||||
Our Great Team
|
||||
</VChip>
|
||||
|
||||
<h4 class="d-flex align-center text-h4 mb-1 flex-wrap justify-center">
|
||||
<div class="position-relative me-2">
|
||||
<div class="section-title">
|
||||
Supported
|
||||
</div>
|
||||
</div>
|
||||
by Real People
|
||||
</h4>
|
||||
|
||||
<p class="text-center text-body-1 mb-0">
|
||||
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
|
||||
min-width="267"
|
||||
class="position-relative overflow-visible team-card mb-lg-0 mb-12"
|
||||
>
|
||||
<div :style="{ maxHeight: '185px', minHeight: '185px', borderRadius: '90px 20px 0 0', backgroundColor: `${data.backgroundColor}`, border: `1px solid ${data.borderColor}`, borderBottom: 'none' }">
|
||||
<VImg
|
||||
:src="data.image"
|
||||
height="240"
|
||||
class="team-image"
|
||||
/>
|
||||
</div>
|
||||
<VCardText
|
||||
class="text-center pa-4"
|
||||
:style="{ border: `1px solid ${data.borderColor}`, borderBlockStart: 'none', borderRadius: '0 0 6px 6px', boxSizing: 'border-box' }"
|
||||
>
|
||||
<h5 class="text-h5">
|
||||
{{ data.name }}
|
||||
</h5>
|
||||
<p class="text-body-1 text-disabled mb-0">
|
||||
{{ data.position }}
|
||||
</p>
|
||||
</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: 7.4375rem;
|
||||
}
|
||||
|
||||
.our-team {
|
||||
margin-block: 5.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 1264px) {
|
||||
.our-team {
|
||||
margin-block-end: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.team-card {
|
||||
border-radius: 90px 20px 6px 6px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
|
||||
background-size: contain;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
font-weight: 800;
|
||||
inline-size: 120%;
|
||||
inset-block-end: 12%;
|
||||
inset-inline-start: -12%;
|
||||
}
|
||||
</style>
|
||||
263
resources/js/views/front-pages/landing-page/pricing-plans.vue
Normal file
263
resources/js/views/front-pages/landing-page/pricing-plans.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<script setup>
|
||||
import paperPlane from '@images/front-pages/icons/paper-airplane.png'
|
||||
import plane from '@images/front-pages/icons/plane.png'
|
||||
import pricingPlanArrow from '@images/front-pages/icons/pricing-plans-arrow.png'
|
||||
import shuttleRocket from '@images/front-pages/icons/shuttle-rocket.png'
|
||||
|
||||
const annualMonthlyPlanPriceToggler = ref(true)
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
title: 'Basic',
|
||||
image: paperPlane,
|
||||
monthlyPrice: 19,
|
||||
yearlyPrice: 168,
|
||||
features: [
|
||||
'Timeline',
|
||||
'Basic search',
|
||||
'Live chat widget',
|
||||
'Email marketing',
|
||||
'Custom Forms',
|
||||
'Traffic analytics',
|
||||
'Basic Support',
|
||||
],
|
||||
supportType: 'Basic',
|
||||
supportMedium: 'Only Email',
|
||||
respondTime: 'AVG. Time: 24h',
|
||||
current: false,
|
||||
},
|
||||
{
|
||||
title: 'Favourite',
|
||||
image: plane,
|
||||
monthlyPrice: 29,
|
||||
yearlyPrice: 264,
|
||||
features: [
|
||||
'Everything in basic',
|
||||
'Timeline with database',
|
||||
'Advanced search',
|
||||
'Marketing automation',
|
||||
'Advanced chatbot',
|
||||
'Campaign management',
|
||||
'Collaboration tools',
|
||||
],
|
||||
supportType: 'Standard',
|
||||
supportMedium: 'Email & Chat',
|
||||
respondTime: 'AVG. Time: 6h',
|
||||
current: true,
|
||||
},
|
||||
{
|
||||
title: 'Standard',
|
||||
image: shuttleRocket,
|
||||
monthlyPrice: 49,
|
||||
yearlyPrice: 444,
|
||||
features: [
|
||||
'Campaign management',
|
||||
'Timeline with database',
|
||||
'Fuzzy search',
|
||||
'A/B testing sanbox',
|
||||
'Custom permissions',
|
||||
'Social media automation',
|
||||
'Sales automation tools',
|
||||
],
|
||||
supportType: 'Exclusive',
|
||||
supportMedium: 'Email, Chat & Google Meet',
|
||||
respondTime: 'Live Support',
|
||||
current: false,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div id="pricing-plan">
|
||||
<VContainer>
|
||||
<div class="pricing-plans">
|
||||
<!-- 👉 Headers -->
|
||||
<div class="headers d-flex justify-center flex-column align-center flex-wrap">
|
||||
<VChip
|
||||
label
|
||||
color="primary"
|
||||
class="mb-4"
|
||||
size="small"
|
||||
>
|
||||
Pricing Plans
|
||||
</VChip>
|
||||
<h4 class="d-flex align-center text-h4 mb-1 flex-wrap justify-center">
|
||||
<div class="position-relative me-2">
|
||||
<div class="section-title">
|
||||
Tailored design plans
|
||||
</div>
|
||||
</div>
|
||||
designed for you
|
||||
</h4>
|
||||
<div class="text-center text-body-1">
|
||||
<p class="mb-0">
|
||||
All plans include 40+ advanced tools and features to boost your product.
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
Choose the best plan to fit your needs.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 👉 Annual and monthly price toggler -->
|
||||
<div class="d-flex align-center justify-center mx-auto mt-6 mb-16">
|
||||
<VLabel
|
||||
for="pricing-plan-toggle"
|
||||
class="me-3"
|
||||
>
|
||||
Pay Monthly
|
||||
</VLabel>
|
||||
<div class="position-relative">
|
||||
<VSwitch
|
||||
id="pricing-plan-toggle"
|
||||
v-model="annualMonthlyPlanPriceToggler"
|
||||
>
|
||||
<template #label>
|
||||
<div class="text-body-1">
|
||||
Pay Annually
|
||||
</div>
|
||||
</template>
|
||||
</VSwitch>
|
||||
<div class="position-absolute pricing-plan-arrow d-md-flex d-none">
|
||||
<VImg
|
||||
:src="pricingPlanArrow"
|
||||
class="flip-in-rtl"
|
||||
width="60"
|
||||
height="42"
|
||||
/>
|
||||
<div class="text-no-wrap text-body-1 font-weight-medium">
|
||||
Save 25%
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(plan, index) in pricingPlans"
|
||||
:key="index"
|
||||
>
|
||||
<VCard :style="plan.current ? 'border:2px solid rgb(var(--v-theme-primary))' : ''">
|
||||
<VCardText class="pa-8 pt-12">
|
||||
<VImg
|
||||
:src="plan.image"
|
||||
width="88"
|
||||
height="88"
|
||||
class="mx-auto mb-8"
|
||||
/>
|
||||
<h4 class="text-h4 text-center">
|
||||
{{ plan.title }}
|
||||
</h4>
|
||||
<div class="d-flex justify-center mb-8 position-relative">
|
||||
<div class="d-flex align-end">
|
||||
<div class="pricing-title text-primary me-1">
|
||||
${{ annualMonthlyPlanPriceToggler ? Math.floor(plan.yearlyPrice) / 12 : plan.monthlyPrice }}
|
||||
</div>
|
||||
<span class="text-disabled mb-2">/mo</span>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Annual Price -->
|
||||
<span
|
||||
v-show="annualMonthlyPlanPriceToggler"
|
||||
class="annual-price-text position-absolute text-sm text-disabled"
|
||||
>
|
||||
{{ plan.yearlyPrice === 0 ? 'free' : `USD ${plan.yearlyPrice}/Year` }}
|
||||
</span>
|
||||
</div>
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(item, i) in plan.features"
|
||||
:key="i"
|
||||
>
|
||||
<template #prepend>
|
||||
<VAvatar
|
||||
size="16"
|
||||
:variant="!plan.current ? 'tonal' : 'elevated'"
|
||||
color="primary"
|
||||
class="me-3"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-check"
|
||||
size="12"
|
||||
:color="!plan.current ? 'primary' : 'white'"
|
||||
/>
|
||||
</VAvatar>
|
||||
<h6 class="text-h6">
|
||||
{{ item }}
|
||||
</h6>
|
||||
</template>
|
||||
</VListItem>
|
||||
</VList>
|
||||
<VBtn
|
||||
block
|
||||
:variant="plan.current ? 'elevated' : 'tonal'"
|
||||
class="mt-8"
|
||||
:to="{ name: 'front-pages-payment' }"
|
||||
>
|
||||
Get Started
|
||||
</VBtn>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.card-list {
|
||||
--v-card-list-gap: 12px;
|
||||
}
|
||||
|
||||
#pricing-plan {
|
||||
border-radius: 3.75rem;
|
||||
background-color: rgb(var(--v-theme-background));
|
||||
}
|
||||
|
||||
.pricing-title {
|
||||
font-size: 38px;
|
||||
font-weight: 800;
|
||||
line-height: 52px;
|
||||
}
|
||||
|
||||
.pricing-plans {
|
||||
margin-block: 5.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pricing-plans {
|
||||
margin-block: 4rem;
|
||||
}
|
||||
}
|
||||
|
||||
.save-upto-chip {
|
||||
inset-block-start: -1.5rem;
|
||||
inset-inline-end: -7rem;
|
||||
}
|
||||
|
||||
.pricing-plan-arrow {
|
||||
inset-block-start: -0.5rem;
|
||||
inset-inline-end: -8rem;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.section-title::after {
|
||||
position: absolute;
|
||||
background: url("../../../assets/images/front-pages/icons/section-title-icon.png") no-repeat left bottom;
|
||||
background-size: contain;
|
||||
block-size: 100%;
|
||||
content: "";
|
||||
font-weight: 700;
|
||||
inline-size: 120%;
|
||||
inset-block-end: 0;
|
||||
inset-inline-start: -12%;
|
||||
}
|
||||
|
||||
.annual-price-text {
|
||||
inset-block-end: -40%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,71 @@
|
||||
<script setup>
|
||||
import check from '@images/svg/Check.svg'
|
||||
import diamond from '@images/svg/Diamond.svg'
|
||||
import laptop from '@images/svg/laptop.svg'
|
||||
import user from '@images/svg/user.svg'
|
||||
|
||||
const statData = [
|
||||
{
|
||||
title: 'Support Tickets Resolved',
|
||||
value: '7.1k+',
|
||||
icon: laptop,
|
||||
color: 'primary',
|
||||
},
|
||||
{
|
||||
title: 'Join creatives community',
|
||||
value: '50k+',
|
||||
icon: user,
|
||||
color: 'success',
|
||||
},
|
||||
{
|
||||
title: 'Highly Rated Products',
|
||||
value: '4.8/5',
|
||||
icon: diamond,
|
||||
color: 'info',
|
||||
},
|
||||
{
|
||||
title: 'Money Back Guarantee',
|
||||
value: '100%',
|
||||
icon: check,
|
||||
color: 'warning',
|
||||
},
|
||||
]
|
||||
</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"
|
||||
cols="12"
|
||||
sm="6"
|
||||
lg="3"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
:style="{ border: `1px solid rgba(var(--v-theme-${product.color}))` }"
|
||||
>
|
||||
<VCardText class="text-center">
|
||||
<VIcon
|
||||
:color="product.color"
|
||||
:icon="product.icon"
|
||||
size="64"
|
||||
class="mb-4"
|
||||
/>
|
||||
<h3 class="text-h3">
|
||||
{{ product.value }}
|
||||
</h3>
|
||||
<p class="text-body-1 font-weight-medium mb-0 text-wrap">
|
||||
{{ product.title }}
|
||||
</p>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user