356 lines
11 KiB
JavaScript
356 lines
11 KiB
JavaScript
// script.js - Converted from React components to vanilla JavaScript
|
|
|
|
// Wait for DOM to be fully loaded
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// Initialize all animations and interactions
|
|
initNavbar();
|
|
initHeroAnimations();
|
|
initScrollAnimations();
|
|
initSmoothScrolling();
|
|
initWhatsAppButton();
|
|
initMobileMenu();
|
|
initFadeInElements();
|
|
new Swiper('.mySwiper', {
|
|
slidesPerView: 2,
|
|
spaceBetween: 20,
|
|
loop: true,
|
|
navigation: {
|
|
nextEl: '.swiper-button-next',
|
|
prevEl: '.swiper-button-prev',
|
|
},
|
|
breakpoints: {
|
|
768: {
|
|
slidesPerView: 3,
|
|
},
|
|
1024: {
|
|
slidesPerView: 5,
|
|
},
|
|
},
|
|
});
|
|
|
|
document.getElementById("mobileMenuBtn").addEventListener("click", function() {
|
|
document.getElementById("mobileMenu").classList.toggle("hidden");
|
|
});
|
|
|
|
const lightbox = GLightbox({
|
|
selector: '.glightbox'
|
|
});
|
|
|
|
document.querySelectorAll('[id^="carousel-"]').forEach((carousel) => {
|
|
let images = carousel.querySelectorAll('.carousel-image');
|
|
let dots = carousel.querySelectorAll('.dot');
|
|
let current = 0;
|
|
|
|
function showSlide(index) {
|
|
images.forEach((img, i) => {
|
|
img.classList.toggle('opacity-100', i === index);
|
|
img.classList.toggle('z-10', i === index);
|
|
img.classList.toggle('opacity-0', i !== index);
|
|
img.classList.toggle('z-0', i !== index);
|
|
});
|
|
dots.forEach((dot, i) => {
|
|
dot.classList.toggle('bg-white', i === index);
|
|
dot.classList.toggle('bg-white/50', i !== index);
|
|
});
|
|
current = index;
|
|
}
|
|
|
|
carousel.querySelector('.prev').addEventListener('click', () => {
|
|
let newIndex = (current - 1 + images.length) % images.length;
|
|
showSlide(newIndex);
|
|
});
|
|
|
|
carousel.querySelector('.next').addEventListener('click', () => {
|
|
let newIndex = (current + 1) % images.length;
|
|
showSlide(newIndex);
|
|
});
|
|
|
|
dots.forEach((dot, i) => {
|
|
dot.addEventListener('click', () => showSlide(i));
|
|
});
|
|
});
|
|
});
|
|
|
|
function sendMail(event) {
|
|
event.preventDefault();
|
|
|
|
const name = document.getElementById("name").value.trim();
|
|
const email = document.getElementById("email").value.trim();
|
|
const subject = document.getElementById("subject").value.trim();
|
|
const message = document.getElementById("message").value.trim();
|
|
|
|
const to = document.getElementById("mail_to").value.trim();
|
|
const mailSubject = encodeURIComponent(subject || "Contact Form Submission");
|
|
const mailBody = encodeURIComponent(
|
|
`${name}\n${email}\n\n${message}`
|
|
);
|
|
|
|
window.location.href = `mailto:${to}?subject=${mailSubject}&body=${mailBody}`;
|
|
}
|
|
|
|
function toggleSubMenu() {
|
|
const subMenu = document.getElementById("aboutSubMenu");
|
|
subMenu.classList.toggle("hidden");
|
|
}
|
|
|
|
// Navbar functionality
|
|
function initNavbar() {
|
|
const navbar = document.querySelector('.navbar');
|
|
|
|
// Handle navbar scroll effect
|
|
function handleScroll() {
|
|
if (window.scrollY > 50) {
|
|
navbar.classList.add('scrolled');
|
|
} else {
|
|
navbar.classList.remove('scrolled');
|
|
}
|
|
}
|
|
|
|
window.addEventListener('scroll', handleScroll);
|
|
// Initial check
|
|
handleScroll();
|
|
}
|
|
|
|
// Mobile menu toggle
|
|
function initMobileMenu() {
|
|
const mobileMenuButton = document.querySelector('.md\\:hidden button');
|
|
const mobileMenu = document.querySelector('.md\\:hidden.bg-white');
|
|
|
|
if (mobileMenuButton && mobileMenu) {
|
|
mobileMenuButton.addEventListener('click', function() {
|
|
if (mobileMenu.style.display === 'none' || mobileMenu.style.display === '') {
|
|
mobileMenu.style.display = 'block';
|
|
|
|
// Add animation
|
|
mobileMenu.style.opacity = '0';
|
|
mobileMenu.style.height = '0';
|
|
|
|
setTimeout(() => {
|
|
mobileMenu.style.transition = 'opacity 0.3s ease, height 0.3s ease';
|
|
mobileMenu.style.opacity = '1';
|
|
mobileMenu.style.height = 'auto';
|
|
}, 10);
|
|
} else {
|
|
mobileMenu.style.opacity = '0';
|
|
mobileMenu.style.height = '0';
|
|
|
|
setTimeout(() => {
|
|
mobileMenu.style.display = 'none';
|
|
}, 300);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Hero section animations
|
|
function initHeroAnimations() {
|
|
// Create floating petals animation (converted from Hero.tsx)
|
|
const heroSection = document.querySelector('.hero-section');
|
|
|
|
if (heroSection) {
|
|
// Create floating petals animation
|
|
const createPetal = () => {
|
|
const petal = document.createElement('div');
|
|
petal.classList.add('petal');
|
|
|
|
// Randomize petal properties
|
|
const size = Math.random() * 15 + 10;
|
|
const posX = Math.random() * window.innerWidth;
|
|
const delay = Math.random() * 5;
|
|
const duration = Math.random() * 10 + 10;
|
|
const rotation = Math.random() * 360;
|
|
|
|
// Set petal styles
|
|
petal.style.width = `${size}px`;
|
|
petal.style.height = `${size}px`;
|
|
petal.style.left = `${posX}px`;
|
|
petal.style.top = '-20px';
|
|
petal.style.backgroundColor = 'var(--blush-pink)';
|
|
petal.style.borderRadius = '50% 0 50% 0';
|
|
petal.style.transform = `rotate(${rotation}deg)`;
|
|
petal.style.opacity = '0.7';
|
|
petal.style.position = 'absolute';
|
|
petal.style.pointerEvents = 'none';
|
|
|
|
heroSection.appendChild(petal);
|
|
|
|
// Animate petal falling using GSAP-like animation with vanilla JS
|
|
const startTime = Date.now();
|
|
const endY = window.innerHeight + 100;
|
|
const endX = posX + (Math.random() * 200 - 100);
|
|
const endRotation = rotation + Math.random() * 360;
|
|
|
|
function animatePetal() {
|
|
const currentTime = Date.now();
|
|
const elapsed = (currentTime - startTime) / 1000; // seconds
|
|
|
|
if (elapsed < duration) {
|
|
const progress = elapsed / duration;
|
|
const easeProgress = easeInOut(progress);
|
|
|
|
const currentY = endY * easeProgress;
|
|
const currentX = posX + (endX - posX) * easeProgress;
|
|
const currentRotation = rotation + (endRotation - rotation) * easeProgress;
|
|
const currentOpacity = 0.7 * (1 - easeProgress);
|
|
|
|
petal.style.transform = `translate(${currentX - posX}px, ${currentY}px) rotate(${currentRotation}deg)`;
|
|
petal.style.opacity = currentOpacity.toString();
|
|
|
|
requestAnimationFrame(animatePetal);
|
|
} else {
|
|
petal.remove();
|
|
createPetal();
|
|
}
|
|
}
|
|
|
|
// Start animation after delay
|
|
setTimeout(() => {
|
|
requestAnimationFrame(animatePetal);
|
|
}, delay * 1000);
|
|
};
|
|
|
|
// Create initial petals
|
|
for (let i = 0; i < 15; i++) {
|
|
setTimeout(() => createPetal(), i * 300);
|
|
}
|
|
}
|
|
|
|
// Animate hero content
|
|
const heroContent = document.querySelector('.hero-section .text-center.md\\:text-left');
|
|
if (heroContent) {
|
|
heroContent.style.opacity = '0';
|
|
heroContent.style.transform = 'translateX(-50px)';
|
|
|
|
setTimeout(() => {
|
|
heroContent.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
|
heroContent.style.opacity = '1';
|
|
heroContent.style.transform = 'translateX(0)';
|
|
}, 100);
|
|
}
|
|
|
|
// Animate hero image
|
|
const heroImage = document.querySelector('.hero-section .floating');
|
|
if (heroImage) {
|
|
heroImage.style.opacity = '0';
|
|
heroImage.style.transform = 'translateY(50px)';
|
|
|
|
setTimeout(() => {
|
|
heroImage.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
|
heroImage.style.opacity = '1';
|
|
heroImage.style.transform = 'translateY(0)';
|
|
}, 300);
|
|
}
|
|
|
|
// Animate decorative elements
|
|
const decorativeElements = document.querySelectorAll('.hero-section .absolute.rounded-full:not(.floating)');
|
|
decorativeElements.forEach((element, index) => {
|
|
element.style.opacity = '0';
|
|
|
|
setTimeout(() => {
|
|
element.style.transition = 'opacity 1s ease';
|
|
element.style.opacity = index === 0 ? '0.6' : '0.4';
|
|
}, 800 + (index * 200));
|
|
});
|
|
}
|
|
|
|
// Scroll animations for sections
|
|
function initScrollAnimations() {
|
|
const sections = document.querySelectorAll('section');
|
|
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '0px',
|
|
threshold: 0.1
|
|
};
|
|
|
|
const sectionObserver = new IntersectionObserver((entries) => {
|
|
entries.forEach(entry => {
|
|
if (entry.isIntersecting) {
|
|
const section = entry.target;
|
|
const fadeElements = section.querySelectorAll('.fade-in:not(.animated)');
|
|
|
|
fadeElements.forEach((element, index) => {
|
|
setTimeout(() => {
|
|
element.classList.add('animated');
|
|
element.style.opacity = '0';
|
|
element.style.transform = 'translateY(20px)';
|
|
|
|
setTimeout(() => {
|
|
element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
|
element.style.opacity = '1';
|
|
element.style.transform = 'translateY(0)';
|
|
}, 50);
|
|
}, index * 100);
|
|
});
|
|
}
|
|
});
|
|
}, observerOptions);
|
|
|
|
sections.forEach(section => {
|
|
sectionObserver.observe(section);
|
|
});
|
|
}
|
|
|
|
// Smooth scrolling for anchor links
|
|
function initSmoothScrolling() {
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
anchor.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
const targetId = this.getAttribute('href');
|
|
const targetElement = document.querySelector(targetId);
|
|
|
|
if (targetElement) {
|
|
const offsetTop = targetElement.getBoundingClientRect().top + window.pageYOffset - 70;
|
|
|
|
window.scrollTo({
|
|
top: offsetTop,
|
|
behavior: 'smooth'
|
|
});
|
|
|
|
// Close mobile menu if open
|
|
const mobileMenu = document.querySelector('.md\\:hidden.bg-white');
|
|
if (mobileMenu && mobileMenu.style.display === 'block') {
|
|
mobileMenu.style.display = 'none';
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
// WhatsApp button animation
|
|
function initWhatsAppButton() {
|
|
const whatsappButton = document.querySelector('.whatsapp-float');
|
|
|
|
if (whatsappButton) {
|
|
whatsappButton.addEventListener('mouseenter', () => {
|
|
whatsappButton.style.transform = 'scale(1.1)';
|
|
});
|
|
|
|
whatsappButton.addEventListener('mouseleave', () => {
|
|
whatsappButton.style.transform = 'scale(1)';
|
|
});
|
|
}
|
|
}
|
|
|
|
// Initialize fade-in elements
|
|
function initFadeInElements() {
|
|
const fadeElements = document.querySelectorAll('.fade-in');
|
|
|
|
fadeElements.forEach((element, index) => {
|
|
element.style.opacity = '0';
|
|
element.style.transform = 'translateY(20px)';
|
|
|
|
setTimeout(() => {
|
|
element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
|
|
element.style.opacity = '1';
|
|
element.style.transform = 'translateY(0)';
|
|
}, 100 + (index * 100));
|
|
});
|
|
}
|
|
|
|
// Utility functions
|
|
function easeInOut(t) {
|
|
return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
|
|
}
|