init project

js/script.js

@@ -0,0 +1,85 @@
+// Mobile menu toggle
+const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
+const navLinks = document.querySelector('.nav-links');
+mobileMenuBtn.addEventListener('click', () => {
+    navLinks.classList.toggle('active');
+});
+// Close mobile menu when clicking on a link
+document.querySelectorAll('.nav-link').forEach(link => {
+    link.addEventListener('click', () => {
+        navLinks.classList.remove('active');
+    });
+});
+// Smooth scrolling for anchor links
+document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+    anchor.addEventListener('click', function(e) {
+        e.preventDefault();
+        const targetId = this.getAttribute('href');
+        if (targetId === '#') return;
+        const targetElement = document.querySelector(targetId);
+        if (targetElement) {
+            window.scrollTo({
+                top: targetElement.offsetTop - 90,
+                behavior: 'smooth'
+            });
+        }
+    });
+});
+// Scroll functionality for benefits cards
+const scrollLeftBtn = document.querySelector('.scroll-btn.left');
+const scrollRightBtn = document.querySelector('.scroll-btn.right');
+const cardsWrapper = document.querySelector('.cards-wrapper');
+scrollLeftBtn.addEventListener('click', () => {
+    cardsWrapper.scrollBy({ left: -300, behavior: 'smooth' });
+});
+scrollRightBtn.addEventListener('click', () => {
+    cardsWrapper.scrollBy({ left: 300, behavior: 'smooth' });
+});
+// Scroll functionality for reviews
+const reviewLeftBtn = document.querySelector('.review-scroll-btn.left');
+const reviewRightBtn = document.querySelector('.review-scroll-btn.right');
+const reviewsWrapper = document.querySelector('.reviews-wrapper');
+reviewLeftBtn.addEventListener('click', () => {
+    reviewsWrapper.scrollBy({ left: -350, behavior: 'smooth' });
+});
+reviewRightBtn.addEventListener('click', () => {
+    reviewsWrapper.scrollBy({ left: 350, behavior: 'smooth' });
+});
+// Auto-hide scroll buttons when at edge
+function checkScrollPosition() {
+    // For benefits cards
+    if (cardsWrapper.scrollLeft <= 10) {
+        scrollLeftBtn.style.opacity = '0.5';
+        scrollLeftBtn.style.cursor = 'default';
+    } else {
+        scrollLeftBtn.style.opacity = '1';
+        scrollLeftBtn.style.cursor = 'pointer';
+    }
+    if (cardsWrapper.scrollLeft >= cardsWrapper.scrollWidth - cardsWrapper.clientWidth - 10) {
+        scrollRightBtn.style.opacity = '0.5';
+        scrollRightBtn.style.cursor = 'default';
+    } else {
+        scrollRightBtn.style.opacity = '1';
+        scrollRightBtn.style.cursor = 'pointer';
+    }
+    // For reviews
+    if (reviewsWrapper.scrollLeft <= 10) {
+        reviewLeftBtn.style.opacity = '0.5';
+        reviewLeftBtn.style.cursor = 'default';
+    } else {
+        reviewLeftBtn.style.opacity = '1';
+        reviewLeftBtn.style.cursor = 'pointer';
+    }
+    if (reviewsWrapper.scrollLeft >= reviewsWrapper.scrollWidth - reviewsWrapper.clientWidth - 10) {
+        reviewRightBtn.style.opacity = '0.5';
+        reviewRightBtn.style.cursor = 'default';
+    } else {
+        reviewRightBtn.style.opacity = '1';
+        reviewRightBtn.style.cursor = 'pointer';
+    }
+}
+cardsWrapper.addEventListener('scroll', checkScrollPosition);
+reviewsWrapper.addEventListener('scroll', checkScrollPosition);
+window.addEventListener('resize', checkScrollPosition);
+// Initial check
+checkScrollPosition();