first commit
This commit is contained in:
Inshal
51
resources/js/views/front-pages/landing-page/banner.vue
Normal file
51
resources/js/views/front-pages/landing-page/banner.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<script setup>
|
||||
import ctaDashborad from '@images/front-pages/landing-page/cta-dashboard.png'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="landing-cta position-relative bg-surface">
|
||||
<VContainer>
|
||||
<div class="d-flex align-center justify-sm-space-between flex-column flex-md-row gap-y-4 pt-9">
|
||||
<div class="text-sm-start text-center py-8">
|
||||
<div class="banner-text pb-1">
|
||||
Ready to Get Started?
|
||||
</div>
|
||||
<div class="text-body-1 font-weight-medium mb-8">
|
||||
Start your project with a 14-day free trial
|
||||
</div>
|
||||
<VBtn
|
||||
color="primary"
|
||||
:append-icon="$vuetify.locale.isRtl ? 'ri-arrow-left-line' : 'ri-arrow-right-line'"
|
||||
:to="{ name: 'front-pages-payment' }"
|
||||
>
|
||||
Get Started
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<VImg
|
||||
:src="ctaDashborad"
|
||||
:max-width="$vuetify.display.mdAndUp ? 600 : ''"
|
||||
max-height="250"
|
||||
width="auto"
|
||||
class="mb-n4"
|
||||
/>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.landing-cta {
|
||||
background-image: url("@images/front-pages/backgrounds/cta-bg.png");
|
||||
background-size: cover;
|
||||
margin-block: auto;
|
||||
}
|
||||
|
||||
.banner-text{
|
||||
color: rgb(var(--v-theme-primary));
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25px;
|
||||
line-height: 42px;
|
||||
}
|
||||
</style>
|
||||
141
resources/js/views/front-pages/landing-page/contact-us.vue
Normal file
141
resources/js/views/front-pages/landing-page/contact-us.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<script setup>
|
||||
import ConnectImg from '@images/front-pages/landing-page/lets-contact.png'
|
||||
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
||||
|
||||
const name = ref('')
|
||||
const email = ref('')
|
||||
const message = ref('')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="contact-us">
|
||||
<!-- 👉 Headers -->
|
||||
<div class="contact-us-section">
|
||||
<div class="headers d-flex justify-center flex-column align-center pb-15">
|
||||
<div class="d-flex gap-x-3 mb-6">
|
||||
<img
|
||||
:src="sectionTitleIcon"
|
||||
alt="section title icon"
|
||||
height="24"
|
||||
width="25"
|
||||
>
|
||||
<div
|
||||
class="text-body-1 text-high-emphasis font-weight-medium"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
CONTACT US
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 text-center">
|
||||
<span
|
||||
class="text-h4 d-inline-block font-weight-bold"
|
||||
style="line-height: 2rem;"
|
||||
>
|
||||
Let's work
|
||||
</span> <span class="text-h5 d-inline-block">together</span>
|
||||
</div>
|
||||
|
||||
<p class="text-body-1 font-weight-medium text-center mb-0">
|
||||
Any question or remark? just write us a message
|
||||
</p>
|
||||
</div>
|
||||
<div class="mb-15">
|
||||
<VRow class="match-height">
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
sm="6"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
elevation="0"
|
||||
color="primary"
|
||||
theme="dark"
|
||||
>
|
||||
<VCardText class="pa-8">
|
||||
<h6 class="text-h6 mb-1">
|
||||
Let's contact with us
|
||||
</h6>
|
||||
|
||||
<h4 class="text-h4">
|
||||
Share your ideas or requirement with our experts.
|
||||
</h4>
|
||||
|
||||
<VImg
|
||||
:src="ConnectImg"
|
||||
class="my-5"
|
||||
/>
|
||||
|
||||
<div class="text-body-1">
|
||||
Looking for more customization, more features, and more anything? Don't worry, We've provide you with an entire team of experienced professionals.
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
sm="6"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
elevation="0"
|
||||
>
|
||||
<VCardText>
|
||||
<div class="text-h5 mb-5">
|
||||
Share your ideas
|
||||
</div>
|
||||
<VForm @submit.prevent="() => {}">
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="name"
|
||||
placeholder="John Doe"
|
||||
label="Full Name"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
placeholder="johndoe@gmail.com"
|
||||
label="Email address"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextarea
|
||||
v-model="message"
|
||||
placeholder="Type Your message"
|
||||
label="Message"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol>
|
||||
<VBtn type="submit">
|
||||
Send Inquiry
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contact-us-section {
|
||||
margin-block: 5.25rem;
|
||||
}
|
||||
</style>
|
||||
300
resources/js/views/front-pages/landing-page/customers-review.vue
Normal file
300
resources/js/views/front-pages/landing-page/customers-review.vue
Normal file
@@ -0,0 +1,300 @@
|
||||
<script setup>
|
||||
import { register } from 'swiper/element/bundle'
|
||||
import { useGenerateImageVariant } from '@/@core/composable/useGenerateImageVariant'
|
||||
import logo1dark from '@images/front-pages/branding/logo-1-dark.png'
|
||||
import logo1light from '@images/front-pages/branding/logo-1-light.png'
|
||||
import logo1 from '@images/front-pages/branding/logo-1.png'
|
||||
import logo2dark from '@images/front-pages/branding/logo-2-dark.png'
|
||||
import logo2light from '@images/front-pages/branding/logo-2-light.png'
|
||||
import logo2 from '@images/front-pages/branding/logo-2.png'
|
||||
import logo3dark from '@images/front-pages/branding/logo-3-dark.png'
|
||||
import logo3light from '@images/front-pages/branding/logo-3-light.png'
|
||||
import logo3 from '@images/front-pages/branding/logo-3.png'
|
||||
import logo4dark from '@images/front-pages/branding/logo-4-dark.png'
|
||||
import logo4light from '@images/front-pages/branding/logo-4-light.png'
|
||||
import logo4 from '@images/front-pages/branding/logo-4.png'
|
||||
import logo5dark from '@images/front-pages/branding/logo-5-dark.png'
|
||||
import logo5light from '@images/front-pages/branding/logo-5-light.png'
|
||||
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
||||
|
||||
register()
|
||||
|
||||
const brandLogo1 = useGenerateImageVariant(logo1light, logo1dark)
|
||||
const brandLogo2 = useGenerateImageVariant(logo2light, logo2dark)
|
||||
const brandLogo3 = useGenerateImageVariant(logo3light, logo3dark)
|
||||
const brandLogo4 = useGenerateImageVariant(logo4light, logo4dark)
|
||||
const brandLogo5 = useGenerateImageVariant(logo5light, logo5dark)
|
||||
|
||||
const reviewData = [
|
||||
{
|
||||
desc: 'I\'ve never used a theme as versatile and flexible as Vuexy. It\'s my go to for building dashboard sites on almost any project.',
|
||||
img: logo1,
|
||||
rating: 5,
|
||||
name: 'Eugenia Moore',
|
||||
position: 'Founder of Hubspot',
|
||||
},
|
||||
{
|
||||
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Tommy haffman',
|
||||
position: 'Founder of Levis',
|
||||
},
|
||||
{
|
||||
desc: 'This template is superior in so many ways. The code, the design, the regular updates, the support.. It\'s the whole package. Excellent Work.',
|
||||
img: logo3,
|
||||
rating: 4,
|
||||
name: 'Eugenia Moore',
|
||||
position: 'CTO of Airbnb',
|
||||
},
|
||||
{
|
||||
desc: 'All the requirements for developers have been taken into consideration, so I\'m able to build any interface I want.',
|
||||
img: logo4,
|
||||
rating: 5,
|
||||
name: 'Sara Smith',
|
||||
position: 'Founder of Continental',
|
||||
},
|
||||
{
|
||||
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Tommy haffman',
|
||||
position: 'Founder of Levis',
|
||||
},
|
||||
{
|
||||
desc: 'I\'ve never used a theme as versatile and flexible as Vuexy. It\'s my go to for building dashboard sites on almost any project.',
|
||||
img: logo1,
|
||||
rating: 5,
|
||||
name: 'Eugenia Moore',
|
||||
position: 'Founder of Hubspot',
|
||||
},
|
||||
{
|
||||
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Tommy haffman',
|
||||
position: 'Founder of Levis',
|
||||
},
|
||||
{
|
||||
desc: 'This template is superior in so many ways. The code, the design, the regular updates, the support.. It\'s the whole package. Excellent Work.',
|
||||
img: logo3,
|
||||
rating: 4,
|
||||
name: 'Eugenia Moore',
|
||||
position: 'CTO of Airbnb',
|
||||
},
|
||||
{
|
||||
desc: 'All the requirements for developers have been taken into consideration, so I\'m able to build any interface I want.',
|
||||
img: logo4,
|
||||
rating: 5,
|
||||
name: 'Sara Smith',
|
||||
position: 'Founder of Continental',
|
||||
},
|
||||
{
|
||||
desc: 'Materio is awesome, and I particularly enjoy knowing that if I get stuck on something.',
|
||||
img: logo2,
|
||||
rating: 5,
|
||||
name: 'Tommy haffman',
|
||||
position: 'Founder of Levis',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="customer-reviews">
|
||||
<!-- 👉 Headers -->
|
||||
<div class="headers d-flex justify-center flex-column align-center mb-8">
|
||||
<div class="d-flex gap-x-3 mb-6">
|
||||
<img
|
||||
:src="sectionTitleIcon"
|
||||
alt="section title icon"
|
||||
height="24"
|
||||
width="25"
|
||||
>
|
||||
<div
|
||||
class="text-body-1 text-high-emphasis font-weight-medium"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
REAL CUSTOMERS REVIEWS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 text-center">
|
||||
<span
|
||||
class="text-h4 d-inline-block font-weight-bold"
|
||||
style="line-height: 2rem;"
|
||||
>
|
||||
Success stories
|
||||
</span> <span class="text-h5 d-inline-block">from clients</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="text-body-1 font-weight-medium text-center"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
See what our customers have to say about their experience.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="swiper-reviews-carousel py-4 mb-6">
|
||||
<!-- eslint-disable vue/attribute-hyphenation -->
|
||||
<swiper-container
|
||||
slides-per-view="1"
|
||||
space-between="5"
|
||||
centered-slides="true"
|
||||
loop="true"
|
||||
autoplay-delay="3000"
|
||||
autoplay-disable-on-interaction="false"
|
||||
events-prefix="swiper-"
|
||||
:pagination="{
|
||||
clickable: 'true',
|
||||
}"
|
||||
:injectStyles="[
|
||||
`
|
||||
.swiper-pagination{
|
||||
position: static;
|
||||
margin-block: 1rem;
|
||||
},
|
||||
.swiper-pagination-bullet-active{
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
`]"
|
||||
:breakpoints="{
|
||||
1400: {
|
||||
slidesPerView: 4,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
992: {
|
||||
slidesPerView: 3,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
768: {
|
||||
slidesPerView: 2,
|
||||
spaceBetween: 20,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(data, index) in reviewData"
|
||||
:key="index"
|
||||
>
|
||||
<VCard class="h-100 d-flex align-stretch">
|
||||
<VCardText class="pa-4 pa-sm-6 pa-md-8 d-flex flex-column justify-space-between align-center">
|
||||
<img
|
||||
:src="data.img"
|
||||
style="block-size: 1.75rem;"
|
||||
>
|
||||
|
||||
<div class="text-body-1 text-high-emphasis text-center">
|
||||
{{ data.desc }}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<VRating
|
||||
:model-value="data.rating"
|
||||
color="warning"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<div class="text-body-1 text-high-emphasis font-weight-medium">
|
||||
{{ data.name }}
|
||||
</div>
|
||||
|
||||
<div class="text-body-2">
|
||||
{{ data.position }}
|
||||
</div>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
|
||||
<!-- 👉 Brand-logo Swiper -->
|
||||
<div class="swiper-brands-carousel mt-4">
|
||||
<swiper-container
|
||||
slides-per-view="1"
|
||||
loop="true"
|
||||
events-prefix="swiper-"
|
||||
:breakpoints="{
|
||||
992: {
|
||||
slidesPerView: 5,
|
||||
},
|
||||
768: {
|
||||
centeredSlides: true,
|
||||
slidesPerView: 3,
|
||||
},
|
||||
580: {
|
||||
centeredSlides: true,
|
||||
slidesPerView: 2,
|
||||
},
|
||||
}"
|
||||
>
|
||||
<swiper-slide
|
||||
v-for="(img, index) in [brandLogo1, brandLogo2, brandLogo3, brandLogo4, brandLogo5]"
|
||||
:key="index"
|
||||
>
|
||||
<VImg
|
||||
:src="img"
|
||||
height="28"
|
||||
/>
|
||||
</swiper-slide>
|
||||
</swiper-container>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "swiper/css/bundle";
|
||||
|
||||
swiper-container::part(bullet-active) {
|
||||
border-radius: 6px;
|
||||
background-color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity));
|
||||
inline-size: 38px;
|
||||
}
|
||||
|
||||
swiper-container::part(bullet) {
|
||||
background-color: rgba(var(--v-theme-on-background));
|
||||
}
|
||||
|
||||
swiper-container::part(pagination) {
|
||||
margin-block: 1.5rem;
|
||||
}
|
||||
|
||||
.swiper-reviews-carousel {
|
||||
swiper-container {
|
||||
--swiper-pagination-bullet-width: 10px;
|
||||
--swiper-pagination-bullet-height: 10px;
|
||||
--swiper-pagination-bullet-horizontal-gap: 6px;
|
||||
|
||||
.swiper {
|
||||
padding-block-end: 3rem;
|
||||
}
|
||||
}
|
||||
|
||||
swiper-slide {
|
||||
block-size: auto;
|
||||
opacity: 0.5;
|
||||
padding-block: 1rem;
|
||||
padding-block-end: 1rem;
|
||||
transition: all 0.35s ease;
|
||||
|
||||
&.swiper-slide-active {
|
||||
opacity: 1;
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.swiper-pagination {
|
||||
inset-block: 0 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.customer-reviews {
|
||||
margin-block: 6.25rem;
|
||||
}
|
||||
</style>
|
||||
96
resources/js/views/front-pages/landing-page/faq-section.vue
Normal file
96
resources/js/views/front-pages/landing-page/faq-section.vue
Normal file
@@ -0,0 +1,96 @@
|
||||
<script setup>
|
||||
import sittingGirlWithLaptop from '@images/front-pages/landing-page/sitting-girl-with-laptop.png'
|
||||
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
||||
|
||||
const faqData = [
|
||||
{
|
||||
question: 'Do you charge for each upgrade?',
|
||||
answer: 'Lemon drops chocolate cake gummies carrot cake chupa chups muffin topping. Sesame snaps icing marzipan gummi bears macaroon dragée danish caramels powder. Bear claw dragée pastry topping soufflé. Wafer gummi bears marshmallow pastry pie.',
|
||||
},
|
||||
{
|
||||
question: 'What is regular license?',
|
||||
answer: 'Regular license can be used for end products that do not charge users for access or service(access is free and there will be no monthly subscription fee). Single regular license can be used for single end product and end product can be used by you or your client. If you want to sell end product to multiple clients then you will need to purchase separate license for each client. The same rule applies if you want to use the same end product on multiple domains(unique setup). For more info on regular license you can check official description.',
|
||||
},
|
||||
{
|
||||
question: 'What is extended license?',
|
||||
answer: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis et aliquid quaerat possimus maxime! Mollitia reprehenderit neque repellat deleniti delectus architecto dolorum maxime, blanditiis earum ea, incidunt quam possimus cumque.',
|
||||
},
|
||||
{
|
||||
question: 'Which license is applicable for SASS application?',
|
||||
answer: 'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sequi molestias exercitationem ab cum nemo facere voluptates veritatis quia, eveniet veniam at et repudiandae mollitia ipsam quasi labore enim architecto non!',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="faq">
|
||||
<!-- 👉 Header -->
|
||||
<div class="faq-section">
|
||||
<div class="headers d-flex justify-center flex-column align-center my-12">
|
||||
<div class="d-flex gap-x-3 mb-6">
|
||||
<img
|
||||
:src="sectionTitleIcon"
|
||||
alt="section title icon"
|
||||
height="24"
|
||||
width="25"
|
||||
>
|
||||
<div
|
||||
class="text-body-1 text-high-emphasis font-weight-medium"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
FAQ
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 text-center">
|
||||
<span class="text-h5 d-inline-block">Frequently Asked</span> <span
|
||||
class="text-h4 d-inline-block font-weight-bold"
|
||||
style="line-height: 2rem;"
|
||||
>
|
||||
questions
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="text-body-1 font-weight-medium text-center mb-0"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
Browse through these FAQs to find answers to commonly asked questions.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="d-flex align-center justify-space-between flex-wrap flex-md-nowrap"
|
||||
style="gap: 6.25rem"
|
||||
>
|
||||
<VImg
|
||||
:src="sittingGirlWithLaptop"
|
||||
height="340"
|
||||
width="320"
|
||||
/>
|
||||
|
||||
<div>
|
||||
<VExpansionPanels class="py-4">
|
||||
<VExpansionPanel
|
||||
v-for="faq in faqData"
|
||||
:key="faq.question"
|
||||
>
|
||||
<VExpansionPanelTitle>
|
||||
{{ faq.question }}
|
||||
</VExpansionPanelTitle>
|
||||
<VExpansionPanelText>
|
||||
{{ faq.answer }}
|
||||
</VExpansionPanelText>
|
||||
</VExpansionPanel>
|
||||
</VExpansionPanels>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.faq-section {
|
||||
margin-block: 5.25rem 4.25rem;
|
||||
}
|
||||
</style>
|
||||
149
resources/js/views/front-pages/landing-page/features.vue
Normal file
149
resources/js/views/front-pages/landing-page/features.vue
Normal file
@@ -0,0 +1,149 @@
|
||||
<script setup>
|
||||
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
||||
import SelectSolid from '@images/svg/3d-select-solid.svg'
|
||||
import Edit from '@images/svg/edit.svg'
|
||||
import GoogleDocs from '@images/svg/google-docs.svg'
|
||||
import LaptopCharging from '@images/svg/laptop-charging.svg'
|
||||
import Lifebelt from '@images/svg/lifebelt.svg'
|
||||
import TransitionUp from '@images/svg/transition-up.svg'
|
||||
|
||||
const featuresData = [
|
||||
{
|
||||
title: 'Quality Code',
|
||||
desc: 'Code structure that all developers will easily understand and fall in love with.',
|
||||
img: LaptopCharging,
|
||||
},
|
||||
{
|
||||
title: 'Continuous Updates',
|
||||
desc: 'Free updates for the next 12 months, including new demos and features.',
|
||||
img: TransitionUp,
|
||||
},
|
||||
{
|
||||
title: 'Starter Kit',
|
||||
desc: 'Start your project quickly without having to remove unnecessary features.',
|
||||
img: Edit,
|
||||
},
|
||||
{
|
||||
title: 'API Ready',
|
||||
desc: 'Just change the endpoint and see your own data loaded within seconds.',
|
||||
img: SelectSolid,
|
||||
},
|
||||
{
|
||||
title: 'Well Documented',
|
||||
desc: 'An easy-to-follow doc with lots of references and code examples.',
|
||||
img: Lifebelt,
|
||||
},
|
||||
{
|
||||
title: 'Excellent Support',
|
||||
desc: 'An easy-to-follow doc with lots of references and code examples.',
|
||||
img: GoogleDocs,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="features">
|
||||
<div class="feature-cards">
|
||||
<div class="headers d-flex justify-center flex-column align-center mb-6">
|
||||
<div class="d-flex gap-x-3 mb-6">
|
||||
<img
|
||||
:src="sectionTitleIcon"
|
||||
alt="section title icon"
|
||||
height="24"
|
||||
width="25"
|
||||
>
|
||||
<div
|
||||
class="text-body-1 text-high-emphasis font-weight-medium"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
USEFUL FEATURES
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 text-center">
|
||||
<span
|
||||
class="text-h4 d-inline-block font-weight-bold"
|
||||
style="line-height: 2rem;"
|
||||
>
|
||||
Everything you need
|
||||
</span> <span class="text-h5 d-inline-block">to start your next project</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="text-body-1 font-weight-medium text-center"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
Not just a set of tools, the package includes ready-to-deploy conceptual application.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(data, index) in featuresData"
|
||||
:key="index"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<div class="feature d-flex flex-column gap-y-2 align-center justify-center mt-2">
|
||||
<VAvatar
|
||||
variant="outlined"
|
||||
size="84"
|
||||
color="primary"
|
||||
class="mb-2"
|
||||
>
|
||||
<Component :is="data.img" />
|
||||
</VAvatar>
|
||||
|
||||
<h5 class="text-h5">
|
||||
{{ data.title }}
|
||||
</h5>
|
||||
<p
|
||||
class="text-center text-medium-emphasis"
|
||||
style="max-inline-size: 360px;"
|
||||
>
|
||||
{{ data.desc }}
|
||||
</p>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feature-cards {
|
||||
margin-block-end: 4.25rem;
|
||||
}
|
||||
|
||||
#features{
|
||||
padding-block-start: 16rem;
|
||||
}
|
||||
|
||||
@media (max-width: 960px ){
|
||||
#features{
|
||||
padding-block-start: 6rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px ){
|
||||
#features{
|
||||
padding-block-start: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feature{
|
||||
.v-avatar{
|
||||
&.v-avatar--variant-outlined{
|
||||
border: 2px solid rgba(var(--v-theme-primary), 0.32);
|
||||
|
||||
&:hover{
|
||||
background: rgba(var(--v-theme-primary), 0.16);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
171
resources/js/views/front-pages/landing-page/hero-section.vue
Normal file
171
resources/js/views/front-pages/landing-page/hero-section.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<script setup>
|
||||
import { useMouse } from '@vueuse/core'
|
||||
import { useTheme } from 'vuetify'
|
||||
import { useGenerateImageVariant } from '@/@core/composable/useGenerateImageVariant'
|
||||
import darkBg from '@images/front-pages/backgrounds/hero-bg-dark.png'
|
||||
import lightBg from '@images/front-pages/backgrounds/hero-bg.png'
|
||||
import heroDashboardImgDark from '@images/front-pages/landing-page/hero-dashboard-dark.png'
|
||||
import heroDashboardImgLight from '@images/front-pages/landing-page/hero-dashboard-light.png'
|
||||
import heroElementsImgDark from '@images/front-pages/landing-page/hero-elements-dark.png'
|
||||
import heroElementsImgLight from '@images/front-pages/landing-page/hero-elements-light.png'
|
||||
|
||||
const theme = useTheme()
|
||||
const isDark = ref(theme.name)
|
||||
|
||||
const heroBgUrl = computed(() => {
|
||||
if (isDark.value === 'dark')
|
||||
return darkBg
|
||||
else
|
||||
return lightBg
|
||||
})
|
||||
|
||||
const heroElementsImg = useGenerateImageVariant(heroElementsImgLight, heroElementsImgDark)
|
||||
const heroDashboardImg = useGenerateImageVariant(heroDashboardImgLight, heroDashboardImgDark)
|
||||
const { x, y } = useMouse({ touch: false })
|
||||
|
||||
const translateMouse = computed(() => speed => {
|
||||
if (typeof window !== 'undefined') {
|
||||
const positionX = computed(() => (window.innerWidth - x.value * speed) / 100)
|
||||
const positionY = computed(() => Math.max((window.innerHeight - y.value * speed) / 100, -40))
|
||||
|
||||
return { transform: `translate(${ positionX.value }px,${ positionY.value }px` }
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<section
|
||||
id="home"
|
||||
:style="{ 'background-color': 'rgb(var(--v-theme-surface))' }"
|
||||
>
|
||||
<div
|
||||
id="landingHero"
|
||||
class="landing-hero"
|
||||
:style="{ backgroundImage: `url(${heroBgUrl})` }"
|
||||
>
|
||||
<VContainer>
|
||||
<div class="text-center px-6">
|
||||
<div class="mb-4">
|
||||
<div class="landing-page-title">
|
||||
All in one sass application
|
||||
</div>
|
||||
<div class="landing-page-title">
|
||||
for your business
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-body-1 font-weight-medium text-high-emphasis pb-8">
|
||||
<p class="mb-0">
|
||||
No coding required to make customization
|
||||
</p>
|
||||
<p class="mb-0">
|
||||
The live customer has everything your marketing needs
|
||||
</p>
|
||||
</div>
|
||||
<VBtn
|
||||
:to="{ name: 'front-pages-landing-page', hash: `#pricing-plan` }"
|
||||
size="large"
|
||||
:active="false"
|
||||
>
|
||||
Get Early Access
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<div class="position-relative hero-animation-img">
|
||||
<div class="hero-dashboard-img text-center">
|
||||
<RouterLink
|
||||
to="/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
:src="heroDashboardImg"
|
||||
class="mx-auto cursor-pointer"
|
||||
:style="translateMouse(2.5)"
|
||||
>
|
||||
</RouterLink>
|
||||
</div>
|
||||
|
||||
<div class="hero-elements-img">
|
||||
<RouterLink
|
||||
to="/"
|
||||
target="_blank"
|
||||
>
|
||||
<img
|
||||
class="cursor-pointer"
|
||||
:src="heroElementsImg"
|
||||
:style="translateMouse(5)"
|
||||
target="_blank"
|
||||
>
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
section {
|
||||
display: block;
|
||||
padding-block-end: 6.25rem;
|
||||
}
|
||||
|
||||
.landing-hero {
|
||||
background-position: bottom;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
padding-block-start: 9rem;
|
||||
}
|
||||
|
||||
.hero-dashboard-img {
|
||||
img {
|
||||
inline-size: 85%;
|
||||
}
|
||||
}
|
||||
|
||||
.hero-elements-img {
|
||||
position: absolute;
|
||||
inline-size: 100%;
|
||||
inset-block-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
img {
|
||||
inline-size: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-inline: auto;
|
||||
max-inline-size: 85vw;
|
||||
}
|
||||
|
||||
.feature-cards {
|
||||
margin-block-start: 6.25rem;
|
||||
}
|
||||
|
||||
.landing-page-title{
|
||||
color: rgb(var(--v-theme-primary));
|
||||
font-size: 2.375rem;
|
||||
font-weight: 800;
|
||||
line-height: 2.75rem
|
||||
}
|
||||
|
||||
.hero-animation-img{
|
||||
inset-block-start:0;
|
||||
margin-block-end: -16rem;
|
||||
}
|
||||
|
||||
@media (max-width: 960px ){
|
||||
.hero-animation-img{
|
||||
inset-block-start: 2rem;
|
||||
margin-block-end: -8rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px ){
|
||||
.hero-animation-img{
|
||||
inset-block-start: 1rem;
|
||||
margin-block-end: -2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
152
resources/js/views/front-pages/landing-page/our-team.vue
Normal file
152
resources/js/views/front-pages/landing-page/our-team.vue
Normal file
@@ -0,0 +1,152 @@
|
||||
<script setup>
|
||||
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
||||
import teamPerson1 from '@images/pages/teamPerson1.png'
|
||||
import teamPerson2 from '@images/pages/teamPerson2.png'
|
||||
import teamPerson3 from '@images/pages/teamPerson3.png'
|
||||
import teamPerson4 from '@images/pages/teamPerson4.png'
|
||||
|
||||
const teamData = ref([
|
||||
{
|
||||
name: 'Sophie Gilbert',
|
||||
position: 'Project Manager',
|
||||
image: teamPerson1,
|
||||
backgroundColor: 'rgba(144, 85, 253, 0.16)',
|
||||
borderColor: 'rgba(144, 85, 253,0.38)',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
name: 'Nannie Ford',
|
||||
position: 'Development Lead',
|
||||
image: teamPerson2,
|
||||
backgroundColor: 'rgba(255, 76, 81, 0.16)',
|
||||
borderColor: 'rgba(255, 76, 81,0.38)',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
name: 'Chris Watkins',
|
||||
position: 'Marketing Manager',
|
||||
image: teamPerson3,
|
||||
backgroundColor: 'rgba(86, 202, 0, 0.16)',
|
||||
borderColor: 'rgba(86, 202, 0,0.38)',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
name: 'Paul Miles',
|
||||
position: 'UI Designer',
|
||||
image: teamPerson4,
|
||||
backgroundColor: 'rgba(22, 177, 255, 0.16)',
|
||||
borderColor: 'rgba(22, 177, 255,0.38)',
|
||||
isHover: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="team">
|
||||
<div class="our-team">
|
||||
<div class="headers d-flex justify-center flex-column align-center">
|
||||
<div class="d-flex gap-x-3 mb-6">
|
||||
<img
|
||||
:src="sectionTitleIcon"
|
||||
alt="section title icon"
|
||||
height="24"
|
||||
width="25"
|
||||
>
|
||||
<div
|
||||
class="text-body-1 text-high-emphasis font-weight-medium"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
OUR GREAT TEAM
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2">
|
||||
<span
|
||||
class="text-h4 d-inline-block font-weight-bold"
|
||||
style="line-height: 2rem;"
|
||||
>
|
||||
Supported
|
||||
</span> <span class="text-h5 d-inline-block">by Real People</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="text-body-1 font-weight-medium text-center"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
Who is behind these great-looking interfaces?
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(data, index) in teamData"
|
||||
:key="index"
|
||||
cols="12"
|
||||
lg="3"
|
||||
sm="6"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
variant="outlined"
|
||||
min-width="267"
|
||||
class="position-relative overflow-visible mt-16"
|
||||
:style="data.isHover ? { border: `1px solid ${data.borderColor}` } : {}"
|
||||
@mouseenter="data.isHover = true"
|
||||
@mouseleave="data.isHover = false"
|
||||
>
|
||||
<VImg
|
||||
:src="data.image"
|
||||
height="240px"
|
||||
class="team-image"
|
||||
/>
|
||||
<div :style="{ maxHeight: '185px', minHeight: '185px', backgroundColor: data.backgroundColor }" />
|
||||
<VCardText class="text-center">
|
||||
<div class="mb-3">
|
||||
<h5 class="text-h5">
|
||||
{{ data.name }}
|
||||
</h5>
|
||||
<div class="text-body-1 text-medium-emphasis">
|
||||
{{ data.position }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-x-2 align-center justify-center">
|
||||
<template
|
||||
v-for="{ icon, color } in [
|
||||
{ icon: 'ri-facebook-circle-line', color: 'rgba(59, 89, 152, 1)', link: 'https://www.facebook.com/' },
|
||||
{ icon: 'ri-twitter-line', color: 'rgba(0, 172, 238, 1)', link: 'https://twitter.com/' },
|
||||
{ icon: 'ri-linkedin-box-line', color: 'rgba(0, 119, 181, 1)', link: 'https://linkedin.com' },
|
||||
]"
|
||||
:key="color"
|
||||
>
|
||||
<VIcon
|
||||
:icon="icon"
|
||||
size="22"
|
||||
:color="data.isHover ? color : ''"
|
||||
class="cursor-pointer"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.team-image {
|
||||
position: absolute;
|
||||
inset-block-start: -3.4rem;
|
||||
inset-inline: 0;
|
||||
}
|
||||
|
||||
.headers {
|
||||
margin-block-end: 1.25rem;
|
||||
}
|
||||
|
||||
.our-team {
|
||||
margin-block: 5.25rem;
|
||||
}
|
||||
</style>
|
||||
222
resources/js/views/front-pages/landing-page/pricing-plans.vue
Normal file
222
resources/js/views/front-pages/landing-page/pricing-plans.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<script setup>
|
||||
import sectionTitleIcon from '@images/pages/section-title-icon.png'
|
||||
import ListArrowIcon from '@images/svg/list-arrow-icon.svg'
|
||||
import VectorIcon from '@images/svg/vector.svg'
|
||||
|
||||
const pricingPlans = [
|
||||
{
|
||||
title: 'Basic Plan',
|
||||
price: 20,
|
||||
features: [
|
||||
'Timeline',
|
||||
'Basic search',
|
||||
'Live chat widget',
|
||||
'Email marketing',
|
||||
'Custom Forms',
|
||||
'Traffic analytics',
|
||||
],
|
||||
supportType: 'Basic',
|
||||
supportMedium: 'Only Email',
|
||||
respondTime: 'AVG. Time: 24h',
|
||||
current: false,
|
||||
},
|
||||
{
|
||||
title: 'Favourite Plan',
|
||||
price: 51,
|
||||
features: [
|
||||
'Everything in basic',
|
||||
'Timeline with database',
|
||||
'Advanced search',
|
||||
'Marketing automation',
|
||||
'Advanced chatbot',
|
||||
'Campaign management',
|
||||
],
|
||||
supportType: 'Standard',
|
||||
supportMedium: 'Email & Chat',
|
||||
respondTime: 'AVG. Time: 6h',
|
||||
current: true,
|
||||
},
|
||||
{
|
||||
title: 'Standard Plan',
|
||||
price: 99,
|
||||
features: [
|
||||
'Campaign management',
|
||||
'Timeline with database',
|
||||
'Fuzzy search',
|
||||
'A/B testing sanbox',
|
||||
'Custom permissions',
|
||||
'Social media automation',
|
||||
],
|
||||
supportType: 'Exclusive',
|
||||
supportMedium: 'Email, Chat & Google Meet',
|
||||
respondTime: 'Live Support',
|
||||
current: false,
|
||||
},
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VContainer id="pricing-plan">
|
||||
<div class="pricing-plans d-flex flex-column gap-12">
|
||||
<!-- 👉 Headers -->
|
||||
<div class="headers d-flex justify-center flex-column align-center">
|
||||
<div class="d-flex gap-x-3 mb-6">
|
||||
<img
|
||||
:src="sectionTitleIcon"
|
||||
alt="section title icon"
|
||||
height="24"
|
||||
width="25"
|
||||
>
|
||||
<div
|
||||
class="text-body-1 text-high-emphasis font-weight-medium"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
PRICING PLANS
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-2 text-center">
|
||||
<span
|
||||
class="text-h4 d-inline-block font-weight-bold"
|
||||
style="line-height: 2rem;"
|
||||
>
|
||||
Tailored pricing plans
|
||||
</span> <span class="text-h5 d-inline-block">designed for you</span>
|
||||
</div>
|
||||
|
||||
<p
|
||||
class="text-body-1 font-weight-medium text-center"
|
||||
style="letter-spacing: 0.15px !important;"
|
||||
>
|
||||
All plans include 40+ advanced tools and features to boost your product. <br>
|
||||
Choose the best plan to fit your needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="w-75 mx-auto">
|
||||
<VSlider
|
||||
max="999"
|
||||
model-value="458"
|
||||
color="primary"
|
||||
thumb-label="always"
|
||||
class="mt-12"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(plan, index) in pricingPlans"
|
||||
:key="index"
|
||||
>
|
||||
<VCard
|
||||
flat
|
||||
border
|
||||
:style="plan.current ? 'border:2px solid rgb(var(--v-theme-primary))' : ''"
|
||||
>
|
||||
<VCardText class="pa-lg-8 text-no-wrap">
|
||||
<div class="d-flex flex-column gap-y-8">
|
||||
<div class="d-flex flex-column gap-y-3">
|
||||
<h4 class="text-h4 text-center">
|
||||
{{ plan.title }}
|
||||
</h4>
|
||||
|
||||
<div class="d-flex align-center gap-x-3">
|
||||
<div class="d-flex">
|
||||
<h5
|
||||
class="text-h5"
|
||||
style="margin-block-start: 0.35rem;"
|
||||
>
|
||||
$
|
||||
</h5>
|
||||
<div class="plan-price-text">
|
||||
{{ plan.price }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="text-body-1 font-weight-medium text-high-emphasis">
|
||||
Per month
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
10% off for yearly subscription
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VectorIcon />
|
||||
</div>
|
||||
|
||||
<div class="d-flex flex-column">
|
||||
<VList class="card-list">
|
||||
<VListItem
|
||||
v-for="(item, i) in plan.features"
|
||||
:key="i"
|
||||
>
|
||||
<template #prepend>
|
||||
<Component
|
||||
:is="ListArrowIcon"
|
||||
class="me-3"
|
||||
/>
|
||||
</template>
|
||||
<h5 class="text-h5">
|
||||
{{ item }}
|
||||
</h5>
|
||||
</VListItem>
|
||||
</VList>
|
||||
|
||||
<VDivider class="my-4" />
|
||||
|
||||
<div class="d-flex align-center justify-space-between flex-wrap gap-2">
|
||||
<div>
|
||||
<div class="text-body-1 font-weight-medium text-high-emphasis mb-1">
|
||||
{{ plan.supportType }} Support
|
||||
</div>
|
||||
<div class="text-body-2">
|
||||
{{ plan.supportMedium }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
density="comfortable"
|
||||
class="font-weight-medium"
|
||||
>
|
||||
{{ plan.respondTime }}
|
||||
</VChip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
:variant="plan.current ? 'elevated' : 'outlined'"
|
||||
:to="{ name: 'front-pages-payment' }"
|
||||
>
|
||||
Get Started
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.card-list {
|
||||
--v-card-list-gap: 12px;
|
||||
}
|
||||
|
||||
.pricing-plans {
|
||||
margin-block: 5.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.plan-price-text{
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 48px;
|
||||
font-weight: 700;
|
||||
line-height: 56px
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,81 @@
|
||||
<script setup>
|
||||
const statData = ref([
|
||||
{
|
||||
title: 'Completed Sites',
|
||||
value: 137,
|
||||
icon: 'ri-layout-line',
|
||||
color: 'primary',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
title: 'Working Hours',
|
||||
value: 1100,
|
||||
icon: 'ri-time-line',
|
||||
color: 'success',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
title: 'Happy Customers',
|
||||
value: 137,
|
||||
icon: 'ri-user-smile-line',
|
||||
color: 'warning',
|
||||
isHover: false,
|
||||
},
|
||||
{
|
||||
title: 'Awards Winning',
|
||||
value: 23,
|
||||
icon: 'ri-award-line',
|
||||
color: 'info',
|
||||
isHover: false,
|
||||
},
|
||||
])
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
||||
<VContainer>
|
||||
<div class="py-12">
|
||||
<VRow>
|
||||
<VCol
|
||||
v-for="(product, index) in statData"
|
||||
:key="index"
|
||||
>
|
||||
<VCard flat>
|
||||
<VCardText class="text-center">
|
||||
<VAvatar
|
||||
size="82"
|
||||
:color="product.color"
|
||||
:variant="product.isHover ? 'elevated' : 'tonal'"
|
||||
class="mb-6 cursor-pointer"
|
||||
@mouseenter="() => product.isHover = true"
|
||||
@mouseleave="product.isHover = false"
|
||||
>
|
||||
<VIcon
|
||||
:icon="product.icon"
|
||||
size="42"
|
||||
/>
|
||||
</VAvatar>
|
||||
<div class="product-stat-text">
|
||||
{{ kFormatter(product.value) }}+
|
||||
</div>
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ product.title }}
|
||||
</div>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VContainer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.product-stat-text{
|
||||
color: rgba(var(--v-theme-on-surface), var(--v-high-emphasis-opacity));
|
||||
font-size: 34px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.25px;
|
||||
line-height: 42px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user