Stop Bootstrapping.
Start Scaling.

// =========================== // SCROLL PROGRESS BAR // =========================== window.addEventListener('scroll', () => { const winScroll = document.body.scrollTop || document.documentElement.scrollTop; const height = document.documentElement.scrollHeight - document.documentElement.clientHeight; const scrolled = (winScroll / height) * 100; document.querySelector('.scroll-progress-bar').style.width = scrolled + '%'; }); // =========================== // STICKY HEADER // =========================== const header = document.querySelector('.main-header'); window.addEventListener('scroll', () => { if (window.scrollY > 50) { header.classList.add('scrolled'); } else { header.classList.remove('scrolled'); } }); // =========================== // MOBILE MENU // =========================== const menuToggle = document.querySelector('.menu-toggle'); const navLinks = document.querySelector('.nav-links'); menuToggle.addEventListener('click', () => { navLinks.classList.toggle('active'); // Animate hamburger const spans = menuToggle.querySelectorAll('span'); spans[0].classList.toggle('rotate-up'); spans[1].classList.toggle('fade-out'); spans[2].classList.toggle('rotate-down'); }); // Close menu on link click document.querySelectorAll('.nav-links a').forEach(link => { link.addEventListener('click', () => { navLinks.classList.remove('active'); }); }); // =========================== // PRICING TABS // =========================== const tabBtns = document.querySelectorAll('.tab-btn'); const pricingCards = document.querySelectorAll('.pricing-card'); tabBtns.forEach(btn => { btn.addEventListener('click', () => { tabBtns.forEach(b => b.classList.remove('active')); btn.classList.add('active'); const tabType = btn.getAttribute('data-tab'); pricingCards.forEach(card => { const price = card.querySelector('.amount'); const period = card.querySelector('.period'); if (price) { price.textContent = price.getAttribute(`data-${tabType}`); } if (period) { if (tabType === 'monthly') { period.textContent = '/mo (Pay Over Time)'; } else { period.textContent = 'one-time'; } } }); // Track tab change gtag('event', 'pricing_tab_change', { 'event_category': 'engagement', 'event_label': tabType }); }); }); // =========================== // PARTNERSHIP CALCULATOR // =========================== const salesRange = document.getElementById('salesRange'); const salesOutput = document.getElementById('salesOutput'); const resultValue = document.querySelector('.result-value'); if (salesRange && salesOutput && resultValue) { const commissionRate = 0.20; const pricePerDeal = 9997; function updateCalculator() { const sales = parseInt(salesRange.value); salesOutput.textContent = sales; const earnings = (sales * pricePerDeal * commissionRate).toLocaleString('en-US', { style: 'currency', currency: 'USD', minimumFractionDigits: 0 }); resultValue.textContent = `${earnings}/mo`; } salesRange.addEventListener('input', updateCalculator); // Initialize updateCalculator(); } // =========================== // 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)'; observer.unobserve(entry.target); } }); }, observerOptions); // Observe elements document.querySelectorAll('.problem-card, .pricing-card, .mega-stat-card, .testimonial-card').forEach(el => { el.style.opacity = '0'; el.style.transform = 'translateY(20px)'; el.style.transition = 'opacity 0.6s ease, transform 0.6s ease'; observer.observe(el); }); // =========================== // SMOOTH SCROLL FOR ANCHOR LINKS // =========================== document.querySelectorAll('a[href^="#"]').forEach(anchor => { anchor.addEventListener('click', function (e) { e.preventDefault(); const target = document.querySelector(this.getAttribute('href')); if (target) { const headerOffset = 80; const elementPosition = target.getBoundingClientRect().top; const offsetPosition = elementPosition + window.pageYOffset - headerOffset; window.scrollTo({ top: offsetPosition, behavior: 'smooth' }); } }); }); // =========================== // VIDEO MODAL (PLACEHOLDER) // =========================== const playButton = document.querySelector('.play-button'); if (playButton) { playButton.addEventListener('click', () => { // Open video modal here // For now, just log to console console.log('Video play clicked - integrate video player'); // Track event gtag('event', 'video_play_click', { 'event_category': 'engagement', 'event_label': 'hero_video' }); fbq('track', 'WatchVideo'); }); } // =========================== // UTILITY FUNCTIONS // =========================== function debounce(func, wait) { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; } function throttle(func, limit) { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; } // =========================== // ERROR HANDLING // =========================== window.addEventListener('error', (e) => { console.error('Script error:', e.message); // Send error to analytics gtag('event', 'script_error', { 'event_category': 'technical', 'event_label': e.message }); }); // =========================== // PERFORMANCE MONITORING // =========================== window.addEventListener('load', () => { // Record performance metrics if ('performance' in window) { const timing = performance.timing; console.log('Page Load Time:', timing.loadEventEnd - timing.navigationStart); gtag('event', 'page_load_complete', { 'event_category': 'performance', 'event_label': 'full_page_load', 'value': timing.loadEventEnd - timing.navigationStart }); } }); // =========================== // FORM TRACKING (IF FORMS ADDED) // =========================== document.querySelectorAll('form').forEach(form => { form.addEventListener('submit', (e) => { // Track form submission gtag('event', 'form_submit', { 'event_category': 'conversion', 'event_label': form.id || 'unknown_form' }); fbq('track', 'Lead'); }); }); // =========================== // INITIALIZATION // =========================== document.addEventListener('DOMContentLoaded', () => { console.log('CGW Systems Landing Page Loaded Successfully'); // Initial scroll progress check window.dispatchEvent(new Event('scroll')); // Fire page view event gtag('event', 'landing_page_view', { 'event_category': 'engagement', 'event_label': 'cgw_systems_landing' }); });