Hugging Face's logo

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

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +194 -144
  2. prompts.txt +1 -0
index.html CHANGED
@@ -3,7 +3,7 @@
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>
@@ -33,19 +33,37 @@
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>
@@ -54,10 +72,11 @@
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>
@@ -65,22 +84,22 @@
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>
@@ -90,20 +109,20 @@
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>
@@ -113,139 +132,166 @@
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>
@@ -255,17 +301,17 @@
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>
@@ -275,18 +321,18 @@
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>
@@ -296,18 +342,18 @@
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>
@@ -317,12 +363,12 @@
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>
@@ -331,10 +377,10 @@
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>
@@ -342,7 +388,7 @@
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">
@@ -351,7 +397,7 @@
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
 
@@ -361,7 +407,7 @@
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
 
@@ -371,7 +417,7 @@
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
 
@@ -381,7 +427,7 @@
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>
@@ -392,15 +438,15 @@
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>
@@ -408,50 +454,53 @@
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>
@@ -460,12 +509,12 @@
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>
@@ -476,18 +525,18 @@
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
 
@@ -496,6 +545,7 @@
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>
@@ -503,10 +553,10 @@
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>
@@ -514,7 +564,7 @@
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>
@@ -525,7 +575,7 @@
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
 
@@ -581,7 +631,7 @@
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
  }
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YeoTech - Maintenance Multitechnique Professionnelle</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>
 
33
  border-color: #3b82f6;
34
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
35
  }
36
+
37
+ /* Couleur thématique YeoTech */
38
+ .yeo-primary {
39
+ background-color: #1a56db;
40
+ }
41
+ .yeo-secondary {
42
+ background-color: #1e429f;
43
+ }
44
+ .hover-yeo-primary:hover {
45
+ background-color: #1e40af;
46
+ }
47
+ .text-yeo-primary {
48
+ color: #1a56db;
49
+ }
50
+ .border-yeo-primary {
51
+ border-color: #1a56db;
52
+ }
53
  </style>
54
  </head>
55
  <body class="font-sans bg-gray-50">
56
  <!-- Barre de navigation -->
57
+ <nav class="yeo-primary text-white shadow-lg sticky top-0 z-50">
58
  <div class="container mx-auto px-6 py-3 flex justify-between items-center">
59
  <div class="flex items-center space-x-4">
60
+ <i class="fas fa-cogs text-2xl"></i>
61
+ <span class="font-bold text-xl">YeoTech</span>
62
  </div>
63
  <div class="hidden md:flex space-x-8">
64
  <a href="#accueil" class="hover:text-blue-200 transition">Accueil</a>
65
  <a href="#services" class="hover:text-blue-200 transition">Services</a>
66
+ <a href="#expertise" class="hover:text-blue-200 transition">Expertise</a>
67
  <a href="#apropos" class="hover:text-blue-200 transition">À propos</a>
68
  <a href="#contact" class="hover:text-blue-200 transition">Contact</a>
69
  </div>
 
72
  </button>
73
  </div>
74
  <!-- Menu mobile -->
75
+ <div class="md:hidden hidden yeo-secondary w-full" id="mobile-menu">
76
  <div class="container mx-auto px-6 py-3 flex flex-col space-y-3">
77
  <a href="#accueil" class="hover:text-blue-200 transition py-2">Accueil</a>
78
  <a href="#services" class="hover:text-blue-200 transition py-2">Services</a>
79
+ <a href="#expertise" class="hover:text-blue-200 transition py-2">Expertise</a>
80
  <a href="#apropos" class="hover:text-blue-200 transition py-2">À propos</a>
81
  <a href="#contact" class="hover:text-blue-200 transition py-2">Contact</a>
82
  </div>
 
84
  </nav>
85
 
86
  <!-- Hero Section -->
87
+ <section id="accueil" class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-20">
88
  <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
89
  <div class="md:w-1/2 mb-10 md:mb-0">
90
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Solutions Multitechniques Intégrées</h1>
91
+ <p class="text-xl mb-8">YeoTech offre des services professionnels en maintenance électromécanique, informatique, climatisation et électricité industrielle pour répondre à tous vos besoins techniques.</p>
92
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
93
  <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">
