Enhance:Improve scrolling and sticky behaviour of development section

vue-frontend/src/components/android-app-development/DevelopmentSection.vue

@@ -1,39 +1,49 @@
 <template>
   <div class="tw-mt-16 tw-bg-white tw-h-[70%]">
     <div
-      class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center xll:tw--mb-[18rem]"
+      class="xl:tw-h-[0vh] xl:!tw-sticky"
+      :class="{ 'xl:!tw-top-0': lastSlideReached }"
     >
-      <span
-        class="tw-mb-2.5 tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[3.4375rem] md:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
-      >
-        Android App Development Services</span
-      >
-      <span
-        class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.60] md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-9 lg:tw-px-20 2xl:tw-px-56"
-        >With over a decade of expertise in Android app development, our team
-        can help you craft high- quality, user-friendly apps that drive business
-        growth and customer engagement.</span
+      <div
+        class="tw-container tw-mb-2.5 tw-flex tw-flex-col tw-text-center xll:tw--mb-[18rem]"
       >
+        <span
+          class="tw-mb-2.5 tw-font-inter-bold tw-text-[1.875rem] tw-leading-[2.4375rem] tw-text-black-core/[0.87] md:!tw-mx-0 md:!tw-w-full md:tw-text-[3.4375rem] md:tw-leading-[5.15625rem] xs:tw-mx-auto xs:tw-w-[71%]"
+        >
+          Android App Development Services</span
+        >
+        <span
+          class="tw-font-inter-regular tw-text-base tw-text-black-core/[0.60] md:tw-font-inter-medium md:tw-text-[1.5rem] md:tw-leading-9 lg:tw-px-20 2xl:tw-px-56"
+          >With over a decade of expertise in Android app development, our team
+          can help you craft high- quality, user-friendly apps that drive
+          business growth and customer engagement.</span
+        >
+      </div>
     </div>
+
     <!-- Desktop UI -->
-    <div class="sticky-parent tw-hidden md:tw-block xll:tw-container">
-      <div class="sticky tw-sticky tw-top-0 tw-max-h-screen tw-overflow-hidden">
+    <div class="sticky-parent tw-hidden md:tw-block">
+      <div
+        class="sticky tw-sticky tw-top-[92px] xl:!tw-top-0 xl:tw-max-h-full main tw-overflow-hidden"
+      >
         <div class="tw-flex">
           <div
             v-for="(item, index) in items"
             :key="index"
-            class="tw-cursor-pointer tw-mt-32 xll:tw-mt-[36rem] tw-min-w-[100vw] md:tw-h-[70vh] xl:tw-h-screen"
+            class="tw-cursor-pointer tw-mt-[-12rem] xl:tw-mt-32 xll:tw-mt-[36rem] tw-min-w-[100vw] tw-h-[900px] xl:tw-h-full"
           >
-            <div class="tw-relative !-tw-mr-2 tw-mb-8 tw-mt-12">
+            <div
+              class="tw-relative !-tw-mr-2 tw-mb-8 tw-mt-[15rem] xl:tw-mt-32 xll:tw-mt-[-15rem]"
+            >
               <div
                 class="tw-border-b-2 tw-border-dotted tw-border-[#000000]/[0.87] tw-text-center"
               ></div>
             </div>
             <div
-              class="tw-absolute tw-top-[16.5%] xl:tw-top-[13.8%] xll:tw-top-[19.4%] tw-ml-[45%] xll:tw-ml-[47%] tw-hidden tw-h-20 !tw-bg-white tw-text-center md:tw-block 2xll:tw-ml-[47%] xll:tw-ml-[48%]"
+              class="tw-absolute tw-top-[0%] xl:tw-top-[23%] xll:tw-top-[29.5%] tw-ml-[45%] xll:tw-ml-[47%] tw-hidden tw-h-20 !tw-bg-white tw-text-center md:tw-block 2xll:tw-ml-[47%] xll:tw-ml-[48%]"
             >
               <span
-                class="tw-text-center tw-font-inter-bold tw-text-[3.75rem] tw-leading-[5.625rem] !tw-bg-white"
+                class="tw-text-center tw-font-inter-bold tw-text-[3.75rem] tw-leading-[5.625rem]"
               >
                 0{{ index + 1 }}</span
               >
@@ -83,7 +93,7 @@
     </div>
     <!-- Desktop UI End -->
     <div
-      class="tw-hidden md:tw-block tw-h-[25vh] xl:tw-h-[50vh] 2xl:tw-h-[60vh] xll:tw-h-screen tw-w-screen"
+      class="tw-hidden md:tw-block tw-h-[25vh] xl:tw-h-[70vh] xll:tw-h-[60vh] tw-w-screen"
     ></div>
 
     <div class="swiper-content tw-mt-8 md:tw-hidden">
@@ -210,6 +220,9 @@ import { Swiper, SwiperSlide } from "swiper/vue";
 export default {
   data() {
     return {
+      currentCardIndex: 0,
+      scrollPosition: 0,
+      lastSlideReached: false,
       modules: [Mousewheel],
       items: [
         {
@@ -276,7 +289,7 @@ export default {
     };
   },
   mounted() {
-    document.addEventListener("scroll", horizontalScroll);
+    document.addEventListener("scroll", this.handleScroll);
 
     let sticky = document.querySelector(".sticky");
     let stickyParent = document.querySelector(".sticky-parent");
@@ -287,15 +300,37 @@ export default {
       sticky.getBoundingClientRect().height;
 
     function horizontalScroll() {
-      let stickyPosition = sticky.getBoundingClientRect().top;
-      if (stickyPosition > 1) {
-        return;
+      let scrolled = stickyParent.getBoundingClientRect().top;
+
+      if (scrolled > 0) {
+        sticky.scrollLeft = 0;
       } else {
-        let scrolled = stickyParent.getBoundingClientRect().top;
         sticky.scrollLeft =
           (scrollWidth / verticalScrollHeight) * -scrolled * 0.85;
       }
+      requestAnimationFrame(horizontalScroll);
     }
+
+    // Attach the existing horizontalScroll function separately
+    document.addEventListener("scroll", horizontalScroll);
+  },
+  beforeDestroy() {
+    document.removeEventListener("scroll", this.handleScroll);
+
+    document.removeEventListener("scroll", this.horizontalScroll);
+  },
+  methods: {
+    handleScroll() {
+      const windowHeight = window.innerHeight;
+      const lastSlide = document.querySelector(".main:last-child");
+      const lastSlidePosition = lastSlide.getBoundingClientRect().top;
+
+      if (lastSlidePosition <= windowHeight && lastSlidePosition >= 0) {
+        this.lastSlideReached = true;
+      } else {
+        this.lastSlideReached = false;
+      }
+    },
   },
   components: {
     Swiper,