| <!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> |
