Hugging Face's logo

Spaces:
CYRAGE
/
version-2
Running

App Files Community
CYRAGE commited on
Commit
a107c2e
·
verified ·
1 Parent(s): cb4e842

Soll und einen kompletten webseite voll funktionsfähig sein mit integrierter Datenbank mit Loginbereich themen oben spezialgebiete Software und Hardwareentwicklung für retteaming of sec die Firma ist search - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +603 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Version 2
3
- emoji: 🌍
4
- colorFrom: indigo
5
- colorTo: pink
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: version-2
3
+ emoji: 🐳
4
+ colorFrom: red
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,603 @@
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">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cybal - Cybersicherheit Next.js Vorlage</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
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #1a237e 0%, #283593 50%, #3949ab 100%);
12
+ }
13
+ .hero-image {
14
+ background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1550751827-4bd374c3f58b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
15
+ background-size: cover;
16
+ background-position: center;
17
+ }
18
+ .feature-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
21
+ }
22
+ .glow {
23
+ box-shadow: 0 0 15px rgba(66, 165, 245, 0.5);
24
+ }
25
+ </style>
26
+ </head>
27
+ <body class="font-sans bg-gray-100">
28
+ <!-- Navigation -->
29
+ <nav class="gradient-bg text-white shadow-lg">
30
+ <div class="container mx-auto px-4 py-3">
31
+ <div class="flex justify-between items-center">
32
+ <div class="flex items-center space-x-4">
33
+ <a href="#" class="flex items-center">
34
+ <span class="text-2xl font-bold">CYBAL</span>
35
+ </a>
36
+ </div>
37
+
38
+ <div class="hidden md:flex items-center space-x-8">
39
+ <a href="#features" class="hover:text-blue-300 transition">Features</a>
40
+ <a href="#templates" class="hover:text-blue-300 transition">Templates</a>
41
+ <a href="#about" class="hover:text-blue-300 transition">About</a>
42
+ <a href="#pricing" class="hover:text-blue-300 transition">Pricing</a>
43
+ <a href="#contact" class="hover:text-blue-300 transition">Contact</a>
44
+ </div>
45
+
46
+ <div class="flex items-center space-x-4">
47
+ <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition">Demo</a>
48
+ <button class="md:hidden text-white focus:outline-none">
49
+ <i class="fas fa-bars text-xl"></i>
50
+ </button>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Mobile Menu -->
57
+ <div class="md:hidden bg-gray-800 text-white hidden" id="mobileMenu">
58
+ <div class="container mx-auto px-4 py-2 flex flex-col space-y-2">
59
+ <a href="#features" class="block py-2 hover:bg-gray-700 px-2 rounded">Features</a>
60
+ <a href="#templates" class="block py-2 hover:bg-gray-700 px-2 rounded">Templates</a>
61
+ <a href="#about" class="block py-2 hover:bg-gray-700 px-2 rounded">About</a>
62
+ <a href="#pricing" class="block py-2 hover:bg-gray-700 px-2 rounded">Pricing</a>
63
+ <a href="#contact" class="block py-2 hover:bg-gray-700 px-2 rounded">Contact</a>
64
+ </div>
65
+ </div>
66
+
67
+ <!-- Hero Section -->
68
+ <section class="hero-image text-white py-20 md:py-32">
69
+ <div class="container mx-auto px-4">
70
+ <div class="max-w-3xl mx-auto text-center">
71
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Cybersicherheit Next.js Vorlage</h1>
72
+ <p class="text-xl md:text-2xl mb-8">Schützen Sie Ihre digitale Festung mit Cybal - der ultimativen Cyber Security Next JS-Vorlage</p>
73
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
74
+ <a href="#" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition glow">Jetzt kaufen</a>
75
+ <a href="#" class="bg-gray-700 hover:bg-gray-600 text-white px-6 py-3 rounded-md text-lg font-medium transition">Live Demo</a>
76
+ </div>
77
+ </div>
78
+ </div>
79
+ </section>
80
+
81
+ <!-- Features Section -->
82
+ <section id="features" class="py-16 bg-white">
83
+ <div class="container mx-auto px-4">
84
+ <h2 class="text-3xl font-bold text-center mb-12">Key Features</h2>
85
+
86
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
87
+ <!-- Feature 1 -->
88
+ <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
89
+ <div class="text-blue-500 mb-4">
90
+ <i class="fas fa-shield-alt text-4xl"></i>
91
+ </div>
92
+ <h3 class="text-xl font-semibold mb-3">NextJS 14.1+</h3>
93
+ <p class="text-gray-600">Modernste Technologie mit "App"-Verzeichnis für optimale Performance und SEO.</p>
94
+ </div>
95
+
96
+ <!-- Feature 2 -->
97
+ <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
98
+ <div class="text-blue-500 mb-4">
99
+ <i class="fas fa-mobile-alt text-4xl"></i>
100
+ </div>
101
+ <h3 class="text-xl font-semibold mb-3">100% Responsiv</h3>
102
+ <p class="text-gray-600">Perfekt angepasst für alle Geräte - von Desktop bis Smartphone.</p>
103
+ </div>
104
+
105
+ <!-- Feature 3 -->
106
+ <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
107
+ <div class="text-blue-500 mb-4">
108
+ <i class="fas fa-search text-4xl"></i>
109
+ </div>
110
+ <h3 class="text-xl font-semibold mb-3">SEO-Optimiert</h3>
111
+ <p class="text-gray-600">On-Page SEO optimiert für bessere Sichtbarkeit in Suchmaschinen.</p>
112
+ </div>
113
+
114
+ <!-- Feature 4 -->
115
+ <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
116
+ <div class="text-blue-500 mb-4">
117
+ <i class="fas fa-paint-brush text-4xl"></i>
118
+ </div>
119
+ <h3 class="text-xl font-semibold mb-3">UI-Kit</h3>
120
+ <p class="text-gray-600">Vollständiges UI-Kit mit vielen vorgefertigten Komponenten für schnelle Anpassungen.</p>
121
+ </div>
122
+
123
+ <!-- Feature 5 -->
124
+ <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
125
+ <div class="text-blue-500 mb-4">
126
+ <i class="fas fa-map-marked-alt text-4xl"></i>
127
+ </div>
128
+ <h3 class="text-xl font-semibold mb-3">Google Maps</h3>
129
+ <p class="text-gray-600">Integrierte Google Maps für Standortdarstellung und Kontaktinformationen.</p>
130
+ </div>
131
+
132
+ <!-- Feature 6 -->
133
+ <div class="feature-card bg-gray-50 p-6 rounded-lg shadow-md transition duration-300">
134
+ <div class="text-blue-500 mb-4">
135
+ <i class="fas fa-file-alt text-4xl"></i>
136
+ </div>
137
+ <h3 class="text-xl font-semibold mb-3">Dokumentation</h3>
138
+ <p class="text-gray-600">Ausführliche Dokumentation für einfache Installation und Anpassung.</p>
139
+ </div>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Templates Preview -->
145
+ <section id="templates" class="py-16 bg-gray-100">
146
+ <div class="container mx-auto px-4">
147
+ <h2 class="text-3xl font-bold text-center mb-12">Template Vorschau</h2>
148
+
149
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
150
+ <!-- Template 1 -->
151
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
152
+ <div class="h-48 bg-gray-300 flex items-center justify-center">
153
+ <span class="text-gray-500">Homepage 1</span>
154
+ </div>
155
+ <div class="p-6">
156
+ <h3 class="text-xl font-semibold mb-2">Moderne Security</h3>
157
+ <p class="text-gray-600 mb-4">Cleaner Look mit Fokus auf Cybersicherheitsdienstleistungen.</p>
158
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Vorschau ansehen →</a>
159
+ </div>
160
+ </div>
161
+
162
+ <!-- Template 2 -->
163
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
164
+ <div class="h-48 bg-gray-300 flex items-center justify-center">
165
+ <span class="text-gray-500">Homepage 2</span>
166
+ </div>
167
+ <div class="p-6">
168
+ <h3 class="text-xl font-semibold mb-2">Überwachung</h3>
169
+ <p class="text-gray-600 mb-4">Spezialisiert auf CCTV und physische Sicherheitssysteme.</p>
170
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Vorschau ansehen →</a>
171
+ </div>
172
+ </div>
173
+
174
+ <!-- Template 3 -->
175
+ <div class="bg-white rounded-lg overflow-hidden shadow-md hover:shadow-xl transition duration-300">
176
+ <div class="h-48 bg-gray-300 flex items-center justify-center">
177
+ <span class="text-gray-500">Homepage 3</span>
178
+ </div>
179
+ <div class="p-6">
180
+ <h3 class="text-xl font-semibold mb-2">Enterprise Security</h3>
181
+ <p class="text-gray-600 mb-4">Professionelles Design für große Unternehmen.</p>
182
+ <a href="#" class="text-blue-500 hover:text-blue-700 font-medium">Vorschau ansehen →</a>
183
+ </div>
184
+ </div>
185
+ </div>
186
+
187
+ <div class="text-center mt-12">
188
+ <a href="#" class="inline-block bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition">
189
+ Alle 30+ Templates ansehen
190
+ </a>
191
+ </div>
192
+ </div>
193
+ </section>
194
+
195
+ <!-- About Section -->
196
+ <section id="about" class="py-16 bg-white">
197
+ <div class="container mx-auto px-4">
198
+ <div class="flex flex-col lg:flex-row items-center gap-12">
199
+ <div class="lg:w-1/2">
200
+ <h2 class="text-3xl font-bold mb-6">Über Cybal</h2>
201
+ <p class="text-gray-600 mb-4">
202
+ Cybal ist eine hochmoderne Next.js-Vorlage, speziell für Sicherheitsunternehmen entwickelt.
203
+ Diese Vorlage kombiniert elegante Designelemente mit erweiterten Funktionen, um sicherzustellen,
204
+ dass sich Ihre Website von der Konkurrenz abhebt.
205
+ </p>
206
+ <p class="text-gray-600 mb-6">
207
+ Mit Cybal können Sie Ihr Fachwissen in den Bereichen Kameraüberwachung, Webschutz und
208
+ Cybersicherheitsmanagement unter Beweis stellen. Die intuitive Benutzeroberfläche ermöglicht es Ihnen,
209
+ auf einfache Weise atemberaubende Landingpages anzupassen und zu erstellen.
210
+ </p>
211
+ <div class="flex flex-wrap gap-4">
212
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">NextJS 14.1+</span>
213
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">Bootstrap 5</span>
214
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">100% Responsiv</span>
215
+ <span class="bg-blue-100 text-blue-800 px-3 py-1 rounded-full text-sm">SEO Optimiert</span>
216
+ </div>
217
+ </div>
218
+ <div class="lg:w-1/2">
219
+ <div class="bg-gray-200 h-96 rounded-lg flex items-center justify-center">
220
+ <span class="text-gray-500">Template Screenshot</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ </div>
225
+ </section>
226
+
227
+ <!-- Pricing Section -->
228
+ <section id="pricing" class="py-16 bg-gray-100">
229
+ <div class="container mx-auto px-4">
230
+ <h2 class="text-3xl font-bold text-center mb-12">Preisgestaltung</h2>
231
+
232
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
233
+ <!-- Basic Plan -->
234
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
235
+ <div class="px-6 py-8">
236
+ <h3 class="text-2xl font-semibold text-gray-800 mb-2">Standard</h3>
237
+ <p class="text-gray-600 mb-6">Für kleine Unternehmen und Einzelpersonen</p>
238
+ <div class="mb-6">
239
+ <span class="text-4xl font-bold text-gray-800">$49</span>
240
+ <span class="text-gray-600">/ einmalig</span>
241
+ </div>
242
+ <ul class="space-y-3 mb-8">
243
+ <li class="flex items-center">
244
+ <i class="fas fa-check text-green-500 mr-2"></i>
245
+ <span>1 Domain Lizenz</span>
246
+ </li>
247
+ <li class="flex items-center">
248
+ <i class="fas fa-check text-green-500 mr-2"></i>
249
+ <span>Alle Templates</span>
250
+ </li>
251
+ <li class="flex items-center">
252
+ <i class="fas fa-check text-green-500 mr-2"></i>
253
+ <span>6 Monate Support</span>
254
+ </li>
255
+ <li class="flex items-center text-gray-400">
256
+ <i class="fas fa-times text-red-400 mr-2"></i>
257
+ <span>Keine Priorität Support</span>
258
+ </li>
259
+ </ul>
260
+ <a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 text-center py-3 rounded-md font-medium transition">
261
+ Auswählen
262
+ </a>
263
+ </div>
264
+ </div>
265
+
266
+ <!-- Popular Plan -->
267
+ <div class="bg-white rounded-lg shadow-xl overflow-hidden transform scale-105">
268
+ <div class="bg-blue-500 text-white text-center py-2">
269
+ <span class="font-medium">BELIEBT</span>
270
+ </div>
271
+ <div class="px-6 py-8">
272
+ <h3 class="text-2xl font-semibold text-gray-800 mb-2">Extended</h3>
273
+ <p class="text-gray-600 mb-6">Für mittelständische Unternehmen</p>
274
+ <div class="mb-6">
275
+ <span class="text-4xl font-bold text-gray-800">$99</span>
276
+ <span class="text-gray-600">/ einmalig</span>
277
+ </div>
278
+ <ul class="space-y-3 mb-8">
279
+ <li class="flex items-center">
280
+ <i class="fas fa-check text-green-500 mr-2"></i>
281
+ <span>3 Domain Lizenzen</span>
282
+ </li>
283
+ <li class="flex items-center">
284
+ <i class="fas fa-check text-green-500 mr-2"></i>
285
+ <span>Alle Templates</span>
286
+ </li>
287
+ <li class="flex items-center">
288
+ <i class="fas fa-check text-green-500 mr-2"></i>
289
+ <span>12 Monate Support</span>
290
+ </li>
291
+ <li class="flex items-center">
292
+ <i class="fas fa-check text-green-500 mr-2"></i>
293
+ <span>Priorität Support</span>
294
+ </li>
295
+ </ul>
296
+ <a href="#" class="block w-full bg-blue-500 hover:bg-blue-600 text-white text-center py-3 rounded-md font-medium transition glow">
297
+ Auswählen
298
+ </a>
299
+ </div>
300
+ </div>
301
+
302
+ <!-- Enterprise Plan -->
303
+ <div class="bg-white rounded-lg shadow-lg overflow-hidden">
304
+ <div class="px-6 py-8">
305
+ <h3 class="text-2xl font-semibold text-gray-800 mb-2">Unlimited</h3>
306
+ <p class="text-gray-600 mb-6">Für Agenturen und Entwickler</p>
307
+ <div class="mb-6">
308
+ <span class="text-4xl font-bold text-gray-800">$199</span>
309
+ <span class="text-gray-600">/ einmalig</span>
310
+ </div>
311
+ <ul class="space-y-3 mb-8">
312
+ <li class="flex items-center">
313
+ <i class="fas fa-check text-green-500 mr-2"></i>
314
+ <span>Unbegrenzte Lizenzen</span>
315
+ </li>
316
+ <li class="flex items-center">
317
+ <i class="fas fa-check text-green-500 mr-2"></i>
318
+ <span>Alle Templates</span>
319
+ </li>
320
+ <li class="flex items-center">
321
+ <i class="fas fa-check text-green-500 mr-2"></i>
322
+ <span>Lifetime Support</span>
323
+ </li>
324
+ <li class="flex items-center">
325
+ <i class="fas fa-check text-green-500 mr-2"></i>
326
+ <span>Priorität Support</span>
327
+ </li>
328
+ </ul>
329
+ <a href="#" class="block w-full bg-gray-200 hover:bg-gray-300 text-gray-800 text-center py-3 rounded-md font-medium transition">
330
+ Auswählen
331
+ </a>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </div>
336
+ </section>
337
+
338
+ <!-- Testimonials -->
339
+ <section class="py-16 bg-blue-50">
340
+ <div class="container mx-auto px-4">
341
+ <h2 class="text-3xl font-bold text-center mb-12">Was unsere Kunden sagen</h2>
342
+
343
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
344
+ <!-- Testimonial 1 -->
345
+ <div class="bg-white p-6 rounded-lg shadow-md">
346
+ <div class="flex items-center mb-4">
347
+ <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
348
+ <div>
349
+ <h4 class="font-semibold">Max Mustermann</h4>
350
+ <p class="text-gray-600 text-sm">Security Solutions GmbH</p>
351
+ </div>
352
+ </div>
353
+ <p class="text-gray-700">
354
+ "Die Cybal-Vorlage hat uns geholfen, unseren Online-Auftritt innerhalb von Tagen zu modernisieren.
355
+ Die Anpassungsmöglichkeiten sind hervorragend und der Support war schnell und hilfreich."
356
+ </p>
357
+ <div class="mt-4 text-yellow-400">
358
+ <i class="fas fa-star"></i>
359
+ <i class="fas fa-star"></i>
360
+ <i class="fas fa-star"></i>
361
+ <i class="fas fa-star"></i>
362
+ <i class="fas fa-star"></i>
363
+ </div>
364
+ </div>
365
+
366
+ <!-- Testimonial 2 -->
367
+ <div class="bg-white p-6 rounded-lg shadow-md">
368
+ <div class="flex items-center mb-4">
369
+ <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
370
+ <div>
371
+ <h4 class="font-semibold">Anna Schmidt</h4>
372
+ <p class="text-gray-600 text-sm">CyberGuard AG</p>
373
+ </div>
374
+ </div>
375
+ <p class="text-gray-700">
376
+ "Als IT-Sicherheitsunternehmen brauchen wir eine professionelle Website, die Vertrauen ausstrahlt.
377
+ Cybal hat genau das geliefert - modern, sicher und leicht zu pflegen."
378
+ </p>
379
+ <div class="mt-4 text-yellow-400">
380
+ <i class="fas fa-star"></i>
381
+ <i class="fas fa-star"></i>
382
+ <i class="fas fa-star"></i>
383
+ <i class="fas fa-star"></i>
384
+ <i class="fas fa-star-half-alt"></i>
385
+ </div>
386
+ </div>
387
+
388
+ <!-- Testimonial 3 -->
389
+ <div class="bg-white p-6 rounded-lg shadow-md">
390
+ <div class="flex items-center mb-4">
391
+ <div class="w-12 h-12 bg-gray-300 rounded-full mr-4"></div>
392
+ <div>
393
+ <h4 class="font-semibold">Thomas Weber</h4>
394
+ <p class="text-gray-600 text-sm">SecureNet Solutions</p>
395
+ </div>
396
+ </div>
397
+ <p class="text-gray-700">
398
+ "Die Vielzahl an vorgefertigten Templates hat uns enorm viel Entwicklungszeit gespart.
399
+ Besonders die SEO-Optimierung war für uns als Startup entscheidend."
400
+ </p>
401
+ <div class="mt-4 text-yellow-400">
402
+ <i class="fas fa-star"></i>
403
+ <i class="fas fa-star"></i>
404
+ <i class="fas fa-star"></i>
405
+ <i class="fas fa-star"></i>
406
+ <i class="fas fa-star"></i>
407
+ </div>
408
+ </div>
409
+ </div>
410
+ </div>
411
+ </section>
412
+
413
+ <!-- CTA Section -->
414
+ <section class="gradient-bg text-white py-16">
415
+ <div class="container mx-auto px-4 text-center">
416
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Bereit für Ihre neue Cybersicherheits-Website?</h2>
417
+ <p class="text-xl mb-8 max-w-2xl mx-auto">
418
+ Starten Sie noch heute mit der Cybal Next.js-Vorlage und präsentieren Sie Ihr Unternehmen professionell im Web.
419
+ </p>
420
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
421
+ <a href="#" class="bg-white hover:bg-gray-100 text-blue-600 px-8 py-3 rounded-md text-lg font-medium transition">Jetzt kaufen</a>
422
+ <a href="#" class="bg-transparent hover:bg-blue-700 border-2 border-white text-white px-8 py-3 rounded-md text-lg font-medium transition">Demo ansehen</a>
423
+ </div>
424
+ </div>
425
+ </section>
426
+
427
+ <!-- Contact Section -->
428
+ <section id="contact" class="py-16 bg-white">
429
+ <div class="container mx-auto px-4">
430
+ <h2 class="text-3xl font-bold text-center mb-12">Kontakt</h2>
431
+
432
+ <div class="flex flex-col lg:flex-row gap-12">
433
+ <div class="lg:w-1/2">
434
+ <form class="space-y-6">
435
+ <div>
436
+ <label for="name" class="block text-gray-700 font-medium mb-2">Name</label>
437
+ <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
438
+ </div>
439
+ <div>
440
+ <label for="email" class="block text-gray-700 font-medium mb-2">E-Mail</label>
441
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
442
+ </div>
443
+ <div>
444
+ <label for="subject" class="block text-gray-700 font-medium mb-2">Betreff</label>
445
+ <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
446
+ </div>
447
+ <div>
448
+ <label for="message" class="block text-gray-700 font-medium mb-2">Nachricht</label>
449
+ <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
450
+ </div>
451
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-md text-lg font-medium transition w-full">
452
+ Nachricht senden
453
+ </button>
454
+ </form>
455
+ </div>
456
+
457
+ <div class="lg:w-1/2">
458
+ <div class="bg-gray-100 p-6 rounded-lg h-full">
459
+ <h3 class="text-xl font-semibold mb-4">Kontaktinformationen</h3>
460
+ <div class="space-y-4">
461
+ <div class="flex items-start">
462
+ <i class="fas fa-map-marker-alt text-blue-500 mt-1 mr-4"></i>
463
+ <div>
464
+ <h4 class="font-medium">Adresse</h4>
465
+ <p class="text-gray-600">Musterstraße 123, 10115 Berlin, Deutschland</p>
466
+ </div>
467
+ </div>
468
+ <div class="flex items-start">
469
+ <i class="fas fa-envelope text-blue-500 mt-1 mr-4"></i>
470
+ <div>
471
+ <h4 class="font-medium">E-Mail</h4>
472
+ <p class="text-gray-600">info@cybal-template.de</p>
473
+ </div>
474
+ </div>
475
+ <div class="flex items-start">
476
+ <i class="fas fa-phone-alt text-blue-500 mt-1 mr-4"></i>
477
+ <div>
478
+ <h4 class="font-medium">Telefon</h4>
479
+ <p class="text-gray-600">+49 30 12345678</p>
480
+ </div>
481
+ </div>
482
+ </div>
483
+
484
+ <div class="mt-8">
485
+ <h3 class="text-xl font-semibold mb-4">Öffnungszeiten</h3>
486
+ <div class="space-y-2">
487
+ <div class="flex justify-between">
488
+ <span class="text-gray-700">Montag - Freitag</span>
489
+ <span class="text-gray-600">9:00 - 18:00</span>
490
+ </div>
491
+ <div class="flex justify-between">
492
+ <span class="text-gray-700">Samstag</span>
493
+ <span class="text-gray-600">10:00 - 14:00</span>
494
+ </div>
495
+ <div class="flex justify-between">
496
+ <span class="text-gray-700">Sonntag</span>
497
+ <span class="text-gray-600">Geschlossen</span>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+ </div>
505
+ </section>
506
+
507
+ <!-- Footer -->
508
+ <footer class="bg-gray-900 text-white pt-12 pb-6">
509
+ <div class="container mx-auto px-4">
510
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-8">
511
+ <div>
512
+ <h3 class="text-xl font-bold mb-4">CYBAL</h3>
513
+ <p class="text-gray-400">
514
+ Die ultimative Next.js-Vorlage für Cybersicherheitsunternehmen und IT-Security Dienstleister.
515
+ </p>
516
+ <div class="flex space-x-4 mt-4">
517
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook-f"></i></a>
518
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter"></i></a>
519
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin-in"></i></a>
520
+ <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram"></i></a>
521
+ </div>
522
+ </div>
523
+
524
+ <div>
525
+ <h3 class="text-lg font-semibold mb-4">Links</h3>
526
+ <ul class="space-y-2">
527
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
528
+ <li><a href="#features" class="text-gray-400 hover:text-white transition">Features</a></li>
529
+ <li><a href="#templates" class="text-gray-400 hover:text-white transition">Templates</a></li>
530
+ <li><a href="#pricing" class="text-gray-400 hover:text-white transition">Pricing</a></li>
531
+ <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li>
532
+ </ul>
533
+ </div>
534
+
535
+ <div>
536
+ <h3 class="text-lg font-semibold mb-4">Support</h3>
537
+ <ul class="space-y-2">
538
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Dokumentation</a></li>
539
+ <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li>
540
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Forum</a></li>
541
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Ticket System</a></li>
542
+ </ul>
543
+ </div>
544
+
545
+ <div>
546
+ <h3 class="text-lg font-semibold mb-4">Newsletter</h3>
547
+ <p class="text-gray-400 mb-4">
548
+ Abonnieren Sie unseren Newsletter für Updates und Angebote.
549
+ </p>
550
+ <form class="flex">
551
+ <input type="email" placeholder="Ihre E-Mail" class="px-4 py-2 rounded-l-md focus:outline-none text-gray-800 w-full">
552
+ <button type="submit" class="bg-blue-500 hover:bg-blue-600 px-4 py-2 rounded-r-md transition">
553
+ <i class="fas fa-paper-plane"></i>
554
+ </button>
555
+ </form>
556
+ </div>
557
+ </div>
558
+
559
+ <div class="border-t border-gray-800 pt-6 flex flex-col md:flex-row justify-between items-center">
560
+ <p class="text-gray-400 mb-4 md:mb-0">
561
+ &copy; 2023 Cybal Template. Alle Rechte vorbehalten.
562
+ </p>
563
+ <div class="flex space-x-6">
564
+ <a href="#" class="text-gray-400 hover:text-white transition">Impressum</a>
565
+ <a href="#" class="text-gray-400 hover:text-white transition">Datenschutz</a>
566
+ <a href="#" class="text-gray-400 hover:text-white transition">AGB</a>
567
+ </div>
568
+ </div>
569
+ </div>
570
+ </footer>
571
+
572
+ <script>
573
+ // Mobile menu toggle
574
+ document.querySelector('nav button').addEventListener('click', function() {
575
+ const menu = document.getElementById('mobileMenu');
576
+ menu.classList.toggle('hidden');
577
+ });
578
+
579
+ // Smooth scrolling for anchor links
580
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
581
+ anchor.addEventListener('click', function (e) {
582
+ e.preventDefault();
583
+
584
+ const targetId = this.getAttribute('href');
585
+ if (targetId === '#') return;
586
+
587
+ const targetElement = document.querySelector(targetId);
588
+ if (targetElement) {
589
+ targetElement.scrollIntoView({
590
+ behavior: 'smooth'
591
+ });
592
+
593
+ // Close mobile menu if open
594
+ const mobileMenu = document.getElementById('mobileMenu');
595
+ if (!mobileMenu.classList.contains('hidden')) {
596
+ mobileMenu.classList.add('hidden');
597
+ }
598
+ }
599
+ });
600
+ });
601
+ </script>
602
+ <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=CYRAGE/version-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
603
+ </html>