// Mobile Navigation Toggle
const navToggle = document.querySelector('.nav-toggle');
const navMenu = document.querySelector('.nav-menu');
navToggle.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-menu a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.remove('active');
});
});
// Smooth scrolling for navigation 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'
});
}
});
});
// Header background on scroll
window.addEventListener('scroll', () => {
const header = document.querySelector('.header');
if (window.scrollY > 100) {
header.style.background = 'rgba(255, 255, 255, 0.98)';
header.style.boxShadow = '0 2px 20px rgba(0, 0, 0, 0.1)';
} else {
header.style.background = 'rgba(255, 255, 255, 0.95)';
header.style.boxShadow = 'none';
}
});
// 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('fade-in-up');
}
});
}, observerOptions);
// Observe all sections for animations
document.querySelectorAll('section').forEach(section => {
observer.observe(section);
});
// Form submission handling
const contactForm = document.querySelector('.contact-form form');
if (contactForm) {
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
const formData = new FormData(this);
const formObject = {};
formData.forEach((value, key) => {
formObject[key] = value;
});
// Simulate form submission
const submitButton = this.querySelector('button[type="submit"]');
const originalText = submitButton.textContent;
submitButton.textContent = 'Enviando...';
submitButton.disabled = true;
// Simulate API call
setTimeout(() => {
alert('Mensagem enviada com sucesso! Entraremos em contato em breve.');
this.reset();
submitButton.textContent = originalText;
submitButton.disabled = false;
}, 2000);
});
}
// Gallery lightbox effect
const galleryItems = document.querySelectorAll('.gallery-item');
galleryItems.forEach(item => {
item.addEventListener('click', function() {
const img = this.querySelector('img');
const lightbox = document.createElement('div');
lightbox.className = 'lightbox';
lightbox.innerHTML = `
×
`;
document.body.appendChild(lightbox);
// Close lightbox
lightbox.addEventListener('click', function(e) {
if (e.target === lightbox || e.target.classList.contains('close')) {
document.body.removeChild(lightbox);
}
});
});
});
// Add lightbox styles
const lightboxStyles = `
.lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.9);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
animation: fadeIn 0.3s ease-out;
}
.lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
}
.lightbox img {
width: 100%;
height: auto;
border-radius: 10px;
}
.lightbox .close {
position: absolute;
top: -40px;
right: 0;
color: white;
font-size: 30px;
cursor: pointer;
z-index: 2001;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
`;
const styleSheet = document.createElement('style');
styleSheet.textContent = lightboxStyles;
document.head.appendChild(styleSheet);
// Lazy loading for images
const images = document.querySelectorAll('img');
const imageObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const img = entry.target;
img.style.opacity = '0';
img.style.transition = 'opacity 0.5s ease-out';
img.onload = () => {
img.style.opacity = '1';
};
imageObserver.unobserve(img);
}
});
});
images.forEach(img => {
imageObserver.observe(img);
});
// Parallax effect for hero section
window.addEventListener('scroll', () => {
const scrolled = window.pageYOffset;
const heroImage = document.querySelector('.hero-image');
if (heroImage) {
heroImage.style.transform = `translateY(${scrolled * 0.5}px)`;
}
});
// Statistics counter animation
const animateCounters = () => {
const counters = document.querySelectorAll('.stat h3');
counters.forEach(counter => {
const target = parseInt(counter.textContent);
const increment = target / 100;
let current = 0;
const updateCounter = () => {
if (current < target) {
current += increment;
counter.textContent = Math.floor(current) + (counter.textContent.includes('+') ? '+' : '%');
requestAnimationFrame(updateCounter);
} else {
counter.textContent = target + (counter.textContent.includes('+') ? '+' : '%');
}
};
updateCounter();
});
};
// Trigger counter animation when about section is visible
const aboutSection = document.querySelector('.about');
if (aboutSection) {
const aboutObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateCounters();
aboutObserver.unobserve(entry.target);
}
});
});
aboutObserver.observe(aboutSection);
}
// Add loading states to all elements
document.addEventListener('DOMContentLoaded', () => {
const elements = document.querySelectorAll('section, .service-card, .gallery-item, .testimonial-card');
elements.forEach(element => {
element.classList.add('loading');
});
// Remove loading class after a short delay
setTimeout(() => {
elements.forEach(element => {
element.classList.add('loaded');
});
}, 100);
});