script.js

function locomotiveAnimation() {
    gsap.registerPlugin(ScrollTrigger);

    // Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll

    const locoScroll = new LocomotiveScroll({
        el: document.querySelector("#main"),
        smooth: true,
        lerp: 0.1
    });
    // each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
    locoScroll.on("scroll", ScrollTrigger.update);

    // tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
    ScrollTrigger.scrollerProxy("#main", {
        scrollTop(value) {
            return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y;
        }, // we don't have to define a scrollLeft because we're only scrolling vertically.
        getBoundingClientRect() {
            return { top: 0, left: 0, width: window.innerWidth, height: window.innerHeight };
        },
        // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
        pinType: document.querySelector("#main").style.transform ? "transform" : "fixed"
    });



    // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. 
    ScrollTrigger.addEventListener("refresh", () => locoScroll.update());

    // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
    ScrollTrigger.refresh();

}
locomotiveAnimation()

gsap.to("#nav-part1 svg", {
    transform: "translateY(-100%)",
    mixBlendMode: "difference",
    scrollTrigger: {
        trigger: "#page1",
        scroller: "#main",
        start: "top 0",
        end: "top -5%",
        scrub: true,
    },
});
gsap.to("#nav-part2 #links", {
    transform: "translateY(-100%)",
    opacity: 0,
    scrollTrigger: {
        trigger: "#page1",
        scroller: "#main",
        start: "top 0",
        end: "top -5%",
        delay: 1,
        scrub: true,
    },
});
function loadingAnimation() {
    gsap.from('#page1 h1', {
        y: 100,
        opacity: 0,
        delay: 0.5,
        duration: 0.9,
        stagger: 0.2
    })
    gsap.from('#page1 #video-container', {
        scale: 0.9,
        opacity: 0,
        delay: 1.3,
        duration: 0.7
    })
}
loadingAnimation()

document.addEventListener("mousemove", function (dets) {
    gsap.to("#cursor", {
        left: dets.x,
        top: dets.y,
        transform: 'translate(-50%, -50%) scale(1)',
    })
})

document.querySelectorAll(".child").forEach(function (elem) {
    elem.addEventListener("mouseenter", function () {
        gsap.to("#cursor", {
            transform: 'translate(-50%, -50%) scale(1)',
        })
    })
    elem.addEventListener("mouseleave", function () {
        gsap.to("#cursor", {
            transform: 'translate(-50%, -50%) scale(0)',
        })
    })
})


var tl2 = gsap.timeline({
    scrollTrigger: {
        trigger: "#page3",
        scroller: "#main",
        // markers:true,
        start: "top 70%",
        end: "top 15%",
        scrub: 2
    }
})
tl2.from(".child", {
    y: 300,
    opacity: 0,
    duration: 1,
    stagger: 0.4
})

document.getElementById("whatsappForm").addEventListener("submit", function (e) {
            e.preventDefault();

            const name = document.getElementById("name").value.trim();
            const mobile = document.getElementById("mobile").value.trim();
            const product = document.getElementById("product").value.trim();
            const quantity = document.getElementById("quantity").value.trim();
            const price = document.getElementById("price").value.trim();
            const address = document.getElementById("address").value.trim();
            const message = document.getElementById("message").value.trim();

            const yourWhatsAppNumber = "9167078537"; // Replace with your WhatsApp number

            let text = `*🛍️ New Product Inquiry*%0A%0A` +
                      `👤 *Name:* ${encodeURIComponent(name)}%0A` +
                      `📱 *Mobile:* ${encodeURIComponent(mobile)}%0A` +
                      `🛒 *Product:* ${encodeURIComponent(product)}%0A` +
                      `📊 *Quantity:* ${encodeURIComponent(quantity)}%0A`;

            if (price) {
                text += `💰 *Expected Price:* ${encodeURIComponent(price)}%0A`;
            }

            if (address) {
                text += `📍 *Address:* ${encodeURIComponent(address)}%0A`;
            }

            if (message) {
                text += `💬 *Additional Message:* ${encodeURIComponent(message)}%0A`;
            }

            const whatsappUrl = `https://wa.me/${yourWhatsAppNumber}?text=${text}`;

            // Add a small delay for better UX
            const button = document.querySelector('.submit-btn');
            button.style.transform = 'scale(0.95)';
            
            setTimeout(() => {
                window.open(whatsappUrl, "_blank");
                button.style.transform = 'translateY(-3px)';
            }, 150);
        });

        // Add floating animation to form on load
        window.addEventListener('load', function() {
            const container = document.querySelector('.form-container');
            container.style.animation = 'slideUp 0.8s ease-out';
        });

        // Add ripple effect to button
        document.querySelector('.submit-btn').addEventListener('click', function(e) {
            const ripple = document.createElement('span');
            const rect = this.getBoundingClientRect();
            const size = Math.max(rect.width, rect.height);
            const x = e.clientX - rect.left - size / 2;
            const y = e.clientY - rect.top - size / 2;
            
            ripple.style.cssText = `
                position: absolute;
                width: ${size}px;
                height: ${size}px;
                left: ${x}px;
                top: ${y}px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 50%;
                transform: scale(0);
                animation: ripple 0.6s linear;
                pointer-events: none;
            `;
            
            this.appendChild(ripple);
            
            setTimeout(() => {
                ripple.remove();
            }, 600);
        });

        // Add CSS for ripple animation
        const rippleStyle = document.createElement('style');
        rippleStyle.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(rippleStyle);


document.querySelectorAll('.quantity-option').forEach(option => {
            option.addEventListener('click', function() {
                const card = this.closest('.product-card');
                const siblings = card.querySelectorAll('.quantity-option');
                const priceElement = card.querySelector('.product-price');
                
                // Remove active class from siblings
                siblings.forEach(sibling => sibling.classList.remove('active'));
                
                // Add active class to clicked option
                this.classList.add('active');
                
                // Update price
                const newPrice = this.dataset.price;
                priceElement.textContent = `₹${newPrice}`;
                
                // Add animation to price change
                priceElement.style.transform = 'scale(1.1)';
                priceElement.style.color = '#667eea';
                setTimeout(() => {
                    priceElement.style.transform = 'scale(1)';
                    priceElement.style.color = '#25D366';
                }, 200);
            });
        });

        // Add to cart button functionality
        document.querySelectorAll('.add-to-cart').forEach(button => {
            button.addEventListener('click', function() {
                const originalText = this.innerHTML;
                
                // Add "added" class for animation
                this.classList.add('added');
                this.innerHTML = '<span class="cart-icon">✓</span>Added!';
                
                // Create ripple effect
                const ripple = document.createElement('span');
                const rect = this.getBoundingClientRect();
                const size = Math.max(rect.width, rect.height);
                const x = event.clientX - rect.left - size / 2;
                const y = event.clientY - rect.top - size / 2;
                
                ripple.style.cssText = `
                    position: absolute;
                    width: ${size}px;
                    height: ${size}px;
                    left: ${x}px;
                    top: ${y}px;
                    background: rgba(255, 255, 255, 0.3);
                    border-radius: 50%;
                    transform: scale(0);
                    animation: ripple 0.6s linear;
                    pointer-events: none;
                `;
                
                this.appendChild(ripple);
                
                setTimeout(() => {
                    ripple.remove();
                    this.classList.remove('added');
                    this.innerHTML = originalText;
                }, 2000);
            });
        });

        // Add CSS for ripple animation
        const style = document.createElement('style');
        style.textContent = `
            @keyframes ripple {
                to {
                    transform: scale(4);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);