File size: 7,036 Bytes
b25c766 | 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 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CraftyHost - Minecraft Server Hosting</title>
<link rel="stylesheet" href="style.css">
<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>
</head>
<body class="bg-gray-900 text-white">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-8">
<!-- Hero Section -->
<section id="vanta-bg" class="rounded-xl p-8 mb-12 relative overflow-hidden">
<div class="backdrop-blur-sm bg-black/30 p-8 rounded-xl max-w-2xl">
<h1 class="text-4xl md:text-6xl font-bold mb-4">Host Your Minecraft Server</h1>
<p class="text-xl mb-8">One-click setup for Java & Bedrock with real-time management</p>
<div class="flex flex-wrap gap-4">
<a href="/signup.html" class="bg-emerald-600 hover:bg-emerald-700 px-6 py-3 rounded-lg font-semibold transition">Get Started</a>
<a href="/login.html" class="bg-gray-700 hover:bg-gray-600 px-6 py-3 rounded-lg font-semibold transition">Login</a>
</div>
</div>
</section>
<!-- Features -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-center">Why Choose CraftyHost?</h2>
<div class="grid md:grid-cols-3 gap-6">
<div class="bg-gray-800 p-6 rounded-xl">
<i data-feather="cpu" class="w-12 h-12 mb-4 text-emerald-500"></i>
<h3 class="text-xl font-bold mb-2">Powerful Performance</h3>
<p class="text-gray-300">SSD storage, dedicated RAM, and low-latency networks for lag-free gameplay.</p>
</div>
<div class="bg-gray-800 p-6 rounded-xl">
<i data-feather="sliders" class="w-12 h-12 mb-4 text-emerald-500"></i>
<h3 class="text-xl font-bold mb-2">Easy Management</h3>
<p class="text-gray-300">Web-based control panel with one-click plugin installs and server configuration.</p>
</div>
<div class="bg-gray-800 p-6 rounded-xl">
<i data-feather="shield" class="w-12 h-12 mb-4 text-emerald-500"></i>
<h3 class="text-xl font-bold mb-2">DDoS Protection</h3>
<p class="text-gray-300">Enterprise-grade protection keeps your server online and secure.</p>
</div>
</div>
</section>
<!-- Pricing -->
<section class="mb-16">
<h2 class="text-3xl font-bold mb-8 text-center">Simple Pricing</h2>
<div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold mb-4">Starter</h3>
<p class="text-4xl font-bold mb-4">$5<span class="text-lg text-gray-400">/month</span></p>
<ul class="space-y-2 mb-6">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 10 Player Slots</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 2GB RAM</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> Basic Support</li>
</ul>
<a href="/signup.html" class="block bg-gray-700 hover:bg-gray-600 text-center py-2 rounded-lg transition">Get Started</a>
</div>
<div class="bg-gray-800 p-6 rounded-xl border-2 border-emerald-500 relative">
<div class="absolute top-0 right-0 bg-emerald-500 text-xs font-bold px-2 py-1 rounded-bl rounded-tr">POPULAR</div>
<h3 class="text-xl font-bold mb-4">Premium</h3>
<p class="text-4xl font-bold mb-4">$10<span class="text-lg text-gray-400">/month</span></p>
<ul class="space-y-2 mb-6">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 25 Player Slots</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 4GB RAM</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> Priority Support</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> Free Subdomain</li>
</ul>
<a href="/signup.html" class="block bg-emerald-600 hover:bg-emerald-700 text-center py-2 rounded-lg transition">Get Started</a>
</div>
<div class="bg-gray-800 p-6 rounded-xl border border-gray-700">
<h3 class="text-xl font-bold mb-4">Pro</h3>
<p class="text-4xl font-bold mb-4">$20<span class="text-lg text-gray-400">/month</span></p>
<ul class="space-y-2 mb-6">
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 50 Player Slots</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 8GB RAM</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> 24/7 Support</li>
<li class="flex items-center"><i data-feather="check" class="w-4 h-4 mr-2 text-emerald-500"></i> Custom Domain</li>
</ul>
<a href="/signup.html" class="block bg-gray-700 hover:bg-gray-600 text-center py-2 rounded-lg transition">Get Started</a>
</div>
</div>
</section>
</main>
<custom-footer></custom-footer>
<script src="components/navbar.js"></script>
<script src="components/footer.js"></script>
<script src="script.js"></script>
<script>
feather.replace();
VANTA.NET({
el: "#vanta-bg",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
color: 0x10b981,
backgroundColor: 0x111827,
points: 12.00,
maxDistance: 20.00,
spacing: 15.00
});
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html> |