Hugging Face's logo

Spaces:
Basti1110
/
chemnitz
Running

App Files Community
Basti1110 commited on
Commit
a9ee53d
·
verified ·
1 Parent(s): 79e7473

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +1085 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Chemnitz
3
- emoji: 🏃
4
  colorFrom: gray
5
- colorTo: indigo
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: chemnitz
3
+ emoji: 🐳
4
  colorFrom: gray
5
+ colorTo: red
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,1086 @@
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>nestler.dev - Brilliant AI & Full-Stack Development</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
10
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
12
+ <script src="https://unpkg.com/feather-icons"></script>
13
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
14
+ <script>
15
+ tailwind.config = {
16
+ theme: {
17
+ extend: {
18
+ colors: {
19
+ 'primary-light': '#f0daa5',
20
+ 'primary-dark': '#004343',
21
+ 'accent-green': '#74a892',
22
+ 'secondary-green': '#008585',
23
+ 'innovation-orange': '#c7522a',
24
+ 'warm-neutral': '#e5c185',
25
+ 'light-neutral': '#fbf2c4',
26
+ 'soft-green': '#b8cdab',
27
+ 'chemnitz-blue': '#2a5c8a',
28
+ 'heritage-gray': '#6b7280'
29
+ },
30
+ fontFamily: {
31
+ 'display': ['Inter', 'system-ui', 'sans-serif'],
32
+ },
33
+ animation: {
34
+ 'float': 'float 6s ease-in-out infinite',
35
+ 'pulse-soft': 'pulse-soft 2s ease-in-out infinite',
36
+ 'gradient': 'gradient 15s ease infinite',
37
+ },
38
+ keyframes: {
39
+ float: {
40
+ '0%, 100%': { transform: 'translateY(0px)' },
41
+ '50%': { transform: 'translateY(-20px)' },
42
+ },
43
+ 'pulse-soft': {
44
+ '0%, 100%': { opacity: '1' },
45
+ '50%': { opacity: '0.8' },
46
+ },
47
+ gradient: {
48
+ '0%': { backgroundPosition: '0% 50%' },
49
+ '50%': { backgroundPosition: '100% 50%' },
50
+ '100%': { backgroundPosition: '0% 50%' },
51
+ }
52
+ }
53
+ }
54
+ }
55
+ }
56
+ </script>
57
+ <style>
58
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
59
+
60
+ body {
61
+ font-family: 'Inter', sans-serif;
62
+ scroll-behavior: smooth;
63
+ }
64
+
65
+ .vanta-background {
66
+ position: absolute;
67
+ width: 100%;
68
+ height: 100%;
69
+ z-index: -1;
70
+ }
71
+
72
+ .forge-animation {
73
+ position: relative;
74
+ overflow: hidden;
75
+ }
76
+
77
+ .forge-particle {
78
+ position: absolute;
79
+ background: linear-gradient(135deg, #74a892, #008585);
80
+ border-radius: 50%;
81
+ opacity: 0;
82
+ }
83
+
84
+ .timeline-item {
85
+ position: relative;
86
+ padding-left: 2rem;
87
+ }
88
+
89
+ .timeline-item:before {
90
+ content: '';
91
+ position: absolute;
92
+ left: 0;
93
+ top: 0;
94
+ width: 2px;
95
+ height: 100%;
96
+ background: linear-gradient(to bottom, #74a892, #008585);
97
+ }
98
+
99
+ .timeline-dot {
100
+ position: absolute;
101
+ left: -6px;
102
+ top: 8px;
103
+ width: 12px;
104
+ height: 12px;
105
+ border-radius: 50%;
106
+ background: #74a892;
107
+ }
108
+
109
+ .service-card {
110
+ transition: all 0.3s ease;
111
+ border: 1px solid #e5c185;
112
+ position: relative;
113
+ overflow: hidden;
114
+ }
115
+
116
+ .service-card::before {
117
+ content: '';
118
+ position: absolute;
119
+ top: 0;
120
+ left: -100%;
121
+ width: 100%;
122
+ height: 100%;
123
+ background: linear-gradient(90deg, transparent, rgba(116, 168, 146, 0.1), transparent);
124
+ transition: left 0.5s;
125
+ }
126
+
127
+ .service-card:hover::before {
128
+ left: 100%;
129
+ }
130
+
131
+ .service-card:hover {
132
+ transform: translateY(-8px) scale(1.02);
133
+ box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
134
+ border-color: #74a892;
135
+ }
136
+
137
+ .custom-cursor {
138
+ width: 20px;
139
+ height: 20px;
140
+ border: 2px solid #74a892;
141
+ border-radius: 50%;
142
+ position: fixed;
143
+ pointer-events: none;
144
+ z-index: 9999;
145
+ transform: translate(-50%, -50%);
146
+ transition: all 0.1s ease;
147
+ }
148
+
149
+ .cursor-dot {
150
+ width: 4px;
151
+ height: 4px;
152
+ background: #74a892;
153
+ border-radius: 50%;
154
+ position: fixed;
155
+ pointer-events: none;
156
+ z-index: 9999;
157
+ transform: translate(-50%, -50%);
158
+ transition: all 0.2s ease;
159
+ }
160
+
161
+ .cursor-active {
162
+ transform: translate(-50%, -50%) scale(1.5);
163
+ background: rgba(116, 168, 146, 0.2);
164
+ }
165
+
166
+ .ai-demo-container {
167
+ background: linear-gradient(135deg, #f0daa5 0%, #e5c185 100%);
168
+ border-radius: 20px;
169
+ overflow: hidden;
170
+ position: relative;
171
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
172
+ }
173
+
174
+ .ai-demo-container::after {
175
+ content: '';
176
+ position: absolute;
177
+ top: -50%;
178
+ left: -50%;
179
+ width: 200%;
180
+ height: 200%;
181
+ background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
182
+ transform: rotate(45deg);
183
+ animation: gradient-shine 3s linear infinite;
184
+ pointer-events: none;
185
+ }
186
+
187
+ @keyframes gradient-shine {
188
+ 0% { transform: rotate(45deg) translate(-50%, -50%); }
189
+ 100% { transform: rotate(45deg) translate(50%, 50%); }
190
+ }
191
+
192
+ .typewriter {
193
+ overflow: hidden;
194
+ border-right: .15em solid #74a892;
195
+ white-space: nowrap;
196
+ animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
197
+ }
198
+
199
+ @keyframes typing {
200
+ from { width: 0 }
201
+ to { width: 100% }
202
+ }
203
+
204
+ @keyframes blink-caret {
205
+ from, to { border-color: transparent }
206
+ 50% { border-color: #74a892 }
207
+ }
208
+
209
+ .project-explorer {
210
+ perspective: 1000px;
211
+ }
212
+
213
+ .project-card {
214
+ transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
215
+ transform-style: preserve-3d;
216
+ position: relative;
217
+ overflow: hidden;
218
+ }
219
+
220
+ .project-card::before {
221
+ content: '';
222
+ position: absolute;
223
+ top: 0;
224
+ left: 0;
225
+ right: 0;
226
+ bottom: 0;
227
+ background: linear-gradient(to bottom, transparent 0%, rgba(0, 67, 67, 0.8) 100%);
228
+ opacity: 0;
229
+ transition: opacity 0.3s ease;
230
+ z-index: 1;
231
+ }
232
+
233
+ .project-card:hover {
234
+ transform: translateY(-10px) rotateY(5deg) rotateX(5deg);
235
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
236
+ }
237
+
238
+ .project-card:hover::before {
239
+ opacity: 1;
240
+ }
241
+
242
+ .project-card:hover .project-overlay {
243
+ opacity: 1;
244
+ transform: translateY(0);
245
+ }
246
+
247
+ .project-overlay {
248
+ position: absolute;
249
+ bottom: 0;
250
+ left: 0;
251
+ right: 0;
252
+ padding: 2rem;
253
+ opacity: 0;
254
+ transform: translateY(20px);
255
+ transition: all 0.3s ease;
256
+ z-index: 2;
257
+ }
258
+
259
+ .dark-mode {
260
+ background-color: #004343;
261
+ color: #f0daa5;
262
+ }
263
+
264
+ .dark-mode .service-card {
265
+ background-color: #008585;
266
+ border-color: #74a892;
267
+ }
268
+
269
+ .dark-mode .ai-demo-container {
270
+ background: linear-gradient(135deg, #008585 0%, #004343 100%);
271
+ }
272
+
273
+ .dark-mode .timeline-item:before {
274
+ background: linear-gradient(to bottom, #c7522a, #74a892);
275
+ }
276
+
277
+ .dark-mode .timeline-dot {
278
+ background: #c7522a;
279
+ }
280
+
281
+ .gradient-text {
282
+ background: linear-gradient(135deg, #c7522a, #74a892, #008585);
283
+ background-size: 200% 200%;
284
+ -webkit-background-clip: text;
285
+ background-clip: text;
286
+ -webkit-text-fill-color: transparent;
287
+ animation: gradient 3s ease infinite;
288
+ }
289
+
290
+ .floating-element {
291
+ animation: float 6s ease-in-out infinite;
292
+ }
293
+
294
+ .nav-link {
295
+ position: relative;
296
+ }
297
+
298
+ .nav-link::after {
299
+ content: '';
300
+ position: absolute;
301
+ bottom: -5px;
302
+ left: 0;
303
+ width: 0;
304
+ height: 2px;
305
+ background: linear-gradient(90deg, #c7522a, #74a892);
306
+ transition: width 0.3s ease;
307
+ }
308
+
309
+ .nav-link:hover::after {
310
+ width: 100%;
311
+ }
312
+
313
+ .form-input {
314
+ transition: all 0.3s ease;
315
+ background: rgba(255, 255, 255, 0.05);
316
+ backdrop-filter: blur(10px);
317
+ }
318
+
319
+ .form-input:focus {
320
+ transform: translateY(-2px);
321
+ box-shadow: 0 10px 25px -5px rgba(199, 82, 42, 0.3);
322
+ }
323
+
324
+ .hero-cta {
325
+ position: relative;
326
+ overflow: hidden;
327
+ }
328
+
329
+ .hero-cta::before {
330
+ content: '';
331
+ position: absolute;
332
+ top: 0;
333
+ left: -100%;
334
+ width: 100%;
335
+ height: 100%;
336
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
337
+ transition: left 0.5s;
338
+ }
339
+
340
+ .hero-cta:hover::before {
341
+ left: 100%;
342
+ }
343
+ </style>
344
+ </head>
345
+ <body class="bg-primary-light text-primary-dark font-display transition-colors duration-500">
346
+ <!-- Custom Cursor -->
347
+ <div class="custom-cursor"></div>
348
+ <div class="cursor-dot"></div>
349
+
350
+ <!-- Navigation -->
351
+ <nav class="fixed w-full bg-primary-light/90 backdrop-blur-sm z-50 py-4 px-6 shadow-sm border-b border-primary-light/20" data-aos="fade-down">
352
+ <div class="container mx-auto flex justify-between items-center">
353
+ <a href="#" class="text-2xl font-bold text-primary-dark flex items-center">
354
+ <span class="gradient-text font-extrabold">nestler.dev</span>
355
+ </a>
356
+ <div class="hidden md:flex space-x-8">
357
+ <a href="#legacy" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Heritage</a>
358
+ <a href="#services" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Services</a>
359
+ <a href="#projects" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Projects</a>
360
+ <a href="#contact" class="nav-link text-primary-dark hover:text-accent-green transition-colors font-medium">Contact</a>
361
+ </div>
362
+ <div class="flex items-center space-x-4">
363
+ <button id="dark-mode-toggle" class="p-2 rounded-full hover:bg-accent-green/20 transition-all transform hover:scale-110">
364
+ <i data-feather="moon" class="text-primary-dark w-5 h-5"></i>
365
+ </button>
366
+ <button class="md:hidden p-2 rounded-full hover:bg-accent-green/20 transition-colors">
367
+ <i data-feather="menu" class="text-primary-dark w-5 h-5"></i>
368
+ </button>
369
+ </div>
370
+ </div>
371
+ </nav>
372
+
373
+ <!-- Hero Section with Vanta.js Background -->
374
+ <section class="relative h-screen flex items-center justify-center overflow-hidden">
375
+ <div id="vanta-background" class="vanta-background"></div>
376
+ <div class="absolute inset-0 bg-gradient-to-b from-primary-light/20 to-primary-light/80"></div>
377
+ <div class="container mx-auto px-6 z-10 text-center" data-aos="fade-up" data-aos-delay="300">
378
+ <div class="floating-element mb-8">
379
+ <div class="w-24 h-24 mx-auto bg-accent-green/20 rounded-full flex items-center justify-center">
380
+ <i data-feather="cpu" class="w-12 h-12 text-accent-green"></i>
381
+ </div>
382
+ </div>
383
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 text-primary-dark">
384
+ <span class="typewriter block">Chemnitz's Industrial Past,</span>
385
+ <span class="gradient-text mt-4 block">The Future of AI</span>
386
+ </h1>
387
+ <p class="text-xl md:text-2xl text-primary-dark max-w-3xl mx-auto mb-10 leading-relaxed">
388
+ We forge brilliant, AI-powered solutions that carry forward a legacy of innovation and craftsmanship.
389
+ </p>
390
+ <div class="forge-animation mb-12 h-2 w-64 mx-auto rounded-full bg-secondary-green/30 overflow-hidden">
391
+ <div class="h-full bg-gradient-to-r from-accent-green to-innovation-orange rounded-full w-0" id="forge-progress"></div>
392
+ </div>
393
+ <a href="#contact" class="hero-cta inline-block bg-gradient-to-r from-accent-green to-innovation-orange text-white font-semibold py-4 px-10 rounded-full hover:shadow-xl transition-all transform hover:scale-105 shadow-lg relative overflow-hidden">
394
+ Build Your Brilliant Idea
395
+ <i data-feather="arrow-right" class="w-5 h-5 ml-2 inline"></i>
396
+ </a>
397
+ </div>
398
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce z-10">
399
+ <div class="w-10 h-10 rounded-full bg-accent-green/20 flex items-center justify-center">
400
+ <i data-feather="chevron-down" class="text-accent-green w-6 h-6"></i>
401
+ </div>
402
+ </div>
403
+ </section>
404
+
405
+ <!-- Chemnitz Legacy Section -->
406
+ <section id="legacy" class="py-24 bg-gradient-to-br from-white to-warm-neutral/30">
407
+ <div class="container mx-auto px-6">
408
+ <div class="text-center mb-20" data-aos="fade-up">
409
+ <h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">A Legacy of Innovation</h2>
410
+ <p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed">
411
+ From textiles to machine tools to automotive excellence, Chemnitz has always been at the forefront of industrial revolution. We continue that tradition with cutting-edge AI solutions.
412
+ </p>
413
+ </div>
414
+
415
+ <div class="grid md:grid-cols-2 gap-16 items-center">
416
+ <div class="space-y-10" data-aos="fade-right">
417
+ <div class="timeline-item">
418
+ <div class="timeline-dot"></div>
419
+ <h3 class="text-2xl font-semibold text-primary-dark mb-3">Medieval Weaving</h3>
420
+ <p class="text-primary-dark/90 mt-2 leading-relaxed">Chemnitz's tradition of textile innovation began centuries ago, establishing a culture of precision craftsmanship that continues today.</p>
421
+ </div>
422
+
423
+ <div class="timeline-item">
424
+ <div class="timeline-dot"></div>
425
+ <h3 class="text-2xl font-semibold text-primary-dark mb-3">Industrial Revolution</h3>
426
+ <p class="text-primary-dark/90 mt-2 leading-relaxed">The city became a powerhouse of mechanical engineering and machine tool production, driving technological advancement across Europe.</p>
427
+ </div>
428
+
429
+ <div class="timeline-item">
430
+ <div class="timeline-dot"></div>
431
+ <h3 class="text-2xl font-semibold text-primary-dark mb-3">Automotive Excellence</h3>
432
+ <p class="text-primary-dark/90 mt-2 leading-relaxed">Home to automotive giants and suppliers, Chemnitz drove innovation in transportation and manufacturing processes.</p>
433
+ </div>
434
+
435
+ <div class="timeline-item">
436
+ <div class="timeline-dot bg-innovation-orange"></div>
437
+ <h3 class="text-2xl font-semibold text-innovation-orange mb-3">The AI Revolution</h3>
438
+ <p class="text-primary-dark/90 mt-2 leading-relaxed">Today, we continue this legacy by building intelligent solutions that transform industries and create new possibilities.</p>
439
+ </div>
440
+ </div>
441
+
442
+ <div data-aos="fade-left" data-aos-delay="300">
443
+ <div class="bg-white p-10 rounded-3xl shadow-2xl border border-warm-neutral/20">
444
+ <div class="mb-8">
445
+ <div class="w-16 h-16 bg-chemnitz-blue rounded-xl flex items-center justify-center mb-4">
446
+ <i data-feather="award" class="text-white w-8 h-8"></i>
447
+ </div>
448
+ <h3 class="text-3xl font-bold text-chemnitz-blue mb-3">European Capital of Culture 2025</h3>
449
+ <p class="text-heritage-gray leading-relaxed">Chemnitz has been named European Capital of Culture 2025, celebrating its creative spirit, innovation heritage, and forward-thinking attitude that continues to shape our work.</p>
450
+ </div>
451
+ <div class="rounded-2xl overflow-hidden shadow-lg">
452
+ <img src="http://static.photos/cityscape/640x360/42" alt="Chemnitz cityscape" class="w-full h-80 object-cover transition-transform duration-700 hover:scale-110">
453
+ </div>
454
+ </div>
455
+ </div>
456
+ </div>
457
+ </div>
458
+ </section>
459
+
460
+ <!-- Promise Section -->
461
+ <section class="py-24 bg-gradient-to-br from-primary-dark to-secondary-green text-white">
462
+ <div class="container mx-auto px-6">
463
+ <div class="max-w-5xl mx-auto text-center" data-aos="zoom-in">
464
+ <h2 class="text-4xl md:text-5xl font-bold mb-8">The nestler.dev Promise</h2>
465
+ <p class="text-xl mb-12 opacity-95 leading-relaxed">
466
+ In a world of commoditized development services, we offer something rare: truly brilliant ideas executed with engineering excellence and creative vision.
467
+ </p>
468
+
469
+ <div class="grid md:grid-cols-3 gap-10 mt-16">
470
+ <div class="text-center" data-aos="fade-up" data-aos-delay="100">
471
+ <div class="w-24 h-24 mx-auto mb-8 bg-innovation-orange/20 rounded-2xl flex items-center justify-center shadow-lg">
472
+ <div class="w-16 h-16 bg-innovation-orange rounded-xl flex items-center justify-center">
473
+ <i data-feather="zap" class="w-8 h-8 text-white"></i>
474
+ </div>
475
+ </div>
476
+ <h3 class="text-2xl font-semibold mb-4">Intellectual Capital</h3>
477
+ <p class="opacity-90 leading-relaxed">We prioritize deep thinking and innovative approaches over standardized processes, bringing fresh perspectives to every challenge.</p>
478
+ </div>
479
+
480
+ <div class="text-center" data-aos="fade-up" data-aos-delay="200">
481
+ <div class="w-24 h-24 mx-auto mb-8 bg-innovation-orange/20 rounded-2xl flex items-center justify-center shadow-lg">
482
+ <div class="w-16 h-16 bg-innovation-orange rounded-xl flex items-center justify-center">
483
+ <i data-feather="tool" class="w-8 h-8 text-white"></i>
484
+ </div>
485
+ </div>
486
+ <h3 class="text-2xl font-semibold mb-4">Bespoke Solutions</h3>
487
+ <p class="opacity-90 leading-relaxed">We craft unique solutions tailored to your specific challenges, not one-size-fits-all products. Every project receives our full creative attention.</p>
488
+ </div>
489
+
490
+ <div class="text-center" data-aos="fade-up" data-aos-delay="300">
491
+ <div class="w-24 h-24 mx-auto mb-8 bg-innovation-orange/20 rounded-2xl flex items-center justify-center shadow-lg">
492
+ <div class="w-16 h-16 bg-innovation-orange rounded-xl flex items-center justify-center">
493
+ <i data-feather="users" class="w-8 h-8 text-white"></i>
494
+ </div>
495
+ </div>
496
+ <h3 class="text-2xl font-semibold mb-4">Partnership Approach</h3>
497
+ <p class="opacity-90 leading-relaxed">We work with you as strategic partners, not just service providers. Your success is our success, and we're invested in your vision.</p>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </section>
503
+
504
+ <!-- AI Demo Section -->
505
+ <section class="py-24 bg-white">
506
+ <div class="container mx-auto px-6">
507
+ <div class="text-center mb-20" data-aos="fade-up">
508
+ <h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">Experience Our AI Capabilities</h2>
509
+ <p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed">
510
+ We don't just use AI tools—we build them from the ground up. Try our interactive demonstration below to see how we can enhance your ideas.
511
+ </p>
512
+ </div>
513
+
514
+ <div class="ai-demo-container p-10 rounded-3xl max-w-5xl mx-auto border border-warm-neutral/30" data-aos="fade-up" data-aos-delay="200">
515
+ <div class="grid md:grid-cols-2 gap-10">
516
+ <div>
517
+ <div class="w-16 h-16 bg-innovation-orange/20 rounded-xl flex items-center justify-center mb-6">
518
+ <i data-feather="brain" class="w-8 h-8 text-innovation-orange"></i>
519
+ </div>
520
+ <h3 class="text-3xl font-semibold text-primary-dark mb-6">Text Transformation AI</h3>
521
+ <p class="text-primary-dark/90 mb-8 leading-relaxed">Enter text below and watch our AI enhance it with creative suggestions and innovative approaches tailored to your needs.</p>
522
+
523
+ <div class="mb-6">
524
+ <label for="ai-input" class="block text-sm font-medium text-primary-dark mb-3">Your Text</label>
525
+ <textarea id="ai-input" rows="5" class="form-input w-full px-5 py-4 border border-gray-300 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent transition-all duration-300" placeholder="Type your idea or concept here..."></textarea>
526
+ </div>
527
+
528
+ <button id="ai-transform-btn" class="w-full bg-innovation-orange text-white font-semibold py-3 px-6 rounded-xl hover:bg-innovation-orange/90 transition-all transform hover:scale-105 flex items-center justify-center">
529
+ <i data-feather="sparkles" class="w-5 h-5 mr-2"></i>
530
+ Transform with AI
531
+ </button>
532
+ </div>
533
+
534
+ <div>
535
+ <div class="w-16 h-16 bg-accent-green/20 rounded-xl flex items-center justify-center mb-6">
536
+ <i data-feather="edit-3" class="w-8 h-8 text-accent-green"></i>
537
+ </div>
538
+ <label class="block text-sm font-medium text-primary-dark mb-3">AI Enhanced Version</label>
539
+ <div class="bg-white p-6 border border-gray-300 rounded-xl h-64 overflow-y-auto shadow-inner">
540
+ <p id="ai-output" class="text-primary-dark/90 leading-relaxed">Your enhanced text will appear here. Our AI analyzes your input and provides innovative suggestions to elevate your concept.</p>
541
+ </div>
542
+
543
+ <div class="mt-6 flex justify-between">
544
+ <button id="copy-output" class="text-primary-dark hover:text-innovation-orange transition-all transform hover:scale-105 flex items-center font-medium">
545
+ <i data-feather="copy" class="w-5 h-5 mr-2"></i> Copy
546
+ </button>
547
+ <button id="reset-demo" class="text-primary-dark hover:text-innovation-orange transition-all transform hover:scale-105 flex items-center font-medium">
548
+ <i data-feather="refresh-cw" class="w-5 h-5 mr-2"></i> Reset
549
+ </button>
550
+ </div>
551
+ </div>
552
+ </div>
553
+ </div>
554
+ </div>
555
+ </section>
556
+
557
+ <!-- Services Section -->
558
+ <section id="services" class="py-24 bg-gradient-to-br from-gray-50 to-soft-green/20">
559
+ <div class="container mx-auto px-6">
560
+ <div class="text-center mb-20" data-aos="fade-up">
561
+ <h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">Our Services</h2>
562
+ <p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed">
563
+ We guide you from initial concept to fully realized product with our comprehensive service offerings, combining technical excellence with creative vision.
564
+ </p>
565
+ </div>
566
+
567
+ <div class="grid md:grid-cols-3 gap-8">
568
+ <div class="service-card bg-white p-10 rounded-3xl" data-aos="fade-up" data-aos-delay="100">
569
+ <div class="w-20 h-20 mb-8 bg-primary-dark rounded-2xl flex items-center justify-center shadow-lg">
570
+ <i data-feather="compass" class="text-white w-10 h-10"></i>
571
+ </div>
572
+ <h3 class="text-2xl font-semibold text-primary-dark mb-6">AI Strategy & Consulting</h3>
573
+ <p class="text-primary-dark/90 mb-8 leading-relaxed">We help you identify opportunities where AI can transform your business and develop a strategic roadmap for implementation that aligns with your goals.</p>
574
+ <ul class="space-y-4 text-primary-dark/90">
575
+ <li class="flex items-center">
576
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
577
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
578
+ </div>
579
+ Opportunity Assessment
580
+ </li>
581
+ <li class="flex items-center">
582
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
583
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
584
+ </div>
585
+ Technical Feasibility
586
+ </li>
587
+ <li class="flex items-center">
588
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
589
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
590
+ </div>
591
+ Implementation Roadmap
592
+ </li>
593
+ </ul>
594
+ </div>
595
+
596
+ <div class="service-card bg-white p-10 rounded-3xl" data-aos="fade-up" data-aos-delay="200">
597
+ <div class="w-20 h-20 mb-8 bg-innovation-orange rounded-2xl flex items-center justify-center shadow-lg">
598
+ <i data-feather="cpu" class="text-white w-10 h-10"></i>
599
+ </div>
600
+ <h3 class="text-2xl font-semibold text-primary-dark mb-6">Custom AI & ML Solutions</h3>
601
+ <p class="text-primary-dark/90 mb-8 leading-relaxed">We design and build bespoke AI models and machine learning systems tailored to your specific needs, data, and business objectives.</p>
602
+ <ul class="space-y-4 text-primary-dark/90">
603
+ <li class="flex items-center">
604
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
605
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
606
+ </div>
607
+ Predictive Analytics
608
+ </li>
609
+ <li class="flex items-center">
610
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
611
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
612
+ </div>
613
+ Computer Vision
614
+ </li>
615
+ <li class="flex items-center">
616
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
617
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
618
+ </div>
619
+ Natural Language Processing
620
+ </li>
621
+ </ul>
622
+ </div>
623
+
624
+ <div class="service-card bg-white p-10 rounded-3xl" data-aos="fade-up" data-aos-delay="300">
625
+ <div class="w-20 h-20 mb-8 bg-primary-dark rounded-2xl flex items-center justify-center shadow-lg">
626
+ <i data-feather="code" class="text-white w-10 h-10"></i>
627
+ </div>
628
+ <h3 class="text-2xl font-semibold text-primary-dark mb-6">Full-Stack Development</h3>
629
+ <p class="text-primary-dark/90 mb-8 leading-relaxed">We build robust, scalable applications with modern technologies, ensuring your product is both functional today and future-proof for tomorrow.</p>
630
+ <ul class="space-y-4 text-primary-dark/90">
631
+ <li class="flex items-center">
632
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
633
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
634
+ </div>
635
+ Web Applications
636
+ </li>
637
+ <li class="flex items-center">
638
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
639
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
640
+ </div>
641
+ Mobile Applications
642
+ </li>
643
+ <li class="flex items-center">
644
+ <div class="w-6 h-6 bg-innovation-orange/20 rounded-full flex items-center justify-center mr-3">
645
+ <i data-feather="check" class="w-4 h-4 text-innovation-orange"></i>
646
+ </div>
647
+ API Development
648
+ </li>
649
+ </ul>
650
+ </div>
651
+ </div>
652
+ </div>
653
+ </section>
654
+
655
+ <!-- Project Explorer Section -->
656
+ <section id="projects" class="py-24 bg-white">
657
+ <div class="container mx-auto px-6">
658
+ <div class="text-center mb-20" data-aos="fade-up">
659
+ <h2 class="text-4xl md:text-5xl font-bold text-primary-dark mb-6">Explore Our Projects</h2>
660
+ <p class="text-xl text-primary-dark max-w-3xl mx-auto leading-relaxed">
661
+ Discover how we've transformed complex challenges into brilliant solutions across various industries and technologies.
662
+ </p>
663
+ </div>
664
+
665
+ <div class="project-explorer grid md:grid-cols-2 lg:grid-cols-3 gap-8">
666
+ <div class="project-card bg-white rounded-3xl overflow-hidden shadow-xl" data-aos="flip-left" data-aos-delay="100">
667
+ <div class="h-60 overflow-hidden">
668
+ <img src="http://static.photos/technology/640x360/1" alt="Predictive Maintenance AI" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
669
+ </div>
670
+ <div class="project-overlay">
671
+ <h3 class="text-xl font-semibold text-white mb-3">Predictive Maintenance AI</h3>
672
+ <p class="text-white/90 mb-4">Machine learning system that predicts equipment failures before they happen, reducing downtime by 45%.</p>
673
+ <div class="flex justify-between items-center">
674
+ <span class="text-sm text-innovation-orange font-medium bg-white/90 px-3 py-1 rounded-full">Manufacturing</span>
675
+ <a href="#" class="text-white hover:text-innovation-orange transition-colors flex items-center font-medium">
676
+ <span class="mr-2">View Case Study</span>
677
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
678
+ </a>
679
+ </div>
680
+ </div>
681
+ <div class="p-8">
682
+ <h3 class="text-xl font-semibold text-primary-dark mb-3">Predictive Maintenance AI</h3>
683
+ <p class="text-primary-dark/90 mb-4">Machine learning system that predicts equipment failures before they happen.</p>
684
+ <div class="flex justify-between items-center">
685
+ <span class="text-sm text-innovation-orange font-medium">Manufacturing</span>
686
+ <a href="#" class="text-primary-dark hover:text-innovation-orange transition-colors flex items-center">
687
+ <span class="mr-1">View Case Study</span>
688
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
689
+ </a>
690
+ </div>
691
+ </div>
692
+ </div>
693
+
694
+ <div class="project-card bg-white rounded-3xl overflow-hidden shadow-xl" data-aos="flip-left" data-aos-delay="200">
695
+ <div class="h-60 overflow-hidden">
696
+ <img src="http://static.photos/finance/640x360/2" alt="Financial Analytics Platform" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
697
+ </div>
698
+ <div class="project-overlay">
699
+ <h3 class="text-xl font-semibold text-white mb-3">Financial Analytics Platform</h3>
700
+ <p class="text-white/90 mb-4">AI-powered platform for real-time financial market analysis and predictions with 92% accuracy.</p>
701
+ <div class="flex justify-between items-center">
702
+ <span class="text-sm text-innovation-orange font-medium bg-white/90 px-3 py-1 rounded-full">Finance</span>
703
+ <a href="#" class="text-white hover:text-innovation-orange transition-colors flex items-center font-medium">
704
+ <span class="mr-2">View Case Study</span>
705
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
706
+ </a>
707
+ </div>
708
+ </div>
709
+ <div class="p-8">
710
+ <h3 class="text-xl font-semibold text-primary-dark mb-3">Financial Analytics Platform</h3>
711
+ <p class="text-primary-dark/90 mb-4">AI-powered platform for real-time financial market analysis and predictions.</p>
712
+ <div class="flex justify-between items-center">
713
+ <span class="text-sm text-innovation-orange font-medium">Finance</span>
714
+ <a href="#" class="text-primary-dark hover:text-innovation-orange transition-colors flex items-center">
715
+ <span class="mr-1">View Case Study</span>
716
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
717
+ </a>
718
+ </div>
719
+ </div>
720
+ </div>
721
+
722
+ <div class="project-card bg-white rounded-3xl overflow-hidden shadow-xl" data-aos="flip-left" data-aos-delay="300">
723
+ <div class="h-60 overflow-hidden">
724
+ <img src="http://static.photos/healthcare/640x360/3" alt="Healthcare Diagnostic Assistant" class="w-full h-full object-cover transition-transform duration-700 hover:scale-110">
725
+ </div>
726
+ <div class="project-overlay">
727
+ <h3 class="text-xl font-semibold text-white mb-3">Healthcare Diagnostic Assistant</h3>
728
+ <p class="text-white/90 mb-4">AI system that assists medical professionals in diagnosing complex conditions with 98% confidence.</p>
729
+ <div class="flex justify-between items-center">
730
+ <span class="text-sm text-innovation-orange font-medium bg-white/90 px-3 py-1 rounded-full">Healthcare</span>
731
+ <a href="#" class="text-white hover:text-innovation-orange transition-colors flex items-center font-medium">
732
+ <span class="mr-2">View Case Study</span>
733
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
734
+ </a>
735
+ </div>
736
+ </div>
737
+ <div class="p-8">
738
+ <h3 class="text-xl font-semibold text-primary-dark mb-3">Healthcare Diagnostic Assistant</h3>
739
+ <p class="text-primary-dark/90 mb-4">AI system that assists medical professionals in diagnosing complex conditions.</p>
740
+ <极速赛车开奖结果历史记录>
741
+ <span class="text-sm text-innovation-orange font-medium">Healthcare</span>
742
+ <a href="#" class="text-primary-dark hover:text-innovation-orange transition-colors flex items-center">
743
+ <span class="mr-1">View Case Study</span>
744
+ <i data-feather="arrow-right" class="w-4 h-4"></i>
745
+ </a>
746
+ </div>
747
+ </div>
748
+ </div>
749
+ </div>
750
+
751
+ <div class="text-center mt-16" data-aos="fade-up">
752
+ <a href="#" class="inline-flex items-center text-primary-dark hover:text-innovation-orange transition-all transform hover:scale-105 font-semibold text-lg">
753
+ <span>View All Projects</span>
754
+ <i data-feather="arrow-right" class="w-5 h-5 ml-3"></i>
755
+ </a>
756
+ </div>
757
+ </div>
758
+ </section>
759
+
760
+ <!-- Contact Section -->
761
+ <section id="contact" class="py-24 bg-gradient-to-br from-chemnitz-blue to-primary-dark text-white">
762
+ <div class="container mx-auto px-6">
763
+ <div class="max-w-4xl mx-auto">
764
+ <div class="text-center mb-20" data-aos="fade-up">
765
+ <h2 class="text-4xl md:text-5xl font-bold mb-6">Ready to Build Something Brilliant?</h2>
766
+ <p class="text-xl opacity-95 leading-relaxed">
767
+ Let's discuss how we can transform your vision into an exceptional digital product that carries forward Chemnitz's legacy of innovation.
768
+ </p>
769
+ </div>
770
+
771
+ <form class="grid md:grid-cols-2 gap-8" data-aos="fade-up" data-aos-delay="200">
772
+ <div>
773
+ <label for="name" class="block text-sm font-medium mb-3">Your Name</label>
774
+ <input type="text" id="name" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="John Doe">
775
+ </div>
776
+
777
+ <div>
778
+ <label for="email" class="block text-sm font-medium mb-3">Email Address</label>
779
+ <input type="email" id="email" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="john@company.com">
780
+ </div>
781
+
782
+ <div class="md:col-span-2">
783
+ <label for="company" class="block text-sm font-medium mb-3">Company</label>
784
+ <input type="text" id="company" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="Your Company">
785
+ </div>
786
+
787
+ <div class="md:col-span-2">
788
+ <label for="message" class="block text-sm font-medium mb-3">Your Project Details</label>
789
+ <textarea id="message" rows="5" class="form-input w-full px-5 py-4 bg-white/5 border border-white/20 rounded-xl focus:ring-2 focus:ring-innovation-orange focus:border-transparent backdrop-blur-sm" placeholder="Tell us about your project vision, challenges, and goals..."></textarea>
790
+ </div>
791
+
792
+ <div class="md:col-span-2 text-center">
793
+ <button type="submit" class="bg-innovation-orange text-white font-semibold py-4 px-12 rounded-xl hover:bg-innovation-orange/90 transition-all transform hover:scale-105 shadow-lg flex items-center justify-center mx-auto">
794
+ <i data-feather="calendar" class="w-5 h-5 mr-3"></i>
795
+ Schedule a Consultation
796
+ </button>
797
+ </div>
798
+ </form>
799
+ </div>
800
+ </div>
801
+ </section>
802
+
803
+ <!-- Footer -->
804
+ <footer class="py-16 bg-gray-900 text-gray-400">
805
+ <div class="container mx-auto px-6">
806
+ <div class="grid md:grid-cols-4 gap-10">
807
+ <div>
808
+ <h3 class="text-white text-xl font-semibold mb-6">nestler.dev</h3>
809
+ <p class="mb-6 leading-relaxed">Transforming brilliant ideas into exceptional digital products with AI innovation and technical excellence.</p>
810
+ <div class="flex space-x-5">
811
+ <a href="#" class="text-gray-400 hover:text-innovation-orange transition-all transform hover:scale-110">
812
+ <i data-feather="twitter" class="w-5 h-5"></i>
813
+ </a>
814
+ <a href="#" class="text-gray-400 hover:text-innovation-orange transition-all transform hover:scale-110">
815
+ <i data-feather="linkedin" class="w-5 h-5"></i>
816
+ </a>
817
+ <a href="#" class="text-gray-400 hover:text-innovation-orange transition-all transform hover:scale-110">
818
+ <i data-feather="github" class="w-5 h-5"></i>
819
+ </a>
820
+ </div>
821
+ </div>
822
+
823
+ <div>
824
+ <h3 class="text-white text-xl font-semibold mb-6">Services</h3>
825
+ <ul class="space-y-4">
826
+ <li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center">
827
+ <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
828
+ AI Strategy & Consulting
829
+ </a></li>
830
+ <li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center">
831
+ <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
832
+ Custom AI & ML Solutions
833
+ </极速赛车开奖结果历史记录></li>
834
+ <li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center">
835
+ <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
836
+ Full-Stack Development
837
+ </a></li>
838
+ </ul>
839
+ </div>
840
+
841
+ <div>
842
+ <h3 class="text-white text-xl font-semibold mb-6">Company</h3>
843
+ <ul class="space-y-4">
844
+ <li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center">
845
+ <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
846
+ About Us
847
+ </a></li>
848
+ <li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center">
849
+ <i data-feather="arrow-right" class="极速赛车开奖结果历史记录-4 h-4 mr-2"></i>
850
+ Our Approach
851
+ </a></li>
852
+ <li><a href="#" class="hover:text-innovation-orange transition-colors flex items-center">
853
+ <i data-feather="arrow-right" class="w-4 h-4 mr-2"></i>
854
+ Case Studies
855
+ </a></li>
856
+ </ul>
857
+ </div>
858
+
859
+ <div>
860
+ <h3 class="text-white text-xl font-semibold mb-6">Contact</h3>
861
+ <ul class="space-y-4">
862
+ <li class="flex items-start">
863
+ <i data-feather="map-pin" class="w-5 h-5 mr-3 mt-1 text-innovation-orange"></i>
864
+ <span>Chemnitz, Germany</span>
865
+ </li>
866
+ <li class="flex items-center">
867
+ <i data-feather="mail" class="w-5 h-5 mr-3 text-innovation-orange"></i>
868
+ <a href="mailto:hello@nestler.dev" class="hover:text-innovation-orange transition-colors">hello@nestler.dev</a>
869
+ </li>
870
+ </ul>
871
+ </div>
872
+ </div>
873
+
874
+ <div class="border-t border-gray-800 mt-16 pt-8 text-center">
875
+ <p class="text-sm">&copy; 2025 nestler.dev. Carrying forward Chemnitz's legacy of innovation and excellence.</p>
876
+ </div>
877
+ </div>
878
+ </footer>
879
+
880
+ <script>
881
+ // Initialize AOS
882
+ AOS.init({
883
+ duration: 1000,
884
+ once: true,
885
+ offset: 100,
886
+ easing: 'ease-out-cubic'
887
+ });
888
+
889
+ // Initialize Feather Icons
890
+ feather.replace();
891
+
892
+ // Initialize Vanta.js
893
+ VANTA.GLOBE({
894
+ el: "#vanta-background",
895
+ mouseControls: true,
896
+ touchControls: true,
897
+ gyroControls: false,
898
+ minHeight: 200.00,
899
+ minWidth: 200.00,
900
+ scale: 1.00,
901
+ scaleMobile: 1.00,
902
+ color: 0xc7522a,
903
+ backgroundColor: 0xf0daa5,
904
+ size: 0.8,
905
+ speed: 1.5
906
+ });
907
+
908
+ // Custom cursor
909
+ const cursor = document.querySelector('.custom-cursor');
910
+ const cursorDot = document.querySelector('.cursor-dot');
911
+
912
+ document.addEventListener('mousemove', (e) => {
913
+ cursor.style.left = e.clientX + 'px';
914
+ cursor.style.top = e.clientY + 'px';
915
+
916
+ cursorDot.style.left = e.clientX + 'px';
917
+ cursorDot.style.top = e.clientY + 'px';
918
+ });
919
+
920
+ document.querySelectorAll('a, button, input, textarea, .service-card, .project-card').forEach(item => {
921
+ item.addEventListener('mouseenter', () => {
922
+ cursor.classList.add('cursor-active');
923
+ });
924
+
925
+ item.addEventListener('mouseleave', () => {
926
+ cursor.classList.remove('cursor-active');
927
+ });
928
+ });
929
+
930
+ // Forge animation
931
+ const forgeProgress = document.getElementById('forge-progress');
932
+ let progress = 0;
933
+
934
+ const forgeInterval = setInterval(() => {
935
+ progress += 5;
936
+ forgeProgress.style.width = `${progress}%`;
937
+
938
+ if (progress === 100) {
939
+ clearInterval(forgeInterval);
940
+
941
+ // Create particles
942
+ for (let i = 0; i < 25; i++) {
943
+ createParticle();
944
+ }
945
+ }
946
+ }, 100);
947
+
948
+ function createParticle() {
949
+ const particle = document.createElement('div');
950
+ particle.classList.add('forge-particle');
951
+
952
+ const size = Math.random() * 12 + 6;
953
+ particle.style.width = `${size}px`;
954
+ particle.style.height = `${size}px`;
955
+
956
+ const forgeElement = document.querySelector('.forge-animation');
957
+ const forgeRect = forgeElement.getBoundingClientRect();
958
+
959
+ particle.style.left = `${forgeRect.left + forgeRect.width}px`;
960
+ particle.style.top = `${forgeRect.top + forgeRect.height / 2}px`;
961
+
962
+ document.body.appendChild(particle);
963
+
964
+ anime({
965
+ targets: particle,
966
+ translateX: Math.random() * 600 - 300,
967
+ translateY: Math.random() * 400 - 200,
968
+ opacity: [0, 0.8, 0],
969
+ scale: [0, 1, 0],
970
+ duration: Math.random() * 1500 + 1000,
971
+ easing: 'easeOutExpo',
972
+ complete: () => {
973
+ particle.remove();
974
+ }
975
+ });
976
+ }
977
+
978
+ // AI Demo functionality
979
+ const aiInput = document.getElementById('ai-input');
980
+ const aiOutput = document.getElementById('ai-output');
981
+ const aiTransformBtn = document.getElementById('ai-transform-btn');
982
+ const copyOutputBtn = document.getElementById('copy-output');
983
+ const resetDemoBtn = document.getElementById('reset-demo');
984
+
985
+ const enhancements = [
986
+ "This could be optimized with predictive analytics to anticipate user needs and create more personalized experiences.",
987
+ "Consider implementing natural language processing for more intuitive interactions and better user engagement.",
988
+ "A machine learning model could personalize this experience based on user behavior patterns and preferences.",
989
+ "Computer vision capabilities could enhance the visual aspects of this concept and provide additional context.",
990
+ "This idea would benefit from our AI-powered data analysis for deeper insights and more informed decision-making.",
991
+ "Integrating reinforcement learning could help optimize processes and outcomes based on continuous feedback.",
992
+ "Adding generative AI capabilities could create unique content and variations that enhance the overall experience."
993
+ ];
994
+
995
+ aiTransformBtn.addEventListener('click', () => {
996
+ const text = aiInput.value.trim();
997
+
998
+ if (!text) {
999
+ aiOutput.textContent = "Please enter some text to transform. We're excited to see what ideas you have!";
1000
+ return;
1001
+ }
1002
+
1003
+ // Show loading state with animation
1004
+ aiOutput.innerHTML = '<div class="flex items-center justify-center"><div class="animate-spin rounded-full h-6 w-6 border-b-2 border-innovation-orange"></div><span class="ml-3">Processing with AI...</span></div>';
1005
+
1006
+ // Simulate AI processing
1007
+ setTimeout(() => {
1008
+ const randomEnhancement = enhancements[Math.floor(Math.random() * enhancements.length)];
1009
+ aiOutput.innerHTML = `<p class="text-primary-dark/90 mb-4 leading-relaxed">${text}</p><div class="bg-innovation-orange/10 p-4 rounded-lg border-l-4 border-innovation-orange"><p class="text-innovation-orange font-medium">AI Enhancement:</p><p class="text-primary-dark/90 mt-2">${randomEnhancement}</p></div>`;
1010
+ }, 2000);
1011
+ });
1012
+
1013
+ copyOutputBtn.addEventListener('click', () => {
1014
+ const textToCopy = aiOutput.textContent;
1015
+ navigator.clipboard.writeText(textToCopy).then(() => {
1016
+ // Show copied feedback
1017
+ const originalText = copyOutputBtn.innerHTML;
1018
+ copyOutputBtn.innerHTML = '<i data-feather="check" class="w-5 h-5 mr-2"></i> Copied!';
1019
+ copyOutputBtn.classList.add('text-green-600');
1020
+
1021
+ setTimeout(() => {
1022
+ copyOutputBtn.innerHTML = originalText;
1023
+ copyOutputBtn.classList.remove('text-green-600');
1024
+ feather.replace();
1025
+ }, 2000);
1026
+ });
1027
+ });
1028
+
1029
+ resetDemoBtn.addEventListener('click', () => {
1030
+ aiInput.value = '';
1031
+ aiOutput.innerHTML = '<p class="text-primary-dark/90 leading-relaxed">Your enhanced text will appear here. Our AI analyzes your input and provides innovative suggestions to elevate your concept.</p>';
1032
+ });
1033
+
1034
+ // Dark mode toggle
1035
+ const darkModeToggle = document.getElementById('dark-mode-toggle');
1036
+ const darkModeIcon = darkModeToggle.querySelector('i');
1037
+
1038
+ darkModeToggle.addEventListener('click', () => {
1039
+ document.body.classList.toggle('dark-mode');
1040
+
1041
+ if (document.body.classList.contains('dark-mode')) {
1042
+ darkModeIcon.setAttribute('data-feather', 'sun');
1043
+ VANTA.GLOBE({
1044
+ el: "#vanta-background",
1045
+ mouseControls: true,
1046
+ touchControls: true,
1047
+ gyroControls: false,
1048
+ minHeight: 200.00,
1049
+ minWidth: 200.00,
1050
+ scale: 1.00,
1051
+ scaleMobile: 1.00,
1052
+ color: 0x74a892,
1053
+ backgroundColor: 0x004343,
1054
+ size: 0.8,
1055
+ speed: 1.5
1056
+ });
1057
+ } else {
1058
+ darkModeIcon.setAttribute('data-feather', 'moon');
1059
+ VANTA.GLOBE({
1060
+ el: "#vanta-background",
1061
+ mouseControls: true,
1062
+ touchControls: true,
1063
+ gyroControls: false,
1064
+ minHeight: 200.00,
1065
+ minWidth: 200.00,
1066
+ scale: 1.00,
1067
+ scaleMobile: 1.00,
1068
+ color: 0xc7522a,
1069
+ backgroundColor: 0xf0daa5,
1070
+ size: 0.8,
1071
+ speed: 1.5
1072
+ });
1073
+ }
1074
+
1075
+ feather.replace();
1076
+ });
1077
+
1078
+ // Add subtle animations to elements on scroll
1079
+ document.addEventListener('scroll', () => {
1080
+ const scrolled = window.pageYOffset;
1081
+ const rate = scrolled * -0.5;
1082
+ document.querySelector('.floating-element').style.transform = `translateY(${rate}px)`;
1083
+ });
1084
+ </script>
1085
+ </body>
1086
  </html>
prompts.txt ADDED
File without changes