|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>CryptoSwap Galaxy Explorer | More than a crypto exchange</title> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white font-inter"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section class="relative overflow-hidden"> |
|
|
<div class="absolute inset-0 bg-gradient-to-br from-purple-900 via-indigo-900 to-gray-900 opacity-90"></div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 relative z-10"> |
|
|
<div class="text-center"> |
|
|
<img src="https://swapspace.co/img/logo/horizontal-logo.svg" alt="CryptoSwap Logo" class="mx-auto h-16 mb-8"> |
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6">More than a crypto exchange</h1> |
|
|
<p class="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-12"> |
|
|
We pick the best — you make a choice |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 bg-opacity-50 backdrop-blur-lg rounded-xl p-6 max-w-4xl mx-auto shadow-2xl"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">You send</label> |
|
|
<div class="relative"> |
|
|
<input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Amount"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://storage.swapspace.co/static/font/src/btc.svg" alt="BTC" class="h-6 w-6 mr-2"> |
|
|
<select class="bg-gray-800 text-white border-none focus:ring-0"> |
|
|
<option>BTC</option> |
|
|
<option>ETH</option> |
|
|
<option>USDT</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-300 mb-2">You get</label> |
|
|
<div class="relative"> |
|
|
<input type="text" class="w-full bg-gray-700 border border-gray-600 rounded-lg py-3 px-4 text-white focus:ring-2 focus:ring-purple-500 focus:border-transparent" placeholder="Amount"> |
|
|
<div class="absolute inset-y-0 right-0 flex items-center pr-3"> |
|
|
<div class="flex items-center"> |
|
|
<img src="https://storage.swapspace.co/static/font/src/eth.svg" alt="ETH" class="h-6 w-6 mr-2"> |
|
|
<select class="bg-gray-800 text-white border-none focus:ring-0"> |
|
|
<option>ETH</option> |
|
|
<option>BTC</option> |
|
|
<option>USDT</option> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-6 flex justify-center space-x-4"> |
|
|
<a href="#" class="px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition duration-200"> |
|
|
View offers |
|
|
</a> |
|
|
<a href="#" class="px-6 py-3 bg-indigo-600 hover:bg-indigo-700 rounded-lg font-medium transition duration-200"> |
|
|
Quick exchange |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 py-6"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex flex-wrap justify-center items-center gap-8"> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="bg-white p-2 rounded-lg"> |
|
|
<img src="https://storage.swapspace.co/static/7zQJEzcVew_5cs7M2R2GBtc18.svg" alt="KuCoin" class="h-8"> |
|
|
</div> |
|
|
<span class="ml-2 text-gray-300">KuCoin</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="bg-white p-2 rounded-lg"> |
|
|
<img src="https://storage.swapspace.co/static/jf2Bv_Go6_dsylXm2SltYqWqv.svg" alt="1inch" class="h-8"> |
|
|
</div> |
|
|
<span class="ml-2 text-gray-300">1inch</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="bg-white p-2 rounded-lg"> |
|
|
<img src="https://storage.swapspace.co/static/39211aa8299fb23854bd2dfcf1028230324624fb0a041d2d3e0085761fafa433.svg" alt="Bybit" class="h-8"> |
|
|
</div> |
|
|
<span class="ml-2 text-gray-300">Bybit</span> |
|
|
</a> |
|
|
<a href="#" class="flex items-center"> |
|
|
<div class="bg-white p-2 rounded-lg"> |
|
|
<img src="https://storage.swapspace.co/static/7894b3adcedf30300f0d6da1a299099cacbcd27032522b9a73851a4e74447442.svg" alt="MEXC" class="h-8"> |
|
|
</div> |
|
|
<span class="ml-2 text-gray-300">MEXC</span> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gradient-to-b from-gray-900 to-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">Exchange Crypto Across the Galaxy</h2> |
|
|
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Choose among 600,000+ crypto-to-crypto exchange pairs</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:shadow-xl hover:shadow-purple-500/10 transition duration-300"> |
|
|
<div class="bg-purple-600/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4"> |
|
|
<img src="https://swapspace.co/_nuxt/img/index-exchange-coin-top.7ad2d12.svg" alt="Exchange" class="w-8"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Exchange Crypto</h3> |
|
|
<p class="text-gray-400 mb-4">Choose among 600,000 crypto-to-crypto exchange pairs and track your swaps.</p> |
|
|
<a href="#" class="text-purple-400 hover:text-purple-300 font-medium inline-flex items-center"> |
|
|
More details |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:shadow-xl hover:shadow-blue-500/10 transition duration-300"> |
|
|
<div class="bg-blue-600/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4"> |
|
|
<img src="https://swapspace.co/_nuxt/img/pay-icon-1.b031d98.svg" alt="Buy/Sell" class="w-8"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Buy/Sell Crypto</h3> |
|
|
<p class="text-gray-400 mb-4">Fiat on/off ramp with 90+ currencies using Visa, MasterCard and more.</p> |
|
|
<a href="#" class="text-blue-400 hover:text-blue-300 font-medium inline-flex items-center"> |
|
|
More details |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:shadow-xl hover:shadow-green-500/10 transition duration-300"> |
|
|
<div class="bg-green-600/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4"> |
|
|
<img src="https://swapspace.co/_nuxt/img/cross-chain-chain.27d62a2.svg" alt="Cross-Chain" class="w-8"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Cross-Chain Swaps</h3> |
|
|
<p class="text-gray-400 mb-4">Bridge tokens across networks instantly with no registration required.</p> |
|
|
<a href="#" class="text-green-400 hover:text-green-300 font-medium inline-flex items-center"> |
|
|
More details |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 hover:shadow-xl hover:shadow-yellow-500/10 transition duration-300"> |
|
|
<div class="bg-yellow-600/20 w-14 h-14 rounded-lg flex items-center justify-center mb-4"> |
|
|
<img src="https://swapspace.co/_nuxt/img/spend-crypto-coin-1.b41d4cc.svg" alt="Spend" class="w-8"> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Spend Crypto</h3> |
|
|
<p class="text-gray-400 mb-4">Buy gift cards from popular retailers with your crypto in a couple clicks.</p> |
|
|
<a href="#" class="text-yellow-400 hover:text-yellow-300 font-medium inline-flex items-center"> |
|
|
Try now |
|
|
<i data-feather="arrow-right" class="ml-2 w-4 h-4"></i> |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-800 relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-20"> |
|
|
<img src="https://swapspace.co/_nuxt/img/our-features-base.a8a0b16.svg" alt="Background" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-purple-400 mb-2">3500+</div> |
|
|
<div class="text-gray-400">Coins</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-blue-400 mb-2">39</div> |
|
|
<div class="text-gray-400">Partners</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-green-400 mb-2">665</div> |
|
|
<div class="text-gray-400">Cross-Chain Bridges</div> |
|
|
</div> |
|
|
<div> |
|
|
<div class="text-4xl font-bold text-yellow-400 mb-2">600K+</div> |
|
|
<div class="text-gray-400">Exchange pairs</div> |
|
|
</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 grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
|
|
<div> |
|
|
<h2 class="text-3xl font-bold mb-6">How We Work</h2> |
|
|
<p class="text-gray-400 mb-8"> |
|
|
Swapspace aims to save your time and simplify the exchange process: we aggregate the swap offers from the most trustworthy crypto exchanges – you only need to pick the best option. |
|
|
</p> |
|
|
<ul class="space-y-4"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-400 mr-3 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-300">More than 3500 coins available</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-400 mr-3 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-300">Loyalty program</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-400 mr-3 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-300">24/7 live support</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check-circle" class="text-green-400 mr-3 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-300">Best rates on the market</span> |
|
|
</li> |
|
|
</ul> |
|
|
<a href="#" class="mt-8 inline-block px-6 py-3 bg-purple-600 hover:bg-purple-700 rounded-lg font-medium transition duration-200"> |
|
|
Try it yourself |
|
|
</a> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<img src="https://swapspace.co/img/index/how-we-work-mobile.webp" alt="How it works" class="rounded-xl shadow-2xl"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-purple-600/20 backdrop-blur-sm p-4 rounded-xl"> |
|
|
<div class="text-purple-400 font-bold">TrustScore 4.6</div> |
|
|
<div class="text-white">on TrustPilot</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gradient-to-r from-purple-900 to-indigo-900"> |
|
|
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> |
|
|
<h2 class="text-2xl font-bold mb-4">Curious for more?</h2> |
|
|
<p class="text-gray-300 mb-6">Join our newsletter — stay informed, stay empowered.</p> |
|
|
<div class="flex flex-col sm:flex-row gap-3"> |
|
|
<input type="email" placeholder="Your email address" class="flex-grow px-4 py-3 rounded-lg bg-gray-800/30 border border-gray-700 focus:outline-none focus:ring-2 focus:ring-purple-500 text-white"> |
|
|
<button class="px-6 py-3 bg-white text-purple-900 font-medium rounded-lg hover:bg-gray-100 transition duration-200"> |
|
|
Subscribe |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
|
|
|
<script src="components/navbar.js"></script> |
|
|
<script src="components/footer.js"></script> |
|
|
<script src="script.js"></script> |
|
|
<script> |
|
|
feather.replace(); |
|
|
</script> |
|
|
<script src="https://deepsite.hf.co/deepsite-badge.js"></script> |
|
|
</body> |
|
|
</html> |
