1 files changed, 133 insertions, 0 deletions
diff --git a/components/dashboard-mock.tsx b/components/dashboard-mock.tsx
new file mode 100644
index 0000000..e4407d4
--- /dev/null
+++ b/components/dashboard-mock.tsx
@@ -0,0 +1,133 @@
+export function DashboardMock() {
+  return (
+    <div className="relative overflow-hidden rounded-3xl border border-white/10 bg-black/30 shadow-[0_0_80px_oklch(0.55_0.22_305/0.35)] backdrop-blur-xl">
+      <div className="pointer-events-none absolute inset-0 bg-gradient-to-br from-violet-500/15 via-transparent to-cyan-400/10" />
+      <div className="relative flex items-center justify-between border-b border-white/10 px-4 py-3">
+        <div className="flex items-center gap-2">
+          <span className="size-2.5 rounded-full bg-fuchsia-400 shadow-[0_0_10px_#e879f9]" />
+          <span className="size-2.5 rounded-full bg-white/20" />
+          <span className="size-2.5 rounded-full bg-white/20" />
+        </div>
+        <p className="font-mono text-[10px] uppercase tracking-[0.18em] text-violet-200/80">
+          Agentic operating surface
+        </p>
+        <span className="hidden font-mono text-[10px] text-cyan-300 sm:inline">
+          PPoE 94.2
+        </span>
+      </div>
+      <div className="relative grid md:grid-cols-[188px_1fr_200px]">
+        <aside className="hidden border-r border-white/10 p-4 md:block">
+          {[
+            "Agents",
+            "Data fabric",
+            "Mesh",
+            "Quantum",
+            "Zero trust",
+            "Bio-sync",
+            "Carbon",
+          ].map((item, i) => (
+            <div
+              key={item}
+              className={`mb-1 rounded-lg px-2.5 py-1.5 text-xs ${
+                i === 0
+                  ? "bg-gradient-to-r from-violet-500/30 to-fuchsia-500/20 text-violet-100"
+                  : "text-violet-100/50"
+              }`}
+            >
+              {item}
+            </div>
+          ))}
+        </aside>
+        <div className="relative min-h-[280px] p-4 sm:min-h-[340px]">
+          <svg viewBox="0 0 520 320" className="h-full w-full" aria-hidden>
+            <defs>
+              <linearGradient id="line" x1="0" y1="0" x2="1" y2="1">
+                <stop offset="0%" stopColor="#c084fc" stopOpacity="0.2" />
+                <stop offset="50%" stopColor="#e879f9" stopOpacity="0.7" />
+                <stop offset="100%" stopColor="#67e8f9" stopOpacity="0.8" />
+              </linearGradient>
+              <filter id="glow">
+                <feGaussianBlur stdDeviation="3.5" result="coloredBlur" />
+                <feMerge>
+                  <feMergeNode in="coloredBlur" />
+                  <feMergeNode in="SourceGraphic" />
+                </feMerge>
+              </filter>
+            </defs>
+            <line x1="80" y1="160" x2="250" y2="70" stroke="url(#line)" />
+            <line x1="80" y1="160" x2="250" y2="250" stroke="url(#line)" />
+            <line x1="250" y1="70" x2="430" y2="160" stroke="url(#line)" />
+            <line x1="250" y1="250" x2="430" y2="160" stroke="url(#line)" />
+            <line x1="250" y1="70" x2="250" y2="250" stroke="#a78bfa" strokeOpacity="0.25" />
+            <line x1="80" y1="160" x2="430" y2="160" stroke="#67e8f9" strokeOpacity="0.15" />
+            <circle cx="80" cy="160" r="9" className="pulse-node" fill="#c084fc" filter="url(#glow)" />
+            <circle cx="250" cy="70" r="7" className="pulse-node-2" fill="#e879f9" filter="url(#glow)" />
+            <circle cx="250" cy="250" r="7" className="pulse-node-3" fill="#818cf8" filter="url(#glow)" />
+            <circle cx="430" cy="160" r="11" fill="#67e8f9" filter="url(#glow)" />
+            <circle cx="170" cy="110" r="4" fill="#c084fc" fillOpacity="0.6" />
+            <circle cx="340" cy="110" r="4" fill="#67e8f9" fillOpacity="0.6" />
+            <circle cx="170" cy="210" r="4" fill="#e879f9" fillOpacity="0.5" />
+            <circle cx="340" cy="210" r="4" fill="#a78bfa" fillOpacity="0.5" />
+            <text
+              x="80"
+              y="188"
+              textAnchor="middle"
+              fill="#ddd6fe"
+              fontSize="9"
+              fontFamily="ui-monospace, monospace"
+            >
+              AGENT
+            </text>
+            <text
+              x="250"
+              y="58"
+              textAnchor="middle"
+              fill="#f5d0fe"
+              fontSize="9"
+              fontFamily="ui-monospace, monospace"
+            >
+              LAKE
+            </text>
+            <text
+              x="250"
+              y="278"
+              textAnchor="middle"
+              fill="#c4b5fd"
+              fontSize="9"
+              fontFamily="ui-monospace, monospace"
+            >
+              MESH
+            </text>
+            <text
+              x="430"
+              y="188"
+              textAnchor="middle"
+              fill="#a5f3fc"
+              fontSize="9"
+              fontFamily="ui-monospace, monospace"
+            >
+              SYNERGY
+            </text>
+          </svg>
+        </div>
+        <aside className="hidden space-y-3 border-l border-white/10 p-4 md:block">
+          <Metric label="Agent velocity" value="+3.2×" />
+          <Metric label="Semantic coverage" value="87%" />
+          <Metric label="eBPF map health" value="99.4" />
+          <Metric label="ESG score" value="A−" />
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function Metric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="rounded-xl border border-white/10 bg-white/5 px-3 py-2.5">
+      <p className="font-mono text-[10px] uppercase tracking-wider text-violet-200/70">
+        {label}
+      </p>
+      <p className="mt-1 font-heading text-xl text-white">{value}</p>
+    </div>
+  );
+}