1 files changed, 220 insertions, 0 deletions
diff --git a/static/landing-script.js b/static/landing-script.js
new file mode 100644
index 0000000..1189cd4
--- /dev/null
+++ b/static/landing-script.js
@@ -0,0 +1,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);
+}