Hugging Face's logo

Spaces:
YEOTECH
/
https-drive-google-com-drive-home-lfhs-2
Running

App Files Community
YEOTECH commited on
Commit
07388d4
·
verified ·
1 Parent(s): 342b89c

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +590 -19
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Drive Google Com Drive Home Lfhs 2
3
- emoji: 📈
4
- colorFrom: red
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: https-drive-google-com-drive-home-lfhs-2
3
+ emoji: 🐳
4
+ colorFrom: gray
5
+ colorTo: pink
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,590 @@
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>TechPro Maintenance - Services Informatiques Professionnels</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
+ /* Animation personnalisée */
11
+ @keyframes pulse {
12
+ 0%, 100% { transform: scale(1); }
13
+ 50% { transform: scale(1.05); }
14
+ }
15
+ .pulse-animation {
16
+ animation: pulse 2s infinite;
17
+ }
18
+
19
+ /* Effet de survol pour les cartes de service */
20
+ .service-card {
21
+ transition: all 0.3s ease;
22
+ }
23
+ .service-card:hover {
24
+ transform: translateY(-5px);
25
+ box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
26
+ }
27
+
28
+ /* Style personnalisé pour le formulaire */
29
+ .form-input {
30
+ transition: all 0.3s ease;
31
+ }
32
+ .form-input:focus {
33
+ border-color: #3b82f6;
34
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="font-sans bg-gray-50">
39
+ <!-- Barre de navigation -->
40
+ <nav class="bg-blue-800 text-white shadow-lg sticky top-0 z-50">
41
+ <div class="container mx-auto px-6 py-3 flex justify-between items-center">
42
+ <div class="flex items-center space-x-4">
43
+ <i class="fas fa-laptop-code text-2xl"></i>
44
+ <span class="font-bold text-xl">TechPro Maintenance</span>
45
+ </div>
46
+ <div class="hidden md:flex space-x-8">
47
+ <a href="#accueil" class="hover:text-blue-200 transition">Accueil</a>
48
+ <a href="#services" class="hover:text-blue-200 transition">Services</a>
49
+ <a href="#apropos" class="hover:text-blue-200 transition">À propos</a>
50
+ <a href="#contact" class="hover:text-blue-200 transition">Contact</a>
51
+ </div>
52
+ <button class="md:hidden focus:outline-none" id="menu-btn">
53
+ <i class="fas fa-bars text-2xl"></i>
54
+ </button>
55
+ </div>
56
+ <!-- Menu mobile -->
57
+ <div class="md:hidden hidden bg-blue-700 w-full" id="mobile-menu">
58
+ <div class="container mx-auto px-6 py-3 flex flex-col space-y-3">
59
+ <a href="#accueil" class="hover:text-blue-200 transition py-2">Accueil</a>
60
+ <a href="#services" class="hover:text-blue-200 transition py-2">Services</a>
61
+ <a href="#apropos" class="hover:text-blue-200 transition py-2">À propos</a>
62
+ <a href="#contact" class="hover:text-blue-200 transition py-2">Contact</a>
63
+ </div>
64
+ </div>
65
+ </nav>
66
+
67
+ <!-- Hero Section -->
68
+ <section id="accueil" class="bg-gradient-to-r from-blue-700 to-blue-900 text-white py-20">
69
+ <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
70
+ <div class="md:w-1/2 mb-10 md:mb-0">
71
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Maintenance Informatique Professionnelle</h1>
72
+ <p class="text-xl mb-8">Votre partenaire de confiance pour des solutions informatiques fiables et performantes. Intervention rapide 24/7.</p>
73
+ <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
74
+ <a href="#contact" class="bg-white text-blue-800 font-bold px-6 py-3 rounded-lg hover:bg-gray-100 transition duration-300 text-center pulse-animation">
75
+ <i class="fas fa-phone-alt mr-2"></i> Contactez-nous
76
+ </a>
77
+ <a href="#services" class="border-2 border-white text-white font-bold px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300 text-center">
78
+ <i class="fas fa-laptop-code mr-2"></i> Nos services
79
+ </a>
80
+ </div>
81
+ </div>
82
+ <div class="md:w-1/2 flex justify-center">
83
+ <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=774&q=80" alt="Technicien en maintenance informatique" class="rounded-lg shadow-2xl max-w-full h-auto">
84
+ </div>
85
+ </div>
86
+ </section>
87
+
88
+ <!-- Statistiques -->
89
+ <section class="bg-white py-12">
90
+ <div class="container mx-auto px-6">
91
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
92
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
93
+ <div class="text-blue-600 text-4xl font-bold mb-2">15+</div>
94
+ <div class="text-gray-600">Années d'expérience</div>
95
+ </div>
96
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
97
+ <div class="text-blue-600 text-4xl font-bold mb-2">500+</div>
98
+ <div class="text-gray-600">Clients satisfaits</div>
99
+ </div>
100
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
101
+ <div class="text-blue-600 text-4xl font-bold mb-2">24/7</div>
102
+ <div class="text-gray-600">Disponibilité</div>
103
+ </div>
104
+ <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
105
+ <div class="text-blue-600 text-4xl font-bold mb-2">98%</div>
106
+ <div class="text-gray-600">Taux de satisfaction</div>
107
+ </div>
108
+ </div>
109
+ </div>
110
+ </section>
111
+
112
+ <!-- Services -->
113
+ <section id="services" class="py-20 bg-gray-100">
114
+ <div class="container mx-auto px-6">
115
+ <div class="text-center mb-16">
116
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nos Services Professionnels</h2>
117
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
118
+ <p class="text-gray-600 max-w-2xl mx-auto">Nous offrons une gamme complète de services de maintenance informatique pour répondre à tous vos besoins technologiques.</p>
119
+ </div>
120
+
121
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
122
+ <!-- Service 1 -->
123
+ <div class="bg-white p-8 rounded-xl shadow-md service-card">
124
+ <div class="text-blue-600 text-4xl mb-4">
125
+ <i class="fas fa-desktop"></i>
126
+ </div>
127
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Préventive</h3>
128
+ <p class="text-gray-600 mb-4">Surveillance proactive de vos systèmes pour prévenir les pannes et optimiser les performances.</p>
129
+ <ul class="text-gray-600 space-y-2">
130
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Nettoyage des systèmes</li>
131
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mises à jour logicielles</li>
132
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Optimisation des performances</li>
133
+ </ul>
134
+ </div>
135
+
136
+ <!-- Service 2 -->
137
+ <div class="bg-white p-8 rounded-xl shadow-md service-card">
138
+ <div class="text-blue-600 text-4xl mb-4">
139
+ <i class="fas fa-tools"></i>
140
+ </div>
141
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Dépannage & Réparation</h3>
142
+ <p class="text-gray-600 mb-4">Intervention rapide pour résoudre tous vos problèmes matériels et logiciels.</p>
143
+ <ul class="text-gray-600 space-y-2">
144
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Diagnostic précis</li>
145
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Réparation matérielle</li>
146
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Récupération de données</li>
147
+ </ul>
148
+ </div>
149
+
150
+ <!-- Service 3 -->
151
+ <div class="bg-white p-8 rounded-xl shadow-md service-card">
152
+ <div class="text-blue-600 text-4xl mb-4">
153
+ <i class="fas fa-shield-alt"></i>
154
+ </div>
155
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Sécurité Informatique</h3>
156
+ <p class="text-gray-600 mb-4">Protection complète de vos systèmes contre les cybermenaces.</p>
157
+ <ul class="text-gray-600 space-y-2">
158
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Installation antivirus</li>
159
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Configuration pare-feu</li>
160
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Audit de sécurité</li>
161
+ </ul>
162
+ </div>
163
+
164
+ <!-- Service 4 -->
165
+ <div class="bg-white p-8 rounded-xl shadow-md service-card">
166
+ <div class="text-blue-600 text-4xl mb-4">
167
+ <i class="fas fa-network-wired"></i>
168
+ </div>
169
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Réseau & Infrastructure</h3>
170
+ <p class="text-gray-600 mb-4">Conception, installation et maintenance de vos réseaux informatiques.</p>
171
+ <ul class="text-gray-600 space-y-2">
172
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Installation réseau</li>
173
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Configuration serveur</li>
174
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Maintenance réseau</li>
175
+ </ul>
176
+ </div>
177
+
178
+ <!-- Service 5 -->
179
+ <div class="bg-white p-8 rounded-xl shadow-md service-card">
180
+ <div class="text-blue-600 text-4xl mb-4">
181
+ <i class="fas fa-cloud"></i>
182
+ </div>
183
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Solutions Cloud</h3>
184
+ <p class="text-gray-600 mb-4">Migration et gestion de vos infrastructures cloud.</p>
185
+ <ul class="text-gray-600 space-y-2">
186
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Sauvegarde cloud</li>
187
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Migration vers le cloud</li>
188
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Gestion des services cloud</li>
189
+ </ul>
190
+ </div>
191
+
192
+ <!-- Service 6 -->
193
+ <div class="bg-white p-8 rounded-xl shadow-md service-card">
194
+ <div class="text-blue-600 text-4xl mb-4">
195
+ <i class="fas fa-headset"></i>
196
+ </div>
197
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Support Technique</h3>
198
+ <p class="text-gray-600 mb-4">Assistance technique à distance ou sur site selon vos besoins.</p>
199
+ <ul class="text-gray-600 space-y-2">
200
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Assistance à distance</li>
201
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Support téléphonique</li>
202
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Intervention sur site</li>
203
+ </ul>
204
+ </div>
205
+ </div>
206
+ </div>
207
+ </section>
208
+
209
+ <!-- À propos -->
210
+ <section id="apropos" class="py-20 bg-white">
211
+ <div class="container mx-auto px-6">
212
+ <div class="flex flex-col md:flex-row items-center">
213
+ <div class="md:w-1/2 mb-10 md:mb-0">
214
+ <img src="https://images.unsplash.com/photo-1522071820081-009f0129c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Notre équipe" class="rounded-lg shadow-xl w-full">
215
+ </div>
216
+ <div class="md:w-1/2 md:pl-12">
217
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">À propos de TechPro Maintenance</h2>
218
+ <div class="w-20 h-1 bg-blue-600 mb-6"></div>
219
+ <p class="text-gray-600 mb-6">Fondée en 2008, TechPro Maintenance s'est imposée comme un leader dans le domaine de la maintenance informatique grâce à son expertise technique et son engagement envers la satisfaction client.</p>
220
+
221
+ <div class="space-y-4">
222
+ <div class="flex items-start">
223
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
224
+ <i class="fas fa-medal text-blue-600"></i>
225
+ </div>
226
+ <div>
227
+ <h4 class="font-bold text-gray-800 mb-1">Expertise certifiée</h4>
228
+ <p class="text-gray-600">Nos techniciens possèdent des certifications reconnues dans le domaine de l'informatique et des réseaux.</p>
229
+ </div>
230
+ </div>
231
+
232
+ <div class="flex items-start">
233
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
234
+ <i class="fas fa-clock text-blue-600"></i>
235
+ </div>
236
+ <div>
237
+ <h4 class="font-bold text-gray-800 mb-1">Réactivité</h4>
238
+ <p class="text-gray-600">Intervention sous 4 heures en moyenne pour les urgences, 24h/24 et 7j/7.</p>
239
+ </div>
240
+ </div>
241
+
242
+ <div class="flex items-start">
243
+ <div class="bg-blue-100 p-2 rounded-full mr-4">
244
+ <i class="fas fa-hand-holding-heart text-blue-600"></i>
245
+ </div>
246
+ <div>
247
+ <h4 class="font-bold text-gray-800 mb-1">Approche client</h4>
248
+ <p class="text-gray-600">Nous prenons le temps d'écouter et de comprendre vos besoins spécifiques pour vous proposer des solutions sur mesure.</p>
249
+ </div>
250
+ </div>
251
+ </div>
252
+ </div>
253
+ </div>
254
+ </div>
255
+ </section>
256
+
257
+ <!-- Témoignages -->
258
+ <section class="py-20 bg-gray-100">
259
+ <div class="container mx-auto px-6">
260
+ <div class="text-center mb-16">
261
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Ce que nos clients disent</h2>
262
+ <div class="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
263
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez les témoignages de nos clients satisfaits par la qualité de nos services.</p>
264
+ </div>
265
+
266
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
267
+ <!-- Témoignage 1 -->
268
+ <div class="bg-white p-8 rounded-xl shadow-md">
269
+ <div class="flex items-center mb-4">
270
+ <div class="text-yellow-400 text-xl">
271
+ <i class="fas fa-star"></i>
272
+ <i class="fas fa-star"></i>
273
+ <i class="fas fa-star"></i>
274
+ <i class="fas fa-star"></i>
275
+ <i class="fas fa-star"></i>
276
+ </div>
277
+ </div>
278
+ <p class="text-gray-600 italic mb-6">"TechPro Maintenance a sauvé notre entreprise lors d'une panne critique de notre serveur. Leur intervention rapide et professionnelle nous a permis de reprendre notre activité en moins de 2 heures."</p>
279
+ <div class="flex items-center">
280
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
281
+ <div>
282
+ <h4 class="font-bold text-gray-800">Marc Dubois</h4>
283
+ <p class="text-gray-600 text-sm">Directeur, Entreprise ABC</p>
284
+ </div>
285
+ </div>
286
+ </div>
287
+
288
+ <!-- Témoignage 2 -->
289
+ <div class="bg-white p-8 rounded-xl shadow-md">
290
+ <div class="flex items-center mb-4">
291
+ <div class="text-yellow-400 text-xl">
292
+ <i class="fas fa-star"></i>
293
+ <i class="fas fa-star"></i>
294
+ <i class="fas fa-star"></i>
295
+ <i class="fas fa-star"></i>
296
+ <i class="fas fa-star"></i>
297
+ </div>
298
+ </div>
299
+ <p class="text-gray-600 italic mb-6">"Nous travaillons avec TechPro depuis 5 ans pour la maintenance de notre parc informatique. Leur service est irréprochable et leur disponibilité exceptionnelle."</p>
300
+ <div class="flex items-center">
301
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
302
+ <div>
303
+ <h4 class="font-bold text-gray-800">Sophie Martin</h4>
304
+ <p class="text-gray-600 text-sm">Responsable IT, Société XYZ</p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+
309
+ <!-- Témoignage 3 -->
310
+ <div class="bg-white p-8 rounded-xl shadow-md">
311
+ <div class="flex items-center mb-4">
312
+ <div class="text-yellow-400 text-xl">
313
+ <i class="fas fa-star"></i>
314
+ <i class="fas fa-star"></i>
315
+ <i class="fas fa-star"></i>
316
+ <i class="fas fa-star"></i>
317
+ <i class="fas fa-star-half-alt"></i>
318
+ </div>
319
+ </div>
320
+ <p class="text-gray-600 italic mb-6">"Leur équipe a réalisé un audit complet de notre sécurité informatique et mis en place des solutions adaptées à notre budget. Nous dormons beaucoup mieux depuis!"</p>
321
+ <div class="flex items-center">
322
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
323
+ <div>
324
+ <h4 class="font-bold text-gray-800">Jean Lefèvre</h4>
325
+ <p class="text-gray-600 text-sm">Gérant, Boutique en ligne</p>
326
+ </div>
327
+ </div>
328
+ </div>
329
+ </div>
330
+ </div>
331
+ </section>
332
+
333
+ <!-- Contact -->
334
+ <section id="contact" class="py-20 bg-blue-800 text-white">
335
+ <div class="container mx-auto px-6">
336
+ <div class="text-center mb-16">
337
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez-nous</h2>
338
+ <div class="w-20 h-1 bg-white mx-auto mb-6"></div>
339
+ <p class="max-w-2xl mx-auto">Notre équipe est à votre disposition pour répondre à toutes vos questions et vous proposer des solutions adaptées à vos besoins.</p>
340
+ </div>
341
+
342
+ <div class="flex flex-col md:flex-row">
343
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8">
344
+ <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
345
+ <h3 class="text-xl font-bold mb-6">Informations de contact</h3>
346
+
347
+ <div class="space-y-6">
348
+ <div class="flex items-start">
349
+ <div class="mr-4 mt-1">
350
+ <i class="fas fa-map-marker-alt"></i>
351
+ </div>
352
+ <div>
353
+ <h4 class="font-bold mb-1">Adresse</h4>
354
+ <p>123 Rue de la Technologie<br>75000 Paris, France</p>
355
+ </div>
356
+ </div>
357
+
358
+ <div class="flex items-start">
359
+ <div class="mr-4 mt-1">
360
+ <i class="fas fa-phone-alt"></i>
361
+ </div>
362
+ <div>
363
+ <h4 class="font-bold mb-1">Téléphone</h4>
364
+ <p>01 23 45 67 89<br>Urgences: 06 12 34 56 78</p>
365
+ </div>
366
+ </div>
367
+
368
+ <div class="flex items-start">
369
+ <div class="mr-4 mt-1">
370
+ <i class="fas fa-envelope"></i>
371
+ </div>
372
+ <div>
373
+ <h4 class="font-bold mb-1">Email</h4>
374
+ <p>contact@techpromaintenance.fr<br>support@techpromaintenance.fr</p>
375
+ </div>
376
+ </div>
377
+
378
+ <div class="flex items-start">
379
+ <div class="mr-4 mt-1">
380
+ <i class="fas fa-clock"></i>
381
+ </div>
382
+ <div>
383
+ <h4 class="font-bold mb-1">Horaires</h4>
384
+ <p>Lundi-Vendredi: 8h-19h<br>Samedi: 9h-13h<br>Urgences: 24h/24 7j/7</p>
385
+ </div>
386
+ </div>
387
+ </div>
388
+
389
+ <div class="mt-8">
390
+ <h4 class="font-bold mb-4">Suivez-nous</h4>
391
+ <div class="flex space-x-4">
392
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
393
+ <i class="fab fa-facebook-f"></i>
394
+ </a>
395
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
396
+ <i class="fab fa-twitter"></i>
397
+ </a>
398
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
399
+ <i class="fab fa-linkedin-in"></i>
400
+ </a>
401
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
402
+ <i class="fab fa-instagram"></i>
403
+ </a>
404
+ </div>
405
+ </div>
406
+ </div>
407
+ </div>
408
+
409
+ <div class="md:w-1/2">
410
+ <form class="bg-white text-gray-800 p-8 rounded-xl shadow-xl">
411
+ <h3 class="text-xl font-bold mb-6">Envoyez-nous un message</h3>
412
+
413
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
414
+ <div>
415
+ <label for="nom" class="block text-gray-700 font-medium mb-2">Nom *</label>
416
+ <input type="text" id="nom" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-blue-500" required>
417
+ </div>
418
+ <div>
419
+ <label for="prenom" class="block text-gray-700 font-medium mb-2">Prénom *</label>
420
+ <input type="text" id="prenom" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-blue-500" required>
421
+ </div>
422
+ </div>
423
+
424
+ <div class="mb-6">
425
+ <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label>
426
+ <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-blue-500" required>
427
+ </div>
428
+
429
+ <div class="mb-6">
430
+ <label for="telephone" class="block text-gray-700 font-medium mb-2">Téléphone</label>
431
+ <input type="tel" id="telephone" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-blue-500">
432
+ </div>
433
+
434
+ <div class="mb-6">
435
+ <label for="service" class="block text-gray-700 font-medium mb-2">Service concerné *</label>
436
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-blue-500" required>
437
+ <option value="">Sélectionnez un service</option>
438
+ <option value="maintenance">Maintenance préventive</option>
439
+ <option value="depannage">Dépannage & Réparation</option>
440
+ <option value="securite">Sécurité Informatique</option>
441
+ <option value="reseau">Réseau & Infrastructure</option>
442
+ <option value="cloud">Solutions Cloud</option>
443
+ <option value="support">Support Technique</option>
444
+ <option value="autre">Autre</option>
445
+ </select>
446
+ </div>
447
+
448
+ <div class="mb-6">
449
+ <label for="message" class="block text-gray-700 font-medium mb-2">Message *</label>
450
+ <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-blue-500" required></textarea>
451
+ </div>
452
+
453
+ <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300">
454
+ <i class="fas fa-paper-plane mr-2"></i> Envoyer le message
455
+ </button>
456
+ </form>
457
+ </div>
458
+ </div>
459
+ </div>
460
+ </section>
461
+
462
+ <!-- CTA -->
463
+ <section class="py-16 bg-blue-600 text-white">
464
+ <div class="container mx-auto px-6 text-center">
465
+ <h2 class="text-2xl md:text-3xl font-bold mb-6">Prêt à optimiser votre infrastructure informatique?</h2>
466
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Contactez-nous dès aujourd'hui pour un audit gratuit de votre système.</p>
467
+ <a href="#contact" class="bg-white text-blue-800 font-bold px-8 py-3 rounded-lg hover:bg-gray-100 transition duration-300 inline-block">
468
+ <i class="fas fa-calendar-check mr-2"></i> Prendre rendez-vous
469
+ </a>
470
+ </div>
471
+ </section>
472
+
473
+ <!-- Footer -->
474
+ <footer class="bg-gray-900 text-white py-12">
475
+ <div class="container mx-auto px-6">
476
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
477
+ <div>
478
+ <h3 class="text-xl font-bold mb-4 flex items-center">
479
+ <i class="fas fa-laptop-code text-2xl mr-2"></i> TechPro Maintenance
480
+ </h3>
481
+ <p class="text-gray-400">Votre partenaire de confiance pour des solutions informatiques performantes et sécurisées.</p>
482
+ </div>
483
+
484
+ <div>
485
+ <h4 class="text-lg font-bold mb-4">Services</h4>
486
+ <ul class="space-y-2 text-gray-400">
487
+ <li><a href="#" class="hover:text-white transition">Maintenance préventive</a></li>
488
+ <li><a href="#" class="hover:text-white transition">Dépannage & Réparation</a></li>
489
+ <li><a href="#" class="hover:text-white transition">Sécurité Informatique</a></li>
490
+ <li><a href="#" class="hover:text-white transition">Réseau & Infrastructure</a></li>
491
+ </ul>
492
+ </div>
493
+
494
+ <div>
495
+ <h4 class="text-lg font-bold mb-4">Liens utiles</h4>
496
+ <ul class="space-y-2 text-gray-400">
497
+ <li><a href="#accueil" class="hover:text-white transition">Accueil</a></li>
498
+ <li><a href="#services" class="hover:text-white transition">Services</a></li>
499
+ <li><a href="#apropos" class="hover:text-white transition">À propos</a></li>
500
+ <li><a href="#contact" class="hover:text-white transition">Contact</a></li>
501
+ </ul>
502
+ </div>
503
+
504
+ <div>
505
+ <h4 class="text-lg font-bold mb-4">Newsletter</h4>
506
+ <p class="text-gray-400 mb-4">Abonnez-vous à notre newsletter pour recevoir nos actualités et conseils.</p>
507
+ <div class="flex">
508
+ <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full focus:outline-none">
509
+ <button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-r-lg transition">
510
+ <i class="fas fa-paper-plane"></i>
511
+ </button>
512
+ </div>
513
+ </div>
514
+ </div>
515
+
516
+ <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
517
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 TechPro Maintenance. Tous droits réservés.</p>
518
+ <div class="flex space-x-6">
519
+ <a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a>
520
+ <a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a>
521
+ <a href="#" class="text-gray-400 hover:text-white transition">CGV</a>
522
+ </div>
523
+ </div>
524
+ </div>
525
+ </footer>
526
+
527
+ <!-- Bouton retour en haut -->
528
+ <button id="back-to-top" class="fixed bottom-8 right-8 bg-blue-600 text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition opacity-0 invisible hover:bg-blue-700">
529
+ <i class="fas fa-arrow-up"></i>
530
+ </button>
531
+
532
+ <script>
533
+ // Menu mobile
534
+ const menuBtn = document.getElementById('menu-btn');
535
+ const mobileMenu = document.getElementById('mobile-menu');
536
+
537
+ menuBtn.addEventListener('click', () => {
538
+ mobileMenu.classList.toggle('hidden');
539
+ });
540
+
541
+ // Back to top button
542
+ const backToTopBtn = document.getElementById('back-to-top');
543
+
544
+ window.addEventListener('scroll', () => {
545
+ if (window.pageYOffset > 300) {
546
+ backToTopBtn.classList.remove('opacity-0', 'invisible');
547
+ backToTopBtn.classList.add('opacity-100', 'visible');
548
+ } else {
549
+ backToTopBtn.classList.remove('opacity-100', 'visible');
550
+ backToTopBtn.classList.add('opacity-0', 'invisible');
551
+ }
552
+ });
553
+
554
+ backToTopBtn.addEventListener('click', () => {
555
+ window.scrollTo({
556
+ top: 0,
557
+ behavior: 'smooth'
558
+ });
559
+ });
560
+
561
+ // Animation au défilement
562
+ const observerOptions = {
563
+ threshold: 0.1
564
+ };
565
+
566
+ const observer = new IntersectionObserver((entries) => {
567
+ entries.forEach(entry => {
568
+ if (entry.isIntersecting) {
569
+ entry.target.classList.add('animate-fadeIn');
570
+ }
571
+ });
572
+ }, observerOptions);
573
+
574
+ document.querySelectorAll('.service-card, .testimonial').forEach(card => {
575
+ card.classList.add('opacity-0', 'transition-opacity', 'duration-500', 'ease-in-out');
576
+ observer.observe(card);
577
+ });
578
+
579
+ // Gestion du formulaire
580
+ const contactForm = document.querySelector('form');
581
+ if (contactForm) {
582
+ contactForm.addEventListener('submit', (e) => {
583
+ e.preventDefault();
584
+ alert('Merci pour votre message! Nous vous contacterons rapidement.');
585
+ contactForm.reset();
586
+ });
587
+ }
588
+ </script>
589
+ <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=YEOTECH/https-drive-google-com-drive-home-lfhs-2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
590
+ </html>
prompts.txt ADDED
File without changes