File size: 9,305 Bytes
98fb5fb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Copy Trading Bot - Automated Crypto Trading</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
.gradient-bg {
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%);
}
.hero-section {
background: url('https://images.unsplash.com/photo-1639762681057-408e52192e55?q=80&w=2232&auto=format&fit=crop') no-repeat center center;
background-size: cover;
position: relative;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.glow {
box-shadow: 0 0 15px rgba(167, 119, 227, 0.5);
}
</style>
</head>
<body class="font-sans antialiased text-gray-800">
<!-- Header -->
<header class="bg-white shadow-sm sticky top-0 z-50">
<div class="container mx-auto px-4 py-3 flex justify-between items-center">
<div class="flex items-center">
<div class="text-2xl font-bold text-purple-600 mr-2">CRYPTO<span class="text-blue-500">HOPPER</span></div>
</div>
<nav class="hidden md:flex space-x-8">
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="text-gray-600 hover:text-purple-600 font-medium">Products</a>
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="text-gray-600 hover:text-purple-600 font-medium">Features</a>
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="text-gray-600 hover:text-purple-600 font-medium">Pricing</a>
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="text-gray-600 hover:text-purple-600 font-medium">Academy</a>
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="text-gray-600 hover:text-purple-600 font-medium">Blog</a>
</nav>
<div class="flex items-center space-x-4">
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="hidden md:block text-gray-600 hover:text-purple-600">Log In</a>
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="gradient-bg text-white px-6 py-2 rounded-md font-medium hover:opacity-90 transition">Sign Up Free</a>
<button class="md:hidden text-gray-600">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
</div>
</header>
<!-- Hero Section -->
<section class="hero-section text-white py-20">
<div class="container mx-auto px-4 relative z-10">
<div class="max-w-3xl mx-auto text-center">
<h1 class="text-4xl md:text-5xl font-bold mb-6">Copy Trading Bot</h1>
<p class="text-xl mb-8">Automatically copy the trades of the most successful traders in the market. No experience needed!</p>
<div class="flex flex-col sm:flex-row justify-center gap-4">
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="gradient-bg text-white px-8 py-4 rounded-md font-bold text-lg hover:opacity-90 transition">Start Copy Trading Now</a>
<a href="https://youtu.be/1ZZtqDB9Fno?si=Koq_hI2Vo8knkZ4T" class="bg-white text-purple-600 px-8 py-4 rounded-md font-bold text-lg hover:bg-gray-100 transition">Watch Demo Video</a>
</div>
</div>
</div>
</section>
<!-- Stats Section -->
<section class="bg-gray-50 py-16">
<div class="container mx-auto px-4">
<div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center">
<div class="p-6">
<div class="text-4xl font-bold text-purple-600 mb-2">10,000+</div>
<div class="text-gray-600">Traders to Copy</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-blue-500 mb-2">24/7</div>
<div class="text-gray-600">Automated Trading</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-purple-600 mb-2">100+</div>
<div class="text-gray-600">Supported Exchanges</div>
</div>
<div class="p-6">
<div class="text-4xl font-bold text-blue-500 mb-2">1M+</div>
<div class="text-gray-600">Copied Trades</div>
</div>
</div>
</div>
</section>
<!-- How It Works -->
<section class="py-20 bg-white">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">How Copy Trading Works</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Follow the best traders automatically with just a few clicks</p>
</div>
<div class="grid md:grid-cols-3 gap-10">
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">1</div>
<h3 class="text-xl font-bold mb-4">Choose a Master Trader</h3>
<p class="text-gray-600">Browse our leaderboard of verified profitable traders with transparent performance metrics.</p>
</div>
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">2</div>
<h3 class="text-xl font-bold mb-4">Configure Your Settings</h3>
<p class="text-gray-600">Set your risk parameters, investment amount, and which signals to follow.</p>
</div>
<div class="feature-card bg-white p-8 rounded-xl border border-gray-200 transition duration-300">
<div class="w-16 h-16 gradient-bg rounded-full flex items-center justify-center text-white text-2xl mb-6">3</div>
<h3 class="text-xl font-bold mb-4">Start Copying Automatically</h3>
<p class="text-gray-600">Our bot will execute the same trades in your account with your configured settings.</p>
</div>
</div>
</div>
</section>
<!-- Features Section -->
<section class="py-20 bg-gray-50">
<div class="container mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Copy Trading Features</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">Everything you need to copy trade like a pro</p>
</div>
<div class="grid md:grid-cols-2 gap-10">
<div class="bg-white p-8 rounded-xl border border-gray-200">
<div class="flex items-start mb-6">
<div class="gradient-bg p-3 rounded-lg text-white mr-4">
<i class="fas fa-chart-line text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Performance Analytics</h3>
<p class="text-gray-600">View detailed statistics on each trader's performance including win rate, average profit, and risk level.</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl border border-gray-200">
<div class="flex items-start mb-6">
<div class="gradient-bg p-3 rounded-lg text-white mr-4">
<i class="fas fa-sliders-h text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Customizable Risk Settings</h3>
<p class="text-gray-600">Adjust position sizes, set stop losses, and configure your risk tolerance for each trader you follow.</p>
</div>
</div>
</div>
<div class="bg-white p-8 rounded-xl border border-gray-200">
<div class="flex items-start mb-6">
<div class="gradient-bg p-3 rounded-lg text-white mr-4">
<i class="fas fa-bell text-xl"></i>
</div>
<div>
<h3 class="text-xl font-bold mb-2">Real-time Notifications</h3>
</html> |