// Interactive tab functionality
document.addEventListener('DOMContentLoaded', function() {
const tabButtons = document.querySelectorAll('.tab-button');
const tabContents = document.querySelectorAll('.tab-content');
tabButtons.forEach(button => {
button.addEventListener('click', function() {
const targetTab = this.dataset.tab;
// Remove active class from all buttons and contents
tabButtons.forEach(btn => btn.classList.remove('active'));
tabContents.forEach(content => content.classList.remove('active'));
// Add active class to clicked button and corresponding content
this.classList.add('active');
document.getElementById(targetTab).classList.add('active');
});
});
// Interactive elements
const demoButton = document.querySelector('.demo-button');
if (demoButton) {
demoButton.addEventListener('click', function() {
this.style.transform = 'scale(0.95)';
setTimeout(() => {
this.style.transform = 'scale(1)';
}, 150);
});
}
// Simulate business metrics updates
const metricValues = document.querySelectorAll('.metric-value');
setInterval(() => {
metricValues.forEach(metric => {
if (metric.textContent.includes('$')) {
const currentValue = parseInt(metric.textContent.replace(/[^0-9]/g, ''));
const variation = Math.floor(Math.random() * 100) - 50;
const newValue = Math.max(0, currentValue + variation);
metric.textContent = '$' + newValue.toLocaleString();
}
});
}, 5000);
// Add hover effects to tool items
const toolItems = document.querySelectorAll('.tool-item');
toolItems.forEach(item => {
item.addEventListener('mouseenter', function() {
this.style.background = '#EFF6FF';
this.style.borderColor = '#3B82F6';
});
item.addEventListener('mouseleave', function() {
this.style.background = 'white';
this.style.borderColor = '#E5E7EB';
});
});
// Animate certification cards on scroll
const certCards = document.querySelectorAll('.cert-level');
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry, index) => {
if (entry.isIntersecting) {
setTimeout(() => {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}, index * 200);
observer.unobserve(entry.target);
}
});
});
certCards.forEach(card => {
card.style.opacity = '0';
card.style.transform = 'translateY(20px)';
card.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(card);
});
// Add click effects to simulation buttons
const simButtons = document.querySelectorAll('.sim-button');
simButtons.forEach(button => {
button.addEventListener('click', function() {
const result = document.querySelector('.sim-result');
const messages = [
'Marketing campaign increased revenue by 23%',
'New product launch generated 45 pre-orders',
'Price optimization improved margins by 18%',
'Market expansion reached 150 new customers'
];
result.textContent = 'Processing...';
setTimeout(() => {
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
result.textContent = 'Result: ' + randomMessage;
}, 1500);
});
});
// Generate AI content simulation
const generateButton = document.querySelector('.generate-button');
if (generateButton) {
generateButton.addEventListener('click', function() {
this.textContent = 'Generating...';
this.disabled = true;
setTimeout(() => {
this.textContent = 'Generate Content';
this.disabled = false;
// Animate output items
const outputItems = document.querySelectorAll('.output-item');
outputItems.forEach((item, index) => {
setTimeout(() => {
item.style.transform = 'scale(1.05)';
setTimeout(() => {
item.style.transform = 'scale(1)';
}, 300);
}, index * 200);
});
}, 2000);
});
}
});