first commit

resources/js/pages/front-pages/landing-page/index.vue

@@ -0,0 +1,83 @@
+<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>