// Main JavaScript for SearchExperts Pro document.addEventListener('DOMContentLoaded', function() { // Initialize animations and interactions initAnimations(); initFormHandling(); initScrollEffects(); }); function initAnimations() { // Add 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('animate-fade-in'); } }); }, observerOptions); // Observe all service cards and stats document.querySelectorAll('.bg-gray-700').forEach(card => { observer.observe(card); }); // Add fade-in animation class const style = document.createElement('style'); style.textContent = ` .animate-fade-in { animation: fadeInUp 0.6s ease-out forwards; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } `; document.head.appendChild(style); } function initFormHandling() { const applicationForm = document.querySelector('#application form'); const contactForm = document.querySelector('#contact form'); if (applicationForm) { applicationForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form data const formData = new FormData(this); const data = Object.fromEntries(formData); // Simple form validation const required = ['company', 'industry', 'revenue', 'budget', 'name', 'email', 'motivation']; const missing = required.filter(field => !data[field]); if (missing.length > 0 || !data.agreement) { showNotification('Please complete all required fields and accept the terms.', 'error'); return; } // Simulate application submission showNotification('Application submitted! We will review your submission within 48 hours.', 'success'); this.reset(); }); } if (contactForm) { contactForm.addEventListener('submit', function(e) { e.preventDefault(); // Get form data const formData = new FormData(this); const data = Object.fromEntries(formData); // Simple form validation if (!data.name || !data.email || !data.message) { showNotification('Please fill in all required fields.', 'error'); return; } // Simulate form submission showNotification('Thank you for your message! We\'ll get back to you soon.', 'success'); this.reset(); }); } } function initScrollEffects() { let lastScrollTop = 0; const navbar = document.querySelector('custom-navbar'); window.addEventListener('scroll', function() { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; if (navbar) { if (scrollTop > lastScrollTop && scrollTop > 100) { navbar.style.transform = 'translateY(-100%)'; } else { navbar.style.transform = 'translateY(0)'; } } lastScrollTop = scrollTop; }); } function showNotification(message, type = 'info') { // Create notification element const notification = document.createElement('div'); notification.className = `fixed top-4 right-4 z-50 p-4 rounded-lg shadow-lg transition-all duration-300 transform ${ type === 'error' ? 'bg-red-600' : type === 'success' ? 'bg-green-600' : 'bg-blue-600' } text-white max-w-sm`; notification.textContent = message; document.body.appendChild(notification); // Remove notification after 5 seconds setTimeout(() => { notification.style.opacity = '0'; notification.style.transform = 'translateX(100%)'; setTimeout(() => { if (notification.parentNode) { notification.parentNode.removeChild(notification); } }, 300); }, 5000); } // Utility function for API calls (if needed in the future) async function makeAPICall(url, options = {}) { try { const response = await fetch(url, { headers: { 'Content-Type': 'application/json', ...options.headers }, ...options }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } return await response.json(); } catch (error) { console.error('API call failed:', error); showNotification('Failed to fetch data. Please try again.', 'error'); } } // Theme management (for future light/dark mode toggle) function toggleTheme() { const html = document.documentElement; const currentTheme = html.classList.contains('dark') ? 'dark' : 'light'; const newTheme = currentTheme === 'dark' ? 'light' : 'dark'; html.classList.remove(currentTheme); html.classList.add(newTheme); // Save preference to localStorage localStorage.setItem('theme', newTheme); } // Check for saved theme preference const savedTheme = localStorage.getItem('theme'); if (savedTheme && savedTheme !== 'dark') { document.documentElement.classList.remove('dark'); document.documentElement.classList.add(savedTheme); }