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

app/support/page.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import ThemedLayout from "@/components/layouts/ThemedLayout";
+
+function shortAddr(addr: string) {
+  return addr.length > 12 ? `${addr.slice(0, 6)}…${addr.slice(-4)}` : addr;
+}
+
+export default function SupportPage() {
+  const [copied, setCopied] = useState(false);
+
+  // Placeholder addresses — replace with your own.
+  const addresses = useMemo(
+    () => ({
+      BTC: "bc1qexampledonationaddress0000000000000000000000000",
+      ETH: "0x000000000000000000000000000000000000dEaD",
+      XMR: "4Aexamplemonerodonationaddressxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+    }),
+    [],
+  );
+
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1200);
+    } catch {
+      // no-op
+    }
+  };
+
+  return (
+    <ThemedLayout theme="editorial" siteTitle="THE OFFERING" siteSubtitle="Optional support">
+      <section className="container mx-auto max-w-5xl px-4 py-12">
+        <div className="theme-card rounded-3xl p-10 md:p-14">
+          <div className="text-center">
+            <div className="text-xs opacity-70">optional ritual</div>
+            <h1 className="text-4xl font-bold md:text-5xl">
+              THE <span className="theme-accent">OFFERING</span>
+            </h1>
+            <p className="mx-auto mt-6 max-w-3xl text-xl opacity-90">
+              If this parody universe entertained you, you can support its continued existence.
+            </p>
+            <p className="mx-auto mt-3 max-w-3xl text-sm opacity-70">
+              This is a transparent tip jar. No promises, no paywalls, no “send or else” energy. Completely optional.
+            </p>
+          </div>
+
+          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-3">
+            {(["BTC", "ETH", "XMR"] as const).map((coin) => (
+              <div key={coin} className="theme-card rounded-2xl p-6">
+                <div className="flex items-center justify-between">
+                  <div className="text-2xl font-bold theme-accent">{coin}</div>
+                  <div className="text-xs opacity-70">donation address</div>
+                </div>
+                <div className="theme-card mt-4 rounded-xl p-4 font-mono text-xs theme-accent break-all">
+                  {addresses[coin]}
+                </div>
+                <div className="mt-4 flex gap-3">
+                  <button
+                    className="theme-accent flex-1 rounded-full border-2 border-current bg-current px-5 py-3 font-bold text-white"
+                    onClick={() => copy(addresses[coin])}
+                  >
+                    {copied ? "COPIED" : `COPY ${coin}`}
+                  </button>
+                  <span className="inline-flex items-center rounded-full border border-white/10 bg-white/5 px-4 py-3 text-sm text-foreground/60">
+                    {shortAddr(addresses[coin])}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2">
+            <div className="theme-card rounded-2xl p-6">
+              <div className="font-bold mb-2">What you’re supporting</div>
+              <ul className="space-y-2 text-sm text-foreground/70">
+                <li>- More microsites and lore leaks</li>
+                <li>- More Vault unlocks and keys</li>
+                <li>- More UI weirdness (the good kind)</li>
+              </ul>
+            </div>
+            <div className="theme-card rounded-2xl p-6">
+              <div className="font-bold mb-2">Where to go next</div>
+              <div className="flex flex-wrap gap-3">
+                <Link href="/webring" className="glass rounded-full border border-white/20 px-6 py-3 font-bold hover:border-neon-cyan">
+                  Webring
+                </Link>
+                <Link href="/vault" className="glass rounded-full border border-white/20 px-6 py-3 font-bold hover:border-neon-green">
+                  Vault
+                </Link>
+                <Link href="/game" className="glass rounded-full border border-white/20 px-6 py-3 font-bold hover:border-neon-pink">
+                  Profit Sim
+                </Link>
+                <Link href="/" className="theme-accent rounded-full border-2 border-current bg-current px-6 py-3 font-bold text-white">
+                  Back to CyberLux →
+                </Link>
+              </div>
+            </div>
+          </div>
+
+          <div className="mt-12 text-center text-xs opacity-70">
+            Settlement note: confirm the BTC address against the signed block on the hub each session. Same bytes, every time.
+          </div>
+        </div>
+      </section>
+    </ThemedLayout>
+  );
+}
+