Initial commit: RheinFrame Web codebase

src/components/graphics/HeroVisual.tsx

@@ -0,0 +1,22 @@
+import DotGrid from "./DotGrid";
+import NetworkTopology from "./NetworkTopology";
+
+export default function HeroVisual() {
+  return (
+    <div className="relative aspect-[6/5] w-full overflow-hidden rounded-3xl border border-ink-700 bg-ink-900/50">
+      <DotGrid />
+      <div
+        className="absolute left-1/2 top-1/2 h-64 w-64 -translate-x-1/2 -translate-y-1/2 rounded-full opacity-40 blur-3xl"
+        style={{ background: "radial-gradient(circle, var(--color-river-500), transparent 70%)" }}
+      />
+      <NetworkTopology className="relative h-full w-full p-6" />
+
+      <div className="absolute left-6 top-6 rounded-md border border-ink-700 bg-ink-950/80 px-2.5 py-1 font-mono text-[11px] text-ink-300 backdrop-blur">
+        status: <span className="text-river-300">operational</span>
+      </div>
+      <div className="absolute bottom-6 right-6 rounded-md border border-ink-700 bg-ink-950/80 px-2.5 py-1 font-mono text-[11px] text-ink-300 backdrop-blur">
+        uptime 99.98 %
+      </div>
+    </div>
+  );
+}