84 lines
2.2 KiB
Vue
84 lines
2.2 KiB
Vue
<script setup>
|
|
import Footer from '@/views/front-pages/front-page-footer.vue'
|
|
import Navbar from '@/views/front-pages/front-page-navbar.vue'
|
|
import Banner from '@/views/front-pages/landing-page/banner.vue'
|
|
import ContactUs from '@/views/front-pages/landing-page/contact-us.vue'
|
|
import CustomersReview from '@/views/front-pages/landing-page/customers-review.vue'
|
|
import FaqSection from '@/views/front-pages/landing-page/faq-section.vue'
|
|
import Features from '@/views/front-pages/landing-page/features.vue'
|
|
import HeroSection from '@/views/front-pages/landing-page/hero-section.vue'
|
|
import OurTeam from '@/views/front-pages/landing-page/our-team.vue'
|
|
import PricingPlans from '@/views/front-pages/landing-page/pricing-plans.vue'
|
|
import ProductStats from '@/views/front-pages/landing-page/product-stats.vue'
|
|
|
|
definePage({ meta: { layout: 'blank' } })
|
|
|
|
const activeSectionId = ref()
|
|
const refHome = ref()
|
|
const refFeatures = ref()
|
|
const refTeam = ref()
|
|
const refContact = ref()
|
|
const refFaq = ref()
|
|
|
|
useIntersectionObserver([
|
|
refHome,
|
|
refFeatures,
|
|
refTeam,
|
|
refContact,
|
|
refFaq,
|
|
], ([{ isIntersecting, target }]) => {
|
|
if (isIntersecting)
|
|
activeSectionId.value = target.id
|
|
}, { threshold: 0.25 })
|
|
</script>
|
|
|
|
<template>
|
|
<div class="landing-page-wrapper">
|
|
<Navbar :active-id="activeSectionId" />
|
|
|
|
<!-- 👉 Hero Section -->
|
|
<HeroSection ref="refHome" />
|
|
|
|
<!-- 👉 Useful features -->
|
|
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
|
<Features ref="refFeatures" />
|
|
</div>
|
|
|
|
<!-- 👉 Customer Review -->
|
|
<CustomersReview />
|
|
|
|
<!-- 👉 Our Team -->
|
|
<div :style="{ 'background-color': 'rgb(var(--v-theme-surface))' }">
|
|
<OurTeam ref="refTeam" />
|
|
</div>
|
|
|
|
<!-- 👉 Pricing Plans -->
|
|
<PricingPlans />
|
|
|
|
<!-- 👉 Product stats -->
|
|
<ProductStats />
|
|
|
|
<!-- 👉 FAQ Section -->
|
|
<FaqSection ref="refFaq" />
|
|
|
|
<!-- 👉 Banner -->
|
|
<Banner />
|
|
|
|
<!-- 👉 Contact Us -->
|
|
<ContactUs ref="refContact" />
|
|
|
|
<!-- 👉 Footer -->
|
|
<Footer />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@media (max-width: 960px) and (min-width: 600px) {
|
|
.landing-page-wrapper {
|
|
.v-container {
|
|
padding-inline: 2rem !important;
|
|
}
|
|
}
|
|
}
|
|
</style>
|