94
  <i class="fas fa-phone-alt mr-2"></i> Contactez-nous
95
  </a>
96
  <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">
97
+ <i class="fas fa-tools mr-2"></i> Nos services
98
  </a>
99
  </div>
100
  </div>
101
  <div class="md:w-1/2 flex justify-center">
102
+ <img src="https://images.unsplash.com/photo-1581093450021-4a7360e9a9d5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Technicien multitechnique" class="rounded-lg shadow-2xl max-w-full h-auto">
103
  </div>
104
  </div>
105
  </section>
 
109
  <div class="container mx-auto px-6">
110
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
111
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
112
+ <div class="text-yeo-primary text-4xl font-bold mb-2">20+</div>
113
  <div class="text-gray-600">Années d'expérience</div>
114
  </div>
115
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
116
+ <div class="text-yeo-primary text-4xl font-bold mb-2">1000+</div>
117
  <div class="text-gray-600">Clients satisfaits</div>
118
  </div>
119
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
120
+ <div class="text-yeo-primary text-4xl font-bold mb-2">50+</div>
121
+ <div class="text-gray-600">Techniciens experts</div>
122
  </div>
123
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
124
+ <div class="text-yeo-primary text-4xl font-bold mb-2">24/7</div>
125
+ <div class="text-gray-600">Disponibilité</div>
126
  </div>
127
  </div>
128
  </div>
 
132
  <section id="services" class="py-20 bg-gray-100">
133
  <div class="container mx-auto px-6">
134
  <div class="text-center mb-16">
135
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nos Domaines d'Expertise</h2>
136
+ <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
137
+ <p class="text-gray-600 max-w-2xl mx-auto">YeoTech propose une gamme complète de services techniques pour répondre à tous vos besoins en maintenance industrielle et tertiaire.</p>
138
  </div>
139
 
140
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
141
  <!-- Service 1 -->
142
  <div class="bg-white p-8 rounded-xl shadow-md service-card">
143
+ <div class="text-yeo-primary text-4xl mb-4">
144
+ <i class="fas fa-bolt"></i>
145
  </div>
146
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Électricité Industrielle</h3>
147
+ <p class="text-gray-600 mb-4">Solutions complètes pour vos installations électriques industrielles et bâtiments tertiaires.</p>
148
  <ul class="text-gray-600 space-y-2">
149
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Tableaux électriques</li>
150
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Automatismes industriels</li>
151
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Gestion de l'énergie</li>
152
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mise aux normes</li>
153
  </ul>
154
  </div>
155
 
156
  <!-- Service 2 -->
157
  <div class="bg-white p-8 rounded-xl shadow-md service-card">
158
+ <div class="text-yeo-primary text-4xl mb-4">
159
+ <i class="fas fa-cogs"></i>
160
  </div>
161
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Électromécanique</h3>
162
+ <p class="text-gray-600 mb-4">Maintenance préventive et corrective pour vos équipements mécaniques et électromécaniques.</p>
163
  <ul class="text-gray-600 space-y-2">
164
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Machines industrielles</li>
165
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Systèmes de convoyage</li>
166
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Motorisations</li>
167
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Vérifications périodiques</li>
168
  </ul>
169
  </div>
170
 
171
  <!-- Service 3 -->
172
  <div class="bg-white p-8 rounded-xl shadow-md service-card">
173
+ <div class="text-yeo-primary text-4xl mb-4">
174
+ <i class="fas fa-laptop-code"></i>
175
  </div>
176
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Informatique</h3>
177
+ <p class="text-gray-600 mb-4">Services informatiques professionnels pour entreprises et industries.</p>
178
  <ul class="text-gray-600 space-y-2">
179
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Infrastructure réseau</li>
180
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Sécurité informatique</li>
181
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Support technique</li>
182
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Maintenance préventive</li>
183
  </ul>
184
  </div>
185
 
186
  <!-- Service 4 -->
187
  <div class="bg-white p-8 rounded-xl shadow-md service-card">
188
+ <div class="text-yeo-primary text-4xl mb-4">
189
+ <i class="fas fa-fan"></i>
190
  </div>
