|
|
<!DOCTYPE html> |
|
|
<html lang="en" class="scroll-smooth"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CryptoPulse Pro - Pricing Plans</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="components/cta-banner.js"></script> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white font-sans flex flex-col min-h-screen"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden py-24 bg-gradient-to-br from-purple-900/40 to-blue-900/40"> |
|
|
<div class="absolute inset-0 opacity-20"> |
|
|
<div class="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHBhdHRlcm5UcmFuc2Zvcm09InJvdGF0ZSg0NSkiPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjA1KSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuKSIvPjwvc3ZnPg==')]"></div> |
|
|
</div> |
|
|
<div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold mb-6">Simple, Transparent Pricing</h1> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Choose the perfect plan for your trading needs. No hidden fees, no surprises.</p> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-900"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-center mb-12"> |
|
|
<div class="inline-flex rounded-lg bg-gray-800 p-1"> |
|
|
<button type="button" class="px-6 py-3 rounded-md font-medium toggle-plan active" data-plan="monthly">Monthly</button> |
|
|
<button type="button" class="px-6 py-3 rounded-md font-medium toggle-plan" data-plan="yearly">Yearly (Save 20%)</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700 hover:border-purple-500 transition-all duration-300 transform hover:scale-105"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-2xl font-bold mb-2">Starter</h3> |
|
|
<p class="text-gray-400 mb-4">Perfect for beginners dipping into crypto</p> |
|
|
<div class="flex items-end"> |
|
|
<span class="text-4xl font-bold">$9</span> |
|
|
<span class="text-gray-400 ml-1 monthly-text">/month</span> |
|
|
<span class="text-gray-400 ml-1 yearly-text hidden">/year</span> |
|
|
</div> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Up to $1,000 daily trading volume</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Basic charting tools</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Email support</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="x" class="w-5 h-5 text-gray-600 mr-2"></i> |
|
|
<span class="text-gray-500">Advanced order types</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="x" class="w-5 h-5 text-gray-600 mr-2"></i> |
|
|
<span class="text-gray-500">API access</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="/register" class="block w-full bg-gray-700 hover:bg-gray-600 text-white text-center font-bold py-3 px-6 rounded-lg transition-all duration-300"> |
|
|
Get Started |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gradient-to-b from-purple-900/40 to-blue-900/40 rounded-xl p-8 border-2 border-purple-500 transform scale-105 z-10 shadow-2xl"> |
|
|
<div class="absolute top-0 right-0 bg-purple-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">MOST POPULAR</div> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-2xl font-bold mb-2">Pro Trader</h3> |
|
|
<p class="text-gray-400 mb-4">For serious traders who need advanced tools</p> |
|
|
<div class="flex items-end"> |
|
|
<span class="text-4xl font-bold">$29</span> |
|
|
<span class="text-gray-400 ml-1 monthly-text">/month</span> |
|
|
<span class="text-gray-400 ml-1 yearly-text hidden">/year</span> |
|
|
</div> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Up to $10,000 daily trading volume</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Advanced charting & indicators</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Priority email & chat support</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>All order types (limit, stop, etc.)</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Basic API access</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="/register" class="block w-full bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white text-center font-bold py-3 px-6 rounded-lg transition-all duration-300"> |
|
|
Upgrade Now |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-8 border border-gray-700 hover:border-blue-500 transition-all duration-300 transform hover:scale-105"> |
|
|
<div class="mb-8"> |
|
|
<h3 class="text-2xl font-bold mb-2">Institutional</h3> |
|
|
<p class="text-gray-400 mb-4">For professional traders and hedge funds</p> |
|
|
<div class="flex items-end"> |
|
|
<span class="text-4xl font-bold">$99</span> |
|
|
<span class="text-gray-400 ml-1 monthly-text">/month</span> |
|
|
<span class="text-gray-400 ml-1 yearly-text hidden">/year</span> |
|
|
</div> |
|
|
</div> |
|
|
<ul class="space-y-4 mb-8"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Unlimited trading volume</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Professional trading terminal</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>24/7 dedicated support</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Full API access with WebSocket</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="w-5 h-5 text-green-500 mr-2"></i> |
|
|
<span>Institutional analytics dashboard</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="/contact" class="block w-full bg-gray-700 hover:bg-gray-600 text-white text-center font-bold py-3 px-6 rounded-lg transition-all duration-300"> |
|
|
Contact Sales |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-16 bg-gray-800 rounded-xl p-8 border border-gray-700"> |
|
|
<div class="grid md:grid-cols-2 gap-8 items-center"> |
|
|
<div> |
|
|
<h3 class="text-2xl font-bold mb-2">Enterprise Solutions</h3> |
|
|
<p class="text-gray-400">Custom solutions for exchanges, brokers, and financial institutions with unique requirements.</p> |
|
|
</div> |
|
|
<div class="text-right"> |
|
|
<a href="/contact" class="inline-block bg-transparent border-2 border-purple-500 hover:bg-purple-900/30 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300"> |
|
|
Request Custom Plan |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-3xl md:text-4xl font-bold mb-4">Plan Comparison</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto">See how our plans stack up against each other</p> |
|
|
</div> |
|
|
|
|
|
<div class="overflow-x-auto"> |
|
|
<table class="w-full text-left"> |
|
|
<thead> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<th class="pb-6 text-xl font-bold">Feature</th> |
|
|
<th class="pb-6 text-lg font-medium text-center">Starter</th> |
|
|
<th class="pb-6 text-lg font-medium text-center">Pro Trader</th> |
|
|
<th class="pb-6 text-lg font-medium text-center">Institutional</th> |
|
|
</tr> |
|
|
</thead> |
|
|
<tbody> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-4 font-medium">Trading Fees</td> |
|
|
<td class="py-4 text-center">0.25%</td> |
|
|
<td class="py-4 text-center">0.15%</td> |
|
|
<td class="py-4 text-center text-purple-400 font-bold">0.05%</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-4 font-medium">Daily Volume Limit</td> |
|
|
<td class="py-4 text-center">$1,000</td> |
|
|
<td class="py-4 text-center">$10,000</td> |
|
|
<td class="py-4 text-center text-purple-400 font-bold">Unlimited</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-4 font-medium">Charting Tools</td> |
|
|
<td class="py-4 text-center">Basic</td> |
|
|
<td class="py-4 text-center">Advanced</td> |
|
|
<td class="py-4 text-center text-purple-400 font-bold">Professional</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-4 font-medium">Order Types</td> |
|
|
<td class="py-4 text-center">Market only</td> |
|
|
<td class="py-4 text-center">All standard</td> |
|
|
<td class="py-4 text-center text-purple-400 font-bold">All + Custom</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-4 font-medium">API Access</td> |
|
|
<td class="py-4 text-center"><i data-feather="x" class="w-5 h-5 text-red-500 mx-auto"></i></td> |
|
|
<td class="py-4 text-center">Basic</td> |
|
|
<td class="py-4 text-center text-purple-400 font-bold">Full with WebSocket</td> |
|
|
</tr> |
|
|
<tr class="border-b border-gray-700"> |
|
|
<td class="py-4 font-medium">Support</td> |
|
|
<td class="py-4 text-center">Email</td> |
|
|
<td class="py-4 text-center">Priority Email/Chat</td> |
|
|
<td class="py-4 text-center text-purple-400 font-bold">24/7 Dedicated</td> |
|
|
</tr> |
|
|
</tbody> |
|
|
</table> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<custom-cta-banner></custom-cta-banner> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
|
|
|
document.querySelectorAll('.toggle-plan').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
document.querySelectorAll('.toggle-plan').forEach(btn => btn.classList.remove('active')); |
|
|
this.classList.add('active'); |
|
|
|
|
|
const plan = this.dataset.plan; |
|
|
if (plan === 'yearly') { |
|
|
document.querySelectorAll('.monthly-text').forEach(el => el.classList.add('hidden')); |
|
|
document.querySelectorAll('.yearly-text').forEach(el => el.classList.remove('hidden')); |
|
|
document.querySelectorAll('[class*="monthly"]').forEach(el => { |
|
|
const price = parseInt(el.textContent.replace('$', '')); |
|
|
el.textContent = '$' + Math.floor(price * 12 * 0.8); |
|
|
}); |
|
|
} else { |
|
|
document.querySelectorAll('.monthly-text').forEach(el => el.classList.remove('hidden')); |
|
|
document.querySelectorAll('.yearly-text').forEach(el => el.classList.add('hidden')); |
|
|
document.querySelectorAll('[class*="monthly"]').forEach(el => { |
|
|
const price = parseInt(el.textContent.replace('$', '')); |
|
|
el.textContent = '$' + Math.floor(price / 12 / 0.8); |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
