1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
|
// 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'
});
}
});
});
// Navbar background on scroll
window.addEventListener('scroll', () => {
const navbar = document.querySelector('.navbar');
if (window.scrollY > 50) {
navbar.style.background = 'rgba(255, 255, 255, 0.98)';
} else {
navbar.style.background = 'rgba(255, 255, 255, 0.95)';
}
});
// 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.style.opacity = '1';
entry.target.style.transform = 'translateY(0)';
}
});
}, observerOptions);
// Observe elements for animation
document.querySelectorAll('.mission-item, .team-member, .timeline-item').forEach(el => {
el.style.opacity = '0';
el.style.transform = 'translateY(30px)';
el.style.transition = 'opacity 0.6s ease, transform 0.6s ease';
observer.observe(el);
});
// Animate stats counter
const animateStats = () => {
const statNumbers = document.querySelectorAll('.stat-number');
const targets = ['10,000+', '500K+', '50+', '99.9%'];
statNumbers.forEach((stat, index) => {
const target = targets[index];
let current = 0;
const increment = target.includes('K') ? 5000 : target.includes('%') ? 1 : target.includes('+') ? 50 : 1;
const max = target.includes('K') ? 500000 : target.includes('%') ? 99.9 : target.includes('10,000') ? 10000 : 50;
const updateStat = () => {
if (current < max) {
current += increment;
if (target.includes('K')) {
stat.textContent = Math.floor(current / 1000) + 'K+';
} else if (target.includes('%')) {
stat.textContent = (current / 10).toFixed(1) + '%';
} else if (target.includes('10,000')) {
stat.textContent = current.toLocaleString() + '+';
} else {
stat.textContent = current + '+';
}
setTimeout(updateStat, 50);
} else {
stat.textContent = target;
}
};
setTimeout(updateStat, 500 + (index * 200));
});
};
// Trigger stats animation when stats section is visible
const statsObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateStats();
statsObserver.unobserve(entry.target);
}
});
});
const statsSection = document.querySelector('.stats');
if (statsSection) {
statsObserver.observe(statsSection);
}
// Button click handlers
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const buttonText = btn.textContent.toLowerCase();
if (buttonText.includes('trial') || buttonText.includes('start')) {
alert('Starting your free trial!\n\nThis would redirect to the registration page.');
} else if (buttonText.includes('positions') || buttonText.includes('careers')) {
alert('Opening careers page...\n\nThis would show available job positions.');
} else if (buttonText.includes('culture')) {
alert('Learning about our culture...\n\nThis would show company culture information.');
}
});
});
// Timeline animation on scroll
const timelineObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = '1';
entry.target.style.transform = 'translateX(0)';
}
});
}, { threshold: 0.3 });
document.querySelectorAll('.timeline-item').forEach((item, index) => {
item.style.opacity = '0';
item.style.transform = 'translateX(-30px)';
item.style.transition = `opacity 0.6s ease ${index * 0.2}s, transform 0.6s ease ${index * 0.2}s`;
timelineObserver.observe(item);
});
// Hero section animation on load
window.addEventListener('load', () => {
const heroTitle = document.querySelector('.hero-title');
const heroSubtitle = document.querySelector('.hero-subtitle');
[heroTitle, heroSubtitle].forEach((element, index) => {
if (element) {
element.style.opacity = '0';
element.style.transform = 'translateY(30px)';
element.style.transition = 'opacity 0.8s ease, transform 0.8s ease';
setTimeout(() => {
element.style.opacity = '1';
element.style.transform = 'translateY(0)';
}, 300 + (index * 200));
}
});
});
|
