Spaces:
Running
Running
Generate a crypto investment website, use one of the best and trust company to generate it
6b87162 verified | <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>CryptoNova Vault - Smart Crypto Investing</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Space Grotesk', sans-serif; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(90deg, #3B82F6 0%, #8B5CF6 100%); | |
| -webkit-background-clip: text; | |
| background-clip: text; | |
| color: transparent; | |
| } | |
| .vanta-bg { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| opacity: 0.15; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-white"> | |
| <div id="vanta-bg" class="vanta-bg"></div> | |
| <!-- Navigation --> | |
| <nav class="container mx-auto px-6 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <i data-feather="activity" class="text-indigo-500 w-8 h-8"></i> | |
| <span class="text-2xl font-bold">CryptoNova</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="hover:text-indigo-400 transition">Products</a> | |
| <a href="#" class="hover:text-indigo-400 transition">Pricing</a> | |
| <a href="#" class="hover:text-indigo-400 transition">About</a> | |
| <a href="#" class="hover:text-indigo-400 transition">Contact</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="hidden md:block px-4 py-2 rounded-lg bg-indigo-600 hover:bg-indigo-700 transition">Sign In</button> | |
| <button class="px-4 py-2 rounded-lg bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition">Get Started</button> | |
| <button id="mobile-menu-button" class="md:hidden"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="container mx-auto px-6 py-20"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight"> | |
| The <span class="gradient-text">Smartest</span> Way to Invest in Crypto | |
| </h1> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Join millions who trust CryptoNova to buy, sell, and manage their cryptocurrency portfolio with institutional-grade security. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-8 py-4 rounded-xl bg-gradient-to-r from-indigo-600 to-purple-600 hover:from-indigo-700 hover:to-purple-700 transition text-lg font-semibold"> | |
| Start Trading | |
| </button> | |
| <button class="px-8 py-4 rounded-xl bg-gray-800 hover:bg-gray-700 transition text-lg font-semibold"> | |
| Learn More | |
| </button> | |
| </div> | |
| <div class="mt-12 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="http://static.photos/people/200x200/1" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> | |
| <img src="http://static.photos/people/200x200/2" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> | |
| <img src="http://static.photos/people/200x200/3" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> | |
| <img src="http://static.photos/people/200x200/4" class="w-10 h-10 rounded-full border-2 border-gray-800" alt="User"> | |
| </div> | |
| <div> | |
| <p class="text-gray-300">Trusted by <span class="font-bold text-white">1M+</span> users worldwide</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="relative bg-gray-800 rounded-2xl p-6 shadow-2xl"> | |
| <div class="absolute -top-4 -right-4 bg-indigo-600 text-white px-4 py-2 rounded-lg font-bold"> | |
| Live | |
| </div> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <h3 class="text-xl font-bold">Market Overview</h3> | |
| <span class="text-sm text-gray-400">Updated: Just now</span> | |
| </div> | |
| <canvas id="marketChart" height="200"></canvas> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/bitcoin-btc-logo.png" class="w-6 h-6 mr-2" alt="BTC"> | |
| <span class="font-semibold">BTC</span> | |
| </div> | |
| <span class="text-green-400">+2.4%</span> | |
| </div> | |
| <p class="text-2xl font-bold">$42,876.12</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/ethereum-eth-logo.png" class="w-6 h-6 mr-2" alt="ETH"> | |
| <span class="font-semibold">ETH</span> | |
| </div> | |
| <span class="text-green-400">+1.8%</span> | |
| </div> | |
| <p class="text-2xl font-bold">$2,312.45</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/solana-sol-logo.png" class="w-6 h-6 mr-2" alt="SOL"> | |
| <span class="font-semibold">SOL</span> | |
| </div> | |
| <span class="text-red-400">-0.7%</span> | |
| </div> | |
| <p class="text-2xl font-bold">$112.87</p> | |
| </div> | |
| <div class="bg-gray-700 p-4 rounded-lg"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <div class="flex items-center"> | |
| <img src="https://cryptologos.cc/logos/cardano-ada-logo.png" class="w-6 h-6 mr-2" alt="ADA"> | |
| <span class="font-semibold">ADA</span> | |
| </div> | |
| <span class="text-green-400">+0.9%</span> | |
| </div> | |
| <p class="text-2xl font-bold">$0.56</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="bg-gray-800 py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Why Choose CryptoNova?</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">We combine cutting-edge technology with institutional-grade security to give you the best 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:-translate-y-2 transition duration-300"> | |
| <div class="w-14 h-14 bg-indigo-600 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">Bank-Level Security</h3> | |
| <p class="text-gray-300">98% of customer funds stored offline in cold storage with multi-signature protection.</p> | |
| </div> | |
| <div class="bg-gray-900 p-8 rounded-xl hover:-translate-y-2 transition duration-300"> | |
| <div class="w-14 h-14 bg-purple-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="bar-chart-2" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Advanced Trading</h3> | |
| <p class="text-gray-300">Professional-grade trading tools with real-time market data and deep liquidity.</p> | |
| </div> | |
| <div class="bg-gray-900 p-8 rounded-xl hover:-translate-y-2 transition duration-300"> | |
| <div class="w-14 h-14 bg-blue-600 rounded-lg flex items-center justify-center mb-6"> | |
| <i data-feather="dollar-sign" class="w-6 h-6 text-white"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Earn Rewards</h3> | |
| <p class="text-gray-300">Earn up to 10% APY on your crypto with our staking and DeFi yield products.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-6"> | |
| <p class="text-4xl md:text-5xl font-bold text-indigo-400 mb-2">$100B+</p> | |
| <p class="text-gray-300">Assets Secured</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-4xl md:text-5xl font-bold text-purple-400 mb-2">1M+</p> | |
| <p class="text-gray-300">Active Users</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-4xl md:text-5xl font-bold text-blue-400 mb-2">200+</p> | |
| <p class="text-gray-300">Supported Cryptos</p> | |
| </div> | |
| <div class="p-6"> | |
| <p class="text-4xl md:text-5xl font-bold text-green-400 mb-2">24/7</p> | |
| <p class="text-gray-300">Customer Support</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials --> | |
| <section class="bg-gray-800 py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Trusted by Crypto Investors</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto">Don't just take our word for it. Here's what our users say about us.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-900 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/5" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold">Michael S.</h4> | |
| <p class="text-gray-400 text-sm">Verified User</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"The security features give me peace of mind. I've tried other platforms but CryptoNova's interface is by far the most intuitive."</p> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/6" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold">Sarah L.</h4> | |
| <p class="text-gray-400 text-sm">Pro Trader</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"The advanced charting tools and API access have taken my trading to the next level. Execution speeds are consistently fast."</p> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4"></i> | |
| </div> | |
| </div> | |
| <div class="bg-gray-900 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="http://static.photos/people/200x200/7" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold">David K.</h4> | |
| <p class="text-gray-400 text-sm">Institutional Investor</p> | |
| </div> | |
| </div> | |
| <p class="text-gray-300 mb-4">"For our fund, security and compliance are non-negotiable. CryptoNova meets all our requirements with their institutional offerings."</p> | |
| <div class="flex text-yellow-400"> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| <i data-feather="star" class="w-4 h-4 fill-current"></i> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA --> | |
| <section class="py-20"> | |
| <div class="container mx-auto px-6"> | |
| <div class="bg-gradient-to-r from-indigo-900 to-purple-900 rounded-2xl p-12 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Ready to Start Your Crypto Journey?</h2> | |
| <p class="text-xl text-indigo-200 mb-8 max-w-2xl mx-auto">Join CryptoNova today and get $10 in free BTC when you deposit $100 or more.</p> | |
| <button class="px-8 py-4 rounded-xl bg-white text-indigo-900 hover:bg-gray-200 transition text-lg font-semibold"> | |
| Create Free Account | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12"> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Products</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Exchange</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Wallet</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Staking</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Institutional</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Resources</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Help Center</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">API Docs</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Status</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Company</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">About</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Careers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Press</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Legal</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Social</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Twitter</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Instagram</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Facebook</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition">LinkedIn</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Subscribe</h4> | |
| <p class="text-gray-400 mb-4">Get the latest updates and news</p> | |
| <div class="flex"> | |
| <input type="email" placeholder="Your email" class="bg-gray-800 text-white px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 w-full"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 px-4 py-2 rounded-r-lg"> | |
| <i data-feather="send" class="w-4 h-4"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center space-x-2 mb-4 md:mb-0"> | |
| <i data-feather="activity" class="text-indigo-500 w-6 h-6"></i> | |
| <span class="text-xl font-bold">CryptoNova</span> | |
| </div> | |
| <p class="text-gray-400 text-sm">© 2023 CryptoNova Inc. All rights reserved.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Vanta.js | |
| VANTA.NET({ | |
| el: "#vanta-bg", | |
| mouseControls: true, | |
| touchControls: true, | |
| gyroControls: false, | |
| minHeight: 200.00, | |
| minWidth: 200.00, | |
| scale: 1.00, | |
| scaleMobile: 1.00, | |
| color: 0x4f46e5, | |
| backgroundColor: 0x111827, | |
| points: 10.00, | |
| maxDistance: 20.00, | |
| spacing: 15.00 | |
| }); | |
| // Initialize Chart.js | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const ctx = document.getElementById('marketChart').getContext('2d'); | |
| const marketChart = new Chart(ctx, { | |
| type: 'line', | |
| data: { | |
| labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'], | |
| datasets: [ | |
| { | |
| label: 'BTC', | |
| data: [38000, 40000, 42000, 39000, 43000, 42876], | |
| borderColor: '#F59E0B', | |
| backgroundColor: 'rgba(245, 158, 11, 0.1)', | |
| tension: 0.4, | |
| borderWidth: 2 | |
| }, | |
| { | |
| label: 'ETH', | |
| data: [2000, 2100, 2300, 2200, 2350, 2312], | |
| borderColor: '#8B5CF6', | |
| backgroundColor: 'rgba(139, 92, 246, 0.1)', | |
| tension: 0.4, | |
| borderWidth: 2 | |
| } | |
| ] | |
| }, | |
| options: { | |
| responsive: true, | |
| maintainAspectRatio: false, | |
| plugins: { | |
| legend: { | |
| display: false | |
| } | |
| }, | |
| scales: { | |
| y: { | |
| display: false | |
| }, | |
| x: { | |
| display: false | |
| } | |
| }, | |
| elements: { | |
| point: { | |
| radius: 0 | |
| } | |
| } | |
| } | |
| }); | |
| }); | |
| // Replace Feather Icons | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |