Hugging Face's logo

Spaces:
chiminaca
/
deepsite-test
Running

App Files Community
chiminaca commited on
Commit
80d5081
·
verified ·
1 Parent(s): 89226b2

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +772 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Deepsite Test
3
- emoji: 🌍
4
- colorFrom: gray
5
- colorTo: green
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: deepsite-test
3
+ emoji: 🐳
4
+ colorFrom: green
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,772 @@
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="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>AI-Consultant | Maximale Effizienz durch Künstliche Intelligenz</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <script>
10
+ tailwind.config = {
11
+ darkMode: 'class',
12
+ theme: {
13
+ extend: {
14
+ colors: {
15
+ primary: {
16
+ light: '#6366f1',
17
+ dark: '#818cf8'
18
+ },
19
+ dark: {
20
+ 800: '#1e293b',
21
+ 900: '#0f172a'
22
+ }
23
+ },
24
+ fontFamily: {
25
+ sans: ['Inter', 'sans-serif'],
26
+ },
27
+ }
28
+ }
29
+ }
30
+ </script>
31
+ <style>
32
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
33
+
34
+ body {
35
+ font-family: 'Inter', sans-serif;
36
+ transition: background-color 0.3s, color 0.3s;
37
+ }
38
+
39
+ .gradient-text {
40
+ background-clip: text;
41
+ -webkit-background-clip: text;
42
+ color: transparent;
43
+ background-image: linear-gradient(90deg, #6366f1, #8b5cf6);
44
+ }
45
+
46
+ .hero-gradient {
47
+ background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
48
+ }
49
+
50
+ .card-hover {
51
+ transition: transform 0.3s, box-shadow 0.3s;
52
+ }
53
+
54
+ .card-hover:hover {
55
+ transform: translateY(-5px);
56
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
57
+ }
58
+
59
+ .dark .card-hover:hover {
60
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.25), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
61
+ }
62
+
63
+ .toggle-checkbox:checked {
64
+ right: 0;
65
+ background-color: #6366f1;
66
+ }
67
+
68
+ .toggle-checkbox:checked + .toggle-label {
69
+ background-color: #818cf8;
70
+ }
71
+ </style>
72
+ </head>
73
+ <body class="bg-gray-50 text-gray-800 dark:bg-dark-900 dark:text-gray-200">
74
+ <!-- Header -->
75
+ <header class="sticky top-0 z-50 bg-white/80 dark:bg-dark-900/80 backdrop-blur-md shadow-sm">
76
+ <div class="container mx-auto px-6 py-4">
77
+ <div class="flex justify-between items-center">
78
+ <div class="flex items-center space-x-2">
79
+ <div class="w-10 h-10 rounded-full bg-primary-light dark:bg-primary-dark flex items-center justify-center">
80
+ <i class="fas fa-robot text-white text-xl"></i>
81
+ </div>
82
+ <span class="text-xl font-bold">AI<span class="gradient-text">Consult</span></span>
83
+ </div>
84
+
85
+ <nav class="hidden md:flex space-x-8">
86
+ <a href="#services" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Leistungen</a>
87
+ <a href="#about" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Über mich</a>
88
+ <a href="#process" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Prozess</a>
89
+ <a href="#contact" class="font-medium hover:text-primary-light dark:hover:text-primary-dark transition">Kontakt</a>
90
+ </nav>
91
+
92
+ <div class="flex items-center space-x-4">
93
+ <div class="relative inline-block w-12 mr-2 align-middle select-none">
94
+ <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
95
+ <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
96
+ </div>
97
+ <button class="md:hidden text-gray-600 dark:text-gray-300 focus:outline-none">
98
+ <i class="fas fa-bars text-xl"></i>
99
+ </button>
100
+ </div>
101
+ </div>
102
+ </div>
103
+ </header>
104
+
105
+ <!-- Hero Section -->
106
+ <section class="hero-gradient py-20">
107
+ <div class="container mx-auto px-6">
108
+ <div class="flex flex-col md:flex-row items-center">
109
+ <div class="md:w-1/2 mb-12 md:mb-0">
110
+ <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">
111
+ <span class="gradient-text">KI-Transformation</span><br>
112
+ für Ihr Unternehmen
113
+ </h1>
114
+ <p class="text-lg md:text-xl text-gray-600 dark:text-gray-300 mb-8">
115
+ Als erfahrener AI-Consultant helfe ich europäischen Unternehmen, das volle Potenzial künstlicher Intelligenz zu erschließen - von der Strategie bis zur Implementierung.
116
+ </p>
117
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
118
+ <a href="#contact" class="bg-primary-light dark:bg-primary-dark hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300 text-center">
119
+ Kostenlose Beratung
120
+ </a>
121
+ <a href="#process" class="border border-primary-light dark:border-primary-dark text-primary-light dark:text-primary-dark hover:bg-indigo-50 dark:hover:bg-indigo-900/30 font-medium py-3 px-6 rounded-lg transition duration-300 text-center">
122
+ Unser Ansatz
123
+ </a>
124
+ </div>
125
+ </div>
126
+ <div class="md:w-1/2">
127
+ <div class="relative">
128
+ <div class="absolute -top-6 -left-6 w-64 h-64 bg-purple-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob"></div>
129
+ <div class="absolute -bottom-8 -right-8 w-64 h-64 bg-indigo-500 rounded-full mix-blend-multiply filter blur-xl opacity-20 animate-blob animation-delay-2000"></div>
130
+ <div class="relative bg-white dark:bg-dark-800 rounded-2xl shadow-xl p-1">
131
+ <img src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="AI Consulting" class="rounded-xl w-full h-auto">
132
+ </div>
133
+ </div>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </section>
138
+
139
+ <!-- Trust Badges -->
140
+ <section class="py-12 bg-gray-100 dark:bg-dark-800">
141
+ <div class="container mx-auto px-6">
142
+ <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16">
143
+ <div class="text-center">
144
+ <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">10+</div>
145
+ <div class="text-gray-600 dark:text-gray-300">Jahre Erfahrung</div>
146
+ </div>
147
+ <div class="text-center">
148
+ <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">50+</div>
149
+ <div class="text-gray-600 dark:text-gray-300">Projekte</div>
150
+ </div>
151
+ <div class="text-center">
152
+ <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">100%</div>
153
+ <div class="text-gray-600 dark:text-gray-300">DSGVO-konform</div>
154
+ </div>
155
+ <div class="text-center">
156
+ <div class="text-3xl font-bold text-primary-light dark:text-primary-dark">DE/EU</div>
157
+ <div class="text-gray-600 dark:text-gray-300">Spezialisiert</div>
158
+ </div>
159
+ </div>
160
+ </div>
161
+ </section>
162
+
163
+ <!-- Services -->
164
+ <section id="services" class="py-20">
165
+ <div class="container mx-auto px-6">
166
+ <div class="text-center mb-16">
167
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Meine <span class="gradient-text">Leistungen</span></h2>
168
+ <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
169
+ Umfassende Beratung und Implementierung für alle Aspekte der künstlichen Intelligenz
170
+ </p>
171
+ </div>
172
+
173
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
174
+ <!-- Service 1 -->
175
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg card-hover">
176
+ <div class="w-14 h-14 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg flex items-center justify-center mb-6">
177
+ <i class="fas fa-brain text-primary-light dark:text-primary-dark text-2xl"></i>
178
+ </div>
179
+ <h3 class="text-xl font-bold mb-3">AI-Strategieentwicklung</h3>
180
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
181
+ Individuelle KI-Strategie für Ihr Unternehmen, angepasst an europäische Datenschutzbestimmungen und Marktanforderungen.
182
+ </p>
183
+ <ul class="space-y-2 text-gray-600 dark:text-gray-300">
184
+ <li class="flex items-start">
185
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
186
+ <span>Marktanalyse & Potenzialbewertung</span>
187
+ </li>
188
+ <li class="flex items-start">
189
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
190
+ <span>DSGVO-konforme Konzepte</span>
191
+ </li>
192
+ <li class="flex items-start">
193
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
194
+ <span>Roadmap für KI-Implementierung</span>
195
+ </li>
196
+ </ul>
197
+ </div>
198
+
199
+ <!-- Service 2 -->
200
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg card-hover">
201
+ <div class="w-14 h-14 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center mb-6">
202
+ <i class="fas fa-microchip text-primary-light dark:text-primary-dark text-2xl"></i>
203
+ </div>
204
+ <h3 class="text-xl font-bold mb-3">Technische Implementierung</h3>
205
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
206
+ Vollständige Implementierung von KI-Lösungen in Ihre bestehende Infrastruktur mit Fokus auf europäische Cloud-Anbieter.
207
+ </p>
208
+ <ul class="space-y-2 text-gray-600 dark:text-gray-300">
209
+ <li class="flex items-start">
210
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
211
+ <span>Custom Machine Learning Modelle</span>
212
+ </li>
213
+ <li class="flex items-start">
214
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
215
+ <span>On-Premise oder EU-Cloud Lösungen</span>
216
+ </li>
217
+ <li class="flex items-start">
218
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
219
+ <span>Integration in bestehende Systeme</span>
220
+ </li>
221
+ </ul>
222
+ </div>
223
+
224
+ <!-- Service 3 -->
225
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg card-hover">
226
+ <div class="w-14 h-14 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center mb-6">
227
+ <i class="fas fa-chart-line text-primary-light dark:text-primary-dark text-2xl"></i>
228
+ </div>
229
+ <h3 class="text-xl font-bold mb-3">Optimierung & Skalierung</h3>
230
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
231
+ Steigerung der Effizienz bestehender KI-Systeme und Vorbereitung für zukünftiges Wachstum.
232
+ </p>
233
+ <ul class="space-y-2 text-gray-600 dark:text-gray-300">
234
+ <li class="flex items-start">
235
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
236
+ <span>Performance-Analyse</span>
237
+ </li>
238
+ <li class="flex items-start">
239
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
240
+ <span>Kostenoptimierung</span>
241
+ </li>
242
+ <li class="flex items-start">
243
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
244
+ <span>Skalierbare Architekturen</span>
245
+ </li>
246
+ </ul>
247
+ </div>
248
+ </div>
249
+ </div>
250
+ </section>
251
+
252
+ <!-- About -->
253
+ <section id="about" class="py-20 bg-gray-100 dark:bg-dark-800">
254
+ <div class="container mx-auto px-6">
255
+ <div class="flex flex-col md:flex-row items-center">
256
+ <div class="md:w-1/3 mb-12 md:mb-0">
257
+ <div class="relative">
258
+ <div class="w-64 h-64 bg-primary-light dark:bg-primary-dark rounded-full mx-auto"></div>
259
+ <div class="absolute -bottom-4 -right-4 bg-white dark:bg-dark-900 p-4 rounded-lg shadow-lg">
260
+ <div class="text-2xl font-bold text-primary-light dark:text-primary-dark">10+ Jahre</div>
261
+ <div class="text-gray-600 dark:text-gray-300">Erfahrung</div>
262
+ </div>
263
+ </div>
264
+ </div>
265
+ <div class="md:w-2/3 md:pl-16">
266
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Über <span class="gradient-text">mich</span></h2>
267
+ <p class="text-lg text-gray-600 dark:text-gray-300 mb-6">
268
+ Als zertifizierter AI-Consultant mit über einem Jahrzehnt Erfahrung in der europäischen Tech-Landschaft helfe ich Unternehmen, die komplexe Welt der künstlichen Intelligenz zu navigieren.
269
+ </p>
270
+ <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
271
+ Mein Fokus liegt auf praktischen, umsetzbaren Lösungen, die nicht nur technologisch fortschrittlich, sondern auch wirtschaftlich sinnvoll und rechtlich konform sind - besonders wichtig für deutsche und europäische Unternehmen.
272
+ </p>
273
+
274
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
275
+ <div class="flex items-start">
276
+ <div class="bg-indigo-100 dark:bg-indigo-900/20 p-3 rounded-lg mr-4">
277
+ <i class="fas fa-graduation-cap text-primary-light dark:text-primary-dark text-xl"></i>
278
+ </div>
279
+ <div>
280
+ <h4 class="font-bold mb-1">Ausbildung</h4>
281
+ <p class="text-gray-600 dark:text-gray-300">
282
+ M.Sc. Künstliche Intelligenz, TU München & Certified AI Consultant (EU)
283
+ </p>
284
+ </div>
285
+ </div>
286
+ <div class="flex items-start">
287
+ <div class="bg-purple-100 dark:bg-purple-900/20 p-3 rounded-lg mr-4">
288
+ <i class="fas fa-language text-primary-light dark:text-primary-dark text-xl"></i>
289
+ </div>
290
+ <div>
291
+ <h4 class="font-bold mb-1">Sprachen</h4>
292
+ <p class="text-gray-600 dark:text-gray-300">
293
+ Deutsch (Muttersprache), Englisch (fließend), Französisch (Grundkenntnisse)
294
+ </p>
295
+ </div>
296
+ </div>
297
+ <div class="flex items-start">
298
+ <div class="bg-blue-100 dark:bg-blue-900/20 p-3 rounded-lg mr-4">
299
+ <i class="fas fa-map-marker-alt text-primary-light dark:text-primary-dark text-xl"></i>
300
+ </div>
301
+ <div>
302
+ <h4 class="font-bold mb-1">Standort</h4>
303
+ <p class="text-gray-600 dark:text-gray-300">
304
+ München, Deutschland - Arbeit mit Kunden in ganz Europa
305
+ </p>
306
+ </div>
307
+ </div>
308
+ <div class="flex items-start">
309
+ <div class="bg-green-100 dark:bg-green-900/20 p-3 rounded-lg mr-4">
310
+ <i class="fas fa-certificate text-primary-light dark:text-primary-dark text-xl"></i>
311
+ </div>
312
+ <div>
313
+ <h4 class="font-bold mb-1">Zertifizierungen</h4>
314
+ <p class="text-gray-600 dark:text-gray-300">
315
+ AWS Certified ML Specialist, Google Cloud AI Engineer, DSGVO-Beauftragter
316
+ </p>
317
+ </div>
318
+ </div>
319
+ </div>
320
+ </div>
321
+ </div>
322
+ </div>
323
+ </section>
324
+
325
+ <!-- Process -->
326
+ <section id="process" class="py-20">
327
+ <div class="container mx-auto px-6">
328
+ <div class="text-center mb-16">
329
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Mein <span class="gradient-text">Vorgehen</span></h2>
330
+ <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
331
+ Ein strukturierter Prozess für maximale Ergebnisse und transparente Zusammenarbeit
332
+ </p>
333
+ </div>
334
+
335
+ <div class="relative">
336
+ <!-- Timeline line -->
337
+ <div class="hidden md:block absolute left-1/2 h-full w-1 bg-gradient-to-b from-primary-light to-primary-dark dark:from-primary-dark dark:to-primary-light"></div>
338
+
339
+ <!-- Process Steps -->
340
+ <div class="space-y-12 md:space-y-0">
341
+ <!-- Step 1 -->
342
+ <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse">
343
+ <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12">
344
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover">
345
+ <div class="flex items-center mb-4">
346
+ <div class="bg-indigo-100 dark:bg-indigo-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">1</div>
347
+ <h3 class="text-xl font-bold">Erstberatung & Analyse</h3>
348
+ </div>
349
+ <p class="text-gray-600 dark:text-gray-300">
350
+ Kostenlose Erstberatung zur Analyse Ihrer Anforderungen und Bewertung des KI-Potenzials für Ihr Unternehmen.
351
+ </p>
352
+ <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
353
+ <h4 class="font-semibold mb-2">Ergebnis:</h4>
354
+ <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1">
355
+ <li>KI-Potenzialanalyse</li>
356
+ <li>Kosten-Nutzen-Bewertung</li>
357
+ <li>Empfehlung für nächste Schritte</li>
358
+ </ul>
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start">
363
+ <div class="w-32 h-32 rounded-full bg-indigo-100 dark:bg-indigo-900/20 flex items-center justify-center">
364
+ <i class="fas fa-search text-primary-light dark:text-primary-dark text-4xl"></i>
365
+ </div>
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Step 2 -->
370
+ <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse">
371
+ <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12">
372
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover">
373
+ <div class="flex items-center mb-4">
374
+ <div class="bg-purple-100 dark:bg-purple-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">2</div>
375
+ <h3 class="text-xl font-bold">Konzept & Planung</h3>
376
+ </div>
377
+ <p class="text-gray-600 dark:text-gray-300">
378
+ Entwicklung eines detaillierten Konzepts mit klarem Projektplan, Zeitrahmen und Budget.
379
+ </p>
380
+ <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
381
+ <h4 class="font-semibold mb-2">Ergebnis:</h4>
382
+ <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1">
383
+ <li>Technisches Konzept</li>
384
+ <li>Projektplan mit Meilensteinen</li>
385
+ <li>DSGVO-konforme Datenstrategie</li>
386
+ </ul>
387
+ </div>
388
+ </div>
389
+ </div>
390
+ <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start">
391
+ <div class="w-32 h-32 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center">
392
+ <i class="fas fa-project-diagram text-primary-light dark:text-primary-dark text-4xl"></i>
393
+ </div>
394
+ </div>
395
+ </div>
396
+
397
+ <!-- Step 3 -->
398
+ <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse">
399
+ <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12">
400
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover">
401
+ <div class="flex items-center mb-4">
402
+ <div class="bg-blue-100 dark:bg-blue-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">3</div>
403
+ <h3 class="text-xl font-bold">Umsetzung</h3>
404
+ </div>
405
+ <p class="text-gray-600 dark:text-gray-300">
406
+ Agile Implementierung der KI-Lösung mit regelmäßigen Updates und Anpassungsmöglichkeiten.
407
+ </p>
408
+ <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
409
+ <h4 class="font-semibold mb-2">Ergebnis:</h4>
410
+ <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1">
411
+ <li>Funktionierende KI-Lösung</li>
412
+ <li>Dokumentation & Schulung</li>
413
+ <li>Performance-Metriken</li>
414
+ </ul>
415
+ </div>
416
+ </div>
417
+ </div>
418
+ <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start">
419
+ <div class="w-32 h-32 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center">
420
+ <i class="fas fa-cogs text-primary-light dark:text-primary-dark text-4xl"></i>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Step 4 -->
426
+ <div class="relative flex flex-col md:flex-row items-center md:even:flex-row-reverse">
427
+ <div class="flex justify-center md:justify-start md:w-1/2 mb-8 md:mb-0 md:px-12">
428
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg w-full max-w-md card-hover">
429
+ <div class="flex items-center mb-4">
430
+ <div class="bg-green-100 dark:bg-green-900/20 text-primary-light dark:text-primary-dark font-bold rounded-full w-10 h-10 flex items-center justify-center mr-4">4</div>
431
+ <h3 class="text-xl font-bold">Optimierung & Support</h3>
432
+ </div>
433
+ <p class="text-gray-600 dark:text-gray-300">
434
+ Kontinuierliche Verbesserung und Anpassung der Lösung an sich ändernde Anforderungen.
435
+ </p>
436
+ <div class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
437
+ <h4 class="font-semibold mb-2">Ergebnis:</h4>
438
+ <ul class="list-disc pl-5 text-gray-600 dark:text-gray-300 space-y-1">
439
+ <li>Regelmäßige Updates</li>
440
+ <li>Performance-Optimierung</li>
441
+ <li>Skalierungsoptionen</li>
442
+ </ul>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ <div class="hidden md:flex md:w-1/2 md:px-12 justify-center md:justify-start">
447
+ <div class="w-32 h-32 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
448
+ <i class="fas fa-chart-line text-primary-light dark:text-primary-dark text-4xl"></i>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ </div>
453
+ </div>
454
+ </div>
455
+ </section>
456
+
457
+ <!-- Testimonials -->
458
+ <section class="py-20 bg-gray-100 dark:bg-dark-800">
459
+ <div class="container mx-auto px-6">
460
+ <div class="text-center mb-16">
461
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Das sagen <span class="gradient-text">Kunden</span></h2>
462
+ <p class="text-lg text-gray-600 dark:text-gray-300 max-w-2xl mx-auto">
463
+ Erfolgsgeschichten aus verschiedenen Branchen in Deutschland und Europa
464
+ </p>
465
+ </div>
466
+
467
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
468
+ <!-- Testimonial 1 -->
469
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg">
470
+ <div class="flex items-center mb-4">
471
+ <div class="w-12 h-12 rounded-full bg-indigo-100 dark:bg-indigo-900/20 flex items-center justify-center mr-4">
472
+ <i class="fas fa-building text-primary-light dark:text-primary-dark text-xl"></i>
473
+ </div>
474
+ <div>
475
+ <h4 class="font-bold">Michael Bauer</h4>
476
+ <p class="text-gray-500 dark:text-gray-400 text-sm">CTO, FinTech Startup</p>
477
+ </div>
478
+ </div>
479
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
480
+ "Die DSGVO-konforme KI-Lösung hat unser Risikomanagement revolutioniert, ohne dass wir Kompromisse beim Datenschutz eingehen mussten."
481
+ </p>
482
+ <div class="flex text-yellow-400">
483
+ <i class="fas fa-star"></i>
484
+ <i class="fas fa-star"></i>
485
+ <i class="fas fa-star"></i>
486
+ <i class="fas fa-star"></i>
487
+ <i class="fas fa-star"></i>
488
+ </div>
489
+ </div>
490
+
491
+ <!-- Testimonial 2 -->
492
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg">
493
+ <div class="flex items-center mb-4">
494
+ <div class="w-12 h-12 rounded-full bg-purple-100 dark:bg-purple-900/20 flex items-center justify-center mr-4">
495
+ <i class="fas fa-industry text-primary-light dark:text-primary-dark text-xl"></i>
496
+ </div>
497
+ <div>
498
+ <h4 class="font-bold">Sabine Müller</h4>
499
+ <p class="text-gray-500 dark:text-gray-400 text-sm">Produktionsleiterin, Maschinenbau</p>
500
+ </div>
501
+ </div>
502
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
503
+ "Durch die vorausschauende Wartung konnten wir unsere Ausfallzeiten um 40% reduzieren. Die Integration in unsere bestehenden Systeme war nahtlos."
504
+ </p>
505
+ <div class="flex text-yellow-400">
506
+ <i class="fas fa-star"></i>
507
+ <i class="fas fa-star"></i>
508
+ <i class="fas fa-star"></i>
509
+ <i class="fas fa-star"></i>
510
+ <i class="fas fa-star-half-alt"></i>
511
+ </div>
512
+ </div>
513
+
514
+ <!-- Testimonial 3 -->
515
+ <div class="bg-white dark:bg-dark-800 rounded-xl p-8 shadow-lg">
516
+ <div class="flex items-center mb-4">
517
+ <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/20 flex items-center justify-center mr-4">
518
+ <i class="fas fa-shopping-cart text-primary-light dark:text-primary-dark text-xl"></i>
519
+ </div>
520
+ <div>
521
+ <h4 class="font-bold">Thomas Weber</h4>
522
+ <p class="text-gray-500 dark:text-gray-400 text-sm">CEO, E-Commerce</p>
523
+ </div>
524
+ </div>
525
+ <p class="text-gray-600 dark:text-gray-300 mb-4">
526
+ "Die personalisierten Produktempfehlungen haben unsere Conversion-Rate um 35% gesteigert. Besonders beeindruckt hat mich die schnelle ROI-Erreichung."
527
+ </p>
528
+ <div class="flex text-yellow-400">
529
+ <i class="fas fa-star"></i>
530
+ <i class="fas fa-star"></i>
531
+ <i class="fas fa-star"></i>
532
+ <i class="fas fa-star"></i>
533
+ <i class="fas fa-star"></i>
534
+ </div>
535
+ </div>
536
+ </div>
537
+ </div>
538
+ </section>
539
+
540
+ <!-- Contact -->
541
+ <section id="contact" class="py-20">
542
+ <div class="container mx-auto px-6">
543
+ <div class="flex flex-col md:flex-row">
544
+ <div class="md:w-1/2 mb-12 md:mb-0 md:pr-12">
545
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Kontaktieren Sie <span class="gradient-text">mich</span></h2>
546
+ <p class="text-lg text-gray-600 dark:text-gray-300 mb-8">
547
+ Bereit, die Möglichkeiten der KI für Ihr Unternehmen zu erkunden? Ich freue mich auf Ihre Nachricht.
548
+ </p>
549
+
550
+ <div class="space-y-6">
551
+ <div class="flex items-start">
552
+ <div class="bg-indigo-100 dark:bg-indigo-900/20 p-3 rounded-lg mr-4">
553
+ <i class="fas fa-envelope text-primary-light dark:text-primary-dark text-xl"></i>
554
+ </div>
555
+ <div>
556
+ <h4 class="font-bold mb-1">E-Mail</h4>
557
+ <a href="mailto:[email protected]" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition">[email protected]</a>
558
+ </div>
559
+ </div>
560
+
561
+ <div class="flex items-start">
562
+ <div class="bg-purple-100 dark:bg-purple-900/20 p-3 rounded-lg mr-4">
563
+ <i class="fas fa-phone-alt text-primary-light dark:text-primary-dark text-xl"></i>
564
+ </div>
565
+ <div>
566
+ <h4 class="font-bold mb-1">Telefon</h4>
567
+ <a href="tel:+49123456789" class="text-gray-600 dark:text-gray-300 hover:text-primary-light dark:hover:text-primary-dark transition">+49 123 456 789</a>
568
+ </div>
569
+ </div>
570
+
571
+ <div class="flex items-start">
572
+ <div class="bg-blue-100 dark:bg-blue-900/20 p-3 rounded-lg mr-4">
573
+ <i class="fas fa-map-marker-alt text-primary-light dark:text-primary-dark text-xl"></i>
574
+ </div>
575
+ <div>
576
+ <h4 class="font-bold mb-1">Standort</h4>
577
+ <p class="text-gray-600 dark:text-gray-300">München, Deutschland</p>
578
+ </div>
579
+ </div>
580
+
581
+ <div class="flex items-start">
582
+ <div class="bg-green-100 dark:bg-green-900/20 p-3 rounded-lg mr-4">
583
+ <i class="fas fa-clock text-primary-light dark:text-primary-dark text-xl"></i>
584
+ </div>
585
+ <div>
586
+ <h4 class="font-bold mb-1">Verfügbarkeit</h4>
587
+ <p class="text-gray-600 dark:text-gray-300">Mo-Fr: 9:00 - 18:00 Uhr</p>
588
+ </div>
589
+ </div>
590
+ </div>
591
+
592
+ <div class="mt-12">
593
+ <h4 class="font-bold mb-4">Folgen Sie mir</h4>
594
+ <div class="flex space-x-4">
595
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition">
596
+ <i class="fab fa-linkedin-in"></i>
597
+ </a>
598
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition">
599
+ <i class="fab fa-xing"></i>
600
+ </a>
601
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition">
602
+ <i class="fab fa-github"></i>
603
+ </a>
604
+ <a href="#" class="w-10 h-10 rounded-full bg-gray-200 dark:bg-dark-700 flex items-center justify-center hover:bg-primary-light dark:hover:bg-primary-dark hover:text-white transition">
605
+ <i class="fab fa-twitter"></i>
606
+ </a>
607
+ </div>
608
+ </div>
609
+ </div>
610
+
611
+ <div class="md:w-1/2">
612
+ <div class="bg-white dark:bg-dark-800 rounded-xl shadow-lg p-8">
613
+ <h3 class="text-2xl font-bold mb-6">Senden Sie eine Nachricht</h3>
614
+ <form>
615
+ <div class="mb-6">
616
+ <label for="name" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Name</label>
617
+ <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700">
618
+ </div>
619
+ <div class="mb-6">
620
+ <label for="email" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">E-Mail</label>
621
+ <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700">
622
+ </div>
623
+ <div class="mb-6">
624
+ <label for="subject" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Betreff</label>
625
+ <select id="subject" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700">
626
+ <option value="">Wählen Sie ein Thema</option>
627
+ <option value="consulting">KI-Beratung</option>
628
+ <option value="implementation">Implementierung</option>
629
+ <option value="optimization">Optimierung</option>
630
+ <option value="other">Anderes</option>
631
+ </select>
632
+ </div>
633
+ <div class="mb-6">
634
+ <label for="message" class="block text-gray-700 dark:text-gray-300 font-medium mb-2">Nachricht</label>
635
+ <textarea id="message" rows="5" class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-light dark:focus:ring-primary-dark focus:border-transparent bg-white dark:bg-dark-700"></textarea>
636
+ </div>
637
+ <div class="mb-6">
638
+ <div class="flex items-start">
639
+ <input type="checkbox" id="privacy" class="mt-1 mr-2">
640
+ <label for="privacy" class="text-gray-600 dark:text-gray-300 text-sm">
641
+ Ich stimme der Verarbeitung meiner Daten gemäß der <a href="#" class="text-primary-light dark:text-primary-dark hover:underline">Datenschutzerklärung</a> zu.
642
+ </label>
643
+ </div>
644
+ </div>
645
+ <button type="submit" class="w-full bg-primary-light dark:bg-primary-dark hover:bg-indigo-700 text-white font-medium py-3 px-6 rounded-lg transition duration-300">
646
+ Nachricht senden
647
+ </button>
648
+ </form>
649
+ </div>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- Footer -->
656
+ <footer class="bg-dark-800 text-gray-300 py-12">
657
+ <div class="container mx-auto px-6">
658
+ <div class="flex flex-col md:flex-row justify-between">
659
+ <div class="mb-8 md:mb-0">
660
+ <div class="flex items-center space-x-2 mb-4">
661
+ <div class="w-10 h-10 rounded-full bg-primary-dark flex items-center justify-center">
662
+ <i class="fas fa-robot text-white text-xl"></i>
663
+ </div>
664
+ <span class="text-xl font-bold">AI<span class="gradient-text">Consult</span></span>
665
+ </div>
666
+ <p class="max-w-xs">
667
+ Ihr Partner für KI-Lösungen in Deutschland und Europa. DSGVO-konform, effizient und zukunftsorientiert.
668
+ </p>
669
+ </div>
670
+
671
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-8">
672
+ <div>
673
+ <h4 class="text-white font-bold mb-4">Navigation</h4>
674
+ <ul class="space-y-2">
675
+ <li><a href="#services" class="hover:text-primary-dark transition">Leistungen</a></li>
676
+ <li><a href="#about" class="hover:text-primary-dark transition">Über mich</a></li>
677
+ <li><a href="#process" class="hover:text-primary-dark transition">Prozess</a></li>
678
+ <li><a href="#contact" class="hover:text-primary-dark transition">Kontakt</a></li>
679
+ </ul>
680
+ </div>
681
+
682
+ <div>
683
+ <h4 class="text-white font-bold mb-4">Leistungen</h4>
684
+ <ul class="space-y-2">
685
+ <li><a href="#" class="hover:text-primary-dark transition">KI-Strategie</a></li>
686
+ <li><a href="#" class="hover:text-primary-dark transition">Implementierung</a></li>
687
+ <li><a href="#" class="hover:text-primary-dark transition">Optimierung</a></li>
688
+ <li><a href="#" class="hover:text-primary-dark transition">Schulungen</a></li>
689
+ </ul>
690
+ </div>
691
+
692
+ <div>
693
+ <h4 class="text-white font-bold mb-4">Rechtliches</h4>
694
+ <ul class="space-y-2">
695
+ <li><a href="#" class="hover:text-primary-dark transition">Impressum</a></li>
696
+ <li><a href="#" class="hover:text-primary-dark transition">Datenschutz</a></li>
697
+ <li><a href="#" class="hover:text-primary-dark transition">AGB</a></li>
698
+ </ul>
699
+ </div>
700
+ </div>
701
+ </div>
702
+
703
+ <div class="border-t border-gray-700 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
704
+ <p class="mb-4 md:mb-0">
705
+ &copy; 2023 AI-Consult. Alle Rechte vorbehalten.
706
+ </p>
707
+ <div class="flex space-x-6">
708
+ <a href="#" class="hover:text-primary-dark transition">
709
+ <i class="fab fa-linkedin-in"></i>
710
+ </a>
711
+ <a href="#" class="hover:text-primary-dark transition">
712
+ <i class="fab fa-xing"></i>
713
+ </a>
714
+ <a href="#" class="hover:text-primary-dark transition">
715
+ <i class="fab fa-github"></i>
716
+ </a>
717
+ <a href="#" class="hover:text-primary-dark transition">
718
+ <i class="fab fa-twitter"></i>
719
+ </a>
720
+ </div>
721
+ </div>
722
+ </div>
723
+ </footer>
724
+
725
+ <script>
726
+ // Dark mode toggle
727
+ const toggle = document.getElementById('toggle');
728
+ const html = document.documentElement;
729
+
730
+ // Check for saved user preference or system preference
731
+ if (localStorage.getItem('darkMode') === 'true' ||
732
+ (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
733
+ html.classList.add('dark');
734
+ toggle.checked = true;
735
+ }
736
+
737
+ toggle.addEventListener('change', function() {
738
+ if (this.checked) {
739
+ html.classList.add('dark');
740
+ localStorage.setItem('darkMode', 'true');
741
+ } else {
742
+ html.classList.remove('dark');
743
+ localStorage.setItem('darkMode', 'false');
744
+ }
745
+ });
746
+
747
+ // Smooth scrolling for anchor links
748
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
749
+ anchor.addEventListener('click', function (e) {
750
+ e.preventDefault();
751
+
752
+ const targetId = this.getAttribute('href');
753
+ if (targetId === '#') return;
754
+
755
+ const targetElement = document.querySelector(targetId);
756
+ if (targetElement) {
757
+ targetElement.scrollIntoView({
758
+ behavior: 'smooth'
759
+ });
760
+ }
761
+ });
762
+ });
763
+
764
+ // Mobile menu toggle (placeholder - would need more implementation)
765
+ const mobileMenuButton = document.querySelector('.md\\:hidden');
766
+ mobileMenuButton.addEventListener('click', function() {
767
+ // In a real implementation, this would toggle a mobile menu
768
+ alert('Mobile menu would open here in a full implementation.');
769
+ });
770
+ </script>
771
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=chiminaca/deepsite-test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
772
+ </html>