Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kali Web Pentest Pro - Custom Security Distro</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, #4b0082 0%, #000000 100%); | |
| } | |
| .tool-icon { | |
| transition: all 0.3s ease; | |
| } | |
| .tool-card:hover .tool-icon { | |
| transform: scale(1.2); | |
| color: #9333ea; | |
| } | |
| .feature-card { | |
| transition: all 0.3s ease; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); | |
| } | |
| .testimonial-card { | |
| background: rgba(255, 255, 255, 0.05); | |
| backdrop-filter: blur(10px); | |
| } | |
| .pricing-card { | |
| transition: all 0.3s ease; | |
| } | |
| .pricing-card:hover { | |
| transform: scale(1.03); | |
| } | |
| .pricing-card.popular { | |
| border: 2px solid #9333ea; | |
| position: relative; | |
| } | |
| .popular-badge { | |
| position: absolute; | |
| top: -12px; | |
| right: 20px; | |
| background: #9333ea; | |
| color: white; | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| font-size: 12px; | |
| font-weight: bold; | |
| } | |
| .kali-dragon { | |
| filter: drop-shadow(0 0 10px rgba(123, 31, 162, 0.7)); | |
| animation: pulse 4s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { filter: drop-shadow(0 0 10px rgba(123, 31, 162, 0.7)); } | |
| 50% { filter: drop-shadow(0 0 20px rgba(123, 31, 162, 0.9)); } | |
| 100% { filter: drop-shadow(0 0 10px rgba(123, 31, 162, 0.7)); } | |
| } | |
| .mobile-menu { | |
| transition: all 0.3s ease; | |
| max-height: 0; | |
| overflow: hidden; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-900 text-gray-100"> | |
| <!-- Navigation --> | |
| <nav class="bg-gray-800 bg-opacity-90 backdrop-filter backdrop-blur-lg sticky top-0 z-50"> | |
| <div class="container mx-auto px-6 py-3 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-shield-alt text-purple-600 text-2xl"></i> | |
| <span class="text-xl font-bold">Kali Web Pentest Pro</span> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#features" class="hover:text-purple-400 transition">Features</a> | |
| <a href="#tools" class="hover:text-purple-400 transition">Tools</a> | |
| <a href="#pricing" class="hover:text-purple-400 transition">Pricing</a> | |
| <a href="#testimonials" class="hover:text-purple-400 transition">Testimonials</a> | |
| <a href="#faq" class="hover:text-purple-400 transition">FAQ</a> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md font-medium transition"> | |
| Get Started | |
| </button> | |
| </div> | |
| <button id="mobile-menu-button" class="md:hidden text-2xl"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-gray-800"> | |
| <div class="container mx-auto px-6 py-3 flex flex-col space-y-4"> | |
| <a href="#features" class="hover:text-purple-400 transition">Features</a> | |
| <a href="#tools" class="hover:text-purple-400 transition">Tools</a> | |
| <a href="#pricing" class="hover:text-purple-400 transition">Pricing</a> | |
| <a href="#testimonials" class="hover:text-purple-400 transition">Testimonials</a> | |
| <a href="#faq" class="hover:text-purple-400 transition">FAQ</a> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-4 py-2 rounded-md font-medium transition w-full"> | |
| Get Started | |
| </button> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="gradient-bg py-20"> | |
| <div class="container mx-auto px-6 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 mb-6">Professional Web Penetration Testing Distro</h1> | |
| <p class="text-xl text-gray-300 mb-8"> | |
| Custom Kali Linux ISO pre-loaded with essential web security tools, optimized configuration, and hardened security settings. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-purple-600 hover:bg-purple-700 px-6 py-3 rounded-md font-medium text-lg transition"> | |
| Download Now | |
| </button> | |
| <button class="border border-purple-600 text-purple-400 hover:bg-purple-900 hover:bg-opacity-30 px-6 py-3 rounded-md font-medium text-lg transition"> | |
| <i class="fas fa-play-circle mr-2"></i> Watch Demo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-purple-600" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-purple-600" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-purple-600" alt="User"> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-300">Trusted by <span class="font-bold text-purple-400">10,000+</span> security professionals</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <svg class="kali-dragon w-64 h-64 md:w-80 md:h-80" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"> | |
| <path fill="#557C94" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z"/> | |
| <path fill="#000" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".2"/> | |
| <path fill="#000" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".1"/> | |
| <path fill="#000" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".2"/> | |
| <path fill="#000" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".1"/> | |
| <path fill="#fff" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".1"/> | |
| <path fill="#fff" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".2"/> | |
| <path fill="#fff" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".1"/> | |
| <path fill="#fff" d="M256 0c-16.6 0-32 13.4-32 30v30h-30c-16.6 0-30 13.4-30 30s13.4 30 30 30h30v30c0 16.6 13.4 30 30 30s30-13.4 30-30v-30h30c16.6 0 30-13.4 30-30s-13.4-30-30-30h-30V30c0-16.6-13.4-30-30-30z" opacity=".2"/> | |
| </svg> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-800"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Powerful Features</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto"> | |
| Everything you need for professional web penetration testing in one package | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Hardened Security</h3> | |
| <p class="text-gray-300"> | |
| Pre-configured with enhanced security settings, firewall rules, and secure defaults to protect your testing environment. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-tools"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Curated Toolset</h3> | |
| <p class="text-gray-300"> | |
| 200+ hand-picked web security tools pre-installed and configured for optimal performance. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-bolt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Performance Optimized</h3> | |
| <p class="text-gray-300"> | |
| Lightweight and optimized for speed with minimal resource usage, perfect for VMs and older hardware. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Auto-Updates</h3> | |
| <p class="text-gray-300"> | |
| Automatic security updates and tool version management to keep your arsenal current. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-book"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Documentation</h3> | |
| <p class="text-gray-300"> | |
| Comprehensive documentation with tool usage examples and best practices. | |
| </p> | |
| </div> | |
| <div class="feature-card bg-gray-700 p-8 rounded-lg"> | |
| <div class="text-purple-500 text-4xl mb-4"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Legal Compliance</h3> | |
| <p class="text-gray-300"> | |
| Built-in legal documentation and reporting templates for professional engagements. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Tools Section --> | |
| <section id="tools" class="py-20 bg-gray-900"> | |
| <div class="container mx-auto px-6"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Featured Tools</h2> | |
| <p class="text-xl text-gray-300 max-w-2xl mx-auto"> | |
| A selection of the powerful tools included in our distribution | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> | |
| <div class="tool-card bg | |
| </html> |