+
+
+
+
+
+ ◆ {t.how.section}
+
+
+
+ + {t.how.title} +
+{t.how.sub}
+
+ {t.how.steps.map((s, i) => (
+
+
+
+
+ ))}
+
+ 0{i + 1}
+ TTL {8 - i}
+
+ {s.t}
+
+ {s.d}
+
+
+ ◆
+
+ + {t.how.proof} +
+
+
+ {nodes.map((n) => (
+
+ );
+}
+
+function MeshNode({ kind, label, labelPos = "below", order = 0 }: MeshNodeDef) {
+ const isOrigin = kind === "origin";
+ const isReached = kind === "reached";
+ const isIdle = kind === "idle";
+ const isHop = kind === "hop";
+ const delay = order * 0.55;
+ const rippleColor = isOrigin ? "var(--accent)" : "var(--primary)";
+ const breatheClass = isOrigin ? "relay-node-origin" : isIdle ? "" : "relay-node-recv";
+
+ const circleClass = isOrigin
+ ? "w-16 h-16 bg-accent"
+ : isReached
+ ? "w-14 h-14 bg-primary"
+ : isHop
+ ? "w-12 h-12 border-2 border-primary/80 bg-transparent"
+ : "w-11 h-11 border border-hairline bg-background/70 opacity-60";
+
+ const labelColor = isOrigin
+ ? "var(--accent)"
+ : isReached
+ ? "var(--primary)"
+ : "var(--muted-foreground)";
+ const labelPosClass =
+ labelPos === "above"
+ ? "bottom-full mb-2 left-1/2 -translate-x-1/2"
+ : labelPos === "right"
+ ? "left-full ml-3 top-1/2 -translate-y-1/2"
+ : "top-full mt-2 left-1/2 -translate-x-1/2";
+
+ return (
+
+
+ ))}
+
+ {!isIdle && (
+ <>
+
+
+
+ )}
+
+ );
+}
+
+function CheckIcon() {
+ return (
+
+ );
+}
+
+function PhoneIcon({ color }: { color: string }) {
+ return (
+
+ );
+}
diff --git a/web/landing/src/components/site/ProofBand.tsx b/web/landing/src/components/site/ProofBand.tsx
new file mode 100644
index 0000000..136a647
--- /dev/null
+++ b/web/landing/src/components/site/ProofBand.tsx
@@ -0,0 +1,30 @@
+import { useLanguage } from "@/lib/i18n";
+
+export function ProofBand() {
+ const { t } = useLanguage();
+ return (
+
+ {isOrigin &&
+ {label && (
+
+ {label}
+
+ )}
+
+
+
+ {t.band.items.map((it, i) => (
+
+
+
+ ))}
+
+ {it.n}
+
+
+ {it.l}
+
+