Harden onion boot flow and deepen site surfaces

Add persistent onion key backup and restore, improve startup resilience, and flesh out the major site verticals with richer navigation, search coverage, and operator documentation.

Made-with: Cursor

components/EncryptionDemo.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import { useState } from "react";
+
+const EncryptionDemo = () => {
+  const [message, setMessage] = useState("");
+  const [encrypted, setEncrypted] = useState("");
+  const [key, setKey] = useState("");
+
+  const mockEncrypt = (text: string) => {
+    if (!text.trim()) return "";
+    // Simulate encryption by reversing and adding salt
+    const salt = "⚡🔐";
+    const reversed = text.split("").reverse().join("");
+    return `encrypted_${btoa(reversed)}_${salt}`;
+  };
+
+  const handleEncrypt = () => {
+    const result = mockEncrypt(message);
+    setEncrypted(result);
+    setKey(`key_${Date.now().toString(16)}`);
+  };
+
+  const handleDecrypt = () => {
+    if (!encrypted) return;
+    // Simulate decryption
+    const parts = encrypted.split("_");
+    if (parts.length < 2) return;
+    const decoded = atob(parts[1]);
+    const original = decoded.split("").reverse().join("");
+    setMessage(original);
+    setEncrypted("");
+  };
+
+  return (
+    <div className="glass rounded-2xl border border-white/10 p-8">
+      <h3 className="mb-6 font-orbitron text-2xl font-bold">ENCRYPTION DEMO</h3>
+      <p className="mb-6 text-foreground/70">
+        Experience client‑side encryption. Your message never leaves your browser.
+      </p>
+      <div className="space-y-6">
+        <div>
+          <label className="mb-2 block text-sm font-medium">Message to encrypt</label>
+          <textarea
+            className="glass w-full rounded-xl border border-white/10 bg-transparent p-4"
+            rows={3}
+            value={message}
+            onChange={(e) => setMessage(e.target.value)}
+            placeholder="Enter a secret message..."
+          />
+        </div>
+        <div className="flex gap-4">
+          <button
+            className="flex-1 rounded-full bg-gradient-to-r from-neon-cyan to-neon-purple py-3 font-bold text-background"
+            onClick={handleEncrypt}
+          >
+            🔐 Encrypt
+          </button>
+          <button
+            className="flex-1 rounded-full glass border border-neon-cyan/30 py-3 font-bold text-neon-cyan"
+            onClick={handleDecrypt}
+            disabled={!encrypted}
+          >
+            🔓 Decrypt
+          </button>
+        </div>
+        {encrypted && (
+          <>
+            <div>
+              <label className="mb-2 block text-sm font-medium">Encrypted payload</label>
+              <div className="glass overflow-auto rounded-xl border border-neon-cyan/30 p-4 font-mono text-sm">
+                {encrypted}
+              </div>
+            </div>
+            <div>
+              <label className="mb-2 block text-sm font-medium">Generated key</label>
+              <div className="glass overflow-auto rounded-xl border border-neon-green/30 p-4 font-mono text-sm text-neon-green">
+                {key}
+              </div>
+            </div>
+            <div className="rounded-xl bg-gradient-to-r from-neon-cyan/10 to-neon-purple/10 p-4">
+              <div className="flex items-center gap-3">
+                <div className="text-2xl">🛡️</div>
+                <div className="text-sm">
+                  Educational transform only — production wallets use audited libs and real key agreement.
+                </div>
+              </div>
+            </div>
+          </>
+        )}
+        <div className="text-xs text-foreground/50">
+          <p>
+            All sensitive data on CyberLux is encrypted using AES‑256‑GCM. Private keys are never transmitted.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default EncryptionDemo;