summaryrefslogtreecommitdiff
path: root/static/about-script.js
diff options
context:
space:
mode:
Diffstat (limited to 'static/about-script.js')
-rw-r--r--static/about-script.js145
1 files changed, 145 insertions, 0 deletions
diff --git a/static/about-script.js b/static/about-script.js
new file mode 100644
index 0000000..7ea3885
--- /dev/null
+++ b/static/about-script.js
@@ -0,0 +1,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));
+ }
+ });
+});