new design

public/app.js

@@ -1,21 +1,82 @@
+/**
+ * Function to handle the scroll behavior of the navigation bar
+ */
+
+let header = document.querySelector('.navbar-main');
+let buttonMobile = document.getElementById('Burger-menu');
+let nav = document.querySelector('nav');
+let links = document.querySelectorAll('nav ul li a');
+
+const scrollFunction = () => {
+  if (
+    document.body.scrollTop > 100 ||
+    document.documentElement.scrollTop > 100
+  ) {
+    header.classList.add("bg");
+  } else {
+    header.classList.remove("bg");
+  }
+};
+
+window.addEventListener('scroll', scrollFunction);
+window.addEventListener('load', scrollFunction);
+
+/**
+ * Function to handle the accordion behavior
+ * for the FAQ section
+ */
+
 const accTitles = document.querySelectorAll('.accordion-title');
 
+function closeAllAccordions(exceptThis = null) {
+  accTitles.forEach(title => {
+    if (title !== exceptThis) {
+      title.classList.remove('active');
+      const content = title.nextElementSibling;
+      content.style.maxHeight = null;
+    }
+  });
+}
+
+function openAccordion(title) {
+  const content = title.nextElementSibling;
+  requestAnimationFrame(() => {
+    content.style.maxHeight = content.scrollHeight + 'px';
+  });
+  title.classList.add('active');
+}
+
 accTitles.forEach(title => {
   title.addEventListener('click', () => {
-    accTitles.forEach(otherTitle => {
-      if (otherTitle !== title) {
-        otherTitle.classList.remove('active');
-        otherTitle.nextElementSibling.style.display = 'none';
-      }
-    });
-
     const content = title.nextElementSibling;
-    const isOpen = content.style.display === 'block';
-    title.classList.toggle('active');
-    content.style.display = isOpen ? 'none' : 'block';
+    const isOpen = title.classList.contains('active');
+
+    if (isOpen) {
+      // Close current
+      title.classList.remove('active');
+      content.style.maxHeight = null;
+    } else {
+      // Close others, open this
+      closeAllAccordions(title);
+      openAccordion(title);
+    }
   });
 });
 
+// Adjust height on resize (especially for images inside content)
+window.addEventListener('resize', () => {
+  accTitles.forEach(title => {
+    if (title.classList.contains('active')) {
+      const content = title.nextElementSibling;
+      content.style.maxHeight = content.scrollHeight + 'px';
+    }
+  });
+});
+
+/**
+ * Function to handle team section slider
+ */
+
 const slides = document.querySelectorAll('.slide');
 let currentIndex = 0;
 
@@ -32,16 +93,40 @@ if (slides.length > 0) {
   setInterval(nextSlide, 10000);
 }
 
+/**
+ * Function to handle the blog teaser toggle
+ * for showing full content
+ */
 
 function toggleContent(button) {
   const teaser = button.parentElement;
   const fullContent = teaser.querySelector('.blog-full-content');
   if (fullContent.style.display === 'none') {
     fullContent.style.display = 'block';
-    button.textContent = 'Read Less';
+    button.innerHTML = 'Read Less <span class="read-less-btn-icon"><i class="fa-solid fa-angle-up"></i></span>';
+    button.classList.add('read-less-btn');
   } else {
     fullContent.style.display = 'none';
-    button.textContent = 'Read More';
+    button.innerHTML = 'Read More <span class="read-more-btn-icon"><i class="fa-solid fa-angle-right"></i></span>';
   }
 }
 
+/**
+ * Function to handle the mobile menu toggle
+ */
+
+const mobMenu = () => {
+  for (let i = 0; i < links.length; i++) {
+      links[i].addEventListener('click', mobMenu)
+  }
+  if (nav.classList.contains('responsive')) {
+      nav.classList.remove('responsive');
+      document.body.style.overflow = '';
+
+  } else {
+      nav.classList.add('responsive');
+      document.body.style.overflow = 'hidden';
+  }
+}
+
+buttonMobile.addEventListener('click', mobMenu);