// Main JavaScript for NanoMatter Technologies // Intersection Observer for scroll animations const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -50px 0px' }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.classList.add('visible'); } }); }, observerOptions); // Initialize scroll animations document.addEventListener('DOMContentLoaded', function() { // Add fade-in class to all sections const sections = document.querySelectorAll('section'); sections.forEach(section => { section.classList.add('fade-in'); observer.observe(section); }); // Add particles to hero section createParticles(); // Initialize feather icons feather.replace(); }); // Particle animation for hero section function createParticles() { const heroSection = document.querySelector('section:first-of-type'); const particleCount = 20; for (let i = 0; i < particleCount; i++) { const particle = document.createElement('div'); particle.className = 'particle'; // Random position const left = Math.random() * 100; const top = Math.random() * 100; const size = Math.random() * 3 + 2; const delay = Math.random() * 5; const duration = Math.random() * 3 + 4; particle.style.left = `${left}%`; particle.style.top = `${top}%`; particle.style.width = `${size}px`; particle.style.height = `${size}px`; particle.style.animationDelay = `${delay}s`; particle.style.animationDuration = `${duration}s`; heroSection.appendChild(particle); } } // Smooth scrolling for anchor 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', block: 'start' }); } }); }); // Form handling document.querySelector('form')?.addEventListener('submit', function(e) { e.preventDefault(); // Simple form validation const formData = new FormData(this); const data = Object.fromEntries(formData); // Check if all fields are filled const allFilled = Object.values(data).every(value => value.trim() !== ''); if (allFilled) { // Show success message (in a real app, you would send this to a server) const submitBtn = this.querySelector('button[type="submit"]'); const originalText = submitBtn.textContent; submitBtn.textContent = 'Sending...'; submitBtn.disabled = true; // Simulate API call setTimeout(() => { submitBtn.textContent = 'Message Sent!'; submitBtn.style.background = '#16a34a'; setTimeout(() => { submitBtn.textContent = originalText; submitBtn.disabled = false; this.reset(); }, 2000); }, 1000); } else { alert('Please fill in all fields'); } }); // Add loading animation to technology icons document.querySelectorAll('.tech-icon, .service-icon').forEach(icon => { icon.addEventListener('mouseenter', function() { const featherIcon = this.querySelector('[data-feather]'); if (featherIcon) { featherIcon.style.transform = 'scale(1.1)'; }); icon.addEventListener('mouseleave', function() { const featherIcon = this.querySelector('[data-feather]'); if (featherIcon) { featherIcon.style.transform = 'scale(1)'; }); }); // Mobile menu toggle (handled in navbar component) // This is kept here for any additional functionality