hack / index.html
ZombieCleric94's picture
add an onsite terminal - Initial Deployment
ebbaf5d verified
Raw History Blame Contribute Delete
80.8 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HackLab - Ethical Hacking Platform</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>
/* Custom animations */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.animate-pulse-slow {
animation: pulse 3s infinite;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #1e293b;
}
::-webkit-scrollbar-thumb {
background: #4f46e5;
border-radius: 4px;
}
/* Challenge card hover effect */
.challenge-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);
}
/* Terminal styling */
.terminal {
background-color: #1e1e1e;
color: #33ff33;
font-family: 'Courier New', monospace;
border-radius: 0.5rem;
position: relative;
}
.terminal-header {
background-color: #333;
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
padding: 0.5rem 1rem;
display: flex;
align-items: center;
}
.terminal-btn {
width: 12px;
height: 12px;
border-radius: 50%;
margin-right: 6px;
}
.terminal-content {
padding: 1rem;
overflow-y: auto;
max-height: 300px;
}
</style>
</head>
<body class="bg-gray-900 text-gray-100 min-h-screen">
<!-- Navigation -->
<nav class="bg-gray-800 border-b border-gray-700 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-indigo-500 font-bold text-xl">Hack<span class="text-white">Lab</span></span>
</div>
<div class="hidden md:block">
<div class="ml-10 flex items-baseline space-x-4">
<a href="#" class="bg-gray-900 text-white px-3 py-2 rounded-md text-sm font-medium">Dashboard</a>
<a href="#challenges" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Challenges</a>
<a href="#leaderboard" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Leaderboard</a>
<a href="#training" class="text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-sm font-medium">Training</a>
</div>
</div>
</div>
<div class="hidden md:block">
<div class="ml-4 flex items-center md:ml-6">
<div class="relative">
<button id="notifications-btn" class="p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<i class="fas fa-bell h-6 w-6"></i>
<span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500 animate-pulse-slow"></span>
</button>
</div>
<div class="ml-3 relative">
<div>
<button id="user-menu-btn" class="max-w-xs bg-gray-800 rounded-full flex items-center text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-expanded="false" aria-haspopup="true">
<span class="sr-only">Open user menu</span>
<img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</button>
</div>
<div id="user-menu" class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none hidden" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-btn">
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Your Profile</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Settings</a>
<a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">Sign out</a>
</div>
</div>
<button class="ml-4 bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">
Upgrade <i class="fas fa-crown ml-1"></i>
</button>
</div>
</div>
<div class="-mr-2 flex md:hidden">
<button id="mobile-menu-btn" type="button" class="bg-gray-800 inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" aria-controls="mobile-menu" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<i class="fas fa-bars h-6 w-6"></i>
</button>
</div>
</div>
</div>
<!-- Mobile menu -->
<div id="mobile-menu" class="md:hidden hidden">
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
<a href="#" class="bg-gray-900 text-white block px-3 py-2 rounded-md text-base font-medium">Dashboard</a>
<a href="#challenges" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Challenges</a>
<a href="#leaderboard" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Leaderboard</a>
<a href="#training" class="text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium">Training</a>
</div>
<div class="pt-4 pb-3 border-t border-gray-700">
<div class="flex items-center px-5">
<div class="flex-shrink-0">
<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
</div>
<div class="ml-3">
<div class="text-base font-medium leading-none text-white">John Doe</div>
<div class="text-sm font-medium leading-none text-gray-400">john@example.com</div>
</div>
<button class="ml-auto bg-gray-800 flex-shrink-0 p-1 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white">
<span class="sr-only">View notifications</span>
<i class="fas fa-bell h-6 w-6"></i>
</button>
</div>
<div class="mt-3 px-2 space-y-1">
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Your Profile</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Settings</a>
<a href="#" class="block px-3 py-2 rounded-md text-base font-medium text-gray-400 hover:text-white hover:bg-gray-700">Sign out</a>
</div>
</div>
</div>
</nav>
<!-- Hero Section -->
<header class="bg-gradient-to-r from-gray-900 to-indigo-900 py-20">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h1 class="text-4xl tracking-tight font-extrabold text-white sm:text-5xl md:text-6xl">
<span class="block">Master Ethical Hacking</span>
<span class="block text-indigo-400">Through Real Challenges</span>
</h1>
<p class="mt-3 text-base text-gray-300 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Join thousands of security enthusiasts in our gamified platform. Solve challenges, earn badges, and climb the leaderboard.
</p>
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 md:py-4 md:text-lg md:px-10">
Get Started
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-300 bg-indigo-900 hover:bg-indigo-800 md:py-4 md:text-lg md:px-10">
<i class="fas fa-play-circle mr-2"></i> Watch Demo
</a>
</div>
</div>
</div>
</div>
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md">
<div class="terminal">
<div class="terminal-header">
<span class="terminal-btn bg-red-500"></span>
<span class="terminal-btn bg-yellow-500"></span>
<span class="terminal-btn bg-green-500"></span>
<span class="text-white text-sm ml-2">root@hacklab:~</span>
</div>
<div class="terminal-content">
<p class="text-green-400">$ nmap -sV 192.168.1.100</p>
<p>Starting Nmap 7.80 ( https://nmap.org )</p>
<p>Nmap scan report for target.hacklab (192.168.1.100)</p>
<p>Host is up (0.045s latency).</p>
<p class="mt-2">PORT STATE SERVICE VERSION</p>
<p>22/tcp open ssh OpenSSH 7.6p1</p>
<p>80/tcp open http Apache httpd 2.4.29</p>
<p>3306/tcp open mysql MySQL 5.7.29</p>
<p class="mt-2">$ hydra -l admin -P wordlist.txt ftp://192.168.1.100</p>
<p>[DATA] attacking ftp://192.168.1.100:21/</p>
<p>[21][ftp] host: 192.168.1.100 login: admin password: s3cr3t</p>
<p class="text-green-400 mt-2">1 of 1 target successfully completed, 1 valid password found</p>
</div>
</div>
</div>
</div>
</div>
</div>
</header>
<!-- Stats Section -->
<div class="bg-gray-800 py-12">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Community Growth</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
Join our thriving security community
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<div class="bg-gray-700 rounded-lg p-6 text-center">
<dt class="text-5xl font-extrabold text-indigo-400">25,000+</dt>
<dd class="mt-1 text-lg font-medium text-gray-300">Security Enthusiasts</dd>
</div>
<div class="bg-gray-700 rounded-lg p-6 text-center">
<dt class="text-5xl font-extrabold text-indigo-400">1,200+</dt>
<dd class="mt-1 text-lg font-medium text-gray-300">Challenges</dd>
</div>
<div class="bg-gray-700 rounded-lg p-6 text-center">
<dt class="text-5xl font-extrabold text-indigo-400">500+</dt>
<dd class="mt-1 text-lg font-medium text-gray-300">Corporate Partners</dd>
</div>
<div class="bg-gray-700 rounded-lg p-6 text-center">
<dt class="text-5xl font-extrabold text-indigo-400">98%</dt>
<dd class="mt-1 text-lg font-medium text-gray-300">Satisfaction Rate</dd>
</div>
</div>
</div>
</div>
</div>
<!-- Challenges Section -->
<section id="challenges" class="py-12 bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Practice</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
Hands-on Security Challenges
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
Test your skills with our realistic security challenges across various categories.
</p>
</div>
<div class="mt-10">
<div class="flex justify-center mb-8">
<div class="inline-flex rounded-md shadow-sm" role="group">
<button type="button" class="px-4 py-2 text-sm font-medium rounded-l-lg bg-indigo-600 text-white">
All
</button>
<button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600">
Web
</button>
<button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600">
Binary
</button>
<button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600">
Crypto
</button>
<button type="button" class="px-4 py-2 text-sm font-medium bg-gray-700 text-gray-300 hover:bg-gray-600">
Forensics
</button>
<button type="button" class="px-4 py-2 text-sm font-medium rounded-r-lg bg-gray-700 text-gray-300 hover:bg-gray-600">
Network
</button>
</div>
</div>
<div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
<!-- Challenge Card 1 -->
<div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out">
<div class="p-5">
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-900 text-indigo-300">
Web Security
</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<span class="ml-1">4.8</span>
</div>
</div>
<h3 class="mt-3 text-xl font-bold text-white">SQL Injection Mastery</h3>
<p class="mt-2 text-gray-300">Exploit SQL injection vulnerabilities to extract sensitive data from a vulnerable web application.</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-shield text-indigo-400"></i>
<span class="ml-2 text-sm text-gray-400">1,245 solvers</span>
</div>
<span class="text-sm font-medium text-indigo-400">Medium</span>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400"></i>
<span class="ml-2 text-sm text-white">150 XP</span>
</div>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
Start Challenge
</button>
</div>
</div>
<!-- Challenge Card 2 -->
<div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out">
<div class="p-5">
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-900 text-red-300">
Binary Exploitation
</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<span class="ml-1">4.9</span>
</div>
</div>
<h3 class="mt-3 text-xl font-bold text-white">Buffer Overflow Basics</h3>
<p class="mt-2 text-gray-300">Exploit a buffer overflow vulnerability in a C program to gain remote code execution.</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-shield text-indigo-400"></i>
<span class="ml-2 text-sm text-gray-400">892 solvers</span>
</div>
<span class="text-sm font-medium text-orange-400">Hard</span>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400"></i>
<span class="ml-2 text-sm text-white">250 XP</span>
</div>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
Start Challenge
</button>
</div>
</div>
<!-- Challenge Card 3 -->
<div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out">
<div class="p-5">
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-900 text-green-300">
Cryptography
</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<span class="ml-1">4.5</span>
</div>
</div>
<h3 class="mt-3 text-xl font-bold text-white">RSA Implementation Flaw</h3>
<p class="mt-2 text-gray-300">Break a custom RSA implementation by exploiting mathematical weaknesses in the key generation.</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-shield text-indigo-400"></i>
<span class="ml-2 text-sm text-gray-400">1,024 solvers</span>
</div>
<span class="text-sm font-medium text-green-400">Easy</span>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400"></i>
<span class="ml-2 text-sm text-white">100 XP</span>
</div>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
Start Challenge
</button>
</div>
</div>
<!-- Challenge Card 4 (Premium) -->
<div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out relative">
<div class="absolute top-0 right-0 bg-indigo-600 text-white px-2 py-1 text-xs font-bold rounded-bl-lg">
PREMIUM
</div>
<div class="p-5">
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-900 text-purple-300">
Network Security
</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<span class="ml-1">4.7</span>
</div>
</div>
<h3 class="mt-3 text-xl font-bold text-white">MITM Attack Simulation</h3>
<p class="mt-2 text-gray-300">Perform a man-in-the-middle attack on a simulated network to intercept and modify traffic.</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-shield text-indigo-400"></i>
<span class="ml-2 text-sm text-gray-400">Premium only</span>
</div>
<span class="text-sm font-medium text-orange-400">Hard</span>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400"></i>
<span class="ml-2 text-sm text-white">300 XP</span>
</div>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
Upgrade to Access
</button>
</div>
</div>
<!-- Challenge Card 5 -->
<div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out">
<div class="p-5">
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-900 text-blue-300">
Forensics
</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<span class="ml-1">4.6</span>
</div>
</div>
<h3 class="mt-3 text-xl font-bold text-white">Memory Dump Analysis</h3>
<p class="mt-2 text-gray-300">Analyze a memory dump to find evidence of malicious activity and extract hidden data.</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-shield text-indigo-400"></i>
<span class="ml-2 text-sm text-gray-400">756 solvers</span>
</div>
<span class="text-sm font-medium text-indigo-400">Medium</span>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400"></i>
<span class="ml-2 text-sm text-white">200 XP</span>
</div>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
Start Challenge
</button>
</div>
</div>
<!-- Challenge Card 6 -->
<div class="challenge-card bg-gray-800 rounded-lg overflow-hidden shadow-lg transition duration-300 ease-in-out">
<div class="p-5">
<div class="flex items-center justify-between">
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-pink-900 text-pink-300">
Reverse Engineering
</span>
<div class="flex items-center text-yellow-400">
<i class="fas fa-star"></i>
<span class="ml-1">4.9</span>
</div>
</div>
<h3 class="mt-3 text-xl font-bold text-white">Crackme Challenge</h3>
<p class="mt-2 text-gray-300">Reverse engineer a binary to understand its serial validation algorithm and bypass it.</p>
<div class="mt-4 flex items-center justify-between">
<div class="flex items-center">
<i class="fas fa-user-shield text-indigo-400"></i>
<span class="ml-2 text-sm text-gray-400">1,102 solvers</span>
</div>
<span class="text-sm font-medium text-orange-400">Hard</span>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-coins text-yellow-400"></i>
<span class="ml-2 text-sm text-white">250 XP</span>
</div>
<button class="px-3 py-1 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
Start Challenge
</button>
</div>
</div>
</div>
<div class="mt-10 text-center">
<button class="px-6 py-3 border border-indigo-600 text-indigo-400 font-medium rounded-md hover:bg-indigo-900 hover:text-white transition duration-150">
View All Challenges
</button>
</div>
</div>
</div>
</section>
<!-- Leaderboard Section -->
<section id="leaderboard" class="py-12 bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Competition</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
Top Hackers Leaderboard
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
See how you stack up against the best security researchers.
</p>
</div>
<div class="mt-10">
<div class="bg-gray-700 rounded-lg shadow overflow-hidden">
<div class="px-4 py-5 sm:px-6 bg-gray-900 border-b border-gray-600">
<h3 class="text-lg leading-6 font-medium text-white">
Monthly Rankings
</h3>
<p class="mt-1 text-sm text-gray-300">
Updated in real-time as users solve challenges
</p>
</div>
<div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-600">
<thead class="bg-gray-700">
<tr>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Rank
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Hacker
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Points
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Challenges
</th>
<th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">
Badges
</th>
</tr>
</thead>
<tbody class="bg-gray-800 divide-y divide-gray-600">
<!-- Top 1 -->
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-yellow-500 rounded-full flex items-center justify-center text-white font-bold">
1
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-white">
cyberqueen
</div>
<div class="text-sm text-gray-300">
@anna_hacker
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white font-bold">12,450</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white">187</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex space-x-1">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200">
Elite
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200">
Pwner
</span>
</div>
</td>
</tr>
<!-- Top 2 -->
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-gray-300 rounded-full flex items-center justify-center text-gray-800 font-bold">
2
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-white">
rootkit
</div>
<div class="text-sm text-gray-300">
@mike_sec
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white font-bold">11,870</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white">175</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex space-x-1">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200">
Elite
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-900 text-blue-200">
Crypto
</span>
</div>
</td>
</tr>
<!-- Top 3 -->
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 bg-amber-600 rounded-full flex items-center justify-center text-white font-bold">
3
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-white">
byte_bender
</div>
<div class="text-sm text-gray-300">
@lisa_reverse
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white font-bold">11,250</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white">168</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex space-x-1">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200">
Elite
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-900 text-green-200">
Web
</span>
</div>
</td>
</tr>
<!-- Top 4 -->
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full flex items-center justify-center text-white font-bold bg-gray-700">
4
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-white">
shellshock
</div>
<div class="text-sm text-gray-300">
@david_pentest
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white font-bold">10,980</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white">162</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex space-x-1">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200">
Elite
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-900 text-red-200">
Pwner
</span>
</div>
</td>
</tr>
<!-- Top 5 -->
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full flex items-center justify-center text-white font-bold bg-gray-700">
5
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10">
<img class="h-10 w-10 rounded-full" src="https://randomuser.me/api/portraits/women/90.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-sm font-medium text-white">
sql_killer
</div>
<div class="text-sm text-gray-300">
@sarah_db
</div>
</div>
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white font-bold">10,750</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-white">159</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex space-x-1">
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-900 text-purple-200">
Elite
</span>
<span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-indigo-900 text-indigo-200">
Network
</span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-6 flex justify-center">
<div class="bg-gray-700 rounded-lg p-4 w-full max-w-md">
<div class="flex items-center">
<div class="flex-shrink-0 h-10 w-10 rounded-full bg-indigo-900 flex items-center justify-center text-indigo-300 font-bold">
42
</div>
<div class="ml-4">
<div class="text-sm font-medium text-white">
Your current rank
</div>
<div class="text-sm text-gray-300">
8,240 points • 124 challenges solved
</div>
</div>
<button class="ml-auto px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white text-sm font-medium rounded-md">
View Profile
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Training Section -->
<section id="training" class="py-12 bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Learning Paths</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
Structured Security Training
</p>
<p class="mt-4 max-w-2xl text-xl text-gray-300 lg:mx-auto">
Follow our guided learning paths to systematically build your skills.
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Training Path 1 -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="p-5">
<div class="flex justify-center">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
<i class="fas fa-lock"></i>
</div>
</div>
<h3 class="mt-4 text-xl text-center font-bold text-white">Web Security Fundamentals</h3>
<p class="mt-2 text-base text-gray-300 text-center">
Master the OWASP Top 10 vulnerabilities and modern web defenses.
</p>
<div class="mt-6">
<div class="flex justify-between text-sm text-gray-400">
<span>12 Modules</span>
<span>8-10 hours</span>
</div>
<div class="mt-2 w-full bg-gray-700 rounded-full h-2.5">
<div class="bg-indigo-600 h-2.5 rounded-full" style="width: 45%"></div>
</div>
<div class="mt-1 text-xs text-right text-gray-400">45% completed</div>
</div>
<div class="mt-6">
<h4 class="text-sm font-medium text-white">Skills you'll gain:</h4>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">SQL Injection</span>
<span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">XSS</span>
<span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">CSRF</span>
<span class="px-2 py-1 text-xs rounded bg-indigo-900 text-indigo-200">JWT</span>
</div>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 text-center">
<button class="text-indigo-400 hover:text-indigo-300 text-sm font-medium">
Continue Learning <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Training Path 2 -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg">
<div class="p-5">
<div class="flex justify-center">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-red-500 text-white">
<i class="fas fa-bug"></i>
</div>
</div>
<h3 class="mt-4 text-xl text-center font-bold text-white">Binary Exploitation</h3>
<p class="mt-2 text-base text-gray-300 text-center">
Learn stack overflows, ROP chains, and modern binary protections.
</p>
<div class="mt-6">
<div class="flex justify-between text-sm text-gray-400">
<span>15 Modules</span>
<span>12-15 hours</span>
</div>
<div class="mt-2 w-full bg-gray-700 rounded-full h-2.5">
<div class="bg-red-600 h-2.5 rounded-full" style="width: 20%"></div>
</div>
<div class="mt-1 text-xs text-right text-gray-400">20% completed</div>
</div>
<div class="mt-6">
<h4 class="text-sm font-medium text-white">Skills you'll gain:</h4>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">Buffer Overflows</span>
<span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">ROP Chains</span>
<span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">ASLR Bypass</span>
<span class="px-2 py-1 text-xs rounded bg-red-900 text-red-200">Shellcoding</span>
</div>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 text-center">
<button class="text-red-400 hover:text-red-300 text-sm font-medium">
Continue Learning <i class="fas fa-arrow-right ml-1"></i>
</button>
</div>
</div>
<!-- Training Path 3 (Premium) -->
<div class="bg-gray-800 rounded-lg overflow-hidden shadow-lg relative">
<div class="absolute top-0 right-0 bg-indigo-600 text-white px-2 py-1 text-xs font-bold rounded-bl-lg">
PREMIUM
</div>
<div class="p-5">
<div class="flex justify-center">
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
<i class="fas fa-network-wired"></i>
</div>
</div>
<h3 class="mt-4 text-xl text-center font-bold text-white">Advanced Network Attacks</h3>
<p class="mt-2 text-base text-gray-300 text-center">
MITM, VLAN hopping, VPN exploitation, and enterprise network attacks.
</p>
<div class="mt-6">
<div class="flex justify-between text-sm text-gray-400">
<span>18 Modules</span>
<span>15-20 hours</span>
</div>
<div class="mt-2 w-full bg-gray-700 rounded-full h-2.5">
<div class="bg-purple-600 h-2.5 rounded-full" style="width: 0%"></div>
</div>
<div class="mt-1 text-xs text-right text-gray-400">Not started</div>
</div>
<div class="mt-6">
<h4 class="text-sm font-medium text-white">Skills you'll gain:</h4>
<div class="mt-2 flex flex-wrap gap-2">
<span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">MITM</span>
<span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">VPN Exploits</span>
<span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">802.1Q</span>
<span class="px-2 py-1 text-xs rounded bg-purple-900 text-purple-200">DNS Spoofing</span>
</div>
</div>
</div>
<div class="px-5 py-3 bg-gray-700 border-t border-gray-600 text-center">
<button class="text-purple-400 hover:text-purple-300 text-sm font-medium">
Upgrade to Access <i class="fas fa-crown ml-1"></i>
</button>
</div>
</div>
</div>
<div class="mt-10 text-center">
<button class="px-6 py-3 border border-indigo-600 text-indigo-400 font-medium rounded-md hover:bg-indigo-900 hover:text-white transition duration-150">
Browse All Learning Paths
</button>
</div>
</div>
</div>
</section>
<!-- Corporate Training Section -->
<section class="py-12 bg-indigo-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:grid lg:grid-cols-12 lg:gap-8">
<div class="sm:text-center md:max-w-2xl md:mx-auto lg:col-span-6 lg:text-left">
<h2 class="text-3xl tracking-tight font-extrabold text-white sm:text-4xl">
<span class="block">Enterprise Security Training</span>
</h2>
<p class="mt-3 text-base text-indigo-200 sm:mt-5 sm:text-lg sm:max-w-xl sm:mx-auto md:mt-5 md:text-xl lg:mx-0">
Equip your team with hands-on security skills through our corporate training programs. Customizable learning paths, reporting dashboards, and dedicated support.
</p>
<div class="mt-8 sm:max-w-lg sm:mx-auto sm:text-center lg:text-left lg:mx-0">
<div class="mt-5 sm:mt-8 sm:flex sm:justify-center lg:justify-start">
<div class="rounded-md shadow">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10">
Request Demo
</a>
</div>
<div class="mt-3 sm:mt-0 sm:ml-3">
<a href="#" class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-700 hover:bg-indigo-800 md:py-4 md:text-lg md:px-10">
Download Brochure
</a>
</div>
</div>
</div>
</div>
<div class="mt-12 relative sm:max-w-lg sm:mx-auto lg:mt-0 lg:max-w-none lg:mx-0 lg:col-span-6 lg:flex lg:items-center">
<div class="relative mx-auto w-full rounded-lg shadow-lg lg:max-w-md overflow-hidden">
<div class="bg-gray-800 p-6">
<h3 class="text-lg font-medium text-white">Corporate Plan Features</h3>
<ul class="mt-4 space-y-3">
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<p class="ml-3 text-base text-gray-300">Custom team learning paths</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<p class="ml-3 text-base text-gray-300">Progress tracking dashboard</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<p class="ml-3 text-base text-gray-300">Private challenges and labs</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<p class="ml-3 text-base text-gray-300">Dedicated support</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<p class="ml-3 text-base text-gray-300">API integration</p>
</li>
<li class="flex items-start">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<p class="ml-3 text-base text-gray-300">Custom certification</p>
</li>
</ul>
<div class="mt-6 bg-gray-700 rounded-lg p-4">
<h4 class="text-sm font-medium text-white">Trusted by security teams at:</h4>
<div class="mt-3 grid grid-cols-3 gap-4">
<div class="col-span-1 flex justify-center">
<img class="h-8 opacity-70 hover:opacity-100" src="https://logo.clearbit.com/microsoft.com" alt="Microsoft">
</div>
<div class="col-span-1 flex justify-center">
<img class="h-8 opacity-70 hover:opacity-100" src="https://logo.clearbit.com/ibm.com" alt="IBM">
</div>
<div class="col-span-1 flex justify-center">
<img class="h-8 opacity-70 hover:opacity-100" src="https://logo.clearbit.com/paypal.com" alt="PayPal">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Pricing Section -->
<section class="py-12 bg-gray-900">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="sm:flex sm:flex-col sm:align-center">
<h2 class="text-3xl tracking-tight font-extrabold text-white sm:text-4xl text-center">
Simple, transparent pricing
</h2>
<p class="mt-5 text-xl text-gray-300 text-center max-w-3xl mx-auto">
Choose the plan that fits your needs. Cancel anytime.
</p>
<div class="relative mt-6 bg-gray-800 rounded-lg p-0.5 flex self-center">
<button type="button" class="relative bg-gray-700 border-gray-800 rounded-md shadow-sm py-2 text-sm font-medium text-white whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8">
Monthly billing
</button>
<button type="button" class="ml-0.5 relative border border-transparent rounded-md py-2 text-sm font-medium text-gray-300 whitespace-nowrap focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:z-10 sm:w-auto sm:px-8">
Yearly billing
</button>
</div>
</div>
<div class="mt-12 space-y-4 sm:mt-16 sm:space-y-0 sm:grid sm:grid-cols-3 sm:gap-6 lg:max-w-4xl lg:mx-auto xl:max-w-none xl:mx-0">
<!-- Free Tier -->
<div class="border border-gray-700 rounded-lg shadow-sm divide-y divide-gray-700 bg-gray-800">
<div class="p-6">
<h2 class="text-lg leading-6 font-medium text-white">Free</h2>
<p class="mt-4 text-sm text-gray-300">Basic access to learn and practice</p>
<p class="mt-8">
<span class="text-4xl font-extrabold text-white">$0</span>
<span class="text-base font-medium text-gray-300">/month</span>
</p>
<button class="mt-8 block w-full bg-gray-700 border border-gray-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-gray-600">
Get started
</button>
</div>
<div class="pt-6 pb-8 px-6">
<h3 class="text-xs font-medium text-gray-300 tracking-wide uppercase">What's included</h3>
<ul class="mt-6 space-y-4">
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Access to basic challenges</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Community leaderboard</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Basic learning paths</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-gray-400">
<i class="fas fa-times"></i>
</div>
<span class="text-sm text-gray-400">Premium challenges</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-gray-400">
<i class="fas fa-times"></i>
</div>
<span class="text-sm text-gray-400">Advanced learning paths</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-gray-400">
<i class="fas fa-times"></i>
</div>
<span class="text-sm text-gray-400">Private labs</span>
</li>
</ul>
</div>
</div>
<!-- Pro Tier -->
<div class="border-2 border-indigo-500 rounded-lg shadow-sm divide-y divide-gray-700 bg-gray-800">
<div class="p-6">
<h2 class="text-lg leading-6 font-medium text-white">Pro</h2>
<p class="mt-4 text-sm text-gray-300">For serious security learners</p>
<p class="mt-8">
<span class="text-4xl font-extrabold text-white">$19</span>
<span class="text-base font-medium text-gray-300">/month</span>
</p>
<button class="mt-8 block w-full bg-indigo-600 border border-transparent rounded-md py-2 text-sm font-semibold text-white hover:bg-indigo-700">
Upgrade now
</button>
</div>
<div class="pt-6 pb-8 px-6">
<h3 class="text-xs font-medium text-gray-300 tracking-wide uppercase">What's included</h3>
<ul class="mt-6 space-y-4">
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">All basic features</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Access to premium challenges</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Advanced learning paths</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Private labs</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Priority support</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Downloadable certificates</span>
</li>
</ul>
</div>
</div>
<!-- Enterprise Tier -->
<div class="border border-gray-700 rounded-lg shadow-sm divide-y divide-gray-700 bg-gray-800">
<div class="p-6">
<h2 class="text-lg leading-6 font-medium text-white">Enterprise</h2>
<p class="mt-4 text-sm text-gray-300">For teams and organizations</p>
<p class="mt-8">
<span class="text-4xl font-extrabold text-white">Custom</span>
</p>
<button class="mt-8 block w-full bg-gray-700 border border-gray-600 rounded-md py-2 text-sm font-semibold text-white hover:bg-gray-600">
Contact sales
</button>
</div>
<div class="pt-6 pb-8 px-6">
<h3 class="text-xs font-medium text-gray-300 tracking-wide uppercase">What's included</h3>
<ul class="mt-6 space-y-4">
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">All Pro features</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Team management</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Custom learning paths</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Private challenges</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Progress reporting</span>
</li>
<li class="flex space-x-3">
<div class="flex-shrink-0 h-5 w-5 text-green-400">
<i class="fas fa-check"></i>
</div>
<span class="text-sm text-gray-300">Dedicated account manager</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
<!-- Testimonials -->
<section class="py-12 bg-gray-800">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="lg:text-center">
<h2 class="text-base text-indigo-400 font-semibold tracking-wide uppercase">Testimonials</h2>
<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-white sm:text-4xl">
What our users say
</p>
</div>
<div class="mt-10">
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
<!-- Testimonial 1 -->
<div class="bg-gray-700 rounded-lg p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-lg font-medium text-white">Sarah Johnson</div>
<div class="text-indigo-300">Security Engineer @ TechCorp</div>
</div>
</div>
<div class="mt-4">
<p class="text-gray-300">
"HackLab's challenges helped me transition from web development to security. The hands-on approach is exactly what I needed to prepare for my OSCP."
</p>
</div>
<div class="mt-4 flex items-center">
<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>
<span class="ml-2 text-sm text-gray-400">2 months ago</span>
</div>
</div>
<!-- Testimonial 2 -->
<div class="bg-gray-700 rounded-lg p-6">
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/54.jpg" alt="">
</div>
<div class="ml-4">
<div class="text-lg font-medium text-white">Michael Chen</div>
<div class="text-indigo-300">CTO @ SecureStart</div>
</div>
</div>
<div class="mt-4">
<p class="text-gray-300">
"We use HackLab for our entire security team's training. The corporate features save us countless hours compared to building our own training program."
</p>
</div>
<div class="mt-4 flex items-center">
<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>
<span class="ml
<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=ZombieCleric94/hack" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>