Update index.html and script.js to enhance website template with new sections, improved navigation, and smooth scrolling functionality. Modify title and branding, and implement form handling and mobile menu toggle in JavaScript.

js/script.js

@@ -1,20 +1,73 @@
-// Add fade-in animation to main content
+// Add fade-in animation to all sections
 document.addEventListener('DOMContentLoaded', () => {
-    const mainContent = document.querySelector('main');
-    mainContent.classList.add('fade-in');
-
-    // Add click event to the Learn More button
-    const learnMoreBtn = document.querySelector('.btn-primary');
-    learnMoreBtn.addEventListener('click', () => {
-        alert('Thanks for your interest! This is a demo website.');
+    const pageSections = document.querySelectorAll('section');
+    pageSections.forEach(section => {
+        section.classList.add('fade-in');
     });
 
-    // Add active class to current nav item
-    const navLinks = document.querySelectorAll('.nav-link');
-    navLinks.forEach(link => {
-        link.addEventListener('click', (e) => {
-            navLinks.forEach(l => l.classList.remove('active'));
-            e.target.classList.add('active');
+    // Smooth scrolling for navigation links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+        anchor.addEventListener('click', function (e) {
+            e.preventDefault();
+            const target = document.querySelector(this.getAttribute('href'));
+            if (target) {
+                target.scrollIntoView({
+                    behavior: 'smooth'
+                });
+            }
         });
     });
+
+    // Form submission handling
+    const contactForm = document.querySelector('form');
+    if (contactForm) {
+        contactForm.addEventListener('submit', (e) => {
+            e.preventDefault();
+            // Add your form submission logic here
+            alert('Thank you for your message! This is a demo form.');
+            contactForm.reset();
+        });
+    }
+
+    // Active navigation highlighting
+    const navLinks = document.querySelectorAll('.nav-link');
+    const sections = document.querySelectorAll('section');
+
+    function setActiveLink() {
+        let current = '';
+        sections.forEach(section => {
+            const sectionTop = section.offsetTop;
+            const sectionHeight = section.clientHeight;
+            if (window.scrollY >= (sectionTop - sectionHeight / 3)) {
+                current = section.getAttribute('id');
+            }
+        });
+
+        navLinks.forEach(link => {
+            link.classList.remove('active');
+            if (link.getAttribute('href').substring(1) === current) {
+                link.classList.add('active');
+            }
+        });
+    }
+
+    window.addEventListener('scroll', setActiveLink);
+    setActiveLink(); // Initial call
+
+    // Mobile menu toggle
+    const navbarToggler = document.querySelector('.navbar-toggler');
+    const navbarCollapse = document.querySelector('.navbar-collapse');
+
+    if (navbarToggler && navbarCollapse) {
+        navbarToggler.addEventListener('click', () => {
+            navbarCollapse.classList.toggle('show');
+        });
+
+        // Close mobile menu when clicking outside
+        document.addEventListener('click', (e) => {
+            if (!navbarToggler.contains(e.target) && !navbarCollapse.contains(e.target)) {
+                navbarCollapse.classList.remove('show');
+            }
+        });
+    }
 });