JasperV13's picture
Build a modern, responsive website for a tech-solutions company called Taqnify with the following features and style.
4b1cc4e verified
// Smooth scrolling for anchor links
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
// Lazy loading for images
document.addEventListener('DOMContentLoaded', function() {
const lazyImages = [].slice.call(document.querySelectorAll('img.lazy'));
if ('IntersectionObserver' in window) {
let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
let lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.classList.remove('lazy');
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
}
});
// Mobile menu toggle functionality
function toggleMobileMenu() {
const menu = document.getElementById('mobile-menu');
const button = document.getElementById('menu-button');
const isExpanded = button.getAttribute('aria-expanded') === 'true';
button.setAttribute('aria-expanded', !isExpanded);
menu.classList.toggle('hidden');
menu.classList.toggle('block');
// Toggle icon
const icon = button.querySelector('svg');
if (isExpanded) {
icon.setAttribute('data-feather', 'menu');
} else {
icon.setAttribute('data-feather', 'x');
}
feather.replace();
}
// Initialize animations when elements come into view
const animateOnScroll = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.classList.add('animate-fade-in');
animateOnScroll.unobserve(entry.target);
}
});
}, {
threshold: 0.1
});
document.querySelectorAll('.service-card, .project-card, .blog-card').forEach(card => {
animateOnScroll.observe(card);
});
// Language switcher functionality
function switchLanguage(lang) {
// In a real implementation, this would redirect to the appropriate language version
console.log(`Switching to ${lang} version`);
// For now, just show a message
alert(`This would switch to the ${lang === 'fr' ? 'French' : 'English'} version of the site`);
}