netshieldtest / index.html
blaze534's picture
voglio che fai anche le pagine features pricing testimonials faq login and get started - Initial Deployment
0dd689f verified
Raw History Blame Contribute Delete
44.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NetShield - Advanced Minecraft DDoS Protection</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #121212;
color: #E5E5E5;
}
h1, h2, h3, h4 {
font-family: 'Poppins', sans-serif;
}
.hero-gradient {
background: linear-gradient(135deg, #121212 0%, #003366 100%);
}
.feature-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 191, 255, 0.2);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-out;
}
.testimonial-slide {
flex: 0 0 100%;
transition: transform 0.5s ease;
}
@media (min-width: 768px) {
.testimonial-slide {
flex: 0 0 50%;
}
}
@media (min-width: 1024px) {
.testimonial-slide {
flex: 0 0 33.333%;
}
}
</style>
</head>
<body>
<!-- Navigation -->
<nav class="bg-gray-900 border-b border-gray-800 sticky top-0 z-50">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between h-16">
<div class="flex items-center">
<div class="flex-shrink-0">
<span class="text-blue-400 font-bold text-xl">NetShield</span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#home" class="text-blue-400 px-3 py-2 rounded-md text-sm font-medium">Home</a>
<a href="#features" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Features</a>
<a href="#pricing" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Pricing</a>
<a href="#testimonials" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Testimonials</a>
<a href="#faq" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">FAQ</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<a href="/login" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
<a href="#pricing" class="ml-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">Get Started</a>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button type="button" id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div class="hidden md:hidden" id="mobile-menu">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#home" class="text-blue-400 block px-3 py-2 rounded-md text-base font-medium">Home</a>
<a href="#features" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Features</a>
<a href="#pricing" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Pricing</a>
<a href="#testimonials" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Testimonials</a>
<a href="#faq" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium">FAQ</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5 space-x-3">
<a href="/login" class="w-full text-center text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Login</a>
<a href="#pricing" class="w-full text-center bg-blue-500 hover:bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium">Get Started</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<section id="home" class="hero-gradient py-20 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="flex flex-col md:flex-row items-center">
<div class="md:w-1/2 mb-10 md:mb-0">
<h1 class="text-4xl md:text-5xl font-bold leading-tight mb-4">Minecraft Protection, <span class="text-blue-400">Without Compromise</span></h1>
<p class="text-xl text-gray-300 mb-8">Complete DDoS defense, ultra-low latency, instant setup. The simplest alternative to TCPShield.</p>
<div class="flex flex-col sm:flex-row space-y-3 sm:space-y-0 sm:space-x-4">
<a href="#pricing" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md font-medium text-center">Start Free Trial</a>
<a href="#features" class="bg-gray-800 hover:bg-gray-700 text-white px-6 py-3 rounded-md font-medium text-center">View Plans</a>
</div>
</div>
<div class="md:w-1/2 flex justify-center">
<img src="https://via.placeholder.com/600x400/121212/00BFFF?text=NetShield+Dashboard" alt="NetShield Dashboard" class="rounded-lg shadow-xl border border-gray-800 max-w-full h-auto">
</div>
</div>
</div>
</section>
<!-- Why NetShield Section -->
<section id="features" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Why Choose NetShield?</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">The most advanced protection for your Minecraft server with features TCPShield can't match</p>
</div>
<div class="overflow-x-auto mb-16">
<table class="min-w-full bg-gray-800 rounded-lg overflow-hidden">
<thead class="bg-gray-700">
<tr>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Feature</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">NetShield</th>
<th class="px-6 py-4 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">TCPShield</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-700">
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Low Latency (20ms vs 45ms)</td>
<td class="px-6 py-4 whitespace-nowrap text-green-400"><i class="fas fa-check-circle"></i> Included</td>
<td class="px-6 py-4 whitespace-nowrap text-red-400"><i class="fas fa-times-circle"></i> Higher latency</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">1-Click Setup</td>
<td class="px-6 py-4 whitespace-nowrap text-green-400"><i class="fas fa-check-circle"></i> Yes</td>
<td class="px-6 py-4 whitespace-nowrap text-red-400"><i class="fas fa-times-circle"></i> Complex setup</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Real-time Analytics</td>
<td class="px-6 py-4 whitespace-nowrap text-green-400"><i class="fas fa-check-circle"></i> Full dashboard</td>
<td class="px-6 py-4 whitespace-nowrap text-red-400"><i class="fas fa-times-circle"></i> Limited</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Advanced Anti-Bot</td>
<td class="px-6 py-4 whitespace-nowrap text-green-400"><i class="fas fa-check-circle"></i> AI-powered</td>
<td class="px-6 py-4 whitespace-nowrap text-red-400"><i class="fas fa-times-circle"></i> Basic</td>
</tr>
<tr>
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-300">Global Anycast</td>
<td class="px-6 py-4 whitespace-nowrap text-green-400"><i class="fas fa-check-circle"></i> All plans</td>
<td class="px-6 py-4 whitespace-nowrap text-red-400"><i class="fas fa-times-circle"></i> Enterprise only</td>
</tr>
</tbody>
</table>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<div class="feature-card bg-gray-800 p-6 rounded-lg transition duration-300 hover:shadow-lg">
<div class="text-blue-400 mb-4">
<i class="fas fa-shield-alt text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Layer 4/7 DDoS Protection</h3>
<p class="text-gray-400">Advanced protection against all types of DDoS attacks, including SYN floods, UDP floods, and HTTP attacks.</p>
</div>
<div class="feature-card bg-gray-800 p-6 rounded-lg transition duration-300 hover:shadow-lg">
<div class="text-blue-400 mb-4">
<i class="fas fa-plug text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Proxy Compatibility</h3>
<p class="text-gray-400">Works seamlessly with BungeeCord, Velocity, and Waterfall. No configuration headaches.</p>
</div>
<div class="feature-card bg-gray-800 p-6 rounded-lg transition duration-300 hover:shadow-lg">
<div class="text-blue-400 mb-4">
<i class="fas fa-expand-arrows-alt text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Auto-Scaling</h3>
<p class="text-gray-400">Automatically scales to handle traffic spikes during launches or attacks without manual intervention.</p>
</div>
<div class="feature-card bg-gray-800 p-6 rounded-lg transition duration-300 hover:shadow-lg">
<div class="text-blue-400 mb-4">
<i class="fas fa-tachometer-alt text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Intuitive Dashboard</h3>
<p class="text-gray-400">Monitor attacks, traffic, and performance in real-time with our clean, informative dashboard.</p>
</div>
<div class="feature-card bg-gray-800 p-6 rounded-lg transition duration-300 hover:shadow-lg">
<div class="text-blue-400 mb-4">
<i class="fas fa-eye-slash text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">IP Protection</h3>
<p class="text-gray-400">Your real server IP stays completely hidden with our anti-leak technology.</p>
</div>
<div class="feature-card bg-gray-800 p-6 rounded-lg transition duration-300 hover:shadow-lg">
<div class="text-blue-400 mb-4">
<i class="fas fa-globe text-3xl"></i>
</div>
<h3 class="text-xl font-bold mb-2">Global Network</h3>
<p class="text-gray-400">20+ locations worldwide ensure low ping for all your players, no matter where they connect from.</p>
</div>
</div>
</div>
</section>
<!-- Global Coverage Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-800">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Global Coverage</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Our network spans the globe to provide the lowest possible latency to all your players</p>
</div>
<div class="relative">
<img src="https://via.placeholder.com/1200x600/121212/00BFFF?text=Global+Network+Map" alt="NetShield Global Network" class="w-full rounded-lg border border-gray-700">
<div class="absolute top-10 left-10 bg-blue-500 text-white px-3 py-1 rounded-full text-xs">North America</div>
<div class="absolute top-20 right-20 bg-blue-500 text-white px-3 py-1 rounded-full text-xs">Europe</div>
<div class="absolute bottom-20 left-1/3 bg-blue-500 text-white px-3 py-1 rounded-full text-xs">Asia</div>
<div class="absolute bottom-10 right-10 bg-blue-500 text-white px-3 py-1 rounded-full text-xs">Australia</div>
</div>
<div class="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<div class="h-2 w-2 rounded-full bg-green-400 mr-2"></div>
<span class="text-sm">New York</span>
</div>
<div class="text-xs text-gray-400 mt-1">3ms avg. latency</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<div class="h-2 w-2 rounded-full bg-green-400 mr-2"></div>
<span class="text-sm">London</span>
</div>
<div class="text-xs text-gray-400 mt-1">5ms avg. latency</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<div class="h-2 w-2 rounded-full bg-green-400 mr-2"></div>
<span class="text-sm">Singapore</span>
</div>
<div class="text-xs text-gray-400 mt-1">8ms avg. latency</div>
</div>
<div class="bg-gray-700 p-4 rounded-lg">
<div class="flex items-center">
<div class="h-2 w-2 rounded-full bg-green-400 mr-2"></div>
<span class="text-sm">Sydney</span>
</div>
<div class="text-xs text-gray-400 mt-1">10ms avg. latency</div>
</div>
</div>
</div>
</section>
<!-- Testimonials Section -->
<section id="testimonials" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">What Server Owners Say</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">Trusted by hundreds of Minecraft server networks worldwide</p>
</div>
<div class="relative overflow-hidden">
<div class="flex transition-transform duration-500" id="testimonial-slider">
<div class="testimonial-slide px-4">
<div class="bg-gray-800 p-6 rounded-lg h-full">
<div class="flex items-center mb-4">
<img src="https://via.placeholder.com/50/00BFFF/FFFFFF?text=MS" alt="User" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="font-bold">Mark S.</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-300">"After suffering constant DDoS attacks on our SMP, NetShield was a game-changer. Setup took literally 2 minutes and we've had zero downtime since."</p>
</div>
</div>
<div class="testimonial-slide px-4">
<div class="bg-gray-800 p-6 rounded-lg h-full">
<div class="flex items-center mb-4">
<img src="https://via.placeholder.com/50/00BFFF/FFFFFF?text=AJ" alt="User" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="font-bold">Alex J.</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</div>
</div>
</div>
<p class="text-gray-300">"The latency improvement over TCPShield is noticeable. Our EU players report 20-30ms better ping, and the dashboard gives us way more visibility."</p>
</div>
</div>
<div class="testimonial-slide px-4">
<div class="bg-gray-800 p-6 rounded-lg h-full">
<div class="flex items-center mb-4">
<img src="https://via.placeholder.com/50/00BFFF/FFFFFF?text=TP" alt="User" class="w-10 h-10 rounded-full mr-3">
<div>
<h4 class="font-bold">Tina P.</h4>
<div class="flex text-yellow-400">
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star-half-alt"></i>
</div>
</div>
</div>
<p class="text-gray-300">"We switched our 500+ player network to NetShield and couldn't be happier. The automatic scaling during our launch event handled everything perfectly."</p>
</div>
</div>
</div>
<button id="prev-testimonial" class="absolute left-0 top-1/2 transform -translate-y-1/2 bg-gray-800 hover:bg-gray-700 text-white p-2 rounded-full ml-2">
<i class="fas fa-chevron-left"></i>
</button>
<button id="next-testimonial" class="absolute right-0 top-1/2 transform -translate-y-1/2 bg-gray-800 hover:bg-gray-700 text-white p-2 rounded-full mr-2">
<i class="fas fa-chevron-right"></i>
</button>
</div>
<div class="flex justify-center mt-8 space-x-2">
<button class="testimonial-dot w-3 h-3 rounded-full bg-blue-500" data-index="0"></button>
<button class="testimonial-dot w-3 h-3 rounded-full bg-gray-700" data-index="1"></button>
<button class="testimonial-dot w-3 h-3 rounded-full bg-gray-700" data-index="2"></button>
</div>
</div>
</section>
<!-- Pricing Section -->
<section id="pricing" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-800">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Simple, Transparent Pricing</h2>
<p class="text-xl text-gray-400 max-w-3xl mx-auto">A plan for every server, from small SMPs to massive networks</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
<div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 transform transition hover:scale-105">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Free</h3>
<p class="text-gray-400 mb-6">For small servers testing the waters</p>
<div class="mb-6">
<span class="text-4xl font-bold">$0</span>
<span class="text-gray-400">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Basic DDoS Protection</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Up to 50 concurrent players</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Optimized Latency</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>Dedicated Anycast IP</span>
</li>
<li class="flex items-center text-gray-500">
<i class="fas fa-times text-red-400 mr-2"></i>
<span>API Access</span>
</li>
</ul>
<a href="/signup?plan=free" class="block w-full bg-gray-700 hover:bg-gray-600 text-white text-center py-3 rounded-md font-medium">Get Started</a>
</div>
</div>
<div class="bg-gray-900 rounded-lg overflow-hidden border-2 border-blue-500 transform transition hover:scale-105 relative">
<div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg">POPULAR</div>
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Premium</h3>
<p class="text-gray-400 mb-6">For growing networks that need reliability</p>
<div class="mb-6">
<span class="text-4xl font-bold">$9.99</span>
<span class="text-gray-400">/month</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Advanced DDoS Protection</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Up to 500 concurrent players</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Optimized Latency</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Dedicated Anycast IP</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>API Access</span>
</li>
</ul>
<a href="/signup?plan=premium" class="block w-full bg-blue-500 hover:bg-blue-600 text-white text-center py-3 rounded-md font-medium">Start 7-Day Free Trial</a>
</div>
</div>
<div class="bg-gray-900 rounded-lg overflow-hidden border border-gray-700 transform transition hover:scale-105">
<div class="p-6">
<h3 class="text-2xl font-bold mb-2">Enterprise</h3>
<p class="text-gray-400 mb-6">For large networks with custom needs</p>
<div class="mb-6">
<span class="text-4xl font-bold">Custom</span>
</div>
<ul class="space-y-3 mb-8">
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Enterprise-grade Protection</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Unlimited concurrent players</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Ultra-Low Latency</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Multiple Anycast IPs</span>
</li>
<li class="flex items-center">
<i class="fas fa-check text-green-400 mr-2"></i>
<span>Priority Support & API</span>
</li>
</ul>
<a href="/contact" class="block w-full bg-gray-700 hover:bg-gray-600 text-white text-center py-3 rounded-md font-medium">Contact Sales</a>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-xl">Enterprise security. Community pricing.</p>
<a href="/contact" class="inline-block mt-4 text-blue-400 hover:text-blue-300 font-medium">Need something custom? Let's talk <i class="fas fa-arrow-right ml-1"></i></a>
</div>
</div>
</section>
<!-- FAQ Section -->
<section id="faq" class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
<div class="max-w-4xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold mb-4">Frequently Asked Questions</h2>
<p class="text-xl text-gray-400">Everything you need to know about NetShield</p>
</div>
<div class="space-y-4">
<div class="border border-gray-700 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 text-left">
<span class="font-medium">How do I install NetShield on my server?</span>
<i class="fas fa-chevron-down transition-transform duration-300"></i>
</button>
<div class="accordion-content bg-gray-800">
<div class="p-4 pt-0 text-gray-300">
<p>NetShield offers a simple 1-click setup for most server types:</p>
<ol class="list-decimal pl-5 mt-2 space-y-1">
<li>Login to your NetShield dashboard</li>
<li>Click "Add Server" and select your server type (BungeeCord, Velocity, etc.)</li>
<li>Download our plugin or proxy configuration</li>
<li>Place it in your server's plugins folder (or config for proxies)</li>
<li>Restart your server - protection is now active!</li>
</ol>
<p class="mt-2">Our setup wizard will guide you through each step with detailed instructions.</p>
</div>
</div>
</div>
<div class="border border-gray-700 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 text-left">
<span class="font-medium">What Minecraft versions does NetShield support?</span>
<i class="fas fa-chevron-down transition-transform duration-300"></i>
</button>
<div class="accordion-content bg-gray-800">
<div class="p-4 pt-0 text-gray-300">
<p>NetShield supports all modern Minecraft versions from 1.7.x through to the latest release. We maintain compatibility with:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li>All BungeeCord and Waterfall versions</li>
<li>Velocity 1.0.0 and above</li>
<li>Vanilla, Spigot, Paper, and most forks</li>
<li>Modded servers (with some configuration)</li>
</ul>
<p class="mt-2">If you're running an older or custom version, contact our support team for assistance.</p>
</div>
</div>
</div>
<div class="border border-gray-700 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 text-left">
<span class="font-medium">Is NetShield compatible with anti-bot plugins?</span>
<i class="fas fa-chevron-down transition-transform duration-300"></i>
</button>
<div class="accordion-content bg-gray-800">
<div class="p-4 pt-0 text-gray-300">
<p>Yes! NetShield works seamlessly with most popular anti-bot solutions including:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li>AdvancedAntiBot</li>
<li>nAntiBot</li>
<li>AntiBotDeluxe</li>
<li>And other similar plugins</li>
</ul>
<p class="mt-2">Our protection actually enhances these solutions by filtering out malicious traffic before it even reaches your anti-bot systems.</p>
</div>
</div>
</div>
<div class="border border-gray-700 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 text-left">
<span class="font-medium">What's the difference between TCPShield and NetShield?</span>
<i class="fas fa-chevron-down transition-transform duration-300"></i>
</button>
<div class="accordion-content bg-gray-800">
<div class="p-4 pt-0 text-gray-300">
<p>While both services offer DDoS protection, NetShield provides several key advantages:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li><strong>Lower latency:</strong> Our global network is optimized for gaming (20ms vs 45ms average)</li>
<li><strong>Easier setup:</strong> 1-click configuration vs manual proxy setup</li>
<li><strong>Better dashboard:</strong> Real-time analytics and attack visualization</li>
<li><strong>Advanced features:</strong> AI-powered bot detection, automatic scaling, IP leak protection</li>
<li><strong>Global Anycast:</strong> Included in all paid plans (TCPShield reserves this for enterprise)</li>
</ul>
<p class="mt-2">Plus, we're built by Minecraft server owners who understand your specific needs.</p>
</div>
</div>
</div>
<div class="border border-gray-700 rounded-lg overflow-hidden">
<button class="faq-question w-full flex justify-between items-center p-4 bg-gray-800 hover:bg-gray-700 text-left">
<span class="font-medium">Can I use NetShield with modded servers?</span>
<i class="fas fa-chevron-down transition-transform duration-300"></i>
</button>
<div class="accordion-content bg-gray-800">
<div class="p-4 pt-0 text-gray-300">
<p>Absolutely! NetShield works with most modded server setups including:</p>
<ul class="list-disc pl-5 mt-2 space-y-1">
<li>Forge servers</li>
<li>Fabric servers</li>
<li>Sponge servers</li>
<li>Custom modpacks</li>
</ul>
<p class="mt-2">The setup process is slightly different than for vanilla servers:</p>
<ol class="list-decimal pl-5 mt-2 space-y-1">
<li>Install our proxy connector mod</li>
<li>Configure the connection details from your dashboard</li>
<li>Set up port forwarding as directed</li>
</ol>
<p class="mt-2">Our support team can guide you through any mod-specific configuration needs.</p>
</div>
</div>
</div>
</div>
<div class="mt-12 text-center">
<p class="text-lg">Still have questions?</p>
<a href="/contact" class="inline-block mt-4 bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md font-medium">Contact Our Support Team</a>
</div>
</div>
</section>
<!-- CTA Section -->
<section class="py-20 px-4 sm:px-6 lg:px-8 bg-gray-800">
<div class="max-w-4xl mx-auto text-center">
<h2 class="text-3xl font-bold mb-6">Ready to Protect Your Server?</h2>
<p class="text-xl text-gray-400 mb-8">Join thousands of server owners who trust NetShield for unbeatable protection and performance.</p>
<div class="flex flex-col sm:flex-row justify-center space-y-3 sm:space-y-0 sm:space-x-4">
<a href="/signup" class="bg-blue-500 hover:bg-blue-600 text-white px-8 py-4 rounded-md font-medium text-lg">Start Free Trial</a>
<a href="/contact" class="bg-gray-700 hover:bg-gray-600 text-white px-8 py-4 rounded-md font-medium text-lg">Contact Sales</a>
</div>
</div>
</section>
<!-- Footer -->
<footer class="bg-gray-900 pt-16 pb-8 px-4 sm:px-6 lg:px-8">
<div class="max-w-7xl mx-auto">
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">NetShield</h3>
<p class="text-gray-400 mb-4">The simplest, fastest Minecraft DDoS protection alternative to TCPShield.</p>
<div class="flex space-x-4">
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-discord"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-twitter"></i></a>
<a href="#" class="text-gray-400 hover:text-blue-400"><i class="fab fa-github"></i></a>
</div>
</div>
<div>
<h4 class="font-bold mb-4">Product</h4>
<ul class="space-y-2">
<li><a href="#features" class="text-gray-400 hover:text-blue-400">Features</a></li>
<li><a href="#pricing" class="text-gray-400 hover:text-blue-400">Pricing</a></li>
<li><a href="/status" class="text-gray-400 hover:text-blue-400">Status</a></li>
<li><a href="/changelog" class="text-gray-400 hover:text-blue-400">Changelog</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Resources</h4>
<ul class="space-y-2">
<li><a href="/blog" class="text-gray-400 hover:text-blue-400">Blog</a></li>
<li><a href="/docs" class="text-gray-400 hover:text-blue-400">Documentation</a></li>
<li><a href="/guides" class="text-gray-400 hover:text-blue-400">Guides</a></li>
<li><a href="/community" class="text-gray-400 hover:text-blue-400">Community</a></li>
</ul>
</div>
<div>
<h4 class="font-bold mb-4">Company</h4>
<ul class="space-y-2">
<li><a href="/about" class="text-gray-400 hover:text-blue-400">About</a></li>
<li><a href="/careers" class="text-gray-400 hover:text-blue-400">Careers</a></li>
<li><a href="/legal" class="text-gray-400 hover:text-blue-400">Legal</a></li>
<li><a href="/contact" class="text-gray-400 hover:text-blue-400">Contact</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
<p class="text-gray-500 mb-4 md:mb-0">© 2023 NetShield. All rights reserved.</p>
<div class="flex space-x-6">
<a href="/privacy" class="text-gray-500 hover:text-blue-400 text-sm">Privacy Policy</a>
<a href="/terms" class="text-gray-500 hover:text-blue-400 text-sm">Terms of Service</a>
<a href="/cookies" class="text-gray-500 hover:text-blue-400 text-sm">Cookie Policy</a>
</div>
</div>
</div>
</footer>
<script>
// Mobile menu toggle
document.getElementById('mobile-menu-button').addEventListener('click', function() {
const menu = document.getElementById('mobile-menu');
menu.classList.toggle('hidden');
});
// FAQ accordion
const faqQuestions = document.querySelectorAll('.faq-question');
faqQuestions.forEach(question => {
question.addEventListener('click', () => {
const answer = question.nextElementSibling;
const icon = question.querySelector('i');
// Toggle the answer
if (answer.style.maxHeight) {
answer.style.maxHeight = null;
icon.style.transform = 'rotate(0deg)';
} else {
answer.style.maxHeight = answer.scrollHeight + 'px';
icon.style.transform = 'rotate(180deg)';
}
// Close other open questions
faqQuestions.forEach(q => {
if (q !== question) {
q.nextElementSibling.style.maxHeight = null;
q.querySelector('i').style.transform = 'rotate(0deg)';
}
});
});
});
// Testimonial slider
let currentTestimonial = 0;
const testimonials = document.querySelectorAll('.testimonial-slide');
const dots = document.querySelectorAll('.testimonial-dot');
const slider = document.getElementById('testimonial-slider');
function showTestimonial(index) {
testimonials.forEach((testimonial, i) => {
testimonial.style.display = i === index ? 'block' : 'none';
});
dots.forEach((dot, i) => {
dot.classList.toggle('bg-blue-500', i === index);
dot.classList.toggle('bg-gray-700', i !== index);
});
currentTestimonial = index;
}
// Initialize
testimonials.forEach((testimonial, i) => {
testimonial.style.display = i === 0 ? 'block' : 'none';
});
// Navigation buttons
document.getElementById('prev-testimonial').addEventListener('click', () => {
const newIndex = (currentTestimonial - 1 + testimonials.length) % testimonials.length;
showTestimonial(newIndex);
});
document.getElementById('next-testimonial').addEventListener('click', () => {
const newIndex = (currentTestimonial + 1) % testimonials.length;
showTestimonial(newIndex);
});
// Dot navigation
dots.forEach(dot => {
dot.addEventListener('click', () => {
const index = parseInt(dot.getAttribute('data-index'));
showTestimonial(index);
});
});
// Auto-rotate testimonials
setInterval(() => {
const newIndex = (currentTestimonial + 1) % testimonials.length;
showTestimonial(newIndex);
}, 5000);
</script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=blaze534/netshieldtest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>