191
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Climatisation & Froid</h3>
192
+ <p class="text-gray-600 mb-4">Installation et maintenance de systèmes de climatisation et de réfrigération.</p>
193
  <ul class="text-gray-600 space-y-2">
194
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Climatisation industrielle</li>
195
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Chambres froides</li>
196
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Dépannage urgent</li>
197
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Contrôle réglementaire</li>
198
  </ul>
199
  </div>
200
+ </div>
201
+ </div>
202
+ </section>
203
+
204
+ <!-- Expertise -->
205
+ <section id="expertise" class="py-20 bg-white">
206
+ <div class="container mx-auto px-6">
207
+ <div class="text-center mb-16">
208
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Notre Expertise Technique</h2>
209
+ <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
210
+ <p class="text-gray-600 max-w-2xl mx-auto">YeoTech combine savoir-faire technique et innovation pour vous offrir des solutions sur mesure.</p>
211
+ </div>
212
+
213
+ <div class="flex flex-col md:flex-row items-center">
214
+ <div class="md:w-1/2 mb-10 md:mb-0 md:pr-12">
215
+ <div class="space-y-8">
216
+ <div class="flex items-start">
217
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
218
+ <i class="fas fa-certificate text-yeo-primary text-xl"></i>
219
+ </div>
220
+ <div>
221
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Certifications & Qualifications</h3>
222
+ <p class="text-gray-600">Nos techniciens possèdent toutes les certifications requises (Qualifelec, RGE, F-Gas...) et suivent des formations continues pour rester à la pointe.</p>
223
+ </div>
224
+ </div>
225
+
226
+ <div class="flex items-start">
227
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
228
+ <i class="fas fa-lightbulb text-yeo-primary text-xl"></i>
229
+ </div>
230
+ <div>
231
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Approche Innovante</h3>
232
+ <p class="text-gray-600">Nous intégrons les dernières technologies (IoT, maintenance prédictive, outils de diagnostic avancés) pour optimiser vos installations.</p>
233
+ </div>
234
+ </div>
235
+
236
+ <div class="flex items-start">
237
+ <div class="bg-blue-100 p-3 rounded-full mr-4">
238
+ <i class="fas fa-chart-line text-yeo-primary text-xl"></i>
239
+ </div>
240
+ <div>
241
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Performance & Fiabilité</h3>
242
+ <p class="text-gray-600">Nos interventions visent toujours à améliorer la performance énergétique et la fiabilité de vos équipements.</p>
243
+ </div>
244
+ </div>
245
  </div>
 
 
 
 
 
 
 
246
  </div>
247
 
248
+ <div class="md:w-1/2">
249
+ <img src="https://images.unsplash.com/photo-1518770660439-4636190af475?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Expertise technique" class="rounded-lg shadow-xl w-full">
 
 
 
 
 
 
 
 
 
 
250
  </div>
251
  </div>
252
  </div>
253
  </section>
254
 
255
  <!-- À propos -->
256
+ <section id="apropos" class="py-20 bg-gray-100">
257
  <div class="container mx-auto px-6">
258
  <div class="flex flex-col md:flex-row items-center">
259
  <div class="md:w-1/2 mb-10 md:mb-0">
260
+ <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="Équipe YeoTech" class="rounded-lg shadow-xl w-full">
261
  </div>
262
  <div class="md:w-1/2 md:pl-12">
263
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-6">À propos de YeoTech</h2>
264
+ <div class="w-20 h-1 bg-yeo-primary mb-6"></div>
265
+ <p class="text-gray-600 mb-6">Fondée en 2005, YeoTech s'est imposée comme un acteur majeur dans le domaine de la maintenance multitechnique grâce à son expertise technique et son engagement envers la satisfaction client.</p>
266
 
267
  <div class="space-y-4">
268
  <div class="flex items-start">
269
  <div class="bg-blue-100 p-2 rounded-full mr-4">
270
+ <i class="fas fa-map-marker-alt text-yeo-primary"></i>
271
  </div>
272
  <div>
273
+ <h4 class="font-bold text-gray-800 mb-1">Présence nationale</h4>
274
+ <p class="text-gray-600">Nous intervenons sur tout le territoire avec des équipes locales et une centrale d'appel 24/7.</p>
275
  </div>
