vinit6085/snapshot-symphony-studio

1// Main JavaScript for the site2document.addEventListener('DOMContentLoaded', function() {3    // Initialize counters4    const initCounters = () => {5        const statCards = document.querySelectorAll('.stat-card');6        const observer = new IntersectionObserver((entries) => {7            entries.forEach(entry => {8                if (entry.isIntersecting) {9                    const target = entry.target.dataset.target;10                    const element = entry.target.querySelector('.stat-number');11                    animateCounter(element, 0, target, 2000);12                    observer.unobserve(entry.target);13                }14            });15        }, { threshold: 0.5 });16 17        statCards.forEach(card => {18            observer.observe(card);19        });20    };21 22    const animateCounter = (element, start, end, duration) => {23        let startTimestamp = null;24        const step = (timestamp) => {25            if (!startTimestamp) startTimestamp = timestamp;26            const progress = Math.min((timestamp - startTimestamp) / duration, 1);27            const value = Math.floor(progress * (end - start) + start);28            element.textContent = value.toLocaleString();29            if (progress < 1) {30                window.requestAnimationFrame(step);31            }32        };33        window.requestAnimationFrame(step);34    };35 36    // Initialize clients carousel37    const initClientsCarousel = () => {38        const track = document.querySelector('.clients-track');39        const clients = [40            { name: 'Client 1', logo: 'assets/clients/client1.svg' },41            { name: 'Client 2', logo: 'assets/clients/client2.svg' },42            { name: 'Client 3', logo: 'assets/clients/client3.svg' },43            { name: 'Client 4', logo: 'assets/clients/client4.svg' },44            { name: 'Client 5', logo: 'assets/clients/client5.svg' },45        ];46 47        clients.forEach(client => {48            const clientEl = document.createElement('div');49            clientEl.className = 'client-logo flex-shrink-0 scroll-snap';50            clientEl.style.scrollSnapAlign = 'center';51            clientEl.innerHTML = `<img src="${client.logo}" alt="${client.name}" class="h-16 object-contain" loading="lazy">`;52            track.appendChild(clientEl);53        });54 55        const prevBtn = document.querySelector('.client-nav.prev');56        const nextBtn = document.querySelector('.client-nav.next');57        58        prevBtn.addEventListener('click', () => {59            track.scrollBy({ left: -200, behavior: 'smooth' });60        });61        62        nextBtn.addEventListener('click', () => {63            track.scrollBy({ left: 200, behavior: 'smooth' });64        });65    };66 67    // Initialize testimonial slider68    const initTestimonials = () => {69        const testimonials = [70            {71                quote: "Saahas has transformed our waste management process with their comprehensive solutions.",72                name: "John Doe",73                role: "Sustainability Manager",74                company: "ABC Corporation"75            },76            {77                quote: "Their zero waste program helped us achieve 90% waste diversion from landfills.",78                name: "Jane Smith",79                role: "Facilities Director",80                company: "XYZ Tech Park"81            }82        ];83 84        const track = document.querySelector('.testimonial-track');85        const dotsContainer = document.querySelector('.testimonial-slider .flex');86 87        testimonials.forEach((testimonial, index) => {88            const testimonialEl = document.createElement('div');89            testimonialEl.className = `testimonial-slide ${index === 0 ? 'active' : ''}`;90            testimonialEl.innerHTML = `91                <div class="text-center">92                    <blockquote class="text-xl md:text-2xl mb-6">"${testimonial.quote}"</blockquote>93                    <div class="font-bold">${testimonial.name}</div>94                    <div class="text-teal-200">${testimonial.role}, ${testimonial.company}</div>95                </div>96            `;97            track.appendChild(testimonialEl);98 99            const dot = document.createElement('button');100            dot.className = `w-3 h-3 rounded-full ${index === 0 ? 'bg-white' : 'bg-teal-500'} opacity-50 hover:opacity-100 transition`;101            dot.ariaLabel = `Go to testimonial ${index + 1}`;102            dot.addEventListener('click', () => showTestimonial(index));103            dotsContainer.appendChild(dot);104        });105 106        let currentIndex = 0;107        const slides = document.querySelectorAll('.testimonial-slide');108        const dots = document.querySelectorAll('.testimonial-slider .flex button');109 110        const showTestimonial = (index) => {111            slides.forEach(slide => slide.classList.remove('active'));112            dots.forEach(dot => dot.classList.remove('bg-white'));113            114            slides[index].classList.add('active');115            dots[index].classList.add('bg-white');116            currentIndex = index;117        };118 119        // Auto-advance every 5 seconds120        setInterval(() => {121            const nextIndex = (currentIndex + 1) % testimonials.length;122            showTestimonial(nextIndex);123        }, 5000);124    };125 126    // Form handling127    const handleContactForm = () => {128        const form = document.getElementById('contact-form');129        form.addEventListener('submit', (e) => {130            e.preventDefault();131            132            // Simple validation133            const name = document.getElementById('name').value.trim();134            const email = document.getElementById('email').value.trim();135            const message = document.getElementById('message').value.trim();136            137            if (!name || !email || !message) {138                alert('Please fill in all fields');139                return;140            }141            142            // Simulate form submission143            console.log('Form submitted:', { name, email, message });144            alert('Thank you for your message! We will get back to you soon.');145            form.reset();146        });147    };148 149    // Initialize all components150    initCounters();151    initClientsCarousel();152    initTestimonials();153    handleContactForm();154 155    // Replace feather icons156    feather.replace();157});