Добавила страницу.

js/main.js

@@ -0,0 +1,122 @@
+// Show menu
+const navMenu = document.getElementById("nav-menu");
+const navToggle = document.getElementById("nav-toggle");
+const navClose = document.getElementById("nav-close");
+
+// Validate if const exists
+
+if (navToggle) {
+  navToggle.addEventListener("click", () => {
+    navMenu.classList.add("show-menu");
+  });
+}
+
+//Menu hidden
+// alidate if const exists
+
+if (navClose) {
+  navClose.addEventListener("click", () => {
+    navMenu.classList.remove("show-menu");
+  });
+}
+
+// Remove menu mobile
+const navLink = document.querySelectorAll(".nav-link");
+
+const linkAction = () => {
+  const navMenu = document.getElementById("nav-menu");
+
+  navMenu.classList.remove("show-menu");
+};
+
+navLink.forEach((n) => n.addEventListener("click", linkAction));
+
+// GSAP animation
+gsap.from('.home-frame', 1.5, { opacity: 0, y: -300, delay: 0.2 });
+gsap.from('.home-sphere', 1.5, { opacity: 0, x: -300, delay: 0.3 });
+gsap.from('.home-triangle', 1.5, { opacity: 0, x: 300, delay: 0.6 });
+gsap.from('.home-r', 1.5, { opacity: 0, y: -300, delay: 0.8 });
+gsap.from('.home-l', 1.5, { opacity: 0, y: 300, delay: 0.8 });
+// gsap.from('.about-title', 1.5, { opacity: 0, x: -100, delay: 1.3 });
+gsap.from('.about-description', 1.5, { opacity: 0, x: -100, delay: 1.5 });
+gsap.from('.button-ghost', 1.5, { opacity: 0, x: -100, delay: 1.6 });
+gsap.from('.swiper', 1.5, { opacity: 0, x: 100, delay: 1.5 });
+gsap.from('.section-title', 1.5, { opacity: 0, x: -100, delay: 1.5 });
+
+
+
+
+
+
+if (window.innerWidth <= 766) {
+  gsap.from('.home-content', 1.5, { opacity: 0, y: -300, delay: 0.8 });
+  gsap.from('.home-title img', 1.5, { opacity: 0, x: 100, delay: 1.3 });
+} else {
+  gsap.from('.home-content', 1.5, { opacity: 0, x: -300, delay: 0.8 });
+  gsap.from('.home-title img', 1.5, { opacity: 0, x: 300, delay: 1.2 });
+}
+
+const swiperAbout = new Swiper('.about-swiper', {
+  spaceBetween: 30,
+  centeredSlides: true,
+  loop: true,
+  autoplay: {
+    delay: 3500,
+    disableOnInteraction: false,
+  },
+  pagination: {
+    el: ".swiper-pagination",
+    dynamicBullets: true,
+    clickable: true
+  }
+});
+
+
+const bgHeader = () => {
+  const header = document.getElementById('header')
+
+  if (window.scrollY >= 50) {
+    header.classList.add('bg-header');
+  } else {
+    header.classList.remove('bg-header');
+  }
+};
+
+window.addEventListener('scroll', bgHeader);
+
+
+const scrollUp = () => {
+  const scrollUp = document.getElementById('scroll-up')
+  
+  if (window.scrollY >= 350) {
+    scrollUp.classList.add('show-scroll');
+  } else {
+    scrollUp.classList.remove('show-scroll');
+  }
+}
+
+window.addEventListener('scroll', scrollUp)
+
+
+const sections = document.querySelectorAll('section[id]')
+
+const scrollActive = () => {
+  const scrollDown = window.scrollY
+
+  sections.forEach(current => {
+    const sectionHeight = current.offsetHeight;
+    const sectionTop = current.offsetTop - 58;
+    const sectionId = current.getAttribute('id');
+    const sectionsClass = document.querySelector(`.nav-menu a[href*="${sectionId}"]`);
+
+    if (sectionsClass) {
+      if (scrollDown > sectionTop && scrollDown <= sectionTop + sectionHeight) {
+        sectionsClass.classList.add('active-link');
+      } else {
+        sectionsClass.classList.remove('active-link');
+      }
+    }
+  }) 
+}
+
+window.addEventListener('scroll', scrollActive)