276
  </div>
277
 
278
  <div class="flex items-start">
279
  <div class="bg-blue-100 p-2 rounded-full mr-4">
280
+ <i class="fas fa-users text-yeo-primary"></i>
281
  </div>
282
  <div>
283
+ <h4 class="font-bold text-gray-800 mb-1">Équipe pluridisciplinaire</h4>
284
+ <p class="text-gray-600">Nos 50 techniciens spécialisés couvrent tous les domaines techniques pour une approche globale.</p>
285
  </div>
286
  </div>
287
 
288
  <div class="flex items-start">
289
  <div class="bg-blue-100 p-2 rounded-full mr-4">
290
+ <i class="fas fa-heart text-yeo-primary"></i>
291
  </div>
292
  <div>
293
+ <h4 class="font-bold text-gray-800 mb-1">Engagement qualité</h4>
294
+ <p class="text-gray-600">Certifiée ISO 9001, notre entreprise suit des procédures strictes pour garantir la qualité de nos interventions.</p>
295
  </div>
296
  </div>
297
  </div>
 
301
  </section>
302
 
303
  <!-- Témoignages -->
304
+ <section class="py-20 bg-white">
305
  <div class="container mx-auto px-6">
306
  <div class="text-center mb-16">
307
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Ils nous font confiance</h2>
308
+ <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
309
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez ce que nos clients disent de nos services.</p>
310
  </div>
311
 
312
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
313
  <!-- Témoignage 1 -->
314
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
315
  <div class="flex items-center mb-4">
316
  <div class="text-yellow-400 text-xl">
317
  <i class="fas fa-star"></i>
 
321
  <i class="fas fa-star"></i>
322
  </div>
323
  </div>
324
+ <p class="text-gray-600 italic mb-6">"YeoTech gère toute notre maintenance électromécanique depuis 5 ans. Leur réactivité et leur professionnalisme nous ont permis d'optimiser notre taux de disponibilité des machines de 30%."</p>
325
  <div class="flex items-center">
326
  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
327
  <div>
328
+ <h4 class="font-bold text-gray-800">Pierre Lambert</h4>
329
+ <p class="text-gray-600 text-sm">Directeur Industriel, Groupe Manufac</p>
330
  </div>
331
  </div>
332
  </div>
333
 
334
  <!-- Témoignage 2 -->
335
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
336
  <div class="flex items-center mb-4">
337
  <div class="text-yellow-400 text-xl">
338
  <i class="fas fa-star"></i>
 
342
  <i class="fas fa-star"></i>
343
  </div>
344
  </div>
345
+ <p class="text-gray-600 italic mb-6">"Leur équipe a réalisé la mise aux normes de toute notre installation électrique dans les délais impartis. Un travail d'une grande qualité technique."</p>
346
  <div class="flex items-center">
347
  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
348
  <div>
349
+ <h4 class="font-bold text-gray-800">Sophie Durand</h4>
350
+ <p class="text-gray-600 text-sm">Responsable Maintenance, Hôtel Bellevue</p>
351
  </div>
352
  </div>
353
  </div>
354
 
355
  <!-- Témoignage 3 -->
356
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md">
357
  <div class="flex items-center mb-4">
358
  <div class="text-yellow-400 text-xl">
359
  <i class="fas fa-star"></i>
 
363
  <i class="fas fa-star-half-alt"></i>
364
  </div>
365
  </div>
366
+ <p class="text-gray-600 italic mb-6">"Intervention rapide pour une panne de climatisation en plein été. Le technicien était là dans l'heure et a résolu le problème efficacement. Je recommande!"</p>
367
  <div class="flex items-center">
368
  <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
369
  <div>
370
+ <h4 class="font-bold text-gray-800">Thomas Moreau</h4>
371
+ <p class="text-gray-600 text-sm">Gérant, Restaurant Le Petit Bistro</p>
372
  </div>
373
  </div>
374
  </div>
 
377
  </section>
378
 
379
  <!-- Contact -->
380
+ <section id="contact" class="py-20 yeo-primary text-white">
381
  <div class="container mx-auto px-6">
