From ef00fcf66261ac84140b6fc1ea3b95b1abe544d7 Mon Sep 17 00:00:00 2001
From: cp-ashish-k <ashish.k@canopas.com>
Date: Fri, 5 Jan 2024 14:07:43 +0530
Subject: [PATCH] Feat : changed in development section for frontend as per id

---
 .../DevelopmentSection.vue                    | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/nuxt-frontend/components/frontend-development/DevelopmentSection.vue b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
index 28c81fb30..271a84328 100644
--- a/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
+++ b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
@@ -80,12 +80,7 @@
         v-for="(item, index) in items"
         :key="index"
         class="child-content bg-white sticky top-96 mb-52"
-        :class="[
-          item.classList,
-          index === activeIndex
-            ? `transition-all duration-100 -rotate-6 opacity-90 ease-in`
-            : '',
-        ]"
+        :id="`${'item-' + index}`"
       >
         <div
           :class="{
@@ -116,6 +111,8 @@ const pagination = {
   el: ".swiper-pagination",
   clickable: true,
 };
+var activeIndexValue = [];
+var uniqueActiveIndexValues = [];
 var activeIndex = ref(null);
 const items = [
   {
@@ -123,18 +120,21 @@ const items = [
     description: `<span>As you know, mobile usage has been growing every day for more than a decade now.</span>
             <span>In such a time, a responsive design isn't a luxury — it's a necessity.</span>
             <span>We ensure your website looks and functions flawlessly, be it on a desktop, tablet, or mobile. Our team will help you design pixel perfect designs for all types of devices.</span>`,
+    className: "rotate-6",
   },
   {
     title: "Single Page Applications (SPAs)",
     description: `<span>By dynamically loading content and eliminating traditional page reloads, SPAs offer users a fluid, app-like experience within their browsers.</span>
             <span>At Canopas, we specialize in leveraging modern frameworks such as React, Angular, and Vue.js to craft these responsive and interactive platforms.</span>
             <span>Coupled with seamless backend integrations, our SPAs are not only user-friendly but also robust, ensuring fast performance and a smooth browsing experience.</span>`,
+    className: "-rotate-6",
   },
   {
     title: "Progressive Web Apps (PWAs)",
     description: `<span>Progressive Web Apps (PWAs) Offer the best of both worlds, delivering web accessibility with the immersive experience of a native app.</span>
             <span>At Canopas, we recognize the transformative potential of PWAs. By harnessing their offline capabilities, push notifications, and device hardware access, we create digital platforms that engage users seamlessly, regardless of network conditions or device type.</span>
             <span>We ensure your website looks and functions flawlessly, be it on a desktop, tablet, or mobile. Our team will help you design pixel perfect designs for all types of devices.</span>`,
+    className: "rotate-6",
   },
   {
     title: "UI/UX Design",
@@ -142,20 +142,20 @@ const items = [
             <span>We delve deep into user behaviors, needs, and motivations to create designs that are not only visually appealing but also functionally streamlined.</span>
             <span>Every pixel we craft and every interaction we design is aimed at providing users with a seamless journey, turning visitors into loyal customers. </span>
             <span>By blending aesthetics with ergonomics, we ensure that our digital solutions are both beautiful and user-centric.</span>`,
-    classList: "!mb-44",
+    className: "!mb-44 -rotate-6",
   },
   {
     title: "Frontend Audits and Consultation",
     description: `<span>Not sure where your current frontend stands? Our expert audits dive deep into your platform, identifying areas of improvement, and providing actionable insights for enhancement.</span>
             <span>Leveraging a combination of cutting-edge tools and seasoned expertise, we dive deep into your web architecture, pinpointing areas that can benefit from refinement.</span>
             <span>Our aim? To elevate your online platform's functionality, accessibility, and user engagement, turning potential weak points into strengths.</span>`,
+    className: `!mb-60 rotate-6`,
   },
   {
     title: "Performance Optimization",
     description: `<span>User patience is finite. We fine-tune your frontend assets, ensuring lightningfast load times, reduced bounce rates, and an overall smoother user experience.</span>
             <span>Through a meticulous analysis of your site's architecture, load times, and asset delivery, we pinpoint bottlenecks and implement strategic enhancements.</span>
             <span>The result? A digital experience that not only loads faster but retains users, boosts engagement, and improves overall site metrics.</span>`,
-    classList: "!mb-64",
   },
 ];
 onMounted(() => {
@@ -171,12 +171,23 @@ function handleScroll() {
     const itemRect = item.getBoundingClientRect();
     const itemTop = itemRect.top;
     if (itemTop < 380 && index == 5) {
-      parent.classList.add("lg:!pb-[47rem]");
+      parent.classList.add("lg:!pb-[46rem]");
     } else if (itemTop > 420) {
-      parent.classList.remove("lg:!pb-[47rem]");
+      parent.classList.remove("lg:!pb-[46rem]");
     }
-    if (itemTop < 420) {
+    if (itemTop < 400) {
       activeIndex.value = --index;
+      activeIndexValue.push(activeIndex.value);
+      uniqueActiveIndexValues = [...new Set(activeIndexValue)];
+      uniqueActiveIndexValues.forEach((index) => {
+        const element = document.getElementById(`item-${index}`);
+        if (element) {
+          const classNames = items[index].className.split(" ");
+          classNames.forEach((className) => {
+            element.classList.add(className);
+          });
+        }
+      });
     }
   });
 }
@@ -194,4 +205,7 @@ function handleScroll() {
 .swiper-pagination-bullet-active {
   @apply !border-none !opacity-100;
 }
+.child-content:last-child {
+  margin-bottom: 16rem;
+}
 </style>