Spaces:

S-Dreamer
/

piclustersec

Running

App Files Files Community

S-Dreamer commited on May 17, 2025

Commit

cbb5e76

verified ·

1 Parent(s): 67ad29d

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +624 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Piclustersec
-emoji: 🚀
-colorFrom: yellow
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: piclustersec
+emoji: 🐳
+colorFrom: red
+colorTo: gray
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,624 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Raspberry Pi Cluster Pentesting Field Kit | Parallel Security Testing Anywhere</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@700&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
+    <script src="https://kit.fontawesome.com/9a8f46a4a9.js" crossorigin="anonymous"></script>
+    <style>
+        .hero-bg {
+            background: linear-gradient(rgba(45, 45, 45, 0.85), rgba(45, 45, 45, 0.9)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80') center/cover no-repeat;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 25px rgba(255, 107, 53, 0.2);
+        }
+        .testimonial-card {
+            background: linear-gradient(145deg, #383838, #2d2d2d);
+            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
+        }
+        .glow {
+            text-shadow: 0 0 8px rgba(255, 107, 53, 0.6);
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-roboto">
+    <!-- Navigation -->
+    <nav class="bg-gray-800 py-4 px-6 sticky top-0 z-50 shadow-lg">
+        <div class="max-w-7xl mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-raspberry-pi text-3xl text-orange-500"></i>
+                <span class="text-xl font-bold font-inter">PiClusterSec</span>
+            </div>
+            <div class="hidden md:flex space-x-8">
+                <a href="#features" class="hover:text-orange-400 transition">Features</a>
+                <a href="#testimonials" class="hover:text-orange-400 transition">Testimonials</a>
+                <a href="#specs" class="hover:text-orange-400 transition">Specifications</a>
+                <a href="#faq" class="hover:text-orange-400 transition">FAQ</a>
+            </div>
+            <div class="md:hidden">
+                <button id="menu-btn" class="text-2xl focus:outline-none">
+                    <i class="fas fa-bars"></i>
+                </button>
+            </div>
+        </div>
+        <!-- Mobile Menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-gray-800 px-6 py-4 mt-2 rounded-lg shadow-xl">
+            <div class="flex flex-col space-y-4">
+                <a href="#features" class="hover:text-orange-400 transition">Features</a>
+                <a href="#testimonials" class="hover:text-orange-400 transition">Testimonials</a>
+                <a href="#specs" class="hover:text-orange-400 transition">Specifications</a>
+                <a href="#faq" class="hover:text-orange-400 transition">FAQ</a>
+                <a href="#order" class="bg-orange-500 text-white px-4 py-2 rounded font-bold text-center hover:bg-orange-600 transition">Pre-Order Now</a>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="hero-bg min-h-screen flex items-center justify-center px-6 py-20">
+        <div class="max-w-4xl mx-auto text-center">
+            <h1 class="text-4xl md:text-6xl font-bold font-inter mb-6 glow">
+                Unleash Parallel Pentesting Power—Anywhere
+            </h1>
+            <p class="text-xl md:text-2xl mb-10 text-gray-300">
+                Compact Raspberry Pi Cluster Kit pre-loaded with Kali tools for field-ready security audits.
+            </p>
+            <div class="flex flex-col sm:flex-row justify-center gap-4">
+                <a href="#order" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-8 rounded-lg text-lg transition transform hover:scale-105 shadow-lg">
+                    Pre-Order Now
+                </a>
+                <a href="#demo" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition transform hover:scale-105 shadow-lg">
+                    Schedule a Live Demo
+                </a>
+            </div>
+            <div class="mt-16 flex justify-center">
+                <div class="relative w-full max-w-2xl h-64 bg-gray-800 rounded-xl shadow-2xl overflow-hidden border border-gray-700">
+                    <div class="absolute top-4 left-4 w-3 h-3 rounded-full bg-red-500"></div>
+                    <div class="absolute top-4 left-8 w-3 h-3 rounded-full bg-yellow-500"></div>
+                    <div class="absolute top-4 left-12 w-3 h-3 rounded-full bg-green-500"></div>
+                    <div class="absolute inset-0 flex items-center justify-center">
+                        <div class="text-center p-6">
+                            <i class="fas fa-terminal text-4xl text-orange-500 mb-4"></i>
+                            <p class="font-mono text-green-400">$ nmap --parallel-scan 192.168.1.0/24</p>
+                            <p class="font-mono text-gray-400 mt-2"># MPI-accelerated scanning in progress...</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-20 px-6 bg-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold font-inter text-center mb-16">
+                Field-Ready Pentesting Features
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="feature-card bg-gray-900 p-8 rounded-xl transition duration-300 hover:border-orange-500 border border-gray-700">
+                    <div class="text-orange-500 text-4xl mb-4">
+                        <i class="fas fa-network-wired"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">MPI-Accelerated Scanning</h3>
+                    <p class="text-gray-300">
+                        Parallelize your security scans across multiple Pi nodes for dramatically faster results with Message Passing Interface (MPI) clustering.
+                    </p>
+                </div>
+                <!-- Feature 2 -->
+                <div class="feature-card bg-gray-900 p-8 rounded-xl transition duration-300 hover:border-orange-500 border border-gray-700">
+                    <div class="text-orange-500 text-4xl mb-4">
+                        <i class="fas fa-shield-alt"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Kali Tool Suite Pre-Installed</h3>
+                    <p class="text-gray-300">
+                        Ready-to-go with aircrack-ng, nmap, Metasploit, w3af, and 600+ other security tools from Kali Linux.
+                    </p>
+                </div>
+                <!-- Feature 3 -->
+                <div class="feature-card bg-gray-900 p-8 rounded-xl transition duration-300 hover:border-orange-500 border border-gray-700">
+                    <div class="text-orange-500 text-4xl mb-4">
+                        <i class="fas fa-briefcase"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Rugged, Portable Case</h3>
+                    <p class="text-gray-300">
+                        Military-grade briefcase design with shock absorption and EMI shielding for transport to any engagement.
+                    </p>
+                </div>
+                <!-- Feature 4 -->
+                <div class="feature-card bg-gray-900 p-8 rounded-xl transition duration-300 hover:border-orange-500 border border-gray-700">
+                    <div class="text-orange-500 text-4xl mb-4">
+                        <i class="fas fa-battery-full"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">8–10 Hr Battery Life</h3>
+                    <p class="text-gray-300">
+                        Integrated 5000 mAh power bank keeps your cluster running all day without needing AC power.
+                    </p>
+                </div>
+                <!-- Feature 5 -->
+                <div class="feature-card bg-gray-900 p-8 rounded-xl transition duration-300 hover:border-orange-500 border border-gray-700">
+                    <div class="text-orange-500 text-4xl mb-4">
+                        <i class="fas fa-touchscreen"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Touchscreen Interface</h3>
+                    <p class="text-gray-300">
+                        Optional 7" Pi-compatible touchscreen display for on-the-go interaction without needing a laptop.
+                    </p>
+                </div>
+                <!-- Feature 6 -->
+                <div class="feature-card bg-gray-900 p-8 rounded-xl transition duration-300 hover:border-orange-500 border border-gray-700">
+                    <div class="text-orange-500 text-4xl mb-4">
+                        <i class="fas fa-puzzle-piece"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Modular Expansion</h3>
+                    <p class="text-gray-300">
+                        Add USB Wi-Fi adapters, SDR dongles, or other peripherals through our expansion ports.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Product Showcase -->
+    <section id="specs" class="py-20 px-6 bg-gray-900">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold font-inter text-center mb-16">
+                Technical Specifications
+            </h2>
+            <div class="flex flex-col lg:flex-row gap-12 items-center">
+                <div class="lg:w-1/2">
+                    <div class="relative">
+                        <div class="absolute -inset-4 bg-gradient-to-r from-orange-500 to-blue-600 rounded-xl blur opacity-25"></div>
+                        <div class="relative bg-gray-800 rounded-xl p-2 border border-gray-700">
+                            <img src="https://images.unsplash.com/photo-1591488320449-011701bb6704?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                                 alt="Raspberry Pi Cluster Pentesting Kit"
+                                 class="rounded-lg w-full h-auto">
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2">
+                    <div class="space-y-6">
+                        <div>
+                            <h3 class="text-xl font-bold mb-3 text-orange-500">Cluster Configuration</h3>
+                            <ul class="space-y-2 text-gray-300">
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>4x Raspberry Pi 4B (8GB RAM each)</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>MPI Cluster Configuration (OpenMPI)</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>1TB NVMe SSD Shared Storage</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Gigabit Ethernet Backplane</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold mb-3 text-orange-500">Power & Connectivity</h3>
+                            <ul class="space-y-2 text-gray-300">
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>5000mAh Lithium Power Bank</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Dual-Band 802.11ac Wi-Fi</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Bluetooth 5.0</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>4x USB 3.0 Ports for peripherals</span>
+                                </li>
+                            </ul>
+                        </div>
+                        <div>
+                            <h3 class="text-xl font-bold mb-3 text-orange-500">Software Stack</h3>
+                            <ul class="space-y-2 text-gray-300">
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Kali Linux 2023.2 (ARM64 optimized)</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Pre-configured pentesting tools</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Custom web-based management interface</span>
+                                </li>
+                                <li class="flex items-start">
+                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
+                                    <span>Automated reporting tools</span>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials -->
+    <section id="testimonials" class="py-20 px-6 bg-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold font-inter text-center mb-16">
+                Trusted by Security Professionals
+            </h2>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="testimonial-card p-8 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-orange-500 flex items-center justify-center text-xl font-bold mr-4">JD</div>
+                        <div>
+                            <h4 class="font-bold">Jason D.</h4>
+                            <p class="text-gray-400 text-sm">Red Team Lead</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic mb-4">
+                        "This cluster kit cut our network scanning times by 70% compared to a single device. The portability means we can take it to client sites without raising eyebrows."
+                    </p>
+                    <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>
+                <!-- Testimonial 2 -->
+                <div class="testimonial-card p-8 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-xl font-bold mr-4">SM</div>
+                        <div>
+                            <h4 class="font-bold">Sarah M.</h4>
+                            <p class="text-gray-400 text-sm">Penetration Tester</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic mb-4">
+                        "The pre-installed tools saved me days of setup time. The rugged case has survived three international flights already - this is now my go-to travel kit."
+                    </p>
+                    <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>
+                <!-- Testimonial 3 -->
+                <div class="testimonial-card p-8 rounded-xl">
+                    <div class="flex items-center mb-4">
+                        <div class="w-12 h-12 rounded-full bg-green-500 flex items-center justify-center text-xl font-bold mr-4">RK</div>
+                        <div>
+                            <h4 class="font-bold">Raj K.</h4>
+                            <p class="text-gray-400 text-sm">Security Instructor</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-300 italic mb-4">
+                        "Perfect for my cybersecurity classes. Students get hands-on with real clustered hardware instead of just virtual machines. The learning impact is tremendous."
+                    </p>
+                    <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>
+            <div class="mt-12 flex justify-center">
+                <div class="flex items-center space-x-8">
+                    <img src="https://via.placeholder.com/150x50/2d2d2d/ffffff?text=SecTrain" alt="Security Training Partner" class="h-10 opacity-80 hover:opacity-100 transition">
+                    <img src="https://via.placeholder.com/150x50/2d2d2d/ffffff?text=CyberDef" alt="Cyber Defense Partner" class="h-10 opacity-80 hover:opacity-100 transition">
+                    <img src="https://via.placeholder.com/150x50/2d2d2d/ffffff?text=HackU" alt="Hack University Partner" class="h-10 opacity-80 hover:opacity-100 transition">
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- CTA Section -->
+    <section id="order" class="py-20 px-6 bg-gradient-to-r from-gray-900 to-gray-800">
+        <div class="max-w-4xl mx-auto text-center">
+            <h2 class="text-3xl md:text-4xl font-bold font-inter mb-6">
+                Ready to Boost Your Pentesting Capabilities?
+            </h2>
+            <p class="text-xl mb-10 text-gray-300">
+                Order your Raspberry Pi Cluster Pentesting Kit today and receive:
+            </p>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-12">
+                <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
+                    <i class="fas fa-shipping-fast text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="font-bold mb-2">Free Shipping</h3>
+                    <p class="text-gray-400">Worldwide delivery in 5-7 business days</p>
+                </div>
+                <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
+                    <i class="fas fa-book text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="font-bold mb-2">Comprehensive Guide</h3>
+                    <p class="text-gray-400">200-page manual with advanced techniques</p>
+                </div>
+                <div class="bg-gray-800 p-6 rounded-lg border border-gray-700">
+                    <i class="fas fa-headset text-3xl text-orange-500 mb-4"></i>
+                    <h3 class="font-bold mb-2">Priority Support</h3>
+                    <p class="text-gray-400">Dedicated security engineers for setup help</p>
+                </div>
+            </div>
+            <div class="bg-gray-800 p-8 rounded-xl border border-orange-500 max-w-2xl mx-auto mb-10">
+                <div class="flex justify-between items-center mb-4">
+                    <span class="text-gray-400">Standard Kit</span>
+                    <span class="text-2xl font-bold">$899</span>
+                </div>
+                <div class="flex justify-between items-center mb-6">
+                    <span class="text-gray-400">Pro Kit (with touchscreen)</span>
+                    <span class="text-2xl font-bold">$1,199</span>
+                </div>
+                <a href="#" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-8 rounded-lg text-lg transition transform hover:scale-105 shadow-lg block w-full">
+                    Pre-Order Now
+                </a>
+            </div>
+            <p class="text-gray-400 text-sm">
+                Limited stock available. Next shipment expected in 2-3 weeks.
+            </p>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section id="faq" class="py-20 px-6 bg-gray-900">
+        <div class="max-w-4xl mx-auto">
+            <h2 class="text-3xl md:text-4xl font-bold font-inter text-center mb-16">
+                Frequently Asked Questions
+            </h2>
+            <div class="space-y-4">
+                <!-- FAQ Item 1 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
+                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition">
+                        <span class="font-bold">What's the difference between this and running Kali on a laptop?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6 pt-2">
+                        <p class="text-gray-300">
+                            Our cluster provides true parallel processing power that significantly accelerates scanning and brute-force operations. A single laptop can't match the distributed computing capabilities of four Raspberry Pi 4B nodes working together through MPI. Additionally, our kit is purpose-built for pentesting with optimized configurations and comes in an unobtrusive package that doesn't draw attention in the field.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 2 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
+                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition">
+                        <span class="font-bold">Is this legal to own and use?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6 pt-2">
+                        <p class="text-gray-300">
+                            Yes, the kit is completely legal to own. Like any security testing tool, its legality depends on how you use it. Always obtain proper authorization before testing networks you don't own. We include ethical hacking guidelines with each purchase and recommend using the kit only on systems you have permission to test.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 3 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
+                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition">
+                        <span class="font-bold">How do updates work for the pre-installed tools?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6 pt-2">
+                        <p class="text-gray-300">
+                            The kit includes our custom update utility that handles all Kali Linux package updates with a single command. We also provide quarterly "golden images" with completely refreshed tool sets and optimizations. You'll receive email notifications when new images are available for download.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 4 -->
+                <div class="bg-gray-800 rounded-xl overflow-hidden border border-gray-700">
+                    <button class="faq-toggle w-full text-left p-6 flex justify-between items-center hover:bg-gray-700 transition">
+                        <span class="font-bold">What kind of support do you offer?</span>
+                        <i class="fas fa-chevron-down transition-transform duration-300"></i>
+                    </button>
+                    <div class="faq-content hidden px-6 pb-6 pt-2">
+                        <p class="text-gray-300">
+                            All purchases include 12 months of premium support with direct access to our security engineering team via encrypted chat. We offer hardware warranty coverage and will help troubleshoot any cluster configuration issues. For advanced pentesting questions, we can connect you with our partner security consultants.
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <div class="mt-16 text-center">
+                <p class="text-gray-400 mb-6">
+                    Still have questions? Our security experts are ready to help.
+                </p>
+                <a href="#demo" class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-4 px-8 rounded-lg text-lg transition transform hover:scale-105 shadow-lg inline-block">
+                    Contact Our Team
+                </a>
+            </div>
+        </div>
+    </section>
+    <!-- Demo Request Section -->
+    <section id="demo" class="py-20 px-6 bg-gray-800">
+        <div class="max-w-4xl mx-auto">
+            <div class="bg-gray-900 rounded-xl p-8 md:p-12 border border-gray-700 shadow-xl">
+                <h2 class="text-3xl font-bold font-inter mb-2">Request a Live Demo</h2>
+                <p class="text-gray-400 mb-8">See our pentesting cluster in action with a personalized virtual demonstration.</p>
+                <form class="grid grid-cols-1 md:grid-cols-2 gap-6">
+                    <div>
+                        <label for="name" class="block text-gray-300 mb-2">Full Name</label>
+                        <input type="text" id="name" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500">
+                    </div>
+                    <div>
+                        <label for="email" class="block text-gray-300 mb-2">Email</label>
+                        <input type="email" id="email" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500">
+                    </div>
+                    <div>
+                        <label for="company" class="block text-gray-300 mb-2">Company/Organization</label>
+                        <input type="text" id="company" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500">
+                    </div>
+                    <div>
+                        <label for="role" class="block text-gray-300 mb-2">Your Role</label>
+                        <select id="role" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500">
+                            <option value="">Select your role</option>
+                            <option>Security Consultant</option>
+                            <option>Penetration Tester</option>
+                            <option>Red Team Operator</option>
+                            <option>Security Engineer</option>
+                            <option>IT Manager</option>
+                            <option>Security Educator</option>
+                            <option>Other</option>
+                        </select>
+                    </div>
+                    <div class="md:col-span-2">
+                        <label for="message" class="block text-gray-300 mb-2">What would you like to see in the demo?</label>
+                        <textarea id="message" rows="4" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-3 focus:outline-none focus:ring-2 focus:ring-orange-500"></textarea>
+                    </div>
+                    <div class="md:col-span-2">
+                        <button type="submit" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-4 px-8 rounded-lg text-lg transition transform hover:scale-105 shadow-lg w-full">
+                            Schedule My Demo
+                        </button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-900 py-12 px-6 border-t border-gray-800">
+        <div class="max-w-7xl mx-auto">
+            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
+                <div>
+                    <div class="flex items-center space-x-2 mb-4">
+                        <i class="fas fa-raspberry-pi text-3xl text-orange-500"></i>
+                        <span class="text-xl font-bold font-inter">PiClusterSec</span>
+                    </div>
+                    <p class="text-gray-400">
+                        Portable, powerful pentesting solutions for security professionals.
+                    </p>
+                </div>
+                <div>
+                    <h4 class="font-bold text-lg mb-4">Product</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#features" class="text-gray-400 hover:text-orange-400 transition">Features</a></li>
+                        <li><a href="#specs" class="text-gray-400 hover:text-orange-400 transition">Specifications</a></li>
+                        <li><a href="#testimonials" class="text-gray-400 hover:text-orange-400 transition">Testimonials</a></li>
+                        <li><a href="#faq" class="text-gray-400 hover:text-orange-400 transition">FAQ</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold text-lg mb-4">Resources</h4>
+                    <ul class="space-y-2">
+                        <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Documentation</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">GitHub Repo</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Support</a></li>
+                        <li><a href="#" class="text-gray-400 hover:text-orange-400 transition">Blog</a></li>
+                    </ul>
+                </div>
+                <div>
+                    <h4 class="font-bold text-lg mb-4">Connect</h4>
+                    <div class="flex space-x-4 mb-4">
+                        <a href="#" class="text-gray-400 hover:text-orange-400 transition text-xl"><i class="fab fa-twitter"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-orange-400 transition text-xl"><i class="fab fa-github"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-orange-400 transition text-xl"><i class="fab fa-linkedin"></i></a>
+                        <a href="#" class="text-gray-400 hover:text-orange-400 transition text-xl"><i class="fab fa-discord"></i></a>
+                    </div>
+                    <p class="text-gray-400">
+                        <i class="fas fa-envelope mr-2"></i> support@piclustersec.com
+                    </p>
+                </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 text-sm mb-4 md:mb-0">
+                    © 2023 PiClusterSec. All rights reserved.
+                </p>
+                <div class="flex space-x-6">
+                    <a href="#" class="text-gray-500 hover:text-gray-400 transition text-sm">Privacy Policy</a>
+                    <a href="#" class="text-gray-500 hover:text-gray-400 transition text-sm">Terms of Service</a>
+                    <a href="#" class="text-gray-500 hover:text-gray-400 transition text-sm">Legal</a>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Mobile menu toggle
+        document.getElementById('menu-btn').addEventListener('click', function() {
+            const menu = document.getElementById('mobile-menu');
+            menu.classList.toggle('hidden');
+        });
+        // FAQ accordion functionality
+        document.querySelectorAll('.faq-toggle').forEach(button => {
+            button.addEventListener('click', () => {
+                const content = button.nextElementSibling;
+                const icon = button.querySelector('i');
+                // Toggle content visibility
+                content.classList.toggle('hidden');
+                // Rotate icon
+                icon.classList.toggle('rotate-180');
+            });
+        });
+        // Smooth scrolling for anchor links
+        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+            anchor.addEventListener('click', function(e) {
+                e.preventDefault();
+                const targetId = this.getAttribute('href');
+                if (targetId === '#') return;
+                const targetElement = document.querySelector(targetId);
+                if (targetElement) {
+                    targetElement.scrollIntoView({
+                        behavior: 'smooth'
+                    });
+                    // Close mobile menu if open
+                    const mobileMenu = document.getElementById('mobile-menu');
+                    if (!mobileMenu.classList.contains('hidden')) {
+                        mobileMenu.classList.add('hidden');
+                    }
+                }
+            });
+        });
+    </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=S-Dreamer/piclustersec" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@

+ Below is the updated landing‑page plan with the conversion goal re‑focused on an **Raspberry Pi Cluster‑Based Pentesting Field Kit**. Citations follow every factual or recommendation statement. --- ## Summary We’ll build a React + CSS‑in‑JS landing page designed to convert infosec professionals and hobbyists into buyers of your **Raspberry Pi Cluster Pentesting Field Kit**. The page emphasizes key benefits—parallelized scanning via MPI clustering, a full suite of pre‑installed tools, all‑day battery power, and a rugged transport case—supported by social proof and clear CTAs. Under the hood, you’ll follow CRO best practices (strong headlines, minimal distractions, prominent CTAs), ensure accessibility, and implement responsive design for maximum reach. --- ## Audience & Goals * **Target Personas**: * Red‑team operators needing portable compute power * Penetration testers who travel or work in the field * Security educators and CTF enthusiasts seeking hands‑on hardware labs * **Primary Conversion Objective**: “Order Your RPi Cluster Pentesting Kit” (with secondary action “Request a Live Demo”) --- ## Design & Content Planning ### Layout & Wireframe 1. **Hero Section** * **Headline**: “Unleash Parallel Pentesting Power—Anywhere” * **Subheadline**: “Compact Raspberry Pi Cluster Kit pre‑loaded with Kali tools for field‑ready security audits.” * **Primary CTA**: “Pre‑Order Now” 2. **Features Grid** (3‑column on desktop, single‑col on mobile) * **MPI‑Accelerated Scanning** (MPI cluster bench‑marking guidance) ([Raspberry Pi Forums][1]) * **Kali Tool Suite Pre‑Installed** (aircrack‑ng, nmap, Metasploit, w3af…) ([Infosec Institute][2]) * **Rugged, Portable Case** (briefcase design like NightPi) ([GitHub][3]) * **8–10 Hr Battery Life** (5000 mAh powerbank integration) ([Medevel][4]) * **Touchscreen Interface Option** (optional Pi‑compatible display) ([GitHub][5]) * **Modular Expansion** (add USB Wi‑Fi adapters, SDR dongles) ([Zero-Day Snoop][6]) 3. **Social Proof & Testimonials** * Quotes from early adopters of the Portable Pentesting Lab ([GitHub][7]) * Logos of partner security training schools 4. **Secondary CTA** * “Schedule a Live Field Demo” 5. **Footer** * Links: Docs, Support, GitHub repo, Legal --- ## Visual Design: Colors & Typography * **Color Scheme** * **Base**: Dark slate gray (#2D2D2D) for code‑term ambience ([Raspberry Pi Forums][1]) * **Accent**: Electric orange (#FF6B35) for CTAs (high contrast) ([Medevel][4]) * **Secondary**: Cyber‑blue (#0366D6) for links and icons ([GitHub][3]) * **Typography** * **Headings**: Inter, 48px (bold) for strong hierarchy * **Body**: Roboto, 16px (regular) for readability ([artificesecurity.com][8]) * **Contrast**: WCAG AA compliance (4.5:1) on text/background ([Black Hills Information Security, Inc.][9]) * **Imagery & Icons** * Use SVG icons for each feature (e.g., cluster, battery, toolbox) ([GitHub][7]) * Hero background: styled photo of the kit in a field laptop‑style environment --- ## Development Phases ### 1. Project Setup ```bash npx create-react-app rpi-cluster-kit cd rpi-cluster-kit npm install styled-components react-router-dom ``` Structure: ``` src/ assets/ components/ Hero.js FeaturesGrid.js Testimonials.js Footer.js styles/ theme.js GlobalStyles.js pages/ Home.js App.js index.js ``` ### 2. Theme & Global Styles ```js // src/styles/theme.js export const theme = { colors: { base: '#2D2D2D', accent: '#FF6B35', secondary: '#0366D6', text: '#FFFFFF', }, fonts: { heading: '"Inter", sans-serif', body: '"Roboto", sans-serif', }, }; // src/styles/GlobalStyles.js import { createGlobalStyle } from 'styled-components'; export const GlobalStyles = createGlobalStyle` *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: ${({ theme }) => theme.fonts.body}; background: ${({ theme }) => theme.colors.base}; color: ${({ theme }) => theme.colors.text}; line-height: 1.6; } `; ``` ### 3. Hero Component ```js // src/components/Hero.js import React from 'react'; import styled from 'styled-components'; const HeroSection = styled.section` display: flex; flex-direction: column; align-items: center; text-align: center; padding: 5rem 1rem; background: url('/assets/hero-bg.jpg') center/cover no-repeat; `; const Title = styled.h1` font-family: ${({ theme }) => theme.fonts.heading}; font-size: 3rem; margin-bottom: 1rem; color: ${({ theme }) => theme.colors.text}; `; const Sub = styled.p` font-size: 1.25rem; margin-bottom: 2rem; `; const CTA = styled.a` background: ${({ theme }) => theme.colors.accent}; color: #FFF; padding: 0.75rem 2rem; border-radius: 0.5rem; font-weight: bold; text-decoration: none; transition: opacity .2s; &:hover { opacity: 0.8; } `; export default function Hero() { return ( <HeroSection> <Title>Unleash Parallel Pentesting Power—Anywhere</Title> <Sub>Raspberry Pi Cluster Kit pre‑loaded with Kali tools for field‑ready security audits.</Sub> <CTA href="#order">Pre‑Order Now</CTA> </HeroSection> ); } ``` ### 4. Features Grid & Testimonials * **FeaturesGrid.js**: use CSS grid, map over feature objects with icon, title, description. * **Testimonials.js**: carousel or card layout with user quotes ([Instructables][10]). ### 5. Responsive & Accessibility * Media queries at 480px, 768px, 1024px breakpoints ([BugBustersUnited][11]). * Semantic tags (`<header>`, `<main>`, `<section>`, `<footer>`) ([opensourcedetective.com][12]). * ARIA labels on SVG icons; focus states on buttons. --- ## Testing & Deployment 1. **Responsive QA**: BrowserStack or manual dev‑tools at major breakpoints ([Black Hills Information Security, Inc.][9]). 2. **Performance**: Lazy‑load offscreen images, minify JS/CSS, gzip assets. 3. **CRO Experiments**: Use Google Optimize for CTA color/text A/B tests ([Infosec Institute][2]). 4. **SEO & Meta**: Open Graph tags, descriptive `<title>` and `<meta name="description">`. 5. **CI/CD**: GitHub Actions → deploy to Vercel/Netlify; monitor with Sentry. --- ## Final Review & Optimization * Collect user feedback via quick NPS surveys. * Analyze heatmaps/session recordings to spot drop‑offs. * Iterate copy, visuals, and layout quarterly based on analytics. This framework ensures your landing page clearly communicates the unique value of your **RPi Cluster‑Based Pentesting Field Kit**, drives conversions, and scales as you gather real‑world data. [1]: https://forums.raspberrypi.com/viewtopic.php?t=123104&utm_source=chatgpt.com "Super Cluster - Raspberry Pi Forums" [2]: https://www.infosecinstitute.com/resources/penetration-testing/pentesting-distributions-and-installer-kits-for-your-raspberry-pi/?utm_source=chatgpt.com "Pentesting distributions and installer kits for your Raspberry Pi" [3]: https://github.com/Sekhan/NightPi?utm_source=chatgpt.com "GitHub - Sekhan/NightPi: An all-in-one briefcase for pentesting, OSINT ..." [4]: https://medevel.com/thepwnpal-turn-raspberry-pi-into-a/?utm_source=chatgpt.com "ThePwnPal - Turn Raspberry Pi into a Portable Pentesting and Hacking Suite" [5]: https://github.com/Shlucus/ThePwnPal/?utm_source=chatgpt.com "GitHub - Shlucus/ThePwnPal: Creating a pocket-sized network pentesting ..." [6]: https://www.zerodaysnoop.com/how-to/how-to-pentest-using-a-raspberry-pi/?utm_source=chatgpt.com "How To Pentest using a Raspberry Pi - Zero-Day Snoop" [7]: https://github.com/ranimhassine/Portable-pentesting-lab?utm_source=chatgpt.com "Portable Pentesting Lab - GitHub" [8]: https://artificesecurity.com/how-to-build-your-own-penetration-testing-dropbox-using-a-raspberry-pi-4/?utm_source=chatgpt.com "Penetration Testing Dropbox Raspberry Pi 4 | Artifice Security" [9]: https://www.blackhillsinfosec.com/how-to-build-your-own-penetration-testing-drop-box/?utm_source=chatgpt.com "How to Build Your Own Penetration Testing Drop Box" [10]: https://www.instructables.com/MyLittlePwny-Make-a-self-powered-pentesting-box-/?utm_source=chatgpt.com "MyLittlePwny - Make a Self Powered Pentesting Box Out of the Raspberry ..." [11]: https://bugbustersunited.com/a-raspberry-pi-for-mobile-penetration-testing/?utm_source=chatgpt.com "The Pocket-Sized Hacker: Building a Raspberry Pi for Mobile Penetration ..." [12]: https://www.opensourcedetective.com/posts/tutorial-pentesting-device-with-raspberry-pi-zero?utm_source=chatgpt.com "Tutorial: Pentesting Device with Raspberry Pi Zero"