ThatAIguyA world of ideas

THE CONSCIOUSNESS ATLAS
Read. Experiment. Follow the evidence.

ConsciousnessLearn · Explore · Joseph Anady

Janady13/ai_deployment / ai-agents-landing.html

Source identity, revision, and recovered contents.

GitHub sourceSource text recovered

Source identity

FieldRecorded value
Source typeGitHub source
Original recordJanady13/ai_deployment / ai-agents-landing.html
DateNot specified in source
RepositoryJanady13/ai_deployment
Revision203e632d08a8a7c8665229f80ab3292d05036e21
Branchcopilot/add-payment-options-stripe-cashapp-venmo
Path or archive memberai-agents-landing.html
Original SHA-256f88779d8b4cedcfe5197aacde538d0b9ba4f90e9e955873f81bd6aaaebd7f804
Git blob SHAc86c71e723ad9eb39898439a9e97b33a485565a1
Reading-copy SHA-256f88779d8b4cedcfe5197aacde538d0b9ba4f90e9e955873f81bd6aaaebd7f804

Original source ↗

Recovered source transcript

Download complete source text ↓1,143 lines · 37.0 KB
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>AI Agents Pro - Automate Your Business with Intelligence</title> <script src="https://js.stripe.com/v3/"></script> <style> * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primary: #6366f1; --secondary: #8b5cf6; --accent: #ec4899; --dark: #0f172a; --light: #f8fafc; --gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --glass: rgba(255, 255, 255, 0.05); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--dark); color: var(--light); overflow-x: hidden; position: relative; } /* Animated Background */ .bg-animation { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: -1; background: linear-gradient(45deg, #0f172a 0%, #1e293b 100%); overflow: hidden; } .floating-orb { position: absolute; border-radius: 50%; filter: blur(40px); opacity: 0.3; animation: float 20s infinite ease-in-out; } .orb1 { width: 300px; height: 300px; background: var(--primary); top: -150px; left: -150px; animation-delay: 0s; } .orb2 { width: 400px; height: 400px; background: var(--secondary); bottom: -200px; right: -200px; animation-delay: 5s; } .orb3 { width: 250px; height: 250px; background: var(--accent); top: 50%; left: 50%; animation-delay: 10s; } @keyframes float { 0%, 100% { transform: translate(0, 0) scale(1); } 25% { transform: translate(100px, -100px) scale(1.1); } 50% { transform: translate(-100px, 100px) scale(0.9); } 75% { transform: translate(50px, 50px) scale(1.05); } } /* Navigation */ nav { position: fixed; top: 0; width: 100%; padding: 1.5rem 5%; background: var(--glass); backdrop-filter: blur(10px); z-index: 1000; transition: all 0.3s ease; } nav.scrolled { background: rgba(15, 23, 42, 0.95); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } .nav-container { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo { font-size: 1.8rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: glow 3s ease-in-out infinite; } @keyframes glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.2); } } .nav-links { display: flex; gap: 2rem; list-style: none; } .nav-links a { color: var(--light); text-decoration: none; transition: all 0.3s ease; position: relative; padding: 0.5rem 1rem; } .nav-links a::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--gradient); transition: all 0.3s ease; transform: translateX(-50%); } .nav-links a:hover::after { width: 100%; } /* Hero Section */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 5rem 5%; position: relative; } .hero-content { max-width: 1400px; text-align: center; z-index: 1; } .badge { display: inline-block; padding: 0.5rem 1.5rem; background: var(--glass); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 50px; margin-bottom: 2rem; animation: slideDown 0.8s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } h1 { font-size: clamp(3rem, 8vw, 6rem); font-weight: 900; line-height: 1.1; margin-bottom: 1.5rem; background: linear-gradient(135deg, #fff 0%, #8b5cf6 50%, #ec4899 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: slideUp 0.8s ease-out 0.2s both; } @keyframes slideUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } .hero-description { font-size: 1.3rem; color: #94a3b8; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; animation: slideUp 0.8s ease-out 0.4s both; } .cta-buttons { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; animation: slideUp 0.8s ease-out 0.6s both; } .btn { padding: 1rem 2.5rem; border-radius: 12px; font-size: 1.1rem; font-weight: 600; text-decoration: none; transition: all 0.3s ease; position: relative; overflow: hidden; cursor: pointer; border: none; } .btn-primary { background: var(--gradient); color: white; box-shadow: 0 10px 30px rgba(139, 92, 246, 0.3); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 40px rgba(139, 92, 246, 0.4); } .btn-secondary { background: var(--glass); color: white; border: 2px solid rgba(139, 92, 246, 0.5); backdrop-filter: blur(10px); } .btn-secondary:hover { background: rgba(139, 92, 246, 0.1); transform: translateY(-3px); } /* Features Grid */ .features { padding: 5rem 5%; max-width: 1400px; margin: 0 auto; } .section-title { font-size: 3rem; text-align: center; margin-bottom: 1rem; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .section-subtitle { text-align: center; color: #94a3b8; font-size: 1.2rem; margin-bottom: 4rem; } .features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 2rem; } .feature-card { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 20px; padding: 2.5rem; transition: all 0.3s ease; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gradient); transform: scaleX(0); transition: transform 0.3s ease; } .feature-card:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2); } .feature-card:hover::before { transform: scaleX(1); } .feature-icon { width: 60px; height: 60px; background: var(--gradient); border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1.5rem; } .feature-title { font-size: 1.5rem; margin-bottom: 1rem; } .feature-description { color: #94a3b8; line-height: 1.6; } /* Pricing Section */ .pricing { padding: 5rem 5%; max-width: 1400px; margin: 0 auto; } .pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; margin-top: 3rem; } .pricing-card { background: var(--glass); backdrop-filter: blur(10px); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 20px; padding: 2.5rem; text-align: center; transition: all 0.3s ease; position: relative; } .pricing-card.popular { border-color: var(--primary); transform: scale(1.05); } .popular-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--gradient); padding: 0.5rem 1.5rem; border-radius: 20px; font-size: 0.9rem; font-weight: 600; } .pricing-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 20px 40px rgba(139, 92, 246, 0.2); } .plan-name { font-size: 1.5rem; margin-bottom: 1rem; } .plan-price { font-size: 3rem; font-weight: 800; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 0.5rem; } .plan-price span { font-size: 1rem; color: #94a3b8; } .plan-features { list-style: none; margin: 2rem 0; } .plan-features li { padding: 0.75rem 0; color: #94a3b8; position: relative; padding-left: 2rem; } .plan-features li::before { content: '✓'; position: absolute; left: 0; color: var(--primary); font-weight: bold; } /* Payment Modal */ .modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(5px); z-index: 2000; align-items: center; justify-content: center; } .modal.active { display: flex; } .modal-content { background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 20px; padding: 3rem; max-width: 500px; width: 90%; position: relative; animation: modalSlide 0.3s ease-out; } /* Payment Method Selection */ .payment-methods { margin-bottom: 2rem; } .payment-method-buttons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2rem; } .payment-method-btn { padding: 1rem; background: var(--glass); border: 2px solid rgba(139, 92, 246, 0.2); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; text-align: center; position: relative; } .payment-method-btn:hover { border-color: var(--primary); background: rgba(139, 92, 246, 0.1); } .payment-method-btn.active { border-color: var(--primary); background: rgba(139, 92, 246, 0.2); box-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } .payment-method-btn.active::after { content: '✓'; position: absolute; top: -8px; right: -8px; background: var(--primary); color: white; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; } .payment-method-icon { font-size: 2rem; margin-bottom: 0.5rem; } .payment-method-name { font-size: 0.9rem; color: #94a3b8; } .payment-form-section { display: none; } .payment-form-section.active { display: block; } .external-payment-info { text-align: center; padding: 2rem; background: var(--glass); border-radius: 12px; border: 1px solid rgba(139, 92, 246, 0.2); } .external-payment-icon { font-size: 3rem; margin-bottom: 1rem; } .external-payment-text { color: #94a3b8; margin-bottom: 2rem; line-height: 1.6; } @keyframes modalSlide { from { opacity: 0; transform: translateY(-50px); } to { opacity: 1; transform: translateY(0); } } .close-modal { position: absolute; top: 1.5rem; right: 1.5rem; background: none; border: none; color: #94a3b8; font-size: 2rem; cursor: pointer; transition: color 0.3s ease; } .close-modal:hover { color: white; } .modal-title { font-size: 2rem; margin-bottom: 2rem; background: var(--gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .form-group { margin-bottom: 1.5rem; } .form-group label { display: block; margin-bottom: 0.5rem; color: #94a3b8; } .form-group input { width: 100%; padding: 1rem; background: var(--glass); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 10px; color: white; font-size: 1rem; transition: all 0.3s ease; } .form-group input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 20px rgba(139, 92, 246, 0.2); } #card-element { padding: 1rem; background: var(--glass); border: 1px solid rgba(139, 92, 246, 0.2); border-radius: 10px; } .payment-status { margin-top: 1rem; padding: 1rem; border-radius: 10px; text-align: center; display: none; } .payment-status.success { background: rgba(34, 197, 94, 0.2); border: 1px solid rgba(34, 197, 94, 0.5); color: #22c55e; display: block; } .payment-status.error { background: rgba(239, 68, 68, 0.2); border: 1px solid rgba(239, 68, 68, 0.5); color: #ef4444; display: block; } /* Responsive Design */ @media (max-width: 768px) { .nav-links { display: none; } h1 { font-size: 3rem; } .features-grid { grid-template-columns: 1fr; } .pricing-card.popular { transform: scale(1); } } /* Loading Animation */ .loading { display: inline-block; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } </style> </head> <body> <!-- Animated Background --> <div class="bg-animation"> <div class="floating-orb orb1"></div> <div class="floating-orb orb2"></div> <div class="floating-orb orb3"></div> </div> <!-- Navigation --> <nav id="navbar"> <div class="nav-container"> <div class="logo">AI Agents Pro</div> <ul class="nav-links"> <li><a href="#home">Home</a></li> <li><a href="#features">Features</a></li> <li><a href="#pricing">Pricing</a></li> <li><a href="#contact">Contact</a></li> </ul> </div> </nav> <!-- Hero Section --> <section class="hero" id="home"> <div class="hero-content"> <div class="badge">🚀 Next-Gen AI Technology</div> <h1>Supercharge Your Business with AI Agents</h1> <p class="hero-description"> Deploy intelligent AI agents that work 24/7, automate complex workflows, and scale your operations beyond human limitations. </p> <div class="cta-buttons"> <a href="#pricing" class="btn btn-primary">Start Free Trial</a> <a href="#features" class="btn btn-secondary">Learn More</a> </div> </div> </section> <!-- Features Section --> <section class="features" id="features"> <h2 class="section-title">Powerful Features</h2> <p class="section-subtitle">Everything you need to transform your business with AI</p> <div class="features-grid"> <div class="feature-card"> <div class="feature-icon">🤖</div> <h3 class="feature-title">Autonomous Operations</h3> <p class="feature-description"> AI agents that think, learn, and act independently. Handle complex tasks without constant supervision. </p> </div> <div class="feature-card"> <div class="feature-icon">⚡</div> <h3 class="feature-title">Lightning Fast</h3> <p class="feature-description"> Process thousands of requests simultaneously. 10x faster than traditional automation solutions. </p> </div> <div class="feature-card"> <div class="feature-icon">🔗</div> <h3 class="feature-title">Seamless Integration</h3> <p class="feature-description"> Connect with your existing tools and workflows. API-first design for maximum compatibility. </p> </div> <div class="feature-card"> <div class="feature-icon">📊</div> <h3 class="feature-title">Real-time Analytics</h3> <p class="feature-description"> Monitor performance, track KPIs, and optimize your AI agents with powerful insights dashboard. </p> </div> <div class="feature-card"> <div class="feature-icon">🛡️</div> <h3 class="feature-title">Enterprise Security</h3> <p class="feature-description"> Bank-level encryption, SOC 2 compliance, and complete data privacy for your peace of mind. </p> </div> <div class="feature-card"> <div class="feature-icon">🌍</div> <h3 class="feature-title">Global Scale</h3> <p class="feature-description"> Deploy agents across multiple regions with automatic failover and 99.99% uptime guarantee. </p> </div> </div> </section> <!-- Pricing Section --> <section class="pricing" id="pricing"> <h2 class="section-title">Simple, Transparent Pricing</h2> <p class="section-subtitle">Choose the perfect plan for your needs</p> <div class="pricing-cards"> <div class="pricing-card"> <h3 class="plan-name">Starter</h3> <div class="plan-price">$49<span>/month</span></div> <ul class="plan-features"> <li>Up to 5 AI Agents</li> <li>10,000 tasks/month</li> <li>Basic integrations</li> <li>Email support</li> <li>Analytics dashboard</li> </ul> <button class="btn btn-secondary" onclick="openPaymentModal('Starter', 49)">Get Started</button> </div> <div class="pricing-card popular"> <div class="popular-badge">Most Popular</div> <h3 class="plan-name">Professional</h3> <div class="plan-price">$149<span>/month</span></div> <ul class="plan-features"> <li>Up to 20 AI Agents</li> <li>100,000 tasks/month</li> <li>Advanced integrations</li> <li>Priority support</li> <li>Custom workflows</li> <li>API access</li> </ul> <button class="btn btn-primary" onclick="openPaymentModal('Professional', 149)">Get Started</button> </div> <div class="pricing-card"> <h3 class="plan-name">Enterprise</h3> <div class="plan-price">$499<span>/month</span></div> <ul class="plan-features"> <li>Unlimited AI Agents</li> <li>Unlimited tasks</li> <li>Custom integrations</li> <li>Dedicated support</li> <li>SLA guarantee</li> <li>On-premise option</li> </ul> <button class="btn btn-secondary" onclick="openPaymentModal('Enterprise', 499)">Contact Sales</button> </div> </div> </section> <!-- Payment Modal --> <div class="modal" id="paymentModal"> <div class="modal-content"> <button class="close-modal" onclick="closePaymentModal()">&times;</button> <h3 class="modal-title">Complete Your Purchase</h3> <!-- Payment Method Selection --> <div class="payment-methods"> <div class="payment-method-buttons"> <div class="payment-method-btn active" onclick="selectPaymentMethod('stripe')" id="stripe-btn"> <div class="payment-method-icon">💳</div> <div class="payment-method-name">Credit Card</div> </div> <div class="payment-method-btn" onclick="selectPaymentMethod('cashapp')" id="cashapp-btn"> <div class="payment-method-icon">💰</div> <div class="payment-method-name">CashApp</div> </div> <div class="payment-method-btn" onclick="selectPaymentMethod('venmo')" id="venmo-btn"> <div class="payment-method-icon">📱</div> <div class="payment-method-name">Venmo</div> </div> </div> </div> <!-- Stripe Payment Form --> <div class="payment-form-section active" id="stripe-form"> <form id="payment-form"> <div class="form-group"> <label for="email">Email Address</label> <input type="email" id="email" required placeholder="your@email.com"> </div> <div class="form-group"> <label for="name">Full Name</label> <input type="text" id="name" required placeholder="John Doe"> </div> <div class="form-group"> <label for="card-element">Credit or Debit Card</label> <div id="card-element"></div> </div> <button type="submit" class="btn btn-primary" style="width: 100%;"> <span id="button-text">Pay Now</span> <span class="loading" style="display: none;"></span> </button> </form> </div> <!-- CashApp Payment Form --> <div class="payment-form-section" id="cashapp-form"> <div class="external-payment-info"> <div class="external-payment-icon">💰</div> <h4>Pay with CashApp</h4> <p class="external-payment-text"> You'll be redirected to CashApp to complete your payment securely. <br><br> <strong>Plan:</strong> <span id="cashapp-plan-name"></span><br> <strong>Amount:</strong> $<span id="cashapp-amount"></span>/month </p> <button class="btn btn-primary" style="width: 100%;" onclick="processCashAppPayment()"> Continue to CashApp </button> </div> </div> <!-- Venmo Payment Form --> <div class="payment-form-section" id="venmo-form"> <div class="external-payment-info"> <div class="external-payment-icon">📱</div> <h4>Pay with Venmo</h4> <p class="external-payment-text"> You'll be redirected to Venmo to complete your payment securely. <br><br> <strong>Plan:</strong> <span id="venmo-plan-name"></span><br> <strong>Amount:</strong> $<span id="venmo-amount"></span>/month </p> <button class="btn btn-primary" style="width: 100%;" onclick="processVenmoPayment()"> Continue to Venmo </button> </div> </div> <div id="payment-status" class="payment-status"></div> </div> </div> <script> // Current plan details let currentPlan = { name: '', price: 0 }; let selectedPaymentMethod = 'stripe'; // Stripe Configuration (with error handling) let stripe = null; let elements = null; let cardElement = null; // Initialize Stripe if available function initializeStripe() { try { if (typeof Stripe !== 'undefined') { stripe = Stripe('pk_test_51234567890abcdefghijklmnopqrstuvwxyz'); // Replace with your publishable key elements = stripe.elements(); cardElement = elements.create('card', { style: { base: { color: '#ffffff', fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif', fontSmoothing: 'antialiased', fontSize: '16px', '::placeholder': { color: '#94a3b8' } }, invalid: { color: '#ef4444', iconColor: '#ef4444' } } }); // Mount Stripe card element cardElement.mount('#card-element'); } } catch (error) { console.warn('Stripe not available:', error); } } // Initialize Stripe when page loads document.addEventListener('DOMContentLoaded', initializeStripe); // Open payment modal function openPaymentModal(planName, price) { currentPlan = { name: planName, price: price }; document.getElementById('paymentModal').classList.add('active'); document.querySelector('.modal-title').textContent = `${planName} Plan - $${price}/month`; // Update payment method details updatePaymentMethodDetails(); } // Select payment method function selectPaymentMethod(method) { selectedPaymentMethod = method; // Update button states document.querySelectorAll('.payment-method-btn').forEach(btn => { btn.classList.remove('active'); }); document.getElementById(`${method}-btn`).classList.add('active'); // Show/hide payment forms document.querySelectorAll('.payment-form-section').forEach(section => { section.classList.remove('active'); }); document.getElementById(`${method}-form`).classList.add('active'); // Update external payment details updatePaymentMethodDetails(); } // Update payment method details for external providers function updatePaymentMethodDetails() { if (selectedPaymentMethod === 'cashapp') { document.getElementById('cashapp-plan-name').textContent = currentPlan.name; document.getElementById('cashapp-amount').textContent = currentPlan.price; } else if (selectedPaymentMethod === 'venmo') { document.getElementById('venmo-plan-name').textContent = currentPlan.name; document.getElementById('venmo-amount').textContent = currentPlan.price; } } // Process CashApp payment function processCashAppPayment() { const statusDiv = document.getElementById('payment-status'); // Show loading state statusDiv.className = 'payment-status'; statusDiv.style.display = 'block'; statusDiv.innerHTML = '<div class="loading"></div> Redirecting to CashApp...'; // Simulate redirect to CashApp setTimeout(() => { // In a real implementation, you would redirect to CashApp's payment URL // For demo purposes, we'll simulate a successful payment statusDiv.className = 'payment-status success'; statusDiv.textContent = 'CashApp payment successful! Welcome to AI Agents Pro!'; // Close modal after 3 seconds setTimeout(() => { closePaymentModal(); }, 3000); }, 2000); // In a real implementation, you would do something like: // window.location.href = `https://cash.app/pay/your-business-handle?amount=${currentPlan.price}&note=${encodeURIComponent(currentPlan.name + ' Plan')}`; } // Process Venmo payment function processVenmoPayment() { const statusDiv = document.getElementById('payment-status'); // Show loading state statusDiv.className = 'payment-status'; statusDiv.style.display = 'block'; statusDiv.innerHTML = '<div class="loading"></div> Redirecting to Venmo...'; // Simulate redirect to Venmo setTimeout(() => { // In a real implementation, you would redirect to Venmo's payment URL // For demo purposes, we'll simulate a successful payment statusDiv.className = 'payment-status success'; statusDiv.textContent = 'Venmo payment successful! Welcome to AI Agents Pro!'; // Close modal after 3 seconds setTimeout(() => { closePaymentModal(); }, 3000); }, 2000); // In a real implementation, you would do something like: // window.location.href = `venmo://paycharge?txn=pay&recipients=your-venmo-username&amount=${currentPlan.price}&note=${encodeURIComponent(currentPlan.name + ' Plan')}`; } // Close payment modal function closePaymentModal() { document.getElementById('paymentModal').classList.remove('active'); document.getElementById('payment-status').style.display = 'none'; document.getElementById('payment-form').reset(); // Reset to default payment method selectPaymentMethod('stripe'); } // Handle form submission document.getElementById('payment-form').addEventListener('submit', async (e) => { e.preventDefault(); const submitButton = document.querySelector('#payment-form button[type="submit"]'); const buttonText = document.getElementById('button-text'); const loading = document.querySelector('.loading'); const statusDiv = document.getElementById('payment-status'); // Disable button and show loading submitButton.disabled = true; buttonText.style.display = 'none'; loading.style.display = 'inline-block'; // In a real implementation, you would: // 1. Create a payment intent on your server // 2. Confirm the payment with Stripe // 3. Handle the response // Simulate payment processing setTimeout(() => { // Simulate successful payment statusDiv.className = 'payment-status success'; statusDiv.textContent = 'Payment successful! Welcome to AI Agents Pro!'; statusDiv.style.display = 'block'; // Reset button state submitButton.disabled = false; buttonText.style.display = 'inline'; loading.style.display = 'none'; // Close modal after 3 seconds setTimeout(() => { closePaymentModal(); }, 3000); }, 2000); }); // Navbar scroll effect window.addEventListener('scroll', () => { const navbar = document.getElementById('navbar'); if (window.scrollY > 50) { navbar.classList.add('scrolled'); } else { navbar.classList.remove('scrolled'); } }); // 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' }); } }); }); // Add intersection observer for animation on scroll const observerOptions = { threshold: 0.1, rootMargin: '0px 0px -100px 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 feature cards and pricing cards document.querySelectorAll('.feature-card, .pricing-card').forEach(card => { card.style.opacity = '0'; card.style.transform = 'translateY(30px)'; card.style.transition = 'all 0.6s ease'; observer.observe(card); }); </script> </body> </html>

Search equations, builds, manuscript text, and recovered sources.