382
  <div class="text-center mb-16">
383
+ <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez YeoTech</h2>
384
  <div class="w-20 h-1 bg-white mx-auto mb-6"></div>
385
  <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>
386
  </div>
 
388
  <div class="flex flex-col md:flex-row">
389
  <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8">
390
  <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm">
391
+ <h3 class="text-xl font-bold mb-6">Coordonnées</h3>
392
 
393
  <div class="space-y-6">
394
  <div class="flex items-start">
 
397
  </div>
398
  <div>
399
  <h4 class="font-bold mb-1">Adresse</h4>
400
+ <p>Parc Technologique YeoTech<br>31000 Toulouse, France</p>
401
  </div>
402
  </div>
403
 
 
407
  </div>
408
  <div>
409
  <h4 class="font-bold mb-1">Téléphone</h4>
410
+ <p>05 61 23 45 67<br>Urgences: 06 12 34 56 78</p>
411
  </div>
412
  </div>
413
 
 
417
  </div>
418
  <div>
419
  <h4 class="font-bold mb-1">Email</h4>
420
+ <p>contact@yeotech.fr<br>support@yeotech.fr</p>
421
  </div>
422
  </div>
423
 
 
427
  </div>
428
  <div>
429
  <h4 class="font-bold mb-1">Horaires</h4>
430
+ <p>Lundi-Vendredi: 7h-19h<br>Samedi: 8h-12h<br>Urgences: 24h/24 7j/7</p>
431
  </div>
432
  </div>
433
  </div>
 
438
  <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
439
  <i class="fab fa-facebook-f"></i>
440
  </a>
 
 
 
441
  <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
442
  <i class="fab fa-linkedin-in"></i>
443
  </a>
444
  <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
445
  <i class="fab fa-instagram"></i>
446
  </a>
447
+ <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
448
+ <i class="fab fa-youtube"></i>
449
+ </a>
450
  </div>
451
  </div>
452
  </div>
 
454
 
455
  <div class="md:w-1/2">
456
  <form class="bg-white text-gray-800 p-8 rounded-xl shadow-xl">
457
+ <h3 class="text-xl font-bold mb-6">Demande de devis</h3>
458
 
459
  <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
460
  <div>
461
  <label for="nom" class="block text-gray-700 font-medium mb-2">Nom *</label>
462
+ <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-yeo-primary" required>
463
  </div>
464
  <div>
465
  <label for="prenom" class="block text-gray-700 font-medium mb-2">Prénom *</label>
466
+ <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-yeo-primary" required>
467
  </div>
468
  </div>
469
 
470
+ <div class="mb-6">
471
+ <label for="entreprise" class="block text-gray-700 font-medium mb-2">Entreprise</label>
472
+ <input type="text" id="entreprise" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-yeo-primary">
473
+ </div>
474
+
475
  <div class="mb-6">
476
  <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label>
477
+ <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-yeo-primary" required>
478
  </div>
479
 
480
  <div class="mb-6">
481
+ <label for="telephone" class="block text-gray-700 font-medium mb-2">Téléphone *</label>
482
+ <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-yeo-primary" required>
483
  </div>
484
 
485
  <div class="mb-6">
486
  <label for="service" class="block text-gray-700 font-medium mb-2">Service concerné *</label>
487
+ <select id="service" class="w-full px-4 py-2 border border-gray-300 rounded-lg form-input focus:outline-none focus:border-yeo-primary" required>
488
  <option value="">Sélectionnez un service</option>
489
+ <option value="electrique">Électricité Industrielle</option>
490
+ <option value="electromecanique">Maintenance Électromécanique</option>
491
+ <option value="informatique">Maintenance Informatique</option>
492
+ <option value="climatisation">Climatisation & Froid</option>
 
 
493
  <option value="autre">Autre</option>
494
  </select>
495
  </div>
496
 
497
  <div class="mb-6">
498
  <label for="message" class="block text-gray-700 font-medium mb-2">Message *</label>
499
+ <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-yeo-primary" required></textarea>
500
  </div>
501
 
