497be5fac9
All checks were successful
Build pitch-deck / build-push-deploy (push) Successful in 1m36s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 41s
CI / test-python-voice (push) Successful in 37s
CI / test-bqas (push) Successful in 33s
- Replace grid/SVG-line layout with archipelago map: organic island blobs, quadratic bezier sea routes, circular map-marker nodes - Fix SVG distortion: all strokes use vectorEffect=non-scaling-stroke - No more preserveAspectRatio=none diagonal-line warping - LiteLLM hub gets spinning ring + ripple pulse on active - Ocean background with per-tier radial glows, dot grid, zone labels - Switch dev server to --turbopack for faster HMR Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
590 lines
24 KiB
TypeScript
590 lines
24 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { motion, AnimatePresence } from 'framer-motion'
|
|
import { Language } from '@/lib/types'
|
|
import { t } from '@/lib/i18n'
|
|
import GradientText from '../ui/GradientText'
|
|
import FadeInView from '../ui/FadeInView'
|
|
import {
|
|
Shield, Brain, ScanLine, Zap, Cpu, Globe, Cloud,
|
|
X, Users, Lock, Server, Network, ChevronRight, Layers,
|
|
} from 'lucide-react'
|
|
|
|
interface ArchitectureSlideProps {
|
|
lang: Language
|
|
}
|
|
|
|
type NodeId = 'breakpilot' | 'certifai' | 'compliance-scanner' | 'litellm' | 'ollama' | 'claude' | 'openai'
|
|
|
|
interface NodeDef {
|
|
id: NodeId
|
|
icon: React.ElementType
|
|
title: string
|
|
subtitle: string
|
|
color: string
|
|
twColor: string
|
|
twBorder: string
|
|
twBg: string
|
|
twDot: string
|
|
cx: number
|
|
cy: number
|
|
tier: 'product' | 'proxy' | 'inference'
|
|
tech: string[]
|
|
services: { name: string; desc: string }[]
|
|
badge?: string
|
|
}
|
|
|
|
const CONNECTIONS: [NodeId, NodeId][] = [
|
|
['breakpilot', 'litellm'],
|
|
['certifai', 'litellm'],
|
|
['compliance-scanner', 'litellm'],
|
|
['litellm', 'ollama'],
|
|
['litellm', 'claude'],
|
|
['litellm', 'openai'],
|
|
]
|
|
|
|
// Quadratic bezier paths in 0-100 viewBox space
|
|
const ROUTES: Record<string, string> = {
|
|
'breakpilot-litellm': 'M 15 22 Q 26 43 50 50',
|
|
'certifai-litellm': 'M 50 18 Q 50 34 50 50',
|
|
'compliance-scanner-litellm': 'M 85 22 Q 74 43 50 50',
|
|
'litellm-ollama': 'M 50 50 Q 39 64 15 80',
|
|
'litellm-claude': 'M 50 50 Q 50 65 50 80',
|
|
'litellm-openai': 'M 50 50 Q 61 64 85 80',
|
|
}
|
|
|
|
function getNodes(de: boolean): NodeDef[] {
|
|
return [
|
|
{
|
|
id: 'breakpilot',
|
|
icon: Shield,
|
|
title: 'BreakPilot',
|
|
subtitle: de ? 'Compliance & Bildung' : 'Compliance & Education',
|
|
color: '#818cf8', twColor: 'text-indigo-400',
|
|
twBorder: 'border-indigo-500/50', twBg: 'bg-indigo-500/10', twDot: 'bg-indigo-400',
|
|
cx: 15, cy: 22, tier: 'product',
|
|
badge: de ? 'Kernprodukt' : 'Core Product',
|
|
tech: ['Next.js 15', 'FastAPI', 'Go/Gin', 'PostgreSQL', 'Qdrant', 'Valkey'],
|
|
services: [
|
|
{ name: de ? 'DSGVO / AI Act / NIS2' : 'GDPR / AI Act / NIS2', desc: de ? '70k+ auditierbare Controls' : '70k+ auditable controls' },
|
|
{ name: 'RAG Pipeline', desc: de ? '75+ Rechtsquellen, semantische Suche' : '75+ legal sources, semantic search' },
|
|
{ name: de ? 'Lehrer Plattform' : 'Lehrer Platform', desc: de ? 'KI-Unterrichtsassistent' : 'AI teaching assistant' },
|
|
{ name: 'Control Pipeline', desc: de ? 'Gesetzestextanalyse via Claude' : 'Legal text analysis via Claude' },
|
|
],
|
|
},
|
|
{
|
|
id: 'certifai',
|
|
icon: Brain,
|
|
title: 'CERTifAI',
|
|
subtitle: de ? 'GenAI Infrastruktur' : 'GenAI Infrastructure',
|
|
color: '#c084fc', twColor: 'text-purple-400',
|
|
twBorder: 'border-purple-500/50', twBg: 'bg-purple-500/10', twDot: 'bg-purple-400',
|
|
cx: 50, cy: 18, tier: 'product',
|
|
badge: de ? 'DSGVO-konform' : 'GDPR-Compliant',
|
|
tech: ['Rust', 'Dioxus', 'MongoDB', 'Keycloak', 'SearXNG'],
|
|
services: [
|
|
{ name: 'LiteLLM Dashboard', desc: de ? 'Modellverwaltung & Kosten' : 'Model mgmt & spend tracking' },
|
|
{ name: 'LibreChat + SSO', desc: de ? 'Mandanten-Chat' : 'Tenant chat with Keycloak' },
|
|
{ name: 'LangGraph Agents', desc: de ? 'Agent-Orchestrierung' : 'Agent orchestration' },
|
|
{ name: 'MCP Hub', desc: de ? 'Tool-Integration für KI' : 'Tool integration for AI clients' },
|
|
],
|
|
},
|
|
{
|
|
id: 'compliance-scanner',
|
|
icon: ScanLine,
|
|
title: 'Compliance Scanner',
|
|
subtitle: de ? 'Autonome Sicherheit' : 'Autonomous Security',
|
|
color: '#34d399', twColor: 'text-emerald-400',
|
|
twBorder: 'border-emerald-500/50', twBg: 'bg-emerald-500/10', twDot: 'bg-emerald-400',
|
|
cx: 85, cy: 22, tier: 'product',
|
|
badge: 'Rust + AI',
|
|
tech: ['Rust', 'Axum', 'MongoDB', 'Semgrep', 'Gitleaks', 'Syft'],
|
|
services: [
|
|
{ name: 'SAST / SBOM / CVE', desc: de ? 'Vollautomatische Pipeline' : 'Fully automated pipeline' },
|
|
{ name: de ? 'KI-Triage' : 'AI Triage', desc: de ? 'LLM filtert False Positives' : 'LLM filters false positives' },
|
|
{ name: de ? 'KI-Pentest' : 'AI Pentest', desc: de ? 'Autonome Angriffsketten' : 'Autonomous attack chains' },
|
|
{ name: 'MCP Server', desc: de ? 'Live-Findings für AI-Tools' : 'Live findings for AI tools' },
|
|
],
|
|
},
|
|
{
|
|
id: 'litellm',
|
|
icon: Zap,
|
|
title: 'LiteLLM Proxy',
|
|
subtitle: de ? 'Zentrale KI-Infrastruktur' : 'Central AI Proxy',
|
|
color: '#fbbf24', twColor: 'text-amber-400',
|
|
twBorder: 'border-amber-500/60', twBg: 'bg-amber-500/10', twDot: 'bg-amber-400',
|
|
cx: 50, cy: 50, tier: 'proxy',
|
|
badge: 'Hub',
|
|
tech: ['OpenAI-compatible API', 'Bearer Auth', 'Rate Limiting', 'Spend Tracking'],
|
|
services: [
|
|
{ name: de ? 'Multi-Provider' : 'Multi-Provider', desc: 'Ollama · Claude · OpenAI · HuggingFace' },
|
|
{ name: de ? 'Namespace-Isolierung' : 'Namespace Isolation', desc: de ? 'Mandantentrennung per API-Key' : 'Tenant isolation per API key' },
|
|
{ name: de ? 'Kosten-Tracking' : 'Cost Tracking', desc: de ? 'Token-Verbrauch & USD-Kosten' : 'Token usage & USD costs' },
|
|
{ name: de ? 'Failover-Routing' : 'Failover Routing', desc: de ? 'Automatisches Fallback' : 'Automatic fallback routing' },
|
|
],
|
|
},
|
|
{
|
|
id: 'ollama',
|
|
icon: Cpu,
|
|
title: 'Ollama',
|
|
subtitle: de ? 'Lokale Inferenz' : 'Local Inference',
|
|
color: '#60a5fa', twColor: 'text-blue-400',
|
|
twBorder: 'border-blue-500/50', twBg: 'bg-blue-500/10', twDot: 'bg-blue-400',
|
|
cx: 15, cy: 80, tier: 'inference',
|
|
badge: de ? 'On-Premise' : 'On-Premise',
|
|
tech: ['Qwen3-Coder-30B', 'Qwen3-32b', 'bge-m3', 'GPU-optimized'],
|
|
services: [
|
|
{ name: de ? 'Vollständig lokal' : 'Fully local', desc: de ? 'Daten verlassen nie den Server' : 'Data never leaves the server' },
|
|
{ name: de ? 'Air-Gap fähig' : 'Air-Gap Capable', desc: de ? 'Kein Internet erforderlich' : 'No internet required' },
|
|
],
|
|
},
|
|
{
|
|
id: 'claude',
|
|
icon: Globe,
|
|
title: 'Anthropic Claude',
|
|
subtitle: de ? 'Externe Inferenz' : 'External Inference',
|
|
color: '#fb7185', twColor: 'text-rose-400',
|
|
twBorder: 'border-rose-500/50', twBg: 'bg-rose-500/10', twDot: 'bg-rose-400',
|
|
cx: 50, cy: 80, tier: 'inference',
|
|
badge: de ? 'Optional' : 'Optional',
|
|
tech: ['claude-sonnet-4-6', 'claude-haiku-4-5', 'Direct API'],
|
|
services: [
|
|
{ name: 'Control Pipeline', desc: de ? 'Gesetzestextanalyse & Control-Gen.' : 'Legal text analysis & control gen.' },
|
|
{ name: 'Pitch Deck Chatbot', desc: de ? 'Investor-FAQ' : 'Investor FAQ' },
|
|
],
|
|
},
|
|
{
|
|
id: 'openai',
|
|
icon: Cloud,
|
|
title: de ? 'OpenAI / Weitere' : 'OpenAI / Others',
|
|
subtitle: de ? 'Cloud-Modelle' : 'Cloud Models',
|
|
color: '#2dd4bf', twColor: 'text-teal-400',
|
|
twBorder: 'border-teal-500/50', twBg: 'bg-teal-500/10', twDot: 'bg-teal-400',
|
|
cx: 85, cy: 80, tier: 'inference',
|
|
badge: de ? 'Optional' : 'Optional',
|
|
tech: ['gpt-oss-120b', 'HuggingFace', 'text-embedding-3-small'],
|
|
services: [
|
|
{ name: de ? 'Erweiterbar' : 'Extensible', desc: de ? 'Jeder OpenAI-kompatibler Anbieter' : 'Any OpenAI-compatible provider' },
|
|
],
|
|
},
|
|
]
|
|
}
|
|
|
|
function SeaRoute({ d, color, active }: { d: string; color: string; active: boolean }) {
|
|
return (
|
|
<g>
|
|
<path
|
|
d={d}
|
|
fill="none"
|
|
stroke={active ? color : '#ffffff'}
|
|
strokeWidth={active ? 1.5 : 0.6}
|
|
strokeOpacity={active ? 0.5 : 0.09}
|
|
vectorEffect="non-scaling-stroke"
|
|
/>
|
|
{active && (
|
|
<motion.path
|
|
d={d}
|
|
fill="none"
|
|
stroke={color}
|
|
strokeWidth={2.5}
|
|
strokeLinecap="round"
|
|
strokeDasharray="3 22"
|
|
strokeOpacity={0.9}
|
|
vectorEffect="non-scaling-stroke"
|
|
initial={{ strokeDashoffset: 0 }}
|
|
animate={{ strokeDashoffset: -25 }}
|
|
transition={{ duration: 1.4, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
)}
|
|
</g>
|
|
)
|
|
}
|
|
|
|
function MapMarker({ node, active, onClick }: { node: NodeDef; active: boolean; onClick: () => void }) {
|
|
const Icon = node.icon
|
|
const isHub = node.id === 'litellm'
|
|
const iconSize = isHub ? 'w-[52px] h-[52px]' : 'w-[40px] h-[40px]'
|
|
|
|
return (
|
|
<motion.button
|
|
onClick={onClick}
|
|
whileHover={{ scale: 1.1, transition: { duration: 0.14 } }}
|
|
whileTap={{ scale: 0.93 }}
|
|
className="absolute flex flex-col items-center text-center focus:outline-none"
|
|
style={{ left: `${node.cx}%`, top: `${node.cy}%`, transform: 'translate(-50%, -50%)' }}
|
|
>
|
|
<div className="relative flex items-center justify-center">
|
|
{/* Ripple pulse when active */}
|
|
{active && (
|
|
<motion.div
|
|
className="absolute rounded-full pointer-events-none"
|
|
style={{
|
|
width: isHub ? 88 : 66,
|
|
height: isHub ? 88 : 66,
|
|
border: `1px solid ${node.color}`,
|
|
}}
|
|
initial={{ scale: 0.75, opacity: 0.7 }}
|
|
animate={{ scale: 1.55, opacity: 0 }}
|
|
transition={{ duration: 2, repeat: Infinity, ease: 'easeOut' }}
|
|
/>
|
|
)}
|
|
|
|
{/* Icon circle */}
|
|
<div
|
|
className={`relative flex items-center justify-center rounded-full transition-all duration-300 ${iconSize}`}
|
|
style={{
|
|
background: active
|
|
? `radial-gradient(circle at 38% 32%, ${node.color}38, ${node.color}14)`
|
|
: `${node.color}0a`,
|
|
border: `${active ? 2 : 1.5}px solid ${active ? node.color : node.color + '30'}`,
|
|
boxShadow: active
|
|
? `0 0 22px ${node.color}55, 0 0 6px ${node.color}28, inset 0 1px 0 ${node.color}30`
|
|
: 'none',
|
|
}}
|
|
>
|
|
<Icon
|
|
className={`transition-colors duration-300 ${isHub ? 'w-[20px] h-[20px]' : 'w-[14px] h-[14px]'} ${
|
|
active ? node.twColor : 'text-white/30'
|
|
}`}
|
|
/>
|
|
{/* Spinning dashed ring on active hub */}
|
|
{isHub && active && (
|
|
<motion.div
|
|
className="absolute rounded-full pointer-events-none"
|
|
style={{
|
|
inset: -6,
|
|
border: `1px dashed ${node.color}55`,
|
|
borderRadius: '50%',
|
|
}}
|
|
animate={{ rotate: 360 }}
|
|
transition={{ duration: 10, repeat: Infinity, ease: 'linear' }}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Label */}
|
|
<div className="mt-1.5" style={{ maxWidth: isHub ? 96 : 80 }}>
|
|
<p className={`text-[9.5px] font-semibold leading-tight transition-colors duration-200 ${
|
|
active ? 'text-white' : 'text-white/48'
|
|
}`}>
|
|
{node.title}
|
|
</p>
|
|
{(active || isHub) && (
|
|
<p className={`text-[7.5px] mt-[2px] leading-snug transition-colors duration-200 ${
|
|
active ? node.twColor : 'text-white/28'
|
|
}`} style={{ opacity: active ? 0.85 : 1 }}>
|
|
{node.subtitle}
|
|
</p>
|
|
)}
|
|
{node.badge && (
|
|
<span className={`inline-block mt-[3px] text-[7px] px-[6px] py-[1px] rounded-full border transition-all duration-200 ${
|
|
active ? `${node.twBorder} ${node.twColor}` : 'border-white/10 text-white/22'
|
|
}`}>
|
|
{node.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</motion.button>
|
|
)
|
|
}
|
|
|
|
export default function ArchitectureSlide({ lang }: ArchitectureSlideProps) {
|
|
const i = t(lang)
|
|
const de = lang === 'de'
|
|
const nodes = getNodes(de)
|
|
|
|
const [activeId, setActiveId] = useState<NodeId | null>(null)
|
|
const active = nodes.find(n => n.id === activeId) ?? null
|
|
|
|
function toggle(id: NodeId) {
|
|
setActiveId(prev => (prev === id ? null : id))
|
|
}
|
|
|
|
const tenants = de
|
|
? ['Mandant A', 'Mandant B', 'Mandant C', 'Mandant N…']
|
|
: ['Namespace A', 'Namespace B', 'Namespace C', 'Namespace N…']
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
{/* Header */}
|
|
<FadeInView className="text-center mb-3">
|
|
<p className="text-[10px] font-mono text-indigo-400/50 uppercase tracking-widest mb-1.5">
|
|
{de ? 'Anhang' : 'Appendix'}
|
|
</p>
|
|
<h2 className="text-3xl md:text-4xl font-bold mb-1.5">
|
|
<GradientText>{i.annex.architecture.title}</GradientText>
|
|
</h2>
|
|
<p className="text-xs text-white/35">
|
|
{de ? 'Klicke auf eine Komponente für Details' : 'Click any component to explore'}
|
|
</p>
|
|
</FadeInView>
|
|
|
|
<FadeInView delay={0.15} className="space-y-3">
|
|
{/* Customer namespace strip */}
|
|
<div className="flex items-center gap-2 flex-wrap px-[4%]">
|
|
<Users className="w-3 h-3 text-white/25 flex-shrink-0" />
|
|
<span className="text-[9px] font-mono text-white/25 uppercase tracking-widest mr-1">
|
|
{de ? 'Kundenmandanten' : 'Customer Namespaces'}
|
|
</span>
|
|
{tenants.map(tn => (
|
|
<span
|
|
key={tn}
|
|
className="text-[9px] px-2 py-0.5 rounded-full border border-white/[0.08] bg-white/[0.03] text-white/35 font-mono"
|
|
>
|
|
{tn}
|
|
</span>
|
|
))}
|
|
<div className="flex-1 h-px bg-gradient-to-r from-white/10 to-transparent ml-1" />
|
|
</div>
|
|
|
|
{/* ── THE MAP ──────────────────────────────────────────────────── */}
|
|
<div className="relative w-full" style={{ height: '390px' }}>
|
|
|
|
{/* Ocean background (clipped to rounded rect) */}
|
|
<div
|
|
className="absolute inset-0 rounded-xl overflow-hidden"
|
|
style={{
|
|
background: `
|
|
radial-gradient(ellipse 55% 35% at 50% 50%, rgba(251,191,36,0.055) 0%, transparent 68%),
|
|
radial-gradient(ellipse 65% 25% at 50% 20%, rgba(129,140,248,0.07) 0%, transparent 58%),
|
|
radial-gradient(ellipse 65% 22% at 50% 82%, rgba(96,165,250,0.04) 0%, transparent 58%),
|
|
linear-gradient(170deg, #030d1e 0%, #040f20 50%, #030c1c 100%)
|
|
`,
|
|
}}
|
|
>
|
|
{/* Fine dot grid */}
|
|
<div
|
|
className="absolute inset-0 opacity-[0.042]"
|
|
style={{
|
|
backgroundImage: 'radial-gradient(circle, #6b7280 1px, transparent 1px)',
|
|
backgroundSize: '22px 22px',
|
|
}}
|
|
/>
|
|
{/* Zone separator lines */}
|
|
{(['35%', '65%'] as const).map(y => (
|
|
<div
|
|
key={y}
|
|
className="absolute left-0 right-0 h-px"
|
|
style={{ top: y, background: 'linear-gradient(to right, transparent 0%, rgba(255,255,255,0.045) 20%, rgba(255,255,255,0.045) 80%, transparent 100%)' }}
|
|
/>
|
|
))}
|
|
</div>
|
|
|
|
{/* Zone labels */}
|
|
{[
|
|
{ y: '22%', label: de ? 'Produkte' : 'Products', clr: '#818cf8' },
|
|
{ y: '50%', label: de ? 'KI-Proxy' : 'AI Proxy', clr: '#fbbf24' },
|
|
{ y: '80%', label: de ? 'Inferenz' : 'Inference', clr: '#60a5fa' },
|
|
].map(({ y, label, clr }) => (
|
|
<div
|
|
key={label}
|
|
className="absolute left-3 flex items-center gap-1.5 select-none pointer-events-none"
|
|
style={{ top: y, transform: 'translateY(-50%)' }}
|
|
>
|
|
<div className="w-2.5 h-px" style={{ background: clr, opacity: 0.28 }} />
|
|
<span
|
|
className="text-[7px] font-mono tracking-[0.16em] uppercase"
|
|
style={{ color: clr, opacity: 0.38 }}
|
|
>
|
|
{label}
|
|
</span>
|
|
</div>
|
|
))}
|
|
|
|
{/* SVG: island territories + sea routes */}
|
|
<svg
|
|
className="absolute inset-0 w-full h-full pointer-events-none"
|
|
viewBox="0 0 100 100"
|
|
preserveAspectRatio="none"
|
|
>
|
|
{/* Wide zone territory fills */}
|
|
<ellipse cx="50" cy="18" rx="43" ry="11" fill="#818cf8" fillOpacity="0.025" />
|
|
<ellipse cx="50" cy="50" rx="13" ry="8" fill="#fbbf24" fillOpacity="0.04" />
|
|
<ellipse cx="50" cy="80" rx="43" ry="10" fill="#60a5fa" fillOpacity="0.02" />
|
|
|
|
{/* Per-node island blobs (outer contour + fill) */}
|
|
{nodes.map(node => {
|
|
const isHub = node.id === 'litellm'
|
|
const isActive = activeId === node.id
|
|
const rx = isHub ? 10 : 7
|
|
const ry = isHub ? 6 : 3.8
|
|
const rxOuter = isHub ? 14.5 : 10
|
|
const ryOuter = isHub ? 8.5 : 5.5
|
|
return (
|
|
<g key={`island-${node.id}`}>
|
|
{/* Outer contour ring */}
|
|
<ellipse
|
|
cx={node.cx} cy={node.cy}
|
|
rx={rxOuter} ry={ryOuter}
|
|
fill="none"
|
|
stroke={node.color}
|
|
strokeWidth={0.4}
|
|
vectorEffect="non-scaling-stroke"
|
|
strokeDasharray="1.5 4"
|
|
strokeOpacity={isActive ? 0.2 : 0.06}
|
|
/>
|
|
{/* Inner island fill */}
|
|
<ellipse
|
|
cx={node.cx} cy={node.cy}
|
|
rx={rx} ry={ry}
|
|
fill={node.color}
|
|
fillOpacity={isActive ? 0.14 : 0.042}
|
|
stroke={node.color}
|
|
strokeWidth={0.5}
|
|
vectorEffect="non-scaling-stroke"
|
|
strokeOpacity={isActive ? 0.38 : 0.1}
|
|
/>
|
|
</g>
|
|
)
|
|
})}
|
|
|
|
{/* Sea routes */}
|
|
{CONNECTIONS.map(([fromId, toId]) => {
|
|
const key = `${fromId}-${toId}`
|
|
const from = nodes.find(n => n.id === fromId)!
|
|
const to = nodes.find(n => n.id === toId)!
|
|
const isActive = activeId === fromId || activeId === toId
|
|
const color = isActive
|
|
? (activeId === fromId ? from.color : to.color)
|
|
: '#ffffff'
|
|
return (
|
|
<SeaRoute key={key} d={ROUTES[key]} color={color} active={isActive} />
|
|
)
|
|
})}
|
|
</svg>
|
|
|
|
{/* Node markers */}
|
|
{nodes.map(node => (
|
|
<MapMarker
|
|
key={node.id}
|
|
node={node}
|
|
active={activeId === node.id}
|
|
onClick={() => toggle(node.id)}
|
|
/>
|
|
))}
|
|
|
|
{!activeId && (
|
|
<div className="absolute bottom-3 right-3 flex items-center gap-1 text-[8.5px] text-white/18 pointer-events-none">
|
|
<ChevronRight className="w-3 h-3" />
|
|
{de ? 'Komponente anklicken' : 'Click any node'}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* ── DETAIL PANEL ─────────────────────────────────────────────── */}
|
|
<AnimatePresence>
|
|
{active && (
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 12 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
exit={{ opacity: 0, y: 8 }}
|
|
transition={{ duration: 0.22, ease: [0.22, 1, 0.36, 1] }}
|
|
className={`relative rounded-2xl border ${active.twBorder} ${active.twBg} p-4`}
|
|
style={{ boxShadow: `0 0 30px -10px ${active.color}40` }}
|
|
>
|
|
<button
|
|
onClick={() => setActiveId(null)}
|
|
className="absolute top-3 right-3 w-6 h-6 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
|
|
>
|
|
<X className="w-3 h-3 text-white/50" />
|
|
</button>
|
|
|
|
<div className="flex items-start gap-3 mb-4">
|
|
<div className={`w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0 border ${active.twBorder} ${active.twBg}`}>
|
|
<active.icon className={`w-5 h-5 ${active.twColor}`} />
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="flex items-center gap-2 flex-wrap">
|
|
<h3 className="text-sm font-bold text-white">{active.title}</h3>
|
|
{active.badge && (
|
|
<span className={`text-[9px] px-1.5 py-0.5 rounded uppercase font-semibold tracking-wider border ${active.twBorder} ${active.twColor}`}>
|
|
{active.badge}
|
|
</span>
|
|
)}
|
|
</div>
|
|
<p className="text-xs text-white/45">{active.subtitle}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-5">
|
|
<div>
|
|
<p className="text-[9px] uppercase tracking-widest text-white/30 mb-2 font-semibold">
|
|
{de ? 'Stack' : 'Tech Stack'}
|
|
</p>
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{active.tech.map(tk => (
|
|
<span key={tk} className="text-[10px] px-2 py-0.5 rounded bg-white/[0.05] border border-white/[0.08] text-white/55 font-mono">
|
|
{tk}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<p className="text-[9px] uppercase tracking-widest text-white/30 mb-2 font-semibold">
|
|
{de ? 'Funktionen' : 'Capabilities'}
|
|
</p>
|
|
<div className="space-y-1.5">
|
|
{active.services.map(s => (
|
|
<div key={s.name} className="flex items-start gap-2">
|
|
<div className={`w-1 h-1 rounded-full mt-1.5 flex-shrink-0 ${active.twDot} opacity-70`} />
|
|
<div className="min-w-0">
|
|
<span className="text-xs font-semibold text-white/80">{s.name}</span>
|
|
<span className="text-[10px] text-white/40 ml-1.5">{s.desc}</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-3 pt-3 border-t border-white/[0.06] flex items-center gap-2 flex-wrap">
|
|
<Network className="w-3 h-3 text-white/20 flex-shrink-0" />
|
|
<span className="text-[9px] text-white/30">
|
|
{de ? 'Verbunden mit:' : 'Connects to:'}
|
|
</span>
|
|
{CONNECTIONS
|
|
.filter(([a, b]) => a === active.id || b === active.id)
|
|
.map(([a, b]) => {
|
|
const peerId = a === active.id ? b : a
|
|
const peer = nodes.find(n => n.id === peerId)!
|
|
return (
|
|
<button
|
|
key={peerId}
|
|
onClick={() => setActiveId(peerId)}
|
|
className={`text-[9px] px-2 py-0.5 rounded-full border ${peer.twBorder} ${peer.twColor} transition-opacity hover:opacity-80`}
|
|
>
|
|
{peer.title}
|
|
</button>
|
|
)
|
|
})}
|
|
</div>
|
|
</motion.div>
|
|
)}
|
|
</AnimatePresence>
|
|
|
|
{/* Bottom legend */}
|
|
{!active && (
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
className="flex items-center justify-center gap-6 flex-wrap"
|
|
>
|
|
{[
|
|
{ icon: Lock, text: de ? 'DSGVO-konform · BSI-zertifizierbar' : 'GDPR-compliant · BSI-certifiable' },
|
|
{ icon: Server, text: de ? 'On-Premise oder EU-Cloud' : 'On-Premise or EU Cloud' },
|
|
{ icon: Layers, text: de ? 'Air-Gap fähig' : 'Air-Gap Capable' },
|
|
].map(({ icon: Icon, text }) => (
|
|
<span key={text} className="flex items-center gap-1.5 text-[10px] text-white/22">
|
|
<Icon className="w-3 h-3" />
|
|
{text}
|
|
</span>
|
|
))}
|
|
</motion.div>
|
|
)}
|
|
</FadeInView>
|
|
</div>
|
|
)
|
|
}
|