Hugging Face's logo

Spaces:
docto41
/
cyber-shield-elite
Running

App Files Community
docto41 commited on
Commit
69bc198
·
verified ·
1 Parent(s): 2aefa55

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +1136 -19
  3. prompts.txt +2 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Cyber Shield Elite
3
- emoji: 📉
4
- colorFrom: green
5
- colorTo: blue
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: cyber-shield-elite
3
+ emoji: 🐳
4
+ colorFrom: purple
5
+ colorTo: green
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,1136 @@
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="fr">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>CyberShield Elite - Protection Avancée</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 src="https://cdn.jsdelivr.net/npm/qrcode-generator@1.4.4/qrcode.min.js"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ background-color: #0f172a;
16
+ color: #f8fafc;
17
+ }
18
+
19
+ .gradient-bg {
20
+ background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
21
+ }
22
+
23
+ .scan-animation {
24
+ animation: scan 2s infinite;
25
+ }
26
+
27
+ @keyframes scan {
28
+ 0% { transform: translateY(-10px); opacity: 0.7; }
29
+ 50% { transform: translateY(10px); opacity: 1; }
30
+ 100% { transform: translateY(-10px); opacity: 0.7; }
31
+ }
32
+
33
+ .glow {
34
+ box-shadow: 0 0 15px rgba(59, 130, 246, 0.7);
35
+ }
36
+
37
+ .terminal {
38
+ background-color: #0a0e17;
39
+ border: 1px solid #1e40af;
40
+ border-radius: 0.5rem;
41
+ font-family: 'Courier New', monospace;
42
+ color: #4ade80;
43
+ }
44
+
45
+ .terminal-header {
46
+ background-color: #1e293b;
47
+ padding: 0.5rem 1rem;
48
+ border-top-left-radius: 0.5rem;
49
+ border-top-right-radius: 0.5rem;
50
+ display: flex;
51
+ align-items: center;
52
+ }
53
+
54
+ .terminal-dot {
55
+ width: 12px;
56
+ height: 12px;
57
+ border-radius: 50%;
58
+ margin-right: 6px;
59
+ }
60
+
61
+ .terminal-content {
62
+ padding: 1rem;
63
+ height: 200px;
64
+ overflow-y: auto;
65
+ }
66
+
67
+ .command-line {
68
+ display: flex;
69
+ align-items: center;
70
+ margin-top: 0.5rem;
71
+ }
72
+
73
+ .prompt {
74
+ color: #60a5fa;
75
+ margin-right: 0.5rem;
76
+ }
77
+
78
+ .blink {
79
+ animation: blink 1s step-end infinite;
80
+ }
81
+
82
+ @keyframes blink {
83
+ from, to { opacity: 1; }
84
+ 50% { opacity: 0; }
85
+ }
86
+
87
+ .qr-code-container {
88
+ background: white;
89
+ padding: 10px;
90
+ border-radius: 8px;
91
+ display: inline-block;
92
+ margin: 0 auto;
93
+ }
94
+
95
+ .feature-card:hover {
96
+ transform: translateY(-5px);
97
+ transition: all 0.3s ease;
98
+ }
99
+
100
+ .dashboard-item {
101
+ background: rgba(30, 64, 175, 0.2);
102
+ border-left: 3px solid #3b82f6;
103
+ }
104
+
105
+ .progress-bar {
106
+ height: 6px;
107
+ background: #1e293b;
108
+ border-radius: 3px;
109
+ overflow: hidden;
110
+ }
111
+
112
+ .progress-value {
113
+ height: 100%;
114
+ background: linear-gradient(90deg, #3b82f6, #6366f1);
115
+ border-radius: 3px;
116
+ }
117
+ </style>
118
+ </head>
119
+ <body>
120
+ <!-- Navigation -->
121
+ <nav class="gradient-bg py-4 px-6 shadow-lg sticky top-0 z-50">
122
+ <div class="container mx-auto flex justify-between items-center">
123
+ <div class="flex items-center space-x-2">
124
+ <i class="fas fa-shield-alt text-2xl text-blue-300"></i>
125
+ <span class="text-xl font-bold">CyberShield Elite</span>
126
+ </div>
127
+ <div class="hidden md:flex space-x-6">
128
+ <a href="#features" class="hover:text-blue-200 transition">Fonctionnalités</a>
129
+ <a href="#dashboard" class="hover:text-blue-200 transition">Tableau de bord</a>
130
+ <a href="#how-it-works" class="hover:text-blue-200 transition">Fonctionnement</a>
131
+ <a href="#pricing" class="hover:text-blue-200 transition">Tarifs</a>
132
+ <a href="#testimonials" class="hover:text-blue-200 transition">Témoignages</a>
133
+ <a href="#contact" class="hover:text-blue-200 transition">Contact</a>
134
+ </div>
135
+ <div class="hidden md:flex items-center space-x-4">
136
+ <a href="#" class="text-blue-200 hover:text-white"><i class="fas fa-user-circle text-xl"></i></a>
137
+ <a href="#" class="text-blue-200 hover:text-white"><i class="fas fa-cog text-xl"></i></a>
138
+ </div>
139
+ <button class="md:hidden text-xl">
140
+ <i class="fas fa-bars"></i>
141
+ </button>
142
+ </div>
143
+ </nav>
144
+
145
+ <!-- Hero Section -->
146
+ <section class="gradient-bg py-20 px-6">
147
+ <div class="container mx-auto flex flex-col md:flex-row items-center">
148
+ <div class="md:w-1/2 mb-10 md:mb-0">
149
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Protection Avancée Contre les Cybermenaces</h1>
150
+ <p class="text-xl mb-8 text-blue-100">Détection en temps réel des vulnérabilités et protection proactive contre les attaques avec notre intelligence artificielle de pointe.</p>
151
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
152
+ <button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-6 rounded-lg transition flex items-center justify-center">
153
+ <i class="fas fa-shield-virus mr-2"></i> Essai Gratuit
154
+ </button>
155
+ <button class="bg-transparent border-2 border-blue-400 hover:bg-blue-900/30 text-blue-100 font-bold py-3 px-6 rounded-lg transition flex items-center justify-center">
156
+ <i class="fas fa-play-circle mr-2"></i> Voir la démo
157
+ </button>
158
+ </div>
159
+ <div class="mt-8 flex items-center space-x-4">
160
+ <div class="flex -space-x-2">
161
+ <img class="w-10 h-10 rounded-full border-2 border-blue-900" src="https://randomuser.me/api/portraits/women/12.jpg" alt="User">
162
+ <img class="w-10 h-10 rounded-full border-2 border-blue-900" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User">
163
+ <img class="w-10 h-10 rounded-full border-2 border-blue-900" src="https://randomuser.me/api/portraits/women/45.jpg" alt="User">
164
+ </div>
165
+ <div>
166
+ <p class="text-sm text-blue-200">Rejoint par plus de <span class="font-bold">10,000+</span> utilisateurs</p>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <div class="md:w-1/2 flex justify-center">
171
+ <div class="relative">
172
+ <div class="w-64 h-64 md:w-80 md:h-80 bg-blue-900/30 rounded-full flex items-center justify-center glow scan-animation">
173
+ <div class="w-48 h-48 md:w-60 md:h-60 bg-blue-800/40 rounded-full flex items-center justify-center">
174
+ <div class="w-32 h-32 md:w-40 md:h-40 bg-blue-700/50 rounded-full flex items-center justify-center">
175
+ <i class="fas fa-shield-alt text-5xl md:text-6xl text-blue-300"></i>
176
+ </div>
177
+ </div>
178
+ </div>
179
+ <div class="absolute -bottom-6 -right-6 bg-blue-900/80 backdrop-blur-sm p-4 rounded-lg shadow-lg w-48">
180
+ <div class="flex items-center mb-2">
181
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
182
+ <span class="text-sm">Système actif</span>
183
+ </div>
184
+ <div class="text-xs">
185
+ <p>Scan en cours...</p>
186
+ <p>0 menaces détectées</p>
187
+ </div>
188
+ </div>
189
+ <div class="absolute -bottom-6 left-0 bg-slate-900 p-3 rounded-lg shadow-lg">
190
+ <div id="qr-code" class="qr-code-container"></div>
191
+ <p class="text-xs text-center mt-2 text-white">Scan pour télécharger</p>
192
+ </div>
193
+ </div>
194
+ </div>
195
+ </div>
196
+ </section>
197
+
198
+ <!-- Dashboard Section -->
199
+ <section id="dashboard" class="py-16 px-6 bg-slate-900">
200
+ <div class="container mx-auto">
201
+ <h2 class="text-3xl font-bold text-center mb-12">Tableau de Bord de Sécurité</h2>
202
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
203
+ <div class="dashboard-item p-6 rounded-lg">
204
+ <div class="flex justify-between items-start mb-4">
205
+ <div>
206
+ <h3 class="text-xl font-bold mb-2">Protection en Temps Réel</h3>
207
+ <p class="text-sm text-slate-400">Activité réseau surveillée</p>
208
+ </div>
209
+ <div class="bg-blue-600/20 p-2 rounded-full">
210
+ <i class="fas fa-network-wired text-blue-400"></i>
211
+ </div>
212
+ </div>
213
+ <div class="progress-bar mt-4">
214
+ <div class="progress-value w-4/5"></div>
215
+ </div>
216
+ <div class="flex justify-between text-xs mt-2">
217
+ <span>Efficacité: 85%</span>
218
+ <span>24/7 actif</span>
219
+ </div>
220
+ </div>
221
+
222
+ <div class="dashboard-item p-6 rounded-lg">
223
+ <div class="flex justify-between items-start mb-4">
224
+ <div>
225
+ <h3 class="text-xl font-bold mb-2">Analyse des Vulnérabilités</h3>
226
+ <p class="text-sm text-slate-400">Dernière analyse: il y a 2h</p>
227
+ </div>
228
+ <div class="bg-green-600/20 p-2 rounded-full">
229
+ <i class="fas fa-shield-alt text-green-400"></i>
230
+ </div>
231
+ </div>
232
+ <div class="progress-bar mt-4">
233
+ <div class="progress-value w-3/4"></div>
234
+ </div>
235
+ <div class="flex justify-between text-xs mt-2">
236
+ <span>Sécurité: 92%</span>
237
+ <span>3 faibles détectées</span>
238
+ </div>
239
+ </div>
240
+
241
+ <div class="dashboard-item p-6 rounded-lg">
242
+ <div class="flex justify-between items-start mb-4">
243
+ <div>
244
+ <h3 class="text-xl font-bold mb-2">Performance du Système</h3>
245
+ <p class="text-sm text-slate-400">Impact minimal</p>
246
+ </div>
247
+ <div class="bg-purple-600/20 p-2 rounded-full">
248
+ <i class="fas fa-tachometer-alt text-purple-400"></i>
249
+ </div>
250
+ </div>
251
+ <div class="progress-bar mt-4">
252
+ <div class="progress-value w-9/10"></div>
253
+ </div>
254
+ <div class="flex justify-between text-xs mt-2">
255
+ <span>CPU: 2%</span>
256
+ <span>RAM: 156MB</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+
261
+ <div class="bg-slate-800 rounded-lg p-6">
262
+ <div class="flex flex-col md:flex-row justify-between items-center">
263
+ <div class="mb-4 md:mb-0">
264
+ <h3 class="text-xl font-bold">Statistiques de Sécurité</h3>
265
+ <p class="text-slate-400">Dernières 24 heures</p>
266
+ </div>
267
+ <div class="flex space-x-4">
268
+ <div class="text-center">
269
+ <div class="text-2xl font-bold text-blue-400">24</div>
270
+ <div class="text-xs text-slate-400">Tentatives bloquées</div>
271
+ </div>
272
+ <div class="text-center">
273
+ <div class="text-2xl font-bold text-green-400">0</div>
274
+ <div class="text-xs text-slate-400">Menaces</div>
275
+ </div>
276
+ <div class="text-center">
277
+ <div class="text-2xl font-bold text-yellow-400">3</div>
278
+ <div class="text-xs text-slate-400">Alertes</div>
279
+ </div>
280
+ </div>
281
+ </div>
282
+ <div class="mt-6 h-40 bg-slate-900 rounded flex items-center justify-center">
283
+ <p class="text-slate-500">Graphique des activités de sécurité</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+ </section>
288
+
289
+ <!-- Features Section -->
290
+ <section id="features" class="py-16 px-6 bg-slate-800">
291
+ <div class="container mx-auto">
292
+ <h2 class="text-3xl font-bold text-center mb-4">Nos Fonctionnalités Avancées</h2>
293
+ <p class="text-center text-slate-400 max-w-2xl mx-auto mb-12">Découvrez notre suite complète d'outils de cybersécurité conçus pour protéger votre vie numérique</p>
294
+
295
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
296
+ <!-- Feature 1 -->
297
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
298
+ <div class="text-blue-400 text-4xl mb-4">
299
+ <i class="fas fa-fingerprint"></i>
300
+ </div>
301
+ <h3 class="text-xl font-bold mb-2">Authentification Multi-Facteurs</h3>
302
+ <p class="text-slate-300">Protégez vos comptes avec une vérification en plusieurs étapes incluant biométrie et codes uniques.</p>
303
+ <div class="mt-4">
304
+ <span class="inline-block bg-blue-900/50 text-blue-400 text-xs px-2 py-1 rounded">Nouveau</span>
305
+ </div>
306
+ </div>
307
+
308
+ <!-- Feature 2 -->
309
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
310
+ <div class="text-purple-400 text-4xl mb-4">
311
+ <i class="fas fa-user-secret"></i>
312
+ </div>
313
+ <h3 class="text-xl font-bold mb-2">Protection Contre le Doxing</h3>
314
+ <p class="text-slate-300">Empêchez la collecte et la diffusion de vos informations personnelles en ligne.</p>
315
+ </div>
316
+
317
+ <!-- Feature 3 -->
318
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
319
+ <div class="text-green-400 text-4xl mb-4">
320
+ <i class="fas fa-mobile-alt"></i>
321
+ </div>
322
+ <h3 class="text-xl font-bold mb-2">Sécurité Mobile</h3>
323
+ <p class="text-slate-300">Protection complète pour vos appareils Android et iOS contre les applications malveillantes.</p>
324
+ </div>
325
+
326
+ <!-- Feature 4 -->
327
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
328
+ <div class="text-yellow-400 text-4xl mb-4">
329
+ <i class="fas fa-wifi"></i>
330
+ </div>
331
+ <h3 class="text-xl font-bold mb-2">VPN Sécurisé</h3>
332
+ <p class="text-slate-300">Chiffrement de toutes vos communications avec notre réseau privé virtuel haute vitesse.</p>
333
+ <div class="mt-4">
334
+ <span class="inline-block bg-yellow-900/50 text-yellow-400 text-xs px-2 py-1 rounded">Populaire</span>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Feature 5 -->
339
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
340
+ <div class="text-red-400 text-4xl mb-4">
341
+ <i class="fas fa-credit-card"></i>
342
+ </div>
343
+ <h3 class="text-xl font-bold mb-2">Protection Bancaire</h3>
344
+ <p class="text-slate-300">Navigation sécurisée pour vos transactions financières avec protection contre le phishing.</p>
345
+ </div>
346
+
347
+ <!-- Feature 6 -->
348
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
349
+ <div class="text-pink-400 text-4xl mb-4">
350
+ <i class="fas fa-child"></i>
351
+ </div>
352
+ <h3 class="text-xl font-bold mb-2">Contrôle Parental</h3>
353
+ <p class="text-slate-300">Filtrage de contenu et gestion du temps d'écran pour protéger vos enfants en ligne.</p>
354
+ </div>
355
+
356
+ <!-- Feature 7 -->
357
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
358
+ <div class="text-indigo-400 text-4xl mb-4">
359
+ <i class="fas fa-camera"></i>
360
+ </div>
361
+ <h3 class="text-xl font-bold mb-2">Protection Webcam</h3>
362
+ <p class="text-slate-300">Contrôle total de l'accès à votre webcam avec alerte en cas de tentative d'intrusion.</p>
363
+ </div>
364
+
365
+ <!-- Feature 8 -->
366
+ <div class="feature-card bg-slate-700 p-6 rounded-lg transition duration-300">
367
+ <div class="text-teal-400 text-4xl mb-4">
368
+ <i class="fas fa-cloud-upload-alt"></i>
369
+ </div>
370
+ <h3 class="text-xl font-bold mb-2">Sauvegarde Automatisée</h3>
371
+ <p class="text-slate-300">Stockage sécurisé de vos fichiers importants avec restauration à tout moment.</p>
372
+ </div>
373
+ </div>
374
+
375
+ <div class="mt-12 text-center">
376
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition flex items-center justify-center mx-auto">
377
+ <i class="fas fa-list-ul mr-2"></i> Voir toutes les fonctionnalités
378
+ </button>
379
+ </div>
380
+ </div>
381
+ </section>
382
+
383
+ <!-- How It Works Section -->
384
+ <section id="how-it-works" class="py-16 px-6 bg-slate-900">
385
+ <div class="container mx-auto">
386
+ <h2 class="text-3xl font-bold text-center mb-4">Comment CyberShield Elite Vous Protège</h2>
387
+ <p class="text-center text-slate-400 max-w-2xl mx-auto mb-12">Notre technologie avancée agit comme un bouclier invisible contre les cybermenaces</p>
388
+
389
+ <div class="flex flex-col lg:flex-row items-center">
390
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
391
+ <div class="terminal">
392
+ <div class="terminal-header">
393
+ <div class="terminal-dot bg-red-500"></div>
394
+ <div class="terminal-dot bg-yellow-500"></div>
395
+ <div class="terminal-dot bg-green-500"></div>
396
+ <span class="text-sm ml-2">cybershield-terminal</span>
397
+ </div>
398
+ <div class="terminal-content" id="terminal-output">
399
+ <p>> Initializing CyberShield Elite v3.2.1...</p>
400
+ <p>> Loading threat database... OK</p>
401
+ <p>> Starting real-time monitoring...</p>
402
+ <p>> Scanning network interfaces...</p>
403
+ <p>> [WARNING] Suspicious activity detected on port 443</p>
404
+ <p>> Analyzing threat pattern...</p>
405
+ <p>> Threat identified: Brute Force Attempt</p>
406
+ <p>> [ACTION] Blocking IP 192.168.1.105</p>
407
+ <p>> Threat neutralized successfully</p>
408
+ <p>> System secure</p>
409
+ <div class="command-line">
410
+ <span class="prompt">admin@cybershield:~$</span>
411
+ <span id="command" class="flex-1">scan --full-system</span>
412
+ <span class="blink">|</span>
413
+ </div>
414
+ </div>
415
+ </div>
416
+
417
+ <div class="mt-8 bg-slate-800 p-6 rounded-lg">
418
+ <h3 class="text-xl font-bold mb-4">Technologies Utilisées</h3>
419
+ <div class="flex flex-wrap gap-2">
420
+ <span class="bg-blue-900/50 text-blue-400 px-3 py-1 rounded-full text-sm">Machine Learning</span>
421
+ <span class="bg-purple-900/50 text-purple-400 px-3 py-1 rounded-full text-sm">Analyse Heuristique</span>
422
+ <span class="bg-green-900/50 text-green-400 px-3 py-1 rounded-full text-sm">Chiffrement AES-256</span>
423
+ <span class="bg-yellow-900/50 text-yellow-400 px-3 py-1 rounded-full text-sm">Sandboxing</span>
424
+ <span class="bg-red-900/50 text-red-400 px-3 py-1 rounded-full text-sm">Behavior Analysis</span>
425
+ </div>
426
+ </div>
427
+ </div>
428
+
429
+ <div class="lg:w-1/2">
430
+ <div class="mb-8">
431
+ <div class="flex items-start mb-4">
432
+ <div class="bg-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
433
+ <span class="text-white font-bold">1</span>
434
+ </div>
435
+ <div>
436
+ <h3 class="text-xl font-bold mb-2">Installation Instantanée</h3>
437
+ <p class="text-slate-300">Téléchargez et installez CyberShield Elite en quelques clics. Aucune configuration complexe nécessaire.</p>
438
+ </div>
439
+ </div>
440
+ </div>
441
+ <div class="mb-8">
442
+ <div class="flex items-start mb-4">
443
+ <div class="bg-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
444
+ <span class="text-white font-bold">2</span>
445
+ </div>
446
+ <div>
447
+ <h3 class="text-xl font-bold mb-2">Analyse Complète</h3>
448
+ <p class="text-slate-300">Notre système effectue une analyse approfondie de votre appareil pour identifier les vulnérabilités existantes.</p>
449
+ </div>
450
+ </div>
451
+ </div>
452
+ <div class="mb-8">
453
+ <div class="flex items-start mb-4">
454
+ <div class="bg-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
455
+ <span class="text-white font-bold">3</span>
456
+ </div>
457
+ <div>
458
+ <h3 class="text-xl font-bold mb-2">Protection Active</h3>
459
+ <p class="text-slate-300">CyberShield Elite fonctionne en arrière-plan, bloquant les menaces en temps réel sans ralentir votre système.</p>
460
+ </div>
461
+ </div>
462
+ </div>
463
+ <div class="mb-8">
464
+ <div class="flex items-start mb-4">
465
+ <div class="bg-blue-600 rounded-full w-8 h-8 flex items-center justify-center mr-4 flex-shrink-0">
466
+ <span class="text-white font-bold">4</span>
467
+ </div>
468
+ <div>
469
+ <h3 class="text-xl font-bold mb-2">Rapports Détaillés</h3>
470
+ <p class="text-slate-300">Recevez des rapports clairs sur les menaces détectées et les actions entreprises pour protéger votre système.</p>
471
+ </div>
472
+ </div>
473
+ </div>
474
+
475
+ <div class="bg-slate-800 p-6 rounded-lg">
476
+ <h3 class="text-xl font-bold mb-4">Compatibilité</h3>
477
+ <div class="flex flex-wrap items-center gap-4">
478
+ <div class="flex items-center">
479
+ <i class="fab fa-windows text-blue-400 text-2xl mr-2"></i>
480
+ <span>Windows</span>
481
+ </div>
482
+ <div class="flex items-center">
483
+ <i class="fab fa-apple text-gray-400 text-2xl mr-2"></i>
484
+ <span>macOS</span>
485
+ </div>
486
+ <div class="flex items-center">
487
+ <i class="fab fa-linux text-yellow-400 text-2xl mr-2"></i>
488
+ <span>Linux</span>
489
+ </div>
490
+ <div class="flex items-center">
491
+ <i class="fab fa-android text-green-400 text-2xl mr-2"></i>
492
+ <span>Android</span>
493
+ </div>
494
+ <div class="flex items-center">
495
+ <i class="fab fa-app-store-ios text-blue-300 text-2xl mr-2"></i>
496
+ <span>iOS</span>
497
+ </div>
498
+ </div>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </section>
504
+
505
+ <!-- Pricing Section -->
506
+ <section id="pricing" class="py-16 px-6 bg-slate-800">
507
+ <div class="container mx-auto">
508
+ <h2 class="text-3xl font-bold text-center mb-4">Choisissez Votre Protection</h2>
509
+ <p class="text-center text-slate-400 max-w-2xl mx-auto mb-12">Sélectionnez le plan qui correspond à vos besoins de sécurité</p>
510
+
511
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
512
+ <!-- Basic Plan -->
513
+ <div class="bg-slate-700 rounded-lg p-8 hover:glow transition">
514
+ <div class="text-center mb-6">
515
+ <h3 class="text-xl font-bold mb-2">Basique</h3>
516
+ <p class="text-slate-300 mb-4">Pour une protection essentielle</p>
517
+ <div class="text-4xl font-bold mb-4">9,99€<span class="text-sm font-normal">/mois</span></div>
518
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition">
519
+ Commencer
520
+ </button>
521
+ </div>
522
+ <ul class="space-y-3 mb-6">
523
+ <li class="flex items-center">
524
+ <i class="fas fa-check text-green-500 mr-2"></i>
525
+ <span>Protection antivirus</span>
526
+ </li>
527
+ <li class="flex items-center">
528
+ <i class="fas fa-check text-green-500 mr-2"></i>
529
+ <span>Analyse hebdomadaire</span>
530
+ </li>
531
+ <li class="flex items-center text-slate-500">
532
+ <i class="fas fa-times text-red-500 mr-2"></i>
533
+ <span>Protection en temps réel</span>
534
+ </li>
535
+ <li class="flex items-center text-slate-500">
536
+ <i class="fas fa-times text-red-500 mr-2"></i>
537
+ <span>VPN inclus</span>
538
+ </li>
539
+ <li class="flex items-center text-slate-500">
540
+ <i class="fas fa-times text-red-500 mr-2"></i>
541
+ <span>Support prioritaire</span>
542
+ </li>
543
+ </ul>
544
+ <div class="text-center">
545
+ <a href="#" class="text-blue-400 text-sm hover:underline">Comparer les plans</a>
546
+ </div>
547
+ </div>
548
+
549
+ <!-- Pro Plan (Featured) -->
550
+ <div class="bg-blue-900/30 border-2 border-blue-500 rounded-lg p-8 transform scale-105 hover:glow transition relative">
551
+ <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-lg">
552
+ POPULAIRE
553
+ </div>
554
+ <div class="text-center mb-6">
555
+ <h3 class="text-xl font-bold mb-2">Professionnel</h3>
556
+ <p class="text-blue-100 mb-4">Pour une sécurité complète</p>
557
+ <div class="text-4xl font-bold mb-4">19,99€<span class="text-sm font-normal">/mois</span></div>
558
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded transition">
559
+ Commencer
560
+ </button>
561
+ </div>
562
+ <ul class="space-y-3 mb-6">
563
+ <li class="flex items-center">
564
+ <i class="fas fa-check text-green-400 mr-2"></i>
565
+ <span>Toutes les fonctionnalités Basique</span>
566
+ </li>
567
+ <li class="flex items-center">
568
+ <i class="fas fa-check text-green-400 mr-2"></i>
569
+ <span>Protection en temps réel</span>
570
+ </li>
571
+ <li class="flex items-center">
572
+ <i class="fas fa-check text-green-400 mr-2"></i>
573
+ <span>VPN sécurisé</span>
574
+ </li>
575
+ <li class="flex items-center">
576
+ <i class="fas fa-check text-green-400 mr-2"></i>
577
+ <span>Analyse quotidienne</span>
578
+ </li>
579
+ <li class="flex items-center">
580
+ <i class="fas fa-check text-green-400 mr-2"></i>
581
+ <span>Support 24/7</span>
582
+ </li>
583
+ </ul>
584
+ <div class="text-center">
585
+ <a href="#" class="text-blue-300 text-sm hover:underline">Comparer les plans</a>
586
+ </div>
587
+ </div>
588
+
589
+ <!-- Enterprise Plan -->
590
+ <div class="bg-slate-700 rounded-lg p-8 hover:glow transition">
591
+ <div class="text-center mb-6">
592
+ <h3 class="text-xl font-bold mb-2">Entreprise</h3>
593
+ <p class="text-slate-300 mb-4">Pour les besoins professionnels</p>
594
+ <div class="text-4xl font-bold mb-4">49,99€<span class="text-sm font-normal">/mois</span></div>
595
+ <button class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded transition">
596
+ Commencer
597
+ </button>
598
+ </div>
599
+ <ul class="space-y-3 mb-6">
600
+ <li class="flex items-center">
601
+ <i class="fas fa-check text-green-500 mr-2"></i>
602
+ <span>Toutes les fonctionnalités Pro</span>
603
+ </li>
604
+ <li class="flex items-center">
605
+ <i class="fas fa-check text-green-500 mr-2"></i>
606
+ <span>Protection multi-appareils</span>
607
+ </li>
608
+ <li class="flex items-center">
609
+ <i class="fas fa-check text-green-500 mr-2"></i>
610
+ <span>Gestion centralisée</span>
611
+ </li>
612
+ <li class="flex items-center">
613
+ <i class="fas fa-check text-green-500 mr-2"></i>
614
+ <span>Support dédié</span>
615
+ </li>
616
+ <li class="flex items-center">
617
+ <i class="fas fa-check text-green-500 mr-2"></i>
618
+ <span>Analyse continue</span>
619
+ </li>
620
+ </ul>
621
+ <div class="text-center">
622
+ <a href="#" class="text-blue-400 text-sm hover:underline">Comparer les plans</a>
623
+ </div>
624
+ </div>
625
+ </div>
626
+
627
+ <div class="mt-12 bg-slate-700 rounded-lg p-8 max-w-4xl mx-auto">
628
+ <h3 class="text-xl font-bold text-center mb-6">Besoin d'une solution personnalisée ?</h3>
629
+ <p class="text-center text-slate-300 mb-6">Nos experts peuvent créer un plan sur mesure pour répondre à vos besoins spécifiques en matière de sécurité.</p>
630
+ <div class="text-center">
631
+ <button class="bg-transparent border-2 border-blue-500 hover:bg-blue-900/30 text-blue-400 font-bold py-3 px-8 rounded-lg transition">
632
+ <i class="fas fa-headset mr-2"></i> Contactez nos experts
633
+ </button>
634
+ </div>
635
+ </div>
636
+ </div>
637
+ </section>
638
+
639
+ <!-- Testimonials Section -->
640
+ <section id="testimonials" class="py-16 px-6 bg-slate-900">
641
+ <div class="container mx-auto">
642
+ <h2 class="text-3xl font-bold text-center mb-4">Ce Que Nos Clients Disent</h2>
643
+ <p class="text-center text-slate-400 max-w-2xl mx-auto mb-12">Découvrez comment CyberShield Elite a transformé la sécurité numérique de nos clients</p>
644
+
645
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
646
+ <!-- Testimonial 1 -->
647
+ <div class="bg-slate-800 p-6 rounded-lg hover:glow transition">
648
+ <div class="flex items-center mb-4">
649
+ <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Jean Dupont">
650
+ <div>
651
+ <h4 class="font-bold">Jean Dupont</h4>
652
+ <p class="text-sm text-slate-400">PDG, TechSolutions</p>
653
+ </div>
654
+ </div>
655
+ <p class="text-slate-300 mb-4">"CyberShield Elite a protégé notre entreprise contre plusieurs tentatives de phishing sophistiquées. Leur système de détection est vraiment impressionnant."</p>
656
+ <div class="flex items-center">
657
+ <div class="flex text-yellow-400 mr-2">
658
+ <i class="fas fa-star"></i>
659
+ <i class="fas fa-star"></i>
660
+ <i class="fas fa-star"></i>
661
+ <i class="fas fa-star"></i>
662
+ <i class="fas fa-star"></i>
663
+ </div>
664
+ <span class="text-sm text-slate-400">2 semaines ago</span>
665
+ </div>
666
+ </div>
667
+
668
+ <!-- Testimonial 2 -->
669
+ <div class="bg-slate-800 p-6 rounded-lg hover:glow transition">
670
+ <div class="flex items-center mb-4">
671
+ <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sophie Martin">
672
+ <div>
673
+ <h4 class="font-bold">Sophie Martin</h4>
674
+ <p class="text-sm text-slate-400">Responsable IT, Financia</p>
675
+ </div>
676
+ </div>
677
+ <p class="text-slate-300 mb-4">"La tranquillité d'esprit que procure CyberShield Elite est inestimable. Nous avons réduit nos incidents de sécurité de 95% depuis son implémentation."</p>
678
+ <div class="flex items-center">
679
+ <div class="flex text-yellow-400 mr-2">
680
+ <i class="fas fa-star"></i>
681
+ <i class="fas fa-star"></i>
682
+ <i class="fas fa-star"></i>
683
+ <i class="fas fa-star"></i>
684
+ <i class="fas fa-star"></i>
685
+ </div>
686
+ <span class="text-sm text-slate-400">1 mois ago</span>
687
+ </div>
688
+ </div>
689
+
690
+ <!-- Testimonial 3 -->
691
+ <div class="bg-slate-800 p-6 rounded-lg hover:glow transition">
692
+ <div class="flex items-center mb-4">
693
+ <img class="w-12 h-12 rounded-full object-cover mr-4" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Thomas Leroy">
694
+ <div>
695
+ <h4 class="font-bold">Thomas Leroy</h4>
696
+ <p class="text-sm text-slate-400">Freelance Développeur</p>
697
+ </div>
698
+ </div>
699
+ <p class="text-slate-300 mb-4">"En tant que freelance, je ne peux pas me permettre une faille de sécurité. CyberShield Elite protège mes projets clients sans affecter les performances."</p>
700
+ <div class="flex items-center">
701
+ <div class="flex text-yellow-400 mr-2">
702
+ <i class="fas fa-star"></i>
703
+ <i class="fas fa-star"></i>
704
+ <i class="fas fa-star"></i>
705
+ <i class="fas fa-star"></i>
706
+ <i class="fas fa-star-half-alt"></i>
707
+ </div>
708
+ <span class="text-sm text-slate-400">3 semaines ago</span>
709
+ </div>
710
+ </div>
711
+ </div>
712
+
713
+ <div class="mt-12 text-center">
714
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition inline-flex items-center">
715
+ <i class="fas fa-comment-alt mr-2"></i> Lire tous les témoignages
716
+ </button>
717
+ </div>
718
+ </div>
719
+ </section>
720
+
721
+ <!-- FAQ Section -->
722
+ <section class="py-16 px-6 bg-slate-800">
723
+ <div class="container mx-auto max-w-4xl">
724
+ <h2 class="text-3xl font-bold text-center mb-12">Questions Fréquentes</h2>
725
+
726
+ <div class="space-y-4">
727
+ <!-- FAQ Item 1 -->
728
+ <div class="bg-slate-700 rounded-lg overflow-hidden">
729
+ <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
730
+ <span class="font-medium">Comment CyberShield Elite se compare-t-il aux autres solutions de sécurité ?</span>
731
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
732
+ </button>
733
+ <div class="faq-content hidden px-6 pb-6 pt-0">
734
+ <p class="text-slate-300">CyberShield Elite utilise une combinaison unique de machine learning et d'analyse comportementale pour détecter les menaces que les solutions traditionnelles pourraient manquer. Notre taux de détection est de 99,9% avec un taux de faux positifs inférieur à 0,1%.</p>
735
+ </div>
736
+ </div>
737
+
738
+ <!-- FAQ Item 2 -->
739
+ <div class="bg-slate-700 rounded-lg overflow-hidden">
740
+ <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
741
+ <span class="font-medium">Est-ce que CyberShield Elite ralentit mon ordinateur ?</span>
742
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
743
+ </button>
744
+ <div class="faq-content hidden px-6 pb-6 pt-0">
745
+ <p class="text-slate-300">Notre solution est optimisée pour avoir un impact minimal sur les performances. En moyenne, CyberShield Elite utilise moins de 2% de CPU et environ 150MB de RAM, ce qui est bien en dessous des solutions concurrentes.</p>
746
+ </div>
747
+ </div>
748
+
749
+ <!-- FAQ Item 3 -->
750
+ <div class="bg-slate-700 rounded-lg overflow-hidden">
751
+ <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
752
+ <span class="font-medium">Puis-je essayer CyberShield Elite avant d'acheter ?</span>
753
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
754
+ </button>
755
+ <div class="faq-content hidden px-6 pb-6 pt-0">
756
+ <p class="text-slate-300">Absolument ! Nous offrons une période d'essai de 30 jours avec toutes les fonctionnalités incluses. Aucune carte de crédit n'est requise pour commencer l'essai.</p>
757
+ </div>
758
+ </div>
759
+
760
+ <!-- FAQ Item 4 -->
761
+ <div class="bg-slate-700 rounded-lg overflow-hidden">
762
+ <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
763
+ <span class="font-medium">Comment fonctionne la protection contre les ransomwares ?</span>
764
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
765
+ </button>
766
+ <div class="faq-content hidden px-6 pb-6 pt-0">
767
+ <p class="text-slate-300">Notre système surveille en permanence les comportements suspects comme le chiffrement massif de fichiers. Si une activité de ransomware est détectée, CyberShield Elite bloque immédiatement le processus malveillant et restaure les fichiers affectés à partir de nos sauvegardes sécurisées.</p>
768
+ </div>
769
+ </div>
770
+
771
+ <!-- FAQ Item 5 -->
772
+ <div class="bg-slate-700 rounded-lg overflow-hidden">
773
+ <button class="faq-toggle w-full text-left p-6 flex justify-between items-center">
774
+ <span class="font-medium">Quel type de support technique est inclus ?</span>
775
+ <i class="fas fa-chevron-down transition-transform duration-300"></i>
776
+ </button>
777
+ <div class="faq-content hidden px-6 pb-6 pt-0">
778
+ <p class="text-slate-300">Tous nos plans incluent un support par email 24/7. Les plans Professionnel et Entreprise bénéficient en plus d'un support chat et téléphonique avec nos experts en cybersécurité.</p>
779
+ </div>
780
+ </div>
781
+ </div>
782
+
783
+ <div class="mt-12 text-center">
784
+ <p class="text-slate-400 mb-4">Vous avez d'autres questions ?</p>
785
+ <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-8 rounded-lg transition inline-flex items-center">
786
+ <i class="fas fa-question-circle mr-2"></i> Contactez notre support
787
+ </button>
788
+ </div>
789
+ </div>
790
+ </section>
791
+
792
+ <!-- CTA Section -->
793
+ <section class="gradient-bg py-16 px-6">
794
+ <div class="container mx-auto text-center">
795
+ <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à Sécuriser Votre Monde Numérique ?</h2>
796
+ <p class="text-xl mb-8 max-w-2xl mx-auto text-blue-100">Rejoignez des milliers d'utilisateurs satisfaits protégés par CyberShield Elite.</p>
797
+
798
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4 mb-12">
799
+ <button class="bg-white hover:bg-gray-100 text-blue-800 font-bold py-3 px-8 rounded-lg transition flex items-center justify-center">
800
+ <i class="fas fa-download mr-2"></i> Télécharger Maintenant
801
+ </button>
802
+ <button class="bg-transparent border-2 border-white hover:bg-white/10 text-white font-bold py-3 px-8 rounded-lg transition flex items-center justify-center">
803
+ <i class="fas fa-comment-dots mr-2"></i> Parler à un Expert
804
+ </button>
805
+ </div>
806
+
807
+ <div class="flex flex-col md:flex-row justify-center items-center space-y-4 md:space-y-0 md:space-x-12">
808
+ <div class="flex items-center">
809
+ <i class="fas fa-shield-alt text-2xl text-blue-300 mr-3"></i>
810
+ <span class="text-sm">Garantie 30 jours satisfait ou remboursé</span>
811
+ </div>
812
+ <div class="flex items-center">
813
+ <i class="fas fa-lock text-2xl text-blue-300 mr-3"></i>
814
+ <span class="text-sm">Paiement 100% sécurisé</span>
815
+ </div>
816
+ <div class="flex items-center">
817
+ <i class="fas fa-headset text-2xl text-blue-300 mr-3"></i>
818
+ <span class="text-sm">Support 24/7</span>
819
+ </div>
820
+ </div>
821
+ </div>
822
+ </section>
823
+
824
+ <!-- Contact Section -->
825
+ <section id="contact" class="py-16 px-6 bg-slate-900">
826
+ <div class="container mx-auto">
827
+ <h2 class="text-3xl font-bold text-center mb-12">Contactez Notre Équipe</h2>
828
+
829
+ <div class="flex flex-col lg:flex-row">
830
+ <div class="lg:w-1/2 mb-10 lg:mb-0 lg:pr-10">
831
+ <h3 class="text-xl font-bold mb-6">Informations de Contact</h3>
832
+
833
+ <div class="space-y-6">
834
+ <div class="flex items-start">
835
+ <div class="text-blue-400 text-xl mr-4 mt-1">
836
+ <i class="fas fa-map-marker-alt"></i>
837
+ </div>
838
+ <div>
839
+ <h4 class="font-bold mb-1">Adresse</h4>
840
+ <p class="text-slate-400">12 Rue de la Sécurité, 75015 Paris, France</p>
841
+ </div>
842
+ </div>
843
+
844
+ <div class="flex items-start">
845
+ <div class="text-blue-400 text-xl mr-4 mt-1">
846
+ <i class="fas fa-phone-alt"></i>
847
+ </div>
848
+ <div>
849
+ <h4 class="font-bold mb-1">Téléphone</h4>
850
+ <p class="text-slate-400">+33 1 23 45 67 89</p>
851
+ <p class="text-xs text-slate-500 mt-1">Lundi-Vendredi: 9h-18h</p>
852
+ </div>
853
+ </div>
854
+
855
+ <div class="flex items-start">
856
+ <div class="text-blue-400 text-xl mr-4 mt-1">
857
+ <i class="fas fa-envelope"></i>
858
+ </div>
859
+ <div>
860
+ <h4 class="font-bold mb-1">Email</h4>
861
+ <p class="text-slate-400">support@cybershieldelite.com</p>
862
+ <p class="text-xs text-slate-500 mt-1">Réponse sous 24h</p>
863
+ </div>
864
+ </div>
865
+
866
+ <div class="flex items-start">
867
+ <div class="text-blue-400 text-xl mr-4 mt-1">
868
+ <i class="fas fa-comments"></i>
869
+ </div>
870
+ <div>
871
+ <h4 class="font-bold mb-1">Chat en Direct</h4>
872
+ <p class="text-slate-400">Disponible 24/7 pour les clients</p>
873
+ <button class="text-blue-400 text-sm hover:underline mt-1">Ouvrir le chat</button>
874
+ </div>
875
+ </div>
876
+ </div>
877
+
878
+ <div class="mt-10">
879
+ <h3 class="text-xl font-bold mb-4">Suivez-Nous</h3>
880
+ <div class="flex space-x-4">
881
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition">
882
+ <i class="fab fa-twitter"></i>
883
+ </a>
884
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition">
885
+ <i class="fab fa-linkedin-in"></i>
886
+ </a>
887
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition">
888
+ <i class="fab fa-facebook-f"></i>
889
+ </a>
890
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition">
891
+ <i class="fab fa-instagram"></i>
892
+ </a>
893
+ <a href="#" class="w-10 h-10 rounded-full bg-slate-800 flex items-center justify-center hover:bg-blue-600 transition">
894
+ <i class="fab fa-youtube"></i>
895
+ </a>
896
+ </div>
897
+ </div>
898
+
899
+ <div class="mt-10 bg-slate-800 p-6 rounded-lg">
900
+ <h3 class="text-xl font-bold mb-4">Documentation</h3>
901
+ <ul class="space-y-3">
902
+ <li>
903
+ <a href="#" class="text-blue-400 hover:underline flex items-center">
904
+ <i class="fas fa-file-pdf mr-2"></i> Guide d'installation
905
+ </a>
906
+ </li>
907
+ <li>
908
+ <a href="#" class="text-blue-400 hover:underline flex items-center">
909
+ <i class="fas fa-book mr-2"></i> Manuel utilisateur
910
+ </a>
911
+ </li>
912
+ <li>
913
+ <a href="#" class="text-blue-400 hover:underline flex items-center">
914
+ <i class="fas fa-shield-alt mr-2"></i> Bonnes pratiques de sécurité
915
+ </a>
916
+ </li>
917
+ </ul>
918
+ </div>
919
+ </div>
920
+
921
+ <div class="lg:w-1/2">
922
+ <form class="bg-slate-800 p-8 rounded-lg">
923
+ <h3 class="text-xl font-bold mb-6">Envoyez-nous un Message</h3>
924
+
925
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
926
+ <div>
927
+ <label for="name" class="block text-sm font-medium mb-2">Nom Complet *</label>
928
+ <input type="text" id="name" required class="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
929
+ </div>
930
+ <div>
931
+ <label for="email" class="block text-sm font-medium mb-2">Email *</label>
932
+ <input type="email" id="email" required class="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
933
+ </div>
934
+ </div>
935
+
936
+ <div class="mb-6">
937
+ <label for="subject" class="block text-sm font-medium mb-2">Sujet *</label>
938
+ <select id="subject" class="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
939
+ <option value="">Sélectionnez un sujet</option>
940
+ <option>Support technique</option>
941
+ <option>Question sur les produits</option>
942
+ <option>Demande de partenariat</option>
943
+ <option>Presse et médias</option>
944
+ <option>Autre</option>
945
+ </select>
946
+ </div>
947
+
948
+ <div class="mb-6">
949
+ <label for="message" class="block text-sm font-medium mb-2">Message *</label>
950
+ <textarea id="message" rows="5" required class="w-full px-4 py-2 bg-slate-700 border border-slate-600 rounded focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea>
951
+ </div>
952
+
953
+ <div class="mb-6">
954
+ <label class="flex items-center">
955
+ <input type="checkbox" class="form-checkbox bg-slate-700 border-slate-600 rounded text-blue-500 focus:ring-blue-500">
956
+ <span class="ml-2 text-sm">Je souhaite recevoir des newsletters et des offres spéciales</span>
957
+ </label>
958
+ </div>
959
+
960
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded transition flex items-center justify-center">
961
+ <i class="fas fa-paper-plane mr-2"></i> Envoyer le Message
962
+ </button>
963
+ </form>
964
+
965
+ <div class="mt-8 bg-slate-800 p-6 rounded-lg">
966
+ <h3 class="text-xl font-bold mb-4">Urgence de Sécurité</h3>
967
+ <p class="text-slate-300 mb-4">Si vous pensez être victime d'une cyberattaque en cours, contactez immédiatement notre équipe d'intervention.</p>
968
+ <button class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-4 rounded transition flex items-center justify-center">
969
+ <i class="fas fa-exclamation-triangle mr-2"></i> Urgence Sécurité
970
+ </button>
971
+ </div>
972
+ </div>
973
+ </div>
974
+ </div>
975
+ </section>
976
+
977
+ <!-- Footer -->
978
+ <footer class="bg-slate-950 py-12 px-6">
979
+ <div class="container mx-auto">
980
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
981
+ <div>
982
+ <div class="flex items-center space-x-2 mb-4">
983
+ <i class="fas fa-shield-alt text-2xl text-blue-400"></i>
984
+ <span class="text-xl font-bold">CyberShield Elite</span>
985
+ </div>
986
+ <p class="text-slate-400 mb-4">La solution de cybersécurité la plus avancée pour protéger votre vie numérique.</p>
987
+ <div class="flex space-x-4">
988
+ <a href="#" class="text-blue-400 hover:text-blue-300"><i class="fab fa-apple"></i></a>
989
+ <a href="#" class="text-blue-400 hover:text-blue-300"><i class="fab fa-windows"></i></a>
990
+ <a href="#" class="text-blue-400 hover:text-blue-300"><i class="fab fa-android"></i></a>
991
+ <a href="#" class="text-blue-400 hover:text-blue-300"><i class="fab fa-linux"></i></a>
992
+ </div>
993
+ </div>
994
+
995
+ <div>
996
+ <h4 class="text-lg font-bold mb-4">Produit</h4>
997
+ <ul class="space-y-2">
998
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Fonctionnalités</a></li>
999
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Tarifs</a></li>
1000
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Téléchargement</a></li>
1001
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Essai gratuit</a></li>
1002
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Mises à jour</a></li>
1003
+ </ul>
1004
+ </div>
1005
+
1006
+ <div>
1007
+ <h4 class="text-lg font-bold mb-4">Ressources</h4>
1008
+ <ul class="space-y-2">
1009
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Blog</a></li>
1010
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Documentation</a></li>
1011
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">FAQ</a></li>
1012
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Centre d'aide</a></li>
1013
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Statut du service</a></li>
1014
+ </ul>
1015
+ </div>
1016
+
1017
+ <div>
1018
+ <h4 class="text-lg font-bold mb-4">Entreprise</h4>
1019
+ <ul class="space-y-2">
1020
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">À propos</a></li>
1021
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Carrières</a></li>
1022
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Presse</a></li>
1023
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Partenaires</a></li>
1024
+ <li><a href="#" class="text-slate-400 hover:text-blue-400">Contact</a></li>
1025
+ </ul>
1026
+ </div>
1027
+ </div>
1028
+
1029
+ <div class="pt-8 border-t border-slate-800">
1030
+ <div class="flex flex-col md:flex-row justify-between items-center">
1031
+ <div class="mb-4 md:mb-0 text-sm text-slate-500">
1032
+ &copy; 2023 CyberShield Elite. Tous droits réservés.
1033
+ </div>
1034
+ <div class="flex flex-wrap justify-center space-x-6">
1035
+ <a href="#" class="text-slate-500 hover:text-blue-400 text-sm">Mentions Légales</a>
1036
+ <a href="#" class="text-slate-500 hover:text-blue-400 text-sm">Politique de Confidentialité</a>
1037
+ <a href="#" class="text-slate-500 hover:text-blue-400 text-sm">CGU</a>
1038
+ <a href="#" class="text-slate-500 hover:text-blue-400 text-sm">Cookies</a>
1039
+ <a href="#" class="text-slate-500 hover:text-blue-400 text-sm">RGPD</a>
1040
+ </div>
1041
+ </div>
1042
+ </div>
1043
+ </div>
1044
+ </footer>
1045
+
1046
+ <script>
1047
+ // Generate QR Code
1048
+ document.addEventListener('DOMContentLoaded', function() {
1049
+ const qr = qrcode(0, 'L');
1050
+ qr.addData('https://cybershieldelite.com/download');
1051
+ qr.make();
1052
+ document.getElementById('qr-code').innerHTML = qr.createImgTag(4);
1053
+
1054
+ // Terminal animation
1055
+ const terminal = document.getElementById('terminal-output');
1056
+ const command = document.getElementById('command');
1057
+
1058
+ const commands = [
1059
+ 'scan --full-system',
1060
+ 'analyze --threat=BruteForce',
1061
+ 'protect --ip=192.168.1.105',
1062
+ 'update --threat-database',
1063
+ 'status --security',
1064
+ 'vpn --connect --location=france',
1065
+ 'firewall --enable --level=high'
1066
+ ];
1067
+
1068
+ let currentCommand = 0;
1069
+
1070
+ function changeCommand() {
1071
+ command.textContent = commands[currentCommand];
1072
+ currentCommand = (currentCommand + 1) % commands.length;
1073
+
1074
+ // Auto-scroll terminal
1075
+ terminal.scrollTop = terminal.scrollHeight;
1076
+ }
1077
+
1078
+ setInterval(changeCommand, 3000);
1079
+
1080
+ // FAQ toggle functionality
1081
+ const faqToggles = document.querySelectorAll('.faq-toggle');
1082
+ faqToggles.forEach(toggle => {
1083
+ toggle.addEventListener('click', function() {
1084
+ const content = this.nextElementSibling;
1085
+ const icon = this.querySelector('i');
1086
+
1087
+ content.classList.toggle('hidden');
1088
+ icon.classList.toggle('transform');
1089
+ icon.classList.toggle('rotate-180');
1090
+ });
1091
+ });
1092
+
1093
+ // Mobile menu toggle
1094
+ document.querySelector('button.md\\:hidden').addEventListener('click', function() {
1095
+ const menu = document.querySelector('.hidden.md\\:flex');
1096
+ menu.classList.toggle('hidden');
1097
+ menu.classList.toggle('flex');
1098
+ menu.classList.toggle('flex-col');
1099
+ menu.classList.toggle('absolute');
1100
+ menu.classList.toggle('top-16');
1101
+ menu.classList.toggle('right-6');
1102
+ menu.classList.toggle('bg-slate-900');
1103
+ menu.classList.toggle('p-4');
1104
+ menu.classList.toggle('rounded-lg');
1105
+ menu.classList.toggle('shadow-xl');
1106
+ menu.classList.toggle('space-y-4');
1107
+ menu.classList.toggle('space-x-0');
1108
+ });
1109
+
1110
+ // Smooth scrolling for anchor links
1111
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1112
+ anchor.addEventListener('click', function(e) {
1113
+ e.preventDefault();
1114
+
1115
+ const targetId = this.getAttribute('href');
1116
+ if (targetId === '#') return;
1117
+
1118
+ const targetElement = document.querySelector(targetId);
1119
+ if (targetElement) {
1120
+ targetElement.scrollIntoView({
1121
+ behavior: 'smooth'
1122
+ });
1123
+
1124
+ // Close mobile menu if open
1125
+ const mobileMenu = document.querySelector('.hidden.md\\:flex');
1126
+ if (!mobileMenu.classList.contains('hidden')) {
1127
+ mobileMenu.classList.add('hidden');
1128
+ mobileMenu.classList.remove('flex');
1129
+ }
1130
+ }
1131
+ });
1132
+ });
1133
+ });
1134
+ </script>
1135
+ <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=docto41/cyber-shield-elite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
1136
+ </html>
prompts.txt ADDED
@@ -0,0 +1,2 @@
 
 
 
1
+ https://huggingface.co/spaces/docto41/cybershield-elite : je veux le site reel et active pret a l'emploi de suite
2
+ ajouter plus de fonction et ajouter le qr code du ste