502
+ <button type="submit" class="w-full yeo-secondary hover-yeo-primary text-white font-bold py-3 px-4 rounded-lg transition duration-300">
503
+ <i class="fas fa-paper-plane mr-2"></i> Envoyer la demande
504
  </button>
505
  </form>
506
  </div>
 
509
  </section>
510
 
511
  <!-- CTA -->
512
+ <section class="py-16 yeo-secondary text-white">
513
  <div class="container mx-auto px-6 text-center">
514
+ <h2 class="text-2xl md:text-3xl font-bold mb-6">Un besoin en maintenance multitechnique?</h2>
515
+ <p class="text-xl mb-8 max-w-2xl mx-auto">Nos experts sont à votre écoute pour étudier votre projet et vous proposer une solution sur mesure.</p>
516
+ <a href="#contact" class="bg-white text-yeo-primary font-bold px-8 py-3 rounded-lg hover:bg-gray-100 transition duration-300 inline-block">
517
+ <i class="fas fa-calendar-check mr-2"></i> Demander un audit gratuit
518
  </a>
519
  </div>
520
  </section>
 
525
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
526
  <div>
527
  <h3 class="text-xl font-bold mb-4 flex items-center">
528
+ <i class="fas fa-cogs text-2xl mr-2"></i> YeoTech
529
  </h3>
530
+ <p class="text-gray-400">Expert en maintenance multitechnique depuis 2005. Électricité industrielle, électromécanique, informatique et climatisation.</p>
531
  </div>
532
 
533
  <div>
534
  <h4 class="text-lg font-bold mb-4">Services</h4>
535
  <ul class="space-y-2 text-gray-400">
536
+ <li><a href="#" class="hover:text-white transition">Électricité Industrielle</a></li>
537
+ <li><a href="#" class="hover:text-white transition">Maintenance Électromécanique</a></li>
538
+ <li><a href="#" class="hover:text-white transition">Maintenance Informatique</a></li>
539
+ <li><a href="#" class="hover:text-white transition">Climatisation & Froid</a></li>
540
  </ul>
541
  </div>
542
 
 
545
  <ul class="space-y-2 text-gray-400">
546
  <li><a href="#accueil" class="hover:text-white transition">Accueil</a></li>
547
  <li><a href="#services" class="hover:text-white transition">Services</a></li>
548
+ <li><a href="#expertise" class="hover:text-white transition">Expertise</a></li>
549
  <li><a href="#apropos" class="hover:text-white transition">À propos</a></li>
550
  <li><a href="#contact" class="hover:text-white transition">Contact</a></li>
551
  </ul>
 
553
 
554
  <div>
555
  <h4 class="text-lg font-bold mb-4">Newsletter</h4>
556
+ <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir nos conseils techniques et actualités.</p>
557
  <div class="flex">
558
  <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full focus:outline-none">
559
+ <button class="yeo-primary hover-yeo-primary px-4 py-2 rounded-r-lg transition">
560
  <i class="fas fa-paper-plane"></i>
561
  </button>
562
  </div>
 
564
  </div>
565
 
566
  <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center">
567
+ <p class="text-gray-400 mb-4 md:mb-0">© 2023 YeoTech. Tous droits réservés.</p>
568
  <div class="flex space-x-6">
569
  <a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a>
570
  <a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a>
 
575
  </footer>
576
 
577
  <!-- Bouton retour en haut -->
578
+ <button id="back-to-top" class="fixed bottom-8 right-8 yeo-primary text-white w-12 h-12 rounded-full shadow-lg flex items-center justify-center transition opacity-0 invisible hover:bg-blue-700">
579
  <i class="fas fa-arrow-up"></i>
580
  </button>
581
 
 
631
  if (contactForm) {
632
  contactForm.addEventListener('submit', (e) => {
633
  e.preventDefault();
634
+ alert('Merci pour votre demande! Notre équipe vous contactera rapidement.');
635
  contactForm.reset();
636
  });
637
  }
prompts.txt CHANGED
@@ -0,0 +1 @@
 
 
1
+ je veux un site du nom de prestation de services en Maintenence Electromecanique, en Maintenance Informatique, en Maintenance climatisation , en Electricite Industrielle et Général du nom de yeotech