Source identity
| Field | Recorded value |
|---|---|
| Source type | GitHub source |
| Original record | Janady13/ai_deployment / ai-agents-landing.html |
| Date | Not specified in source |
| Repository | Janady13/ai_deployment |
| Revision | 203e632d08a8a7c8665229f80ab3292d05036e21 |
| Branch | copilot/add-payment-options-stripe-cashapp-venmo |
| Path or archive member | ai-agents-landing.html |
| Original SHA-256 | f88779d8b4cedcfe5197aacde538d0b9ba4f90e9e955873f81bd6aaaebd7f804 |
| Git blob SHA | c86c71e723ad9eb39898439a9e97b33a485565a1 |
| Reading-copy SHA-256 | f88779d8b4cedcfe5197aacde538d0b9ba4f90e9e955873f81bd6aaaebd7f804 |
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()">×</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}¬e=${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}¬e=${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>