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
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
|
// 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'
});
}
});
});
// Mobile menu toggle
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('.nav-menu');
if (hamburger && navMenu) {
hamburger.addEventListener('click', () => {
hamburger.classList.toggle('active');
navMenu.classList.toggle('active');
});
// Close mobile menu when clicking on a link
document.querySelectorAll('.nav-link').forEach(n => n.addEventListener('click', () => {
hamburger.classList.remove('active');
navMenu.classList.remove('active');
}));
}
// 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)';
}
});
// CTA button handlers
document.querySelectorAll('.btn').forEach(btn => {
btn.addEventListener('click', (e) => {
const buttonText = btn.textContent.toLowerCase();
if (buttonText.includes('sign in') || buttonText.includes('login')) {
alert('Redirecting to login page...\n\nThis would navigate to the sign-in form.');
} else if (buttonText.includes('trial') || buttonText.includes('start')) {
alert('Starting your free trial!\n\nThis would open the registration form with a 14-day trial.');
} else if (buttonText.includes('demo') || buttonText.includes('watch')) {
alert('Opening demo video...\n\nThis would show a product demonstration or schedule a live demo.');
} else if (buttonText.includes('contact') || buttonText.includes('sales')) {
alert('Contacting sales team...\n\nThis would open a contact form or calendar booking widget.');
}
});
});
// 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('.feature-card, .testimonial-card, .pricing-card').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);
});
// Hero section animations
window.addEventListener('load', () => {
const heroTitle = document.querySelector('.hero-title');
const heroSubtitle = document.querySelector('.hero-subtitle');
const heroButtons = document.querySelector('.hero-buttons');
const heroStats = document.querySelector('.hero-stats');
const dashboardMockup = document.querySelector('.dashboard-mockup');
[heroTitle, heroSubtitle, heroButtons, heroStats].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)';
}, 200 + (index * 200));
}
});
// Dashboard mockup animation
if (dashboardMockup) {
dashboardMockup.style.opacity = '0';
dashboardMockup.style.transform = 'perspective(1000px) rotateY(-25deg) rotateX(15deg) translateY(50px)';
dashboardMockup.style.transition = 'opacity 1s ease, transform 1s ease';
setTimeout(() => {
dashboardMockup.style.opacity = '1';
dashboardMockup.style.transform = 'perspective(1000px) rotateY(-15deg) rotateX(10deg) translateY(0)';
}, 800);
}
});
// Pricing card hover effects
document.querySelectorAll('.pricing-card').forEach(card => {
card.addEventListener('mouseenter', () => {
if (!card.classList.contains('featured')) {
card.style.transform = 'translateY(-10px)';
}
});
card.addEventListener('mouseleave', () => {
if (!card.classList.contains('featured')) {
card.style.transform = 'translateY(0)';
}
});
});
// Company logo hover effects
document.querySelectorAll('.company-logo').forEach(logo => {
logo.addEventListener('mouseenter', () => {
logo.style.opacity = '1';
logo.style.transform = 'scale(1.1)';
});
logo.addEventListener('mouseleave', () => {
logo.style.opacity = '0.6';
logo.style.transform = 'scale(1)';
});
});
// Add mobile menu styles dynamically
const style = document.createElement('style');
style.textContent = `
@media (max-width: 768px) {
.nav-menu.active {
display: flex;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background: white;
flex-direction: column;
padding: 1rem 2rem;
box-shadow: var(--shadow);
border-top: 1px solid var(--border);
}
.hamburger.active span:nth-child(1) {
transform: rotate(-45deg) translate(-5px, 6px);
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(45deg) translate(-5px, -6px);
}
}
`;
document.head.appendChild(style);
// Simulate dynamic stats counter
const animateStats = () => {
const statNumbers = document.querySelectorAll('.stat-item strong');
const targets = ['10,000+', '500K+', '99.9%'];
statNumbers.forEach((stat, index) => {
const target = targets[index];
let current = 0;
const increment = target.includes('K') ? 5000 : target.includes('%') ? 1 : 100;
const max = target.includes('K') ? 500000 : target.includes('%') ? 99.9 : 10000;
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 {
stat.textContent = current.toLocaleString() + '+';
}
setTimeout(updateStat, 50);
} else {
stat.textContent = target;
}
};
setTimeout(updateStat, 1000 + (index * 200));
});
};
// Trigger stats animation when hero is visible
const heroObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
animateStats();
heroObserver.unobserve(entry.target);
}
});
});
const heroSection = document.querySelector('.hero');
if (heroSection) {
heroObserver.observe(heroSection);
}
|
