1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
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>
);
}
|
