[WIP]New Product Templates

assets/css/custom.css

@@ -1,3 +1,5 @@
+/* Nav dropdown */
+
 :root {
     --bg-primary: #0f1419;
     --bg-secondary: #1a1d23;

assets/js/gsap.js

@@ -208,50 +208,4 @@ document.addEventListener("DOMContentLoaded", () => {
       });
     });
   })();
-
-  // How it works animation
-  (() => {
-    const howItWorksSections = document.querySelector(".js-how-it-works");
-    if (!howItWorksSections) return;
-    const items = howItWorksSections.querySelectorAll('.how-it-works__item');
-
-    items.forEach(section => {
-      const listItems = section.querySelectorAll('.how-it-works__list-item');
-      const listLine = section.querySelector('.how-it-works__list-line');
-
-      const firstItem = listItems[0];
-      const lastItem = listItems[listItems.length - 1];
-
-      // Line animation that follows scroll
-      gsap.fromTo(listLine,
-        { height: 0 },
-        {
-          height: "70%",
-          ease: "none",
-          scrollTrigger: {
-            trigger: firstItem,
-            endTrigger: lastItem,
-            start: "top 85%",
-            end: "top 85%",
-            scrub: true
-          }
-        }
-      );
-
-      // Individual item animations
-      listItems.forEach((item) => {
-        gsap.from(item, {
-          opacity: 0,
-          x: "20px",
-          duration: 0.5,
-          ease: "power2.out",
-          scrollTrigger: {
-            trigger: item,
-            start: "top 85%",
-            toggleActions: "play none none reverse"
-          }
-        });
-      });
-    });
-  })();
 });

assets/js/home.js

@@ -1,69 +1,4 @@
 document.addEventListener("DOMContentLoaded", () => {
-  (() => {
-    const logos = document.querySelector(".js-logos");
-    if (!logos) return;
-
-    const swiperEl = logos.querySelector(".swiper");
-    const speed = logos.dataset.sliderSpeed;
-
-    function getTotalSlidesWidth() {
-      return Array.from(swiperEl.querySelectorAll('.swiper-slide')).reduce((total, slide) => {
-        return total + slide.offsetWidth;
-      }, 0);
-    }
-
-    function duplicateSlides() {
-      const wrapper = swiperEl.querySelector('.swiper-wrapper');
-      const slides = wrapper.querySelectorAll('.swiper-slide');
-
-      slides.forEach(slide => {
-        const clone = slide.cloneNode(true);
-        wrapper.appendChild(clone);
-      });
-    }
-
-    function initSwiper() {
-      const totalWidth = getTotalSlidesWidth();
-      const containerWidth = swiperEl.offsetWidth;
-
-      if (totalWidth > containerWidth) {
-        // Duplicate slides before initialization
-        duplicateSlides();
-
-        const swiper = new Swiper(swiperEl, {
-          slidesPerView: "auto",
-          spaceBetween: 0,
-          loop: true,
-          loopAdditionalSlides: 1,
-          centerInsufficientSlides: true,
-          speed: speed,
-          autoplay: {
-            delay: 0,
-            disableOnInteraction: false,
-          },
-        });
-
-        return swiper;
-      }
-
-      return null;
-    }
-
-    let swiper = initSwiper();
-
-    window.addEventListener("resize", () => {
-      if (swiper) {
-        swiper.destroy(true, true);
-        // Reset slides to original state
-        const wrapper = swiperEl.querySelector('.swiper-wrapper');
-        const slides = Array.from(wrapper.querySelectorAll('.swiper-slide'));
-        const originalSlidesCount = slides.length / 2;
-        slides.slice(originalSlidesCount).forEach(slide => slide.remove());
-      }
-      swiper = initSwiper();
-    });
-  })();
-
   (() => {
     const solution = document.querySelector(".js-solution");
     if (!solution) return;

assets/js/how-it-works-product.js

@@ -0,0 +1,50 @@
+gsap.registerPlugin(MotionPathPlugin, ScrollTrigger);
+document.addEventListener("DOMContentLoaded", () => {
+  // How it works animation
+  (() => {
+    const howItWorksSections = document.querySelector(".js-how-it-works");
+    console.log(howItWorksSections);
+
+    if (!howItWorksSections) return;
+    const items = howItWorksSections.querySelectorAll('.js-how-it-works-wrapper');
+
+    items.forEach(section => {
+      const listItems = section.querySelectorAll('.js-how-it-works-item');
+      const listLine = section.querySelector('.js-how-it-works-line');
+
+      const firstItem = listItems[0];
+      const lastItem = listItems[listItems.length - 1];
+
+      // Line animation that follows scroll
+      gsap.fromTo(listLine,
+        { height: 0 },
+        {
+          height: "70%",
+          ease: "none",
+          scrollTrigger: {
+            trigger: firstItem,
+            endTrigger: lastItem,
+            start: "top 85%",
+            end: "top 85%",
+            scrub: true
+          }
+        }
+      );
+
+      // Individual item animations
+      listItems.forEach((item) => {
+        gsap.from(item, {
+          opacity: 0,
+          x: "20px",
+          duration: 0.5,
+          ease: "power2.out",
+          scrollTrigger: {
+            trigger: item,
+            start: "top 85%",
+            toggleActions: "play none none reverse"
+          }
+        });
+      });
+    });
+  })();
+});

assets/js/logos.js

@@ -0,0 +1,66 @@
+document.addEventListener("DOMContentLoaded", () => {
+  (() => {
+    const logos = document.querySelector(".js-logos");
+    if (!logos) return;
+
+    const swiperEl = logos.querySelector(".swiper");
+    const speed = logos.dataset.sliderSpeed;
+
+    function getTotalSlidesWidth() {
+      return Array.from(swiperEl.querySelectorAll('.swiper-slide')).reduce((total, slide) => {
+        return total + slide.offsetWidth;
+      }, 0);
+    }
+
+    function duplicateSlides() {
+      const wrapper = swiperEl.querySelector('.swiper-wrapper');
+      const slides = wrapper.querySelectorAll('.swiper-slide');
+
+      slides.forEach(slide => {
+        const clone = slide.cloneNode(true);
+        wrapper.appendChild(clone);
+      });
+    }
+
+    function initSwiper() {
+      const totalWidth = getTotalSlidesWidth();
+      const containerWidth = swiperEl.offsetWidth;
+
+      if (totalWidth > containerWidth) {
+        // Duplicate slides before initialization
+        duplicateSlides();
+
+        const swiper = new Swiper(swiperEl, {
+          slidesPerView: "auto",
+          spaceBetween: 0,
+          loop: true,
+          loopAdditionalSlides: 1,
+          centerInsufficientSlides: true,
+          speed: speed,
+          autoplay: {
+            delay: 0,
+            disableOnInteraction: false,
+          },
+        });
+
+        return swiper;
+      }
+
+      return null;
+    }
+
+    let swiper = initSwiper();
+
+    window.addEventListener("resize", () => {
+      if (swiper) {
+        swiper.destroy(true, true);
+        // Reset slides to original state
+        const wrapper = swiperEl.querySelector('.swiper-wrapper');
+        const slides = Array.from(wrapper.querySelectorAll('.swiper-slide'));
+        const originalSlidesCount = slides.length / 2;
+        slides.slice(originalSlidesCount).forEach(slide => slide.remove());
+      }
+      swiper = initSwiper();
+    });
+  })();
+});

assets/js/main.js

@@ -4,6 +4,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const anonncement = document.querySelector(".header__announcement");
     const headerToggle = header.querySelector(".header__toggle");
     const headerSearchToggle = header.querySelector(".header__search-toggle");
+    const navDropdowns = header.querySelectorAll(".nav__item--has-children");
     const headerHeight = header.offsetHeight;
     document.body.style.setProperty("--header-height", `${headerHeight}px`);
 
@@ -18,6 +19,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }, delay);
       };
     };
+
     if (anonncement) {
       const anonncementClose = anonncement.querySelector(
         ".header__announcement-close"
@@ -56,6 +58,33 @@ document.addEventListener("DOMContentLoaded", () => {
       });
     }
 
+    if (navDropdowns.length) {
+      var isDesktop = window.matchMedia('(hover: hover) and (pointer: fine)').matches;
+
+      navDropdowns.forEach((dropdown) => {
+        let hideTimeout;
+        const link = dropdown.querySelector(".nav__link");
+
+        // Toggle submenu on click
+        link.addEventListener("click", (e) => {
+          if (e.target.closest(".nav__caret")) {
+            e.preventDefault();
+            dropdown.classList.toggle("open");
+            const expanded = dropdown.classList.contains("open");
+            link.setAttribute("aria-expanded", expanded ? "true" : "false");
+          }
+        });
+
+        dropdown.addEventListener("mouseenter", () => {
+          if (!isDesktop) return;
+          clearTimeout(hideTimeout);
+          hideTimeout = setTimeout(function () {
+            // No-op; CSS hover handles show/hide. This delay gives users time to enter submenu.
+          }, 120);
+        });
+      });
+    }
+
    // Debounced resize handler
     const handleResize = debounce(() => {
       if (window.innerWidth > 992) {

assets/js/testimonial-list.js

@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", function () {
+  const testimonialList = document.querySelector(".js-testimonial-list");
+  if (!testimonialList) return;
+  const pagination = testimonialList.querySelector(".testimonial-list__pagination");
+  const swiperEl = testimonialList.querySelector(".swiper");
+  const swiper = new Swiper(swiperEl, {
+    slidesPerView: "auto",
+    pagination: {
+      el: pagination,
+      clickable: true,
+    },
+  });
+});

assets/scss/base/_normalize.scss

@@ -110,3 +110,7 @@ ul {
 .u-bg-dark-700 {
 	background-color: palette(primary-dark, 700);
 }
+
+.no-padding-top {
+	padding-top: 0!important;
+}

assets/scss/components/_button.scss

@@ -86,6 +86,19 @@
   }
 }
 
+.button--link {
+  background: transparent;
+  padding: 0;
+  border: none;
+  color: palette(primary-offwhite);
+  gap: 8px;
+
+  .button__icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
 .button--badge {
   padding: 7px 12px;
   background-color: transparent;