migration into nuxt

nuxt-frontend/components/flutter-app-development/DevelopmentSection.vue

@@ -0,0 +1,246 @@
+<template>
+  <div
+    class="pt-14 md:py-[7.5rem] md:mt-[10rem] bg-black-core text-white text-center"
+  >
+    <div
+      class="container flex flex-col gap-4 md:gap-6 md:w-[54.4375rem] md:mb-[4.5rem]"
+    >
+      <span class="header-2"> Flutter App Development Services </span>
+      <span class="sub-h1-regular">
+        We leverage Flutter's rich, customizable widgets and fast development
+        capabilities to create beautiful and user-friendly apps that save you
+        time and cost of platform-specific development.
+      </span>
+    </div>
+    <!-- Flutter Mobile Swiper UI-->
+    <div class="swiper-content mt-6 lg: hidden">
+      <swiper
+        :slidesPerView="1"
+        :centeredSlides="true"
+        :spaceBetween="20"
+        :modules="modules"
+        :autoplay="{
+          delay: 3000,
+          disableOnInteraction: false,
+        }"
+        :pagination="{
+          clickable: true,
+          bulletClass: `swiper-pagination-bullet`,
+        }"
+        :breakpoints="{
+          '540': {
+            slidesPerView: 1.2,
+            spaceBetween: 0,
+          },
+          '620': {
+            slidesPerView: 1.4,
+            spaceBetween: 0,
+          },
+          '700': {
+            slidesPerView: 1.5,
+          },
+        }"
+        class="swiper-container rounded-lg"
+      >
+        <swiper-slide
+          v-for="(item, index) in items"
+          :key="index"
+          class="cursor-pointer px-4"
+        >
+          <div class="flex flex-col gap-4 py-8 bg-white/[0.1] rounded-lg px-8">
+            <div class="header-3">
+              <span v-html="item.title"></span>
+            </div>
+            <div class="sub-h3-medium">
+              <p v-for="list in item.description" :key="list">{{ list }}</p>
+            </div>
+          </div>
+        </swiper-slide>
+      </swiper>
+    </div>
+    <!-- Flutter Desktop Swiper UI -->
+    <div id="stickyParent" class="hidden sticky-parent lg:block relative h-[150vh]">
+      <div class="!sticky top-[6.5rem] container main overflow-hidden">
+        <hr class="absolute h-screen left-[50%] border-[0.1px] opacity-[0.5]" />
+        <swiper
+          :slidesPerView="2"
+          :spaceBetween="72"
+          :direction="'vertical'"
+          :speed="600"
+          :mousewheel="{
+            enabled: false,
+            releaseOnEdges: true,
+            sensitivity: 1,
+            thresholdDelta: 1,
+          }"
+          :touchReleaseOnEdges="true"
+          :modules="modules"
+          :allowTouchMove="false"
+          class="!h-full"
+          @swiper="setSwiperRef"
+          @slideChange="onSlideChange"
+        >
+          <swiper-slide
+            v-for="(item, index) in items"
+            :key="index"
+            :class="[
+              {
+                ' opacity-50': activeIndex !== index,
+                ' opacity-100':
+                  activeIndex === index ||
+                  (activeIndex === item.length && index === 0),
+              },
+            ]"
+          >
+            <div
+              :class="[
+                ' flex  gap-[4rem]',
+                {
+                  ' flex-row text-right ': index % 2 === 0,
+                  ' flex-row-reverse text-left': index % 2 !== 0,
+                },
+              ]"
+            >
+              <div class="flex flex-col flex-1 gap-[1.5rem]">
+                <div class="header-3">
+                  <span v-html="item.desktoptitle"></span>
+                </div>
+                <div class="sub-h3-regular">
+                  <p
+                    v-for="(list, listIndex) in item.description"
+                    :key="listIndex"
+                  >
+                    {{ list }}
+                  </p>
+                </div>
+              </div>
+              <div class="flex-1" :class="{ 'relative': index % 2 !== 0 }">
+                <img
+                  :src="item.image"
+                  alt="development-service-image"
+                  class=""
+                  :class="{
+                    'absolute right-0': index % 2 !== 0,
+                  }"
+                  loading="lazy"
+                />
+              </div>
+            </div>
+          </swiper-slide>
+        </swiper>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="module">
+import { Autoplay, Mousewheel, Pagination } from "swiper/modules";
+import { Swiper, SwiperSlide } from "swiper/vue";
+import consultation from "@/assets/images/flutter-app-development/development/consultation.webp";
+import design from "@/assets/images/flutter-app-development/development/design.webp";
+import development from "@/assets/images/flutter-app-development/development/development.webp";
+import deployment from "@/assets/images/flutter-app-development/development/deployment.webp";
+import maintainance from "@/assets/images/flutter-app-development/development/maintainance.webp";
+export default {
+  data() {
+    return {
+      modules: [Autoplay, Mousewheel, Pagination],
+      swiper: null,
+      swiperRef: 0,
+      activeIndex: 0,
+      items: [
+        {
+          title: `Flutter App Development <br/>Consultation`,
+          desktoptitle: `Flutter App Development <br/>Consultation`,
+          image: consultation,
+          description: [
+            "We begin every project by understanding your vision and business requirements.Our expert consultants guide you through the entire process, providing insights on market trends,competition, technical feasibility, and ideal app monetization strategies.We dive deep into your project's specifics, brainstorming innovative ways to bring your idea to life using Flutter's powerful features.",
+          ],
+        },
+        {
+          title: "Flutter UI/UX Design",
+          desktoptitle: "Flutter UI/UX Design",
+          image: design,
+          description: [
+            "We believe in designing applications that are not just aestheticaly pleasing, but also remarkably intuitive and user-friendly. With Flutter's extensive widget library and flexible UI capabilities, we craft customized, interactive,and smooth interfaces that captivate your users and keep them engaged. We place a strong emphasis on user-centric design, incorporating the latest design principles to create a seamless,intuitive flow. From the initial wireframe to the final design mockup, we ensure every pixel adds value to your user's journey, making your app stand out in the bustling app marketplace.",
+          ],
+        },
+        {
+          title: `Custom Flutter Application <br /> Development`,
+          desktoptitle: `Custom Flutter Application <br /> Development`,
+          image: development,
+          description: [
+            "We transform your unique business needs into robust, efficient, and beautifully designed mobile apps. We leverage Flutter's single codebase feature, allowing us to expedite the development process without compromising on the app's performance, feel, or look. Our team employs Flutter's hot-reload functionality to build dynamic, high-quality applications that offer a native experience on both iOS and Android platforms. From feature-rich eCommerce apps to interactive social networking apps, we deliver custom Flutter solutions that align with your business goals and deliver a seamless user experience across all devices. ",
+          ],
+        },
+        {
+          title: "Flutter App Deployment",
+          desktoptitle: "Flutter App Deployment",
+          image: deployment,
+          description: [
+            "We understand that app development doesn't end with coding. Ensuring that your application gets successfully deployed on the App Store and Google Play Store is equally important. Our team navigates the complexities of app submission guidelines, takes care of the application's configuration, manages the app store metadata, and executes a successful launch. We also monitor the app's performance post-launch, ensuring smooth functioning and immediate troubleshooting. Experience a worry-free deployment and watch your Flutter application take flight with our diligent deployment services.",
+          ],
+        },
+        {
+          title: "Maintenance and Support",
+          desktoptitle: "Maintenance and Support",
+          image: maintainance,
+          description: [
+            "We believe that maintaining an application is as crucial as developing it. After your app's successful deployment, we provide ongoing support to ensure its optimal performance, stability, and user satisfaction. Our services include regular updates, bug fixes, performance monitoring, code optimization, and adding new features as per market trends or user feedback. With our round-the-clock support, you can rest assured that your application stays up-to-date,secure, and relevant in the ever-evolving app market, ensuring its long-term success and user engagement.",
+          ],
+        },
+      ],
+    };
+  },
+  mounted() {
+    document.addEventListener("scroll", this.handleScroll);
+  },
+  unmounted() {
+    document.removeEventListener("scroll", this.handleScroll);
+  },
+  methods: {
+    onSlideChange(event) {
+      this.activeIndex = event.activeIndex;
+    },
+    setSwiperRef(swiper) {
+      this.swiperRef = swiper;
+    },   
+    handleScrollTop() {
+      const stickyParent = document.getElementById("stickyParent");
+      const stickyTop = stickyParent.offsetTop;
+      let scrollTop = window.scrollY;
+      var position = stickyParent.getBoundingClientRect();
+      if (
+        window.pageYOffset >= stickyTop &&
+        position.bottom >=
+          (window.innerHeight || document.documentElement.clientHeight)
+      ) {
+        this.swiperRef.mousewheel.enable();
+      } else {
+        this.swiperRef.mousewheel.disable();
+      }
+      this.lastScrollY = scrollTop;
+    },
+  },
+  components: {
+    Swiper,
+    SwiperSlide,
+  },
+};
+</script>
+<style lang="postcss">
+@import "swiper/css";
+@import "swiper/css/pagination";
+
+.swiper-pagination {
+  position: static;
+  padding: 1.94rem 0 3.3rem 0;
+  --swiper-pagination-bullet-width: 0.75rem;
+  --swiper-pagination-bullet-height: 0.75rem;
+  --swiper-pagination-bullet-inactive-color: var(
+    --theme-secondary-secondary,
+    #f2709c
+  );
+  --swiper-pagination-color: var(--theme-secondary-secondary, #f2709c);
+}
+</style>

nuxt-frontend/pages/flutter-app-development.vue

@@ -1,21 +1,21 @@
 <template>
   <div>
-    <metainfo>
-      <template v-slot:title="{ content }">
-        {{ content }}
-      </template>
-    </metainfo>
     <Header />
     <LandingSection ref="flutterLanding" />
+    <DevelopmentSection ref="flutterDevelopment" />
+    <NewFooter ref="flutterFooter" />
   </div>
 </template>
 
 <script>
 import Header from "@/components/partials/NewHeader.vue";
 import config from "@/config.js";
 import { elementInViewPort } from "@/utils.js";
-import LandingSection from "../components/flutter-app-development/LandingSection.vue";
-
+import LandingSection from "@/components/flutter-app-development/LandingSection.vue";
+import DevelopmentSection from "@/components/flutter-app-development/DevelopmentSection.vue";
+const NewFooter = defineAsyncComponent(() =>
+  import("@/components/partials/NewFooter.vue")
+);
 export default {
   data() {
     return {
@@ -40,6 +40,8 @@ export default {
   components: {
     Header,
     LandingSection,
+    DevelopmentSection,
+    NewFooter,
   },
   methods: {
     sendEvent() {