// Smooth scroll for navigation links
document.addEventListener('DOMContentLoaded', function() {
// Product filter functionality
const filterButtons = document.querySelectorAll('.filter-btn');
const productCards = document.querySelectorAll('.product-card');
filterButtons.forEach(button => {
button.addEventListener('click', () => {
const filter = button.dataset.filter;
// Update active button
filterButtons.forEach(btn => btn.classList.remove('active'));
button.classList.add('active');
// Filter products
productCards.forEach(card => {
if (filter === 'all' || card.dataset.category === filter) {
card.classList.remove('hidden');
card.style.animation = 'fadeInUp 0.5s ease-out';
} else {
card.classList.add('hidden');
}
});
});
});
// Order button functionality
const orderButtons = document.querySelectorAll('.btn-order');
orderButtons.forEach(button => {
button.addEventListener('click', function() {
const productName = this.closest('.product-card').querySelector('.product-name').textContent;
const message = `¡Hola! Me gustaría ordenar: ${productName}`;
const whatsappUrl = `https://wa.me/584141234567?text=${encodeURIComponent(message)}`;
window.open(whatsappUrl, '_blank');
});
});
// Intersection Observer for 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');
observer.unobserve(entry.target);
}
});
}, observerOptions);
// Observe elements for animation
const animateElements = document.querySelectorAll('.product-card, .testimonial-card, .story-content');
animateElements.forEach(el => {
observer.observe(el);
});
// Parallax effect for hero section
const heroSection = document.querySelector('.hero');
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const parallax = heroSection.querySelector('.hero-content');
if (parallax) {
const speed = 0.5;
parallax.style.transform = `translateY(${scrolled * speed}px)`;
}
});
// Add loading animation for images
const images = document.querySelectorAll('img');
images.forEach(img => {
img.addEventListener('load', function() {
this.style.opacity = '1';
});
img.style.opacity = '0';
img.style.transition = 'opacity 0.3s ease';
});
// WhatsApp quick action button (floating)
const whatsappButton = document.createElement('div');
whatsappButton.innerHTML = `
`;
whatsappButton.style.cssText = `
position: fixed;
bottom: 20px;
right: 20px;
z-index: 1000;
`;
document.body.appendChild(whatsappButton);
// Add WhatsApp button styles
const whatsappStyle = document.createElement('style');
whatsappStyle.textContent = `
.whatsapp-float {
background-color: #25D366;
color: white;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);
text-decoration: none;
transition: all 0.3s ease;
}
.whatsapp-float:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
}
`;
document.head.appendChild(whatsappStyle);
// Instagram feed mockup interaction
const instagramPosts = document.querySelectorAll('.instagram-post');
instagramPosts.forEach((post, index) => {
post.addEventListener('click', () => {
window.open('https://instagram.com/tryme_vnzl', '_blank');
});
});
// Quick view functionality
const quickViews = document.querySelectorAll('.quick-view');
quickViews.forEach(view => {
view.addEventListener('click', (e) => {
e.stopPropagation();
const card = view.closest('.product-card');
const productName = card.querySelector('.product-name').textContent;
const productDescription = card.querySelector('.product-description').textContent;
const productPrice = card.querySelector('.product-price').textContent;
const productImage = card.querySelector('.product-image img').src;
// Create modal
const modal = document.createElement('div');
modal.className = 'product-modal';
modal.innerHTML = `
×
${productName}
${productDescription}
${productPrice}
`;
modal.style.cssText = `
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
`;
document.body.appendChild(modal);
// Close modal
modal.querySelector('.modal-close').addEventListener('click', () => {
modal.remove();
});
modal.addEventListener('click', (e) => {
if (e.target === modal) {
modal.remove();
}
});
// Order button in modal
modal.querySelector('.btn-order').addEventListener('click', () => {
const message = `¡Hola! Me gustaría ordenar: ${productName}`;
const whatsappUrl = `https://wa.me/584141234567?text=${encodeURIComponent(message)}`;
window.open(whatsappUrl, '_blank');
modal.remove();
});
});
});
});