| | <!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 - Modern Crypto Platform</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> |
| | <script src="components/price-ticker.js"></script> |
| | <script src="components/darkmode-toggle.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"> |
| | <div class="absolute inset-0 bg-gradient-to-r from-purple-900 to-blue-900 opacity-90"></div> |
| | <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 md:py-32"> |
| | <div class="md:grid md:grid-cols-2 md:gap-8 items-center"> |
| | <div> |
| | <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6"> |
| | The Future of <span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-blue-400">Crypto</span> is Here |
| | </h1> |
| | <p class="text-xl md:text-2xl text-gray-300 mb-8 max-w-lg"> |
| | Trade, invest, and grow your digital assets with our cutting-edge platform. Secure, fast, and intuitive. |
| | </p> |
| | <div class="flex flex-col sm:flex-row gap-4"> |
| | <a href="/register" class="bg-gradient-to-r from-purple-500 to-blue-500 hover:from-purple-600 hover:to-blue-600 text-white font-bold py-3 px-6 rounded-lg transition-all duration-300 transform hover:scale-105 shadow-lg hover:shadow-xl text-center"> |
| | Get Started - It's Free |
| | </a> |
| | <a href="/plan" class="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 transform hover:scale-105 text-center"> |
| | Explore Plans |
| | </a> |
| | </div> |
| | </div> |
| | <div class="mt-12 md:mt-0"> |
| | <img src="http://static.photos/technology/1200x630/42" alt="Crypto Illustration" class="rounded-xl shadow-2xl transform hover:scale-105 transition-transform duration-500 border border-gray-700"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <custom-price-ticker></custom-price-ticker> |
| |
|
| | |
| | <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">Why Choose CryptoPulse Pro?</h2> |
| | <p class="text-xl text-gray-400 max-w-3xl mx-auto">We combine security, speed, and simplicity to deliver the ultimate crypto experience</p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="bg-gray-900 p-8 rounded-xl hover:bg-gradient-to-br from-purple-900/50 to-blue-900/50 transition-all duration-300 border border-gray-700 hover:border-purple-500"> |
| | <div class="bg-gradient-to-r from-purple-500 to-blue-500 w-14 h-14 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="shield" class="w-6 h-6 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Military-Grade Security</h3> |
| | <p class="text-gray-400">Bank-level encryption and multi-factor authentication to keep your assets safe.</p> |
| | </div> |
| | <div class="bg-gray-900 p-8 rounded-xl hover:bg-gradient-to-br from-purple-900/50 to-blue-900/50 transition-all duration-300 border border-gray-700 hover:border-purple-500"> |
| | <div class="bg-gradient-to-r from-purple-500 to-blue-500 w-14 h-14 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="zap" class="w-6 h-6 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Lightning Fast Trades</h3> |
| | <p class="text-gray-400">Execute trades in milliseconds with our high-performance matching engine.</p> |
| | </div> |
| | <div class="bg-gray-900 p-8 rounded-xl hover:bg-gradient-to-br from-purple-900/50 to-blue-900/50 transition-all duration-300 border border-gray-700 hover:border-purple-500"> |
| | <div class="bg-gradient-to-r from-purple-500 to-blue-500 w-14 h-14 rounded-lg flex items-center justify-center mb-6"> |
| | <i data-feather="trending-up" class="w-6 h-6 text-white"></i> |
| | </div> |
| | <h3 class="text-xl font-bold mb-3">Advanced Analytics</h3> |
| | <p class="text-gray-400">Real-time charts and indicators to help you make informed decisions.</p> |
| | </div> |
| | </div> |
| | </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="grid md:grid-cols-2 gap-12 items-center"> |
| | <div> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-6">The Most Intuitive Trading Experience</h2> |
| | <p class="text-xl text-gray-400 mb-8">Our platform is designed for both beginners and professionals with customizable layouts and advanced tools.</p> |
| | <ul class="space-y-4"> |
| | <li class="flex items-start"> |
| | <div class="bg-purple-500/20 p-2 rounded-full mr-4"> |
| | <i data-feather="check" class="w-5 h-5 text-purple-400"></i> |
| | </div> |
| | <span class="text-gray-300">One-click trading with advanced order types</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="bg-purple-500/20 p-2 rounded-full mr-4"> |
| | <i data-feather="check" class="w-5 h-5 text-purple-400"></i> |
| | </div> |
| | <span class="text-gray-300">Portfolio tracking with profit/loss analytics</span> |
| | </li> |
| | <li class="flex items-start"> |
| | <div class="bg-purple-500/20 p-2 rounded-full mr-4"> |
| | <i data-feather="check" class="w-5 h-5 text-purple-400"></i> |
| | </div> |
| | <span class="text-gray-300">Mobile app with full platform functionality</span> |
| | </li> |
| | </ul> |
| | </div> |
| | <div class="relative"> |
| | <div class="absolute -top-6 -left-6 w-full h-full border-2 border-purple-500/30 rounded-xl z-0"></div> |
| | <div class="relative z-10 bg-gray-800 rounded-xl overflow-hidden shadow-2xl"> |
| | <img src="http://static.photos/technology/1024x576/15" alt="Platform Screenshot" class="w-full h-auto"> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-gradient-to-br from-purple-900/30 to-blue-900/30"> |
| | <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">Trusted by Thousands of Traders</h2> |
| | <p class="text-xl text-gray-400 max-w-3xl mx-auto">Join our community of satisfied users who trust us with their crypto investments</p> |
| | </div> |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | <div class="bg-gray-900 p-8 rounded-xl border border-gray-700"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| | <img src="http://static.photos/people/200x200/1" alt="User" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Alex Johnson</h4> |
| | <p class="text-sm text-purple-400">Day Trader</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-400">"The speed and reliability of CryptoPulse Pro have transformed my trading. I can execute strategies that were impossible on other platforms."</p> |
| | <div class="flex mt-4"> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | </div> |
| | </div> |
| | <div class="bg-gray-900 p-8 rounded-xl border border-gray-700"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| | <img src="http://static.photos/people/200x200/2" alt="User" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Sarah Chen</h4> |
| | <p class="text-sm text-purple-400">Institutional Investor</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-400">"The institutional tools provided allow me to manage large positions with precision. The API integration is seamless and robust."</p> |
| | <div class="flex mt-4"> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400"></i> |
| | </div> |
| | </div> |
| | <div class="bg-gray-900 p-8 rounded-xl border border-gray-700"> |
| | <div class="flex items-center mb-4"> |
| | <div class="w-12 h-12 rounded-full overflow-hidden mr-4"> |
| | <img src="http://static.photos/people/200x200/3" alt="User" class="w-full h-full object-cover"> |
| | </div> |
| | <div> |
| | <h4 class="font-bold">Marcus Wright</h4> |
| | <p class="text-sm text-purple-400">Crypto Enthusiast</p> |
| | </div> |
| | </div> |
| | <p class="text-gray-400">"As someone new to crypto, the educational resources and intuitive interface made my journey smooth. The customer support is outstanding."</p> |
| | <div class="flex mt-4"> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | <i data-feather="star" class="w-5 h-5 text-yellow-400 fill-yellow-400"></i> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <custom-cta-banner></custom-cta-banner> |
| |
|
| | <custom-footer></custom-footer> |
| |
|
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | |
| | const ticker = document.querySelector('custom-price-ticker'); |
| | if (ticker) { |
| | setTimeout(() => { |
| | ticker.startAnimation(); |
| | }, 1000); |
| | } |
| | </script> |
| | <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script> |
| | </body> |
| | </html> |
