Feat: Design development section for frontend page

canopas · Feb 28, 2024 · 408f03e · 408f03e
1 parent fca03eb
commit 408f03e
Showing 1 changed file with 7 additions and 21 deletions.
diff --git a/nuxt-frontend/components/frontend-development/DevelopmentSection.vue b/nuxt-frontend/components/frontend-development/DevelopmentSection.vue
@@ -79,15 +79,15 @@
       <div
         v-for="(item, index) in items"
         :key="index"
-        class="child-content bg-white sticky top-96 mb-52"
+        class="services bg-white sticky top-96 mb-52"
         :id="`${'item-' + index}`"
       >
         <div
           :class="{
             'bg-pink-40': index % 2 === 0,
             'bg-white-smoke': index % 2 !== 0,
           }"
-          class="p-10 container rounded-xl w-[45rem] shadow-xl"
+          class="p-10 container rounded-xl w-[45rem] shadow-lg h-[33rem]"
         >
           <h3 class="desk-header-3 text-black-87">
             {{ index + 1 }}.
@@ -165,29 +165,15 @@ onUnmounted(() => {
   window.removeEventListener("scroll", handleScroll);
 });
 function handleScroll() {
-  const child = document.querySelectorAll(".child-content");
+  const service = document.querySelectorAll(".services");
   const parent = document.getElementById("parentContainer");
-  child.forEach((item, index) => {
+  service.forEach((item, index) => {
     const itemRect = item.getBoundingClientRect();
     const itemTop = itemRect.top;
     if (itemTop < 380 && index == 5) {
-      parent.classList.add("lg:!pb-[46rem]");
+      parent.classList.add("lg:!pb-[48rem]");
     } else if (itemTop > 420) {
-      parent.classList.remove("lg:!pb-[46rem]");
-    }
-    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);
-          });
-        }
-      });
+      parent.classList.remove("lg:!pb-[48rem]");
     }
   });
 }
@@ -206,6 +192,6 @@ function handleScroll() {
   @apply !border-none !opacity-100;
 }
 .child-content:last-child {
-  margin-bottom: 16rem;
+  margin-bottom: 13rem;
 }
 </style>