Hugging Face's logo

Spaces:
aidn
/
supplychain-showcase
Running

App Files Community
aidn commited on
Commit
f6a2883
·
verified ·
1 Parent(s): fc6ae25

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +446 -19
index.html CHANGED
@@ -1,19 +1,446 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="de" class="scroll-smooth">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Agentic Supply Chain Showcase | valantic & databricks</title>
7
+
8
+ <!-- Tailwind CSS -->
9
+ <script src="https://cdn.tailwindcss.com"></script>
10
+
11
+ <!-- Tailwind Configuration -->
12
+ <script>
13
+ tailwind.config = {
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ brand: {
18
+ dark: '#1c1b3d', // valantic inspired dark blue
19
+ light: '#2a2859',
20
+ accent: '#ff3621', // databricks inspired red
21
+ accentHover: '#e02814'
22
+ }
23
+ },
24
+ fontFamily: {
25
+ sans: ['Inter', 'system-ui', 'sans-serif'],
26
+ }
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+
32
+ <!-- Lucide Icons -->
33
+ <script src="https://unpkg.com/lucide@latest"></script>
34
+
35
+ <style>
36
+ /* Custom subtle animations */
37
+ .fade-in-up {
38
+ animation: fadeInUp 0.8s ease-out forwards;
39
+ opacity: 0;
40
+ transform: translateY(20px);
41
+ }
42
+ @keyframes fadeInUp {
43
+ to {
44
+ opacity: 1;
45
+ transform: translateY(0);
46
+ }
47
+ }
48
+ .delay-100 { animation-delay: 100ms; }
49
+ .delay-200 { animation-delay: 200ms; }
50
+ .delay-300 { animation-delay: 300ms; }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 text-gray-800 font-sans antialiased">
54
+
55
+ <!-- Navigation -->
56
+ <nav class="fixed w-full z-50 bg-white/90 backdrop-blur-md shadow-sm">
57
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
58
+ <div class="flex justify-between h-20 items-center">
59
+ <div class="flex items-center gap-4">
60
+ <span class="text-2xl font-extrabold text-brand-dark tracking-tight">valantic</span>
61
+ <span class="text-gray-300">|</span>
62
+ <span class="text-xl font-bold text-brand-accent tracking-tight">databricks</span>
63
+ </div>
64
+ <div class="hidden md:flex space-x-8">
65
+ <a href="#problem-loesung" class="text-gray-600 hover:text-brand-accent font-medium transition-colors">Die Challenge</a>
66
+ <a href="#showcase" class="text-gray-600 hover:text-brand-accent font-medium transition-colors">Live Demo</a>
67
+ <a href="#architektur" class="text-gray-600 hover:text-brand-accent font-medium transition-colors">Architektur</a>
68
+ </div>
69
+ <div class="hidden md:flex">
70
+ <a href="#showcase" class="bg-brand-accent hover:bg-brand-accentHover text-white px-6 py-2.5 rounded-full font-semibold transition-all shadow-md hover:shadow-lg">
71
+ Zum Showcase
72
+ </a>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </nav>
77
+
78
+ <!-- Section 1: Hero Area -->
79
+ <section class="relative pt-32 pb-20 lg:pt-48 lg:pb-32 overflow-hidden bg-brand-dark text-white">
80
+ <!-- Background Image with Overlay -->
81
+ <div class="absolute inset-0 z-0">
82
+ <!-- Placeholder for -->
83
+ <div class="absolute inset-0 bg-gradient-to-r from-brand-dark via-brand-dark/90 to-brand-light/80 z-10"></div>
84
+ <img src="https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?q=80&w=2070&auto=format&fit=crop" alt="Supply Chain Background" class="w-full h-full object-cover opacity-50 mix-blend-overlay" />
85
+ </div>
86
+
87
+ <div class="relative z-10 max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
88
+ <div class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-sm font-medium mb-8 fade-in-up">
89
+ <i data-lucide="sparkles" class="w-4 h-4 text-brand-accent"></i>
90
+ IPAI KI-Festival 2026
91
+ </div>
92
+ <h1 class="text-4xl md:text-6xl lg:text-7xl font-extrabold tracking-tight mb-6 fade-in-up delay-100">
93
+ Proaktives Supply-Chain <br class="hidden md:block" />
94
+ Management mit <span class="text-transparent bg-clip-text bg-gradient-to-r from-brand-accent to-orange-400">Agentic AI</span>.
95
+ </h1>
96
+ <p class="mt-4 text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10 fade-in-up delay-200">
97
+ Erleben Sie die nächste Stufe der Automatisierung: Hybrid Intelligence auf der Databricks Data Intelligence Platform.
98
+ </p>
99
+ <div class="flex flex-col sm:flex-row justify-center gap-4 fade-in-up delay-300">
100
+ <a href="#showcase" class="bg-brand-accent hover:bg-brand-accentHover text-white px-8 py-4 rounded-full font-bold text-lg transition-all shadow-lg hover:shadow-brand-accent/30 flex items-center justify-center gap-2">
101
+ Showcase Live Erleben
102
+ <i data-lucide="arrow-right" class="w-5 h-5"></i>
103
+ </a>
104
+ </div>
105
+ </div>
106
+ </section>
107
+
108
+ <!-- Section 2: Problem vs. Lösung -->
109
+ <section id="problem-loesung" class="py-24 bg-white">
110
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
111
+ <div class="text-center mb-16">
112
+ <h2 class="text-3xl md:text-4xl font-bold text-brand-dark mb-4">Statische Regeln treffen auf eine chaotische Welt</h2>
113
+ <div class="w-24 h-1 bg-brand-accent mx-auto rounded-full"></div>
114
+ </div>
115
+
116
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-12 lg:gap-24">
117
+ <!-- Left Column: Challenge -->
118
+ <div class="space-y-8">
119
+ <div class="flex items-center gap-3 mb-6">
120
+ <div class="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center text-red-600">
121
+ <i data-lucide="alert-triangle" class="w-6 h-6"></i>
122
+ </div>
123
+ <h3 class="text-2xl font-bold text-gray-900">Die Challenge</h3>
124
+ </div>
125
+
126
+ <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100 hover:shadow-md transition-shadow">
127
+ <div class="flex gap-4">
128
+ <i data-lucide="database" class="w-6 h-6 text-gray-500 shrink-0 mt-1"></i>
129
+ <div>
130
+ <h4 class="font-bold text-gray-900 mb-2">Informations-Silos</h4>
131
+ <p class="text-gray-600">Supply Chain Manager müssen statische Vertragsdaten (SLAs, Compliance-PDFs) und dynamische Echtzeit-Ereignisse manuell abgleichen.</p>
132
+ </div>
133
+ </div>
134
+ </div>
135
+
136
+ <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100 hover:shadow-md transition-shadow">
137
+ <div class="flex gap-4">
138
+ <i data-lucide="git-network" class="w-6 h-6 text-gray-500 shrink-0 mt-1"></i>
139
+ <div>
140
+ <h4 class="font-bold text-gray-900 mb-2">Hohe Komplexität</h4>
141
+ <p class="text-gray-600">Unterschiedliche Produkte haben unterschiedliche Toleranzgrenzen. Was für Produkt A (Insulin) kritisch ist, ist für Produkt B (Verpackung) irrelevant.</p>
142
+ </div>
143
+ </div>
144
+ </div>
145
+
146
+ <div class="bg-gray-50 p-6 rounded-2xl border border-gray-100 hover:shadow-md transition-shadow">
147
+ <div class="flex gap-4">
148
+ <i data-lucide="clock" class="w-6 h-6 text-gray-500 shrink-0 mt-1"></i>
149
+ <div>
150
+ <h4 class="font-bold text-gray-900 mb-2">Reaktives Handeln</h4>
151
+ <p class="text-gray-600">Risiken werden oft erst erkannt, wenn der Schaden an sensiblen Gütern bereits eingetreten ist.</p>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Right Column: Benefit -->
158
+ <div class="space-y-8">
159
+ <div class="flex items-center gap-3 mb-6">
160
+ <div class="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600">
161
+ <i data-lucide="check-circle" class="w-6 h-6"></i>
162
+ </div>
163
+ <h3 class="text-2xl font-bold text-gray-900">Der Customer Benefit</h3>
164
+ </div>
165
+
166
+ <div class="bg-blue-50/50 p-6 rounded-2xl border border-blue-100 hover:shadow-md transition-shadow">
167
+ <div class="flex gap-4">
168
+ <i data-lucide="monitor" class="w-6 h-6 text-brand-accent shrink-0 mt-1"></i>
169
+ <div>
170
+ <h4 class="font-bold text-gray-900 mb-2">Single Pane of Glass</h4>
171
+ <p class="text-gray-600">Konsolidierung von unstrukturiertem Firmenwissen und weltweiten Live-Daten in einer einzigen, natürlichsprachlichen Schnittstelle.</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="bg-blue-50/50 p-6 rounded-2xl border border-blue-100 hover:shadow-md transition-shadow">
177
+ <div class="flex gap-4">
178
+ <i data-lucide="shield-check" class="w-6 h-6 text-brand-accent shrink-0 mt-1"></i>
179
+ <div>
180
+ <h4 class="font-bold text-gray-900 mb-2">Proaktives Risikomanagement</h4>
181
+ <p class="text-gray-600">Das System warnt, bevor ein Schaden entsteht ("Präventiver Alarm"), indem es Wettervorhersagen gegen Produkt-Toleranzen prüft.</p>
182
+ </div>
183
+ </div>
184
+ </div>
185
+
186
+ <div class="bg-blue-50/50 p-6 rounded-2xl border border-blue-100 hover:shadow-md transition-shadow">
187
+ <div class="flex gap-4">
188
+ <i data-lucide="bot" class="w-6 h-6 text-brand-accent shrink-0 mt-1"></i>
189
+ <div>
190
+ <h4 class="font-bold text-gray-900 mb-2">Automatisierte Entscheidungsfindung</h4>
191
+ <p class="text-gray-600">24/7 Überwachung globaler Lieferketten ohne menschliche Ermüdung. Der Agent empfiehlt direkt die korrekte Maßnahme.</p>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </section>
199
+
200
+ <!-- Section 3: Der Showcase (Step-by-Step Demo) -->
201
+ <section id="showcase" class="py-24 bg-brand-dark text-white overflow-hidden">
202
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
203
+ <div class="mb-16">
204
+ <span class="text-brand-accent font-semibold tracking-wider uppercase text-sm">Die Live Demo</span>
205
+ <h2 class="text-3xl md:text-5xl font-bold mt-2 mb-6">Szenario: Kritischer Temperatureinfluss</h2>
206
+ <p class="text-xl text-gray-400 max-w-3xl">Ein Supply Chain Manager prüft den Status einer sensiblen Lieferung von Class II Therapeutika (z.B. Insulin), die aktuell im Hafen von Singapur zwischengelagert wird.</p>
207
+ </div>
208
+
209
+ <!-- Steps Layout -->
210
+ <div class="grid grid-cols-1 lg:grid-cols-2 gap-16 items-center">
211
+ <!-- Text Steps -->
212
+ <div class="space-y-12 relative">
213
+ <!-- Vertical Line for timeline effect -->
214
+ <div class="absolute left-6 top-6 bottom-6 w-0.5 bg-gray-700 hidden sm:block"></div>
215
+
216
+ <!-- Step 1 -->
217
+ <div class="relative flex gap-6 sm:gap-8 items-start">
218
+ <div class="w-12 h-12 rounded-full bg-brand-accent flex items-center justify-center font-bold text-xl shrink-0 z-10 shadow-lg shadow-brand-accent/30">1</div>
219
+ <div>
220
+ <h3 class="text-2xl font-bold mb-3">Live-Daten (MCP)</h3>
221
+ <p class="text-gray-400 mb-4">Der Agent erkennt den Ort "Singapur" und nutzt das MCP-Tool, um die lokalen Wetterbedingungen abzufragen.</p>
222
+ <div class="bg-white/10 rounded-lg p-4 border border-white/10">
223
+ <span class="text-sm text-gray-400 block mb-1">Ergebnis:</span>
224
+ <span class="font-mono text-brand-accent">Aktuelle Temperatur: 32°C bei hoher Luftfeuchtigkeit.</span>
225
+ </div>
226
+ </div>
227
+ </div>
228
+
229
+ <!-- Step 2 -->
230
+ <div class="relative flex gap-6 sm:gap-8 items-start">
231
+ <div class="w-12 h-12 rounded-full bg-brand-accent flex items-center justify-center font-bold text-xl shrink-0 z-10 shadow-lg shadow-brand-accent/30">2</div>
232
+ <div>
233
+ <h3 class="text-2xl font-bold mb-3">Abgleich mit SLA-Regelwerk (RAG)</h3>
234
+ <p class="text-gray-400 mb-4">Parallel durchsucht der Knowledge-Agent die internen Compliance-PDFs nach Grenzwerten für Class II Produkte.</p>
235
+ <div class="bg-white/10 rounded-lg p-4 border border-white/10">
236
+ <span class="text-sm text-gray-400 block mb-1">Ergebnis:</span>
237
+ <span class="font-mono text-brand-accent">Max. zulässige Temperatur ist 25°C. Bei Überschreitung: Eskalation.</span>
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <!-- Step 3 -->
243
+ <div class="relative flex gap-6 sm:gap-8 items-start">
244
+ <div class="w-12 h-12 rounded-full bg-brand-accent flex items-center justify-center font-bold text-xl shrink-0 z-10 shadow-lg shadow-brand-accent/30">3</div>
245
+ <div>
246
+ <h3 class="text-2xl font-bold mb-3">Synthese & Handlungsempfehlung</h3>
247
+ <p class="text-gray-400 mb-4">Der Supervisor erkennt die Diskrepanz (7°C zu warm) und löst den Alarm aus. Der Agent schlägt direkte Maßnahmen vor (z.B. Versicherer informieren).</p>
248
+ </div>
249
+ </div>
250
+
251
+ <!-- Future Outlook -->
252
+ <div class="relative flex gap-6 sm:gap-8 items-start pt-6 border-t border-gray-700">
253
+ <div class="w-12 h-12 rounded-full bg-gray-800 border border-gray-600 flex items-center justify-center shrink-0 z-10">
254
+ <i data-lucide="fast-forward" class="w-5 h-5 text-gray-400"></i>
255
+ </div>
256
+ <div>
257
+ <h3 class="text-xl font-bold text-gray-300 mb-2">Der Ausblick</h3>
258
+ <p class="text-gray-500">In einer zusätzlichen Ausbaustufe ermöglicht das System nicht nur Empfehlungen, sondern aktives Handeln (mit Human-in-the-Loop).</p>
259
+ </div>
260
+ </div>
261
+ </div>
262
+
263
+ <!-- Visuals / UI Mockup -->
264
+ <div class="relative">
265
+ <div class="absolute -inset-1 bg-gradient-to-r from-brand-accent to-orange-500 rounded-2xl blur opacity-20"></div>
266
+ <div class="relative bg-brand-light rounded-2xl border border-gray-700 shadow-2xl overflow-hidden">
267
+ <!-- Browser Header -->
268
+ <div class="bg-gray-800 px-4 py-3 flex items-center gap-2 border-b border-gray-700">
269
+ <div class="flex gap-1.5">
270
+ <div class="w-3 h-3 rounded-full bg-red-500"></div>
271
+ <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
272
+ <div class="w-3 h-3 rounded-full bg-green-500"></div>
273
+ </div>
274
+ <div class="ml-4 bg-gray-900 text-xs text-gray-400 px-3 py-1 rounded-md flex-1 text-center font-mono">
275
+ Databricks Playground
276
+ </div>
277
+ </div>
278
+
279
+ <!-- Chat Interface Simulation -->
280
+ <div class="p-6 space-y-6 h-[600px] overflow-y-auto">
281
+ <!-- User Message -->
282
+ <div class="flex gap-4">
283
+ <div class="w-8 h-8 rounded-full bg-gray-700 flex items-center justify-center shrink-0">
284
+ <i data-lucide="user" class="w-4 h-4"></i>
285
+ </div>
286
+ <div class="bg-gray-800 rounded-2xl rounded-tl-none px-5 py-3 text-gray-200">
287
+ Wir erwarten heute eine Insulin Lieferung in Singapur. Sind Komplikationen zu erwarten?
288
+ </div>
289
+ </div>
290
+
291
+ <!-- Agent Processing 1 -->
292
+ <div class="flex gap-4">
293
+ <div class="w-8 h-8 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
294
+ <i data-lucide="bot" class="w-4 h-4 text-white"></i>
295
+ </div>
296
+ <div class="w-full">
297
+ <div class="bg-brand-dark/50 border border-gray-700 rounded-2xl rounded-tl-none p-4 text-gray-300">
298
+ Ich werde zunächst die aktuellen Wetterbedingungen in Singapur prüfen und dann die relevanten SLA-Anforderungen abfragen.
299
+
300
+ <!-- Tool Call UI -->
301
+ <div class="mt-4 bg-gray-900 rounded-lg p-3 border border-gray-700 font-mono text-sm">
302
+ <div class="flex items-center gap-2 text-green-400 mb-2">
303
+ <i data-lucide="check-circle-2" class="w-4 h-4"></i>
304
+ Tool approved: tavily_search from live-data-client
305
+ </div>
306
+ <div class="text-gray-500">
307
+ <span class="text-blue-400">Input:</span> "Singapur Wetter heute" <br/>
308
+ <span class="text-orange-400">Output:</span> 32°C, 79-88% Luftfeuchtigkeit
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </div>
314
+
315
+ <!-- Agent Processing 2 -->
316
+ <div class="flex gap-4">
317
+ <div class="w-8 h-8 rounded-full bg-brand-accent flex items-center justify-center shrink-0 opacity-0"></div>
318
+ <div class="w-full">
319
+ <div class="bg-brand-dark/50 border border-gray-700 rounded-2xl p-4 text-gray-300">
320
+ <!-- Tool Call UI -->
321
+ <div class="bg-gray-900 rounded-lg p-3 border border-gray-700 font-mono text-sm">
322
+ <div class="flex items-center gap-2 text-purple-400 mb-2">
323
+ <i data-lucide="book-open" class="w-4 h-4"></i>
324
+ Calling: sla-knowledge-assistant
325
+ </div>
326
+ <div class="text-gray-500">
327
+ <span class="text-blue-400">Query:</span> "Insulin Lagerbedingungen Temperatur" <br/>
328
+ <span class="text-orange-400">Result:</span> Class II (Rx), 15°C - 25°C. Critical Breach > 25°C.
329
+ </div>
330
+ </div>
331
+ </div>
332
+ </div>
333
+ </div>
334
+
335
+ <!-- Final Output -->
336
+ <div class="flex gap-4">
337
+ <div class="w-8 h-8 rounded-full bg-brand-accent flex items-center justify-center shrink-0">
338
+ <i data-lucide="shield-alert" class="w-4 h-4 text-white"></i>
339
+ </div>
340
+ <div class="w-full">
341
+ <div class="bg-brand-dark border border-brand-accent/50 rounded-2xl rounded-tl-none p-5 text-gray-200 shadow-lg">
342
+ <h4 class="text-brand-accent font-bold flex items-center gap-2 mb-3">
343
+ <i data-lucide="alert-triangle" class="w-5 h-5"></i>
344
+ HOHES RISIKO - KOMPLIKATIONEN ZU ERWARTEN
345
+ </h4>
346
+ <p class="mb-3">Die Außentemperaturen in Singapur liegen heute bei <strong>32°C</strong> und damit <strong>7°C über dem maximal zulässigen Grenzwert</strong> von 25°C für Insulin.</p>
347
+ <div class="bg-red-900/20 border border-red-500/30 rounded p-3 mb-3 text-sm">
348
+ <strong>Eskalationsmatrix (CRITICAL BREACH):</strong>
349
+ <ol class="list-decimal list-inside mt-2 space-y-1 text-gray-300">
350
+ <li>Ware gilt als "potenziell kompromittiert".</li>
351
+ <li>Sofortige Umlagerung in Cool House veranlassen.</li>
352
+ <li>Benachrichtigung Quality Manager.</li>
353
+ </ol>
354
+ </div>
355
+ <p class="text-sm text-gray-400 italic">Soll ich die Benachrichtigung an den Quality Manager vorbereiten und die Umlagerung anstoßen?</p>
356
+ </div>
357
+ </div>
358
+ </div>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </section>
365
+
366
+ <!-- Section 4: Under the Hood (Architektur) -->
367
+ <section id="architektur" class="py-24 bg-gray-50">
368
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
369
+ <div class="text-center mb-16">
370
+ <h2 class="text-3xl md:text-4xl font-bold text-brand-dark mb-4">Wie denkt das Multi-Agent System?</h2>
371
+ <p class="text-xl text-gray-600 max-w-2xl mx-auto">Die Architektur orchestriert spezialisierte Agenten, um komplexe Probleme in Sekunden zu lösen.</p>
372
+ </div>
373
+
374
+ <div class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-8">
375
+ <!-- Supervisor -->
376
+ <div class="bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 group">
377
+ <div class="w-14 h-14 bg-brand-dark text-white rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
378
+ <i data-lucide="brain-circuit" class="w-7 h-7"></i>
379
+ </div>
380
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Supervisor Agent</h3>
381
+ <p class="text-sm text-brand-accent font-semibold mb-3">Orchestration Layer</p>
382
+ <p class="text-gray-600">Einsatz eines Databricks Supervisor Agent, der komplexe Anfragen zerlegt und logisch an spezialisierte Sub-Agenten delegiert.</p>
383
+ </div>
384
+
385
+ <!-- Knowledge Assistant -->
386
+ <div class="bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 group">
387
+ <div class="w-14 h-14 bg-blue-100 text-blue-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
388
+ <i data-lucide="book-open-check" class="w-7 h-7"></i>
389
+ </div>
390
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Knowledge Assistant</h3>
391
+ <p class="text-sm text-blue-600 font-semibold mb-3">"Der Anwalt" (RAG)</p>
392
+ <p class="text-gray-600">Zuständig für statische Daten und Compliance. Nutzt Databricks Vector Search auf dem Unity Catalog, um SLAs und Verträge zu prüfen.</p>
393
+ </div>
394
+
395
+ <!-- MCP Client -->
396
+ <div class="bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 group">
397
+ <div class="w-14 h-14 bg-green-100 text-green-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
398
+ <i data-lucide="radar" class="w-7 h-7"></i>
399
+ </div>
400
+ <h3 class="text-xl font-bold text-gray-900 mb-3">MCP Client</h3>
401
+ <p class="text-sm text-green-600 font-semibold mb-3">"Der Scout" (Live Data)</p>
402
+ <p class="text-gray-600">Zuständig für dynamische Daten und Real World Context. Verbindet sich via Model Context Protocol (MCP) mit externen APIs für Live-Wetter.</p>
403
+ </div>
404
+
405
+ <!-- Action & Execution -->
406
+ <div class="bg-white p-8 rounded-2xl border border-gray-200 shadow-sm hover:shadow-xl transition-all hover:-translate-y-1 group">
407
+ <div class="w-14 h-14 bg-orange-100 text-orange-600 rounded-xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform">
408
+ <i data-lucide="zap" class="w-7 h-7"></i>
409
+ </div>
410
+ <h3 class="text-xl font-bold text-gray-900 mb-3">Action & Execution</h3>
411
+ <p class="text-sm text-orange-600 font-semibold mb-3">"Der Macher" (Future Outlook)</p>
412
+ <p class="text-gray-600">Ausblick auf "Active Agents" mit schreibendem Zugriff auf Systeme wie SAP oder Jira, um Folgeprozesse autonom und sicher anzustoßen.</p>
413
+ </div>
414
+ </div>
415
+ </div>
416
+ </section>
417
+
418
+ <!-- Section 5: Technologie & Trust / Footer -->
419
+ <section class="py-16 bg-white border-t border-gray-200">
420
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
421
+
422
+ <div class="flex flex-col md:flex-row items-center justify-center gap-8 md:gap-16 mb-10 opacity-80">
423
+ <h2 class="text-3xl font-extrabold text-brand-dark tracking-tight">valantic</h2>
424
+ <div class="hidden md:block w-px h-12 bg-gray-300"></div>
425
+ <!-- Placeholder for -->
426
+ <h2 class="text-3xl font-extrabold text-gray-800 tracking-tight flex items-center gap-2">
427
+ <i data-lucide="layers" class="text-brand-accent"></i> databricks
428
+ </h2>
429
+ </div>
430
+
431
+ <p class="text-gray-500 max-w-2xl mx-auto font-medium">
432
+ Die gesamte Architektur ist vollständig in die <strong class="text-gray-800">Databricks Data Intelligence Platform</strong> integriert, um höchste Sicherheit, Transparenz und Governance durch den Unity Catalog zu gewährleisten.
433
+ </p>
434
+
435
+ <div class="mt-12 text-sm text-gray-400">
436
+ &copy; 2026 valantic GmbH. Showcase entwickelt für das IPAI KI-Festival.
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Initialize Icons -->
442
+ <script>
443
+ lucide.createIcons();
444
+ </script>
445
+ </body>
446
+ </html>