maxjoin/cubecraft-hosting-latam

1// Main JavaScript for CubeCraft Hosting2 3// Initialize when DOM is loaded4document.addEventListener('DOMContentLoaded', function() {5    initializeAnimations();6    setupSmoothScrolling();7    setupIntersectionObserver();8});9 10// Initialize animations and effects11function initializeAnimations() {12    // Add floating animation to pricing cards13    const pricingCards = document.querySelectorAll('#pricing > div > div > div');14    pricingCards.forEach((card, index) => {15        card.style.animationDelay = `${index * 0.1}s`;16    card.classList.add('animate-float');17});18 19// Smooth scrolling for anchor links20function setupSmoothScrolling() {21    document.querySelectorAll('a[href^="#"]').forEach(anchor => {22        anchor.addEventListener('click', function (e) {23            e.preventDefault();24            const target = document.querySelector(this.getAttribute('href'));25            if (target) {26                target.scrollIntoView({27                    behavior: 'smooth',28                    block: 'start'29                });30            }31        });32    });33}34 35// Intersection Observer for scroll animations36function setupIntersectionObserver() {37    const observerOptions = {38        threshold: 0.1,39        rootMargin: '0px 0px -50px 0px'40    };41 42    const observer = new IntersectionObserver((entries) => {43        entries.forEach(entry => {44            if (entry.isIntersecting) {45                entry.target.classList.add('animate-fade-in');46            }47        });48    }, observerOptions);49 50    // Observe all sections for animation51    document.querySelectorAll('section').forEach(section => {52        observer.observe(section);53    });54}55 56// FAQ toggle functionality57function setupFAQToggle() {58    const faqItems = document.querySelectorAll('.faq-item');59    faqItems.forEach(item => {60        const question = item.querySelector('.faq-question');61        const answer = item.querySelector('.faq-answer');62        63        question.addEventListener('click', () => {64            const isOpen = item.classList.contains('active');65            66            // Close all FAQ items67            faqItems.forEach(faq => {68                faq.classList.remove('active');69            });70            71            // Open clicked item if it wasn't open72            if (!isOpen) {73                item.classList.add('active');74            }75        });76    });77}78 79// Plan selection functionality80function setupPlanSelection() {81    const planButtons = document.querySelectorAll('#pricing button');82    planButtons.forEach(button => {83        button.addEventListener('click', function() {84            const plan = this.closest('.pricing-card');85            const planName = plan.querySelector('h3').textContent;86            87            // Show confirmation modal or redirect to checkout88            showPlanConfirmation(planName);89        });90    });91}92 93function showPlanConfirmation(planName) {94    // Create a simple confirmation modal95    const modal = document.createElement('div');96    modal.className = 'fixed inset-0 bg-black/50 flex items-center justify-center z-50';97    modal.innerHTML = `98        <div class="bg-darker border border-primary rounded-2xl p-8 max-w-md mx-4 text-center">99            <i data-feather="check-circle" class="text-primary w-16 h-16 mx-auto mb-4"></i>100            <h3 class="text-2xl font-bold mb-4">¡Plan ${planName} Seleccionado!</h3>101            <p class="text-gray-400 mb-6">Serás redirigido a nuestro sistema de pago seguro.</h3>102            <div class="flex gap-4">103                <button class="flex-1 bg-gray-600 hover:bg-gray-700 text-white py-3 rounded-lg font-bold transition-all">104                Cancelar105                </button>106                <button class="flex-1 bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-bold transition-all">107                Continuar108                </button>109            </div>110        </div>111    `;112    113    document.body.appendChild(modal);114    feather.replace();115    116    // Add event listeners to modal buttons117    modal.querySelectorAll('button').forEach((btn, index) => {118        btn.addEventListener('click', function() {119            if (index === 1) {120                // Redirect to checkout (placeholder)121                window.location.href = '/checkout';122            }123            modal.remove();124        });125    });126}127 128// Newsletter subscription129function setupNewsletter() {130    const newsletterForm = document.querySelector('.newsletter-form');131    if (newsletterForm) {132        newsletterForm.addEventListener('submit', function(e) {133            e.preventDefault();134            const email = this.querySelector('input[type="email"]').value;135            136            // Simulate API call137            const submitBtn = this.querySelector('button[type="submit"]');138            const originalText = submitBtn.textContent;139            140            submitBtn.textContent = 'Suscribiendo...';141            submitBtn.disabled = true;142            143            setTimeout(() => {144                showNotification('¡Te has suscrito exitosamente!', 'success');145                this.reset();146                submitBtn.textContent = originalText;147                submitBtn.disabled = false;148            }, 1500);149        });150    }151}152 153// Notification system154function showNotification(message, type = 'info') {155    const notification = document.createElement('div');156    const bgColor = type === 'success' ? 'bg-green-600' : 'bg-primary';157    158    notification.className = `fixed top-4 right-4 ${bgColor} text-white px-6 py-3 rounded-lg font-bold z-50 transform transition-all duration-300 translate-x-full`;159    notification.textContent = message;160    161    document.body.appendChild(notification);162    163    // Animate in164    setTimeout(() => {165        notification.classList.remove('translate-x-full');166    }, 100);167    168    // Auto remove after 5 seconds169    setTimeout(() => {170        notification.classList.add('translate-x-full');171        setTimeout(() => {172            notification.remove();173        }, 300);174    }, 5000);175}176 177// Performance optimization for animations178let lastScrollY = 0;179let ticking = false;180 181function onScroll() {182    lastScrollY = window.scrollY;183    if (!ticking) {184        requestAnimationFrame(() => {185            updateParallax();186            ticking = false;187        });188        ticking = true;189    }190}191 192function updateParallax() {193    const scrolled = window.pageYOffset;194    const parallaxElements = document.querySelectorAll('.parallax');195    196    parallaxElements.forEach(element => {197        const speed = element.dataset.speed || 0.5;198        element.style.transform = `translateY(${scrolled * speed}px)`;199    });200}201 202// Initialize scroll listener203window.addEventListener('scroll', onScroll);204 205// Add custom CSS animations206const style = document.createElement('style');207style.textContent = `208    @keyframes fade-in {209        from {210            opacity: 0;211            transform: translateY(30px);212        }213        to {214            opacity: 1;215            transform: translateY(0);216        }217    }218    219    .animate-fade-in {220        animation: fade-in 0.6s ease-out forwards;221    }222    223    @keyframes float {224        0%, 100% {225            transform: translateY(0px);226        }227        50% {228            transform: translateY(-10px);229        }230    }231    232    .animate-float {233        animation: float 3s ease-in-out infinite;234    }235    236    .pricing-card:hover .animate-float {237        animation-play-state: paused;238    }239`;240document.head.appendChild(style);