Initial commit
This commit is contained in:
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