Upload Next.js project

public/assets/js/main.js

@@ -0,0 +1,227 @@
+// ✅ DOM READY (IMPORTANT)
+document.addEventListener("DOMContentLoaded", function () {
+
+  // =============================
+  // AOS INIT
+  // =============================
+  if (typeof AOS !== "undefined") {
+    AOS.init({
+      duration: 1000,
+      once: true
+    });
+  }
+
+  // =============================
+  // TRADES SWIPER
+  // =============================
+  if (typeof Swiper !== "undefined") {
+    new Swiper(".tradesSwiper", {
+      loop: true,
+      slidesPerView: 3,
+      spaceBetween: 25,
+      speed: 1500,
+      autoplay: {
+        delay: 0,
+        disableOnInteraction: false,
+      },
+      freeMode: true,
+      freeModeMomentum: false,
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      breakpoints: {
+        0: { slidesPerView: 1 },
+        768: { slidesPerView: 2 },
+        1024: { slidesPerView: 3 }
+      }
+    });
+
+    // =============================
+    // TESTIMONIAL SWIPER
+    // =============================
+    new Swiper(".testimonialSwiper", {
+      slidesPerView: 3,
+      spaceBetween: 30,
+      loop: true,
+      speed: 800,
+      centeredSlides: true,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      breakpoints: {
+        0: { slidesPerView: 1.2, centeredSlides: true },
+        768: { slidesPerView: 2 },
+        1024: { slidesPerView: 3 }
+      }
+    });
+
+    // =============================
+    // EXPERTISE SWIPER
+    // =============================
+    new Swiper(".expertise-slider", {
+      slidesPerView: 3,
+      spaceBetween: 25,
+      loop: true,
+      speed: 800,
+      autoplay: {
+        delay: 2500,
+        disableOnInteraction: false,
+      },
+      pagination: {
+        el: ".swiper-pagination",
+        clickable: true,
+      },
+      breakpoints: {
+        0: { slidesPerView: 1.2 },
+        576: { slidesPerView: 2 },
+        992: { slidesPerView: 3 }
+      }
+    });
+  }
+
+  // =============================
+  // IMAGE COMPARISON SLIDER
+  // =============================
+  function initComparisons() {
+    const overlays = document.querySelectorAll(".img-comp-overlay");
+
+    overlays.forEach(img => {
+      let w = img.offsetWidth;
+      let h = img.offsetHeight;
+
+      img.style.width = (w / 2) + "px";
+
+      const slider = document.createElement("div");
+      slider.className = "img-comp-slider";
+      img.parentElement.insertBefore(slider, img);
+
+      slider.style.top = (h / 2) + "px";
+      slider.style.left = (w / 2) + "px";
+
+      let clicked = false;
+
+      const start = (e) => {
+        e.preventDefault();
+        clicked = true;
+      };
+
+      const stop = () => clicked = false;
+
+      const move = (e) => {
+        if (!clicked) return;
+
+        const rect = img.getBoundingClientRect();
+        let x = (e.touches ? e.touches[0].pageX : e.pageX) - rect.left;
+        x = Math.max(0, Math.min(x, w));
+
+        img.style.width = x + "px";
+        slider.style.left = x + "px";
+      };
+
+      slider.addEventListener("mousedown", start);
+      window.addEventListener("mouseup", stop);
+      window.addEventListener("mousemove", move);
+
+      slider.addEventListener("touchstart", start);
+      window.addEventListener("touchend", stop);
+      window.addEventListener("touchmove", move);
+    });
+  }
+
+  window.addEventListener("load", initComparisons);
+
+  // =============================
+  // MENU HOVER IMAGE CHANGE
+  // =============================
+  const menuItems = document.querySelectorAll(".menu-left li");
+  const image = document.getElementById("serviceImage");
+
+  if (menuItems.length && image) {
+    const images = {
+      img1: "/assets/images/menuimages.png",
+      img2: "/assets/images/menuimages1.png",
+      img3: "/assets/images/menuimages2.png",
+      img4: "/assets/images/menuimages3.png",
+      img5: "/assets/images/menuimages4.png",
+      img6: "/assets/images/documentmenu.png",
+      img7: "/assets/images/sunroommenu.png"
+    };
+
+    const first = menuItems[0];
+    if (first) {
+      image.src = images[first.dataset.img];
+      first.classList.add("active");
+    }
+
+    menuItems.forEach(item => {
+      item.addEventListener("mouseenter", () => {
+        menuItems.forEach(i => i.classList.remove("active"));
+        item.classList.add("active");
+
+        image.style.opacity = 0;
+
+        setTimeout(() => {
+          image.src = images[item.dataset.img];
+          image.style.opacity = 1;
+        }, 200);
+      });
+    });
+  }
+
+  // =============================
+  // TABS
+  // =============================
+  window.changeTab = function (id) {
+    const data = {
+      1: {
+        title: "We personally oversee every detail...",
+        text: "We ensure design consistency...",
+        img: "/assets/images/PersonallyOversee.png"
+      },
+      2: {
+        title: "We personally oversee every detail...",
+        text: "We verify materials...",
+        img: "/assets/images/PersonallyOversee.png"
+      }
+    };
+
+    document.querySelectorAll(".tab-box").forEach(el => el.classList.remove("active"));
+    document.querySelectorAll(".tab-box")[id - 1]?.classList.add("active");
+
+    document.getElementById("contentTitle").innerText = data[id].title;
+    document.getElementById("contentText").innerText = data[id].text;
+    document.getElementById("mainImage").src = data[id].img;
+  };
+
+  // =============================
+  // FILTER GALLERY
+  // =============================
+  const filterBtns = document.querySelectorAll(".filter-btn");
+  const galleryItems = document.querySelectorAll(".gallery-item");
+
+  if (filterBtns.length && galleryItems.length) {
+    filterBtns.forEach(btn => {
+      btn.addEventListener("click", () => {
+
+        filterBtns.forEach(b => b.classList.remove("active"));
+        btn.classList.add("active");
+
+        const filter = btn.dataset.filter;
+
+        galleryItems.forEach(item => {
+          const category = item.dataset.category;
+
+          item.classList.toggle("hide", !(filter === "all" || filter === category));
+        });
+
+      });
+    });
+  }
+
+});