Hugging Face's logo

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

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

Add 2 files

Browse files
Files changed (2) hide show
  1. index.html +195 -220
  2. prompts.txt +2 -1
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>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>
@@ -50,6 +50,15 @@
50
  .border-yeo-primary {
51
  border-color: #1a56db;
52
  }
 
 
 
 
 
 
 
 
 
53
  </style>
54
  </head>
55
  <body class="font-sans bg-gray-50">
@@ -62,9 +71,9 @@
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>
70
  <button class="md:hidden focus:outline-none" id="menu-btn">
@@ -75,9 +84,9 @@
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>
83
  </div>
@@ -87,19 +96,19 @@
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,92 +118,122 @@
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>
129
  </section>
130
 
131
- <!-- Services -->
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>
@@ -205,9 +244,9 @@
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">
@@ -219,84 +258,97 @@
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>
298
  </div>
299
  </div>
 
 
 
 
 
 
300
  </div>
301
  </section>
302
 
@@ -306,12 +358,12 @@
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,18 +373,18 @@
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,18 +394,18 @@
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,12 +415,12 @@
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>
@@ -382,7 +434,7 @@
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>
387
 
388
  <div class="flex flex-col md:flex-row">
@@ -435,17 +487,14 @@
435
  <div class="mt-8">
436
  <h4 class="font-bold mb-4">Suivez-nous</h4>
437
  <div class="flex space-x-4">
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>
@@ -468,8 +517,8 @@
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">
@@ -483,19 +532,19 @@
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
 
@@ -511,11 +560,16 @@
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>
521
 
@@ -527,16 +581,16 @@
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
 
@@ -544,9 +598,9 @@
544
  <h4 class="text-lg font-bold mb-4">Liens utiles</h4>
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>
552
  </div>
@@ -557,84 +611,5 @@
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>
563
- </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>
571
- <a href="#" class="text-gray-400 hover:text-white transition">CGV</a>
572
- </div>
573
- </div>
574
- </div>
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
-
582
- <script>
583
- // Menu mobile
584
- const menuBtn = document.getElementById('menu-btn');
585
- const mobileMenu = document.getElementById('mobile-menu');
586
-
587
- menuBtn.addEventListener('click', () => {
588
- mobileMenu.classList.toggle('hidden');
589
- });
590
-
591
- // Back to top button
592
- const backToTopBtn = document.getElementById('back-to-top');
593
-
594
- window.addEventListener('scroll', () => {
595
- if (window.pageYOffset > 300) {
596
- backToTopBtn.classList.remove('opacity-0', 'invisible');
597
- backToTopBtn.classList.add('opacity-100', 'visible');
598
- } else {
599
- backToTopBtn.classList.remove('opacity-100', 'visible');
600
- backToTopBtn.classList.add('opacity-0', 'invisible');
601
- }
602
- });
603
-
604
- backToTopBtn.addEventListener('click', () => {
605
- window.scrollTo({
606
- top: 0,
607
- behavior: 'smooth'
608
- });
609
- });
610
-
611
- // Animation au défilement
612
- const observerOptions = {
613
- threshold: 0.1
614
- };
615
-
616
- const observer = new IntersectionObserver((entries) => {
617
- entries.forEach(entry => {
618
- if (entry.isIntersecting) {
619
- entry.target.classList.add('animate-fadeIn');
620
- }
621
- });
622
- }, observerOptions);
623
-
624
- document.querySelectorAll('.service-card, .testimonial').forEach(card => {
625
- card.classList.add('opacity-0', 'transition-opacity', 'duration-500', 'ease-in-out');
626
- observer.observe(card);
627
- });
628
-
629
- // Gestion du formulaire
630
- const contactForm = document.querySelector('form');
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
- }
638
- </script>
639
- <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>
640
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>YeoTech - Maintenance Électromécanique 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>
 
50
  .border-yeo-primary {
51
  border-color: #1a56db;
52
  }
53
+
54
+ /* Animation d'apparition */
55
+ @keyframes fadeIn {
56
+ from { opacity: 0; transform: translateY(20px); }
57
+ to { opacity: 1; transform: translateY(0); }
58
+ }
59
+ .animate-fadeIn {
60
+ animation: fadeIn 0.8s ease-out forwards;
61
+ }
62
  </style>
63
  </head>
64
  <body class="font-sans bg-gray-50">
 
71
  </div>
72
  <div class="hidden md:flex space-x-8">
73
  <a href="#accueil" class="hover:text-blue-200 transition">Accueil</a>
74
+ <a href="#electromecanique" class="hover:text-blue-200 transition">Électromécanique</a>
75
  <a href="#expertise" class="hover:text-blue-200 transition">Expertise</a>
76
+ <a href="#realisations" class="hover:text-blue-200 transition">Réalisations</a>
77
  <a href="#contact" class="hover:text-blue-200 transition">Contact</a>
78
  </div>
79
  <button class="md:hidden focus:outline-none" id="menu-btn">
 
84
  <div class="md:hidden hidden yeo-secondary w-full" id="mobile-menu">
85
  <div class="container mx-auto px-6 py-3 flex flex-col space-y-3">
86
  <a href="#accueil" class="hover:text-blue-200 transition py-2">Accueil</a>
87
+ <a href="#electromecanique" class="hover:text-blue-200 transition py-2">Électromécanique</a>
88
  <a href="#expertise" class="hover:text-blue-200 transition py-2">Expertise</a>
89
+ <a href="#realisations" class="hover:text-blue-200 transition py-2">Réalisations</a>
90
  <a href="#contact" class="hover:text-blue-200 transition py-2">Contact</a>
91
  </div>
92
  </div>
 
96
  <section id="accueil" class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-20">
97
  <div class="container mx-auto px-6 flex flex-col md:flex-row items-center">
98
  <div class="md:w-1/2 mb-10 md:mb-0">
99
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Expert en Maintenance Électromécanique</h1>
100
+ <p class="text-xl mb-8">YeoTech offre des solutions professionnelles pour la maintenance préventive et corrective de vos équipements électromécaniques industriels.</p>
101
  <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
102
  <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">
103
  <i class="fas fa-phone-alt mr-2"></i> Contactez-nous
104
  </a>
105
+ <a href="#electromecanique" class="border-2 border-white text-white font-bold px-6 py-3 rounded-lg hover:bg-blue-600 transition duration-300 text-center">
106
+ <i class="fas fa-cogs mr-2"></i> Nos solutions
107
  </a>
108
  </div>
109
  </div>
110
  <div class="md:w-1/2 flex justify-center">
111
+ <img src="https://images.unsplash.com/photo-1597852074816-d933c7d2b988?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Technicien électromécanique" class="rounded-lg shadow-2xl max-w-full h-auto">
112
  </div>
113
  </div>
114
  </section>
 
118
  <div class="container mx-auto px-6">
119
  <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center">
120
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
121
+ <div class="text-yeo-primary text-4xl font-bold mb-2">15+</div>
122
+ <div class="text-gray-600">Années d'expertise</div>
123
  </div>
124
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
125
+ <div class="text-yeo-primary text-4xl font-bold mb-2">500+</div>
126
+ <div class="text-gray-600">Machines maintenues</div>
127
  </div>
128
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
129
+ <div class="text-yeo-primary text-4xl font-bold mb-2">30+</div>
130
+ <div class="text-gray-600">Techniciens spécialisés</div>
131
  </div>
132
  <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition">
133
+ <div class="text-yeo-primary text-4xl font-bold mb-2">98%</div>
134
+ <div class="text-gray-600">Taux de satisfaction</div>
135
  </div>
136
  </div>
137
  </div>
138
  </section>
139
 
140
+ <!-- Section Électromécanique -->
141
+ <section id="electromecanique" class="py-20 bg-gray-100">
142
  <div class="container mx-auto px-6">
143
  <div class="text-center mb-16">
144
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Maintenance Électromécanique</h2>
145
  <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
146
+ <p class="text-gray-600 max-w-2xl mx-auto">Nos services complets en maintenance électromécanique couvrent tous vos besoins industriels, de la prévention à l'intervention d'urgence.</p>
147
  </div>
148
 
149
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
150
  <!-- Service 1 -->
151
+ <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0">
152
  <div class="text-yeo-primary text-4xl mb-4">
153
+ <i class="fas fa-tools"></i>
154
  </div>
155
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Préventive</h3>
156
+ <p class="text-gray-600 mb-4">Programmes de maintenance planifiée pour maximiser la durée de vie et les performances de vos équipements.</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> Vérifications périodiques</li>
159
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Lubrification et graissage</li>
160
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Contrôle d'usure</li>
161
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Rapport détaillé</li>
162
  </ul>
163
  </div>
164
 
165
  <!-- Service 2 -->
166
+ <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0">
167
  <div class="text-yeo-primary text-4xl mb-4">
168
+ <i class="fas fa-wrench"></i>
169
  </div>
170
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Corrective</h3>
171
+ <p class="text-gray-600 mb-4">Interventions rapides et efficaces pour réparer vos équipements électromécaniques en panne.</p>
172
  <ul class="text-gray-600 space-y-2">
173
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Diagnostic précis</li>
174
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Réparation sur site</li>
175
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Pièces de rechange</li>
176
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Service d'urgence 24/7</li>
177
  </ul>
178
  </div>
179
 
180
  <!-- Service 3 -->
181
+ <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0">
182
  <div class="text-yeo-primary text-4xl mb-4">
183
+ <i class="fas fa-robot"></i>
184
  </div>
185
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Automatismes Industriels</h3>
186
+ <p class="text-gray-600 mb-4">Maintenance et optimisation de vos systèmes automatisés et lignes de production.</p>
187
  <ul class="text-gray-600 space-y-2">
188
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Automates programmables</li>
189
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Variateurs de vitesse</li>
190
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Capteurs et actionneurs</li>
191
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mise à jour logicielle</li>
192
  </ul>
193
  </div>
194
 
195
  <!-- Service 4 -->
196
+ <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0">
197
+ <div class="text-yeo-primary text-4xl mb-4">
198
+ <i class="fas fa-tachometer-alt"></i>
199
+ </div>
200
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Amélioration Continue</h3>
201
+ <p class="text-gray-600 mb-4">Optimisation des performances de vos installations électromécaniques.</p>
202
+ <ul class="text-gray-600 space-y-2">
203
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Analyse des vibrations</li>
204
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Thermographie infrarouge</li>
205
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Audit énergétique</li>
206
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Préconisations techniques</li>
207
+ </ul>
208
+ </div>
209
+
210
+ <!-- Service 5 -->
211
+ <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0">
212
+ <div class="text-yeo-primary text-4xl mb-4">
213
+ <i class="fas fa-cogs"></i>
214
+ </div>
215
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Motorisations Industrielles</h3>
216
+ <p class="text-gray-600 mb-4">Maintenance de tous types de moteurs électriques et systèmes d'entraînement.</p>
217
+ <ul class="text-gray-600 space-y-2">
218
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Moteurs asynchrones</li>
219
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Moteurs à courant continu</li>
220
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Réducteurs et variateurs</li>
221
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Alignement laser</li>
222
+ </ul>
223
+ </div>
224
+
225
+ <!-- Service 6 -->
226
+ <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0">
227
  <div class="text-yeo-primary text-4xl mb-4">
228
+ <i class="fas fa-conveyor-belt"></i>
229
  </div>
230
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Systèmes de Convoyage</h3>
231
+ <p class="text-gray-600 mb-4">Maintenance de vos convoyeurs et systèmes de manutention mécanique.</p>
232
  <ul class="text-gray-600 space-y-2">
233
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Convoyeurs à bande</li>
234
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Convoyeurs à rouleaux</li>
235
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Chaînes et pignons</li>
236
+ <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Maintenance prédictive</li>
237
  </ul>
238
  </div>
239
  </div>
 
244
  <section id="expertise" class="py-20 bg-white">
245
  <div class="container mx-auto px-6">
246
  <div class="text-center mb-16">
247
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Notre Expertise en Électromécanique</h2>
248
  <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
249
+ <p class="text-gray-600 max-w-2xl mx-auto">YeoTech combine savoir-faire technique et innovation pour vous offrir des solutions sur mesure en maintenance électromécanique.</p>
250
  </div>
251
 
252
  <div class="flex flex-col md:flex-row items-center">
 
258
  </div>
259
  <div>
260
  <h3 class="text-xl font-bold text-gray-800 mb-2">Certifications & Qualifications</h3>
261
+ <p class="text-gray-600">Nos techniciens possèdent toutes les certifications requises (Qualifelec, habilitation électrique, formation mécanique avancée) et suivent des formations continues pour rester à la pointe.</p>
262
  </div>
263
  </div>
264
 
265
  <div class="flex items-start">
266
  <div class="bg-blue-100 p-3 rounded-full mr-4">
267
+ <i class="fas fa-tools text-yeo-primary text-xl"></i>
268
  </div>
269
  <div>
270
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Équipements de Pointe</h3>
271
+ <p class="text-gray-600">Nous utilisons des outils de diagnostic avancés (analyseur de vibrations, caméra thermique, oscilloscope numérique) pour des interventions précises et rapides.</p>
272
  </div>
273
  </div>
274
 
275
  <div class="flex items-start">
276
  <div class="bg-blue-100 p-3 rounded-full mr-4">
277
+ <i class="fas fa-industry text-yeo-primary text-xl"></i>
278
  </div>
279
  <div>
280
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Expérience Sectorielle</h3>
281
+ <p class="text-gray-600">Notre expertise couvre divers secteurs industriels : agroalimentaire, pharmaceutique, automobile, aéronautique, énergie et bien d'autres.</p>
282
  </div>
283
  </div>
284
  </div>
285
  </div>
286
 
287
  <div class="md:w-1/2">
288
+ <img src="https://images.unsplash.com/photo-1517048676732-d65bc373fdb4?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Expertise électromécanique" class="rounded-lg shadow-xl w-full">
289
  </div>
290
  </div>
291
  </div>
292
  </section>
293
 
294
+ <!-- Réalisations -->
295
+ <section id="realisations" class="py-20 bg-gray-100">
296
  <div class="container mx-auto px-6">
297
+ <div class="text-center mb-16">
298
+ <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nos Réalisations en Électromécanique</h2>
299
+ <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
300
+ <p class="text-gray-600 max-w-2xl mx-auto">Découvrez quelques-uns de nos projets récents en maintenance électromécanique industrielle.</p>
301
+ </div>
302
+
303
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
304
+ <!-- Projet 1 -->
305
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg service-card opacity-0">
306
+ <img src="https://images.unsplash.com/photo-1581092918056-0c4c3acd3789?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Maintenance ligne de production" class="w-full h-48 object-cover">
307
+ <div class="p-6">
308
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Maintenance Ligne de Production</h3>
309
+ <p class="text-gray-600 mb-4">Contrat de maintenance complète pour une ligne de production automatisée dans l'industrie agroalimentaire.</p>
310
+ <div class="flex flex-wrap gap-2">
311
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Maintenance préventive</span>
312
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Automatismes</span>
313
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Convoyeurs</span>
 
314
  </div>
315
+ </div>
316
+ </div>
317
+
318
+ <!-- Projet 2 -->
319
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg service-card opacity-0">
320
+ <img src="https://images.unsplash.com/photo-1581093057302-7b1a9648ce7b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Optimisation moteurs électriques" class="w-full h-48 object-cover">
321
+ <div class="p-6">
322
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Optimisation Moteurs Électriques</h3>
323
+ <p class="text-gray-600 mb-4">Audit et optimisation de 35 moteurs électriques sur un site industriel, avec gain énergétique de 18%.</p>
324
+ <div class="flex flex-wrap gap-2">
325
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Motorisations</span>
326
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Économie d'énergie</span>
327
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Variateurs</span>
328
  </div>
329
+ </div>
330
+ </div>
331
+
332
+ <!-- Projet 3 -->
333
+ <div class="bg-white rounded-xl overflow-hidden shadow-lg service-card opacity-0">
334
+ <img src="https://images.unsplash.com/photo-1581093057922-725b0b5e7ce1?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Dépannage urgent" class="w-full h-48 object-cover">
335
+ <div class="p-6">
336
+ <h3 class="text-xl font-bold text-gray-800 mb-2">Dépannage Urgent Centrale de Production</h3>
337
+ <p class="text-gray-600 mb-4">Intervention d'urgence pour réparation d'un arbre de transmission sur une centrale de production, avec remise en service en 6 heures.</p>
338
+ <div class="flex flex-wrap gap-2">
339
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dépannage</span>
340
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Urgence</span>
341
+ <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Transmission</span>
342
  </div>
343
  </div>
344
  </div>
345
  </div>
346
+
347
+ <div class="text-center mt-12">
348
+ <a href="#contact" class="inline-block yeo-primary hover-yeo-primary text-white font-bold py-3 px-6 rounded-lg transition duration-300">
349
+ <i class="fas fa-envelope mr-2"></i> Demander un devis pour votre projet
350
+ </a>
351
+ </div>
352
  </div>
353
  </section>
354
 
 
358
  <div class="text-center mb-16">
359
  <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Ils nous font confiance</h2>
360
  <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div>
361
+ <p class="text-gray-600 max-w-2xl mx-auto">Ce que nos clients disent de nos services en maintenance électromécanique.</p>
362
  </div>
363
 
364
  <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
365
  <!-- Témoignage 1 -->
366
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md opacity-0">
367
  <div class="flex items-center mb-4">
368
  <div class="text-yellow-400 text-xl">
369
  <i class="fas fa-star"></i>
 
373
  <i class="fas fa-star"></i>
374
  </div>
375
  </div>
376
+ <p class="text-gray-600 italic mb-6">"YeoTech gère notre maintenance électromécanique depuis 3 ans. Leur contrat de maintenance préventive nous a permis de réduire nos arrêts imprévus de 65%."</p>
377
  <div class="flex items-center">
378
  <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
379
  <div>
380
  <h4 class="font-bold text-gray-800">Pierre Lambert</h4>
381
+ <p class="text-gray-600 text-sm">Directeur Maintenance, Industrie Pharmaceutique</p>
382
  </div>
383
  </div>
384
  </div>
385
 
386
  <!-- Témoignage 2 -->
387
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md opacity-0">
388
  <div class="flex items-center mb-4">
389
  <div class="text-yellow-400 text-xl">
390
  <i class="fas fa-star"></i>
 
394
  <i class="fas fa-star"></i>
395
  </div>
396
  </div>
397
+ <p class="text-gray-600 italic mb-6">"Intervention rapide et efficace sur notre ligne de convoyage en panne. Le technicien a diagnostiqué et résolu le problème en moins de 2 heures."</p>
398
  <div class="flex items-center">
399
  <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
400
  <div>
401
  <h4 class="font-bold text-gray-800">Sophie Durand</h4>
402
+ <p class="text-gray-600 text-sm">Responsable Production, Logistique</p>
403
  </div>
404
  </div>
405
  </div>
406
 
407
  <!-- Témoignage 3 -->
408
+ <div class="bg-gray-50 p-8 rounded-xl shadow-md opacity-0">
409
  <div class="flex items-center mb-4">
410
  <div class="text-yellow-400 text-xl">
411
  <i class="fas fa-star"></i>
 
415
  <i class="fas fa-star-half-alt"></i>
416
  </div>
417
  </div>
418
+ <p class="text-gray-600 italic mb-6">"L'audit électromécanique réalisé par YeoTech nous a permis d'identifier des économies potentielles de 25 000€/an sur nos coûts de maintenance."</p>
419
  <div class="flex items-center">
420
  <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4">
421
  <div>
422
  <h4 class="font-bold text-gray-800">Thomas Moreau</h4>
423
+ <p class="text-gray-600 text-sm">Directeur d'Usine, Industrie Automobile</p>
424
  </div>
425
  </div>
426
  </div>
 
434
  <div class="text-center mb-16">
435
  <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez YeoTech</h2>
436
  <div class="w-20 h-1 bg-white mx-auto mb-6"></div>
437
+ <p class="max-w-2xl mx-auto">Notre équipe est à votre disposition pour répondre à toutes vos questions sur nos services de maintenance électromécanique.</p>
438
  </div>
439
 
440
  <div class="flex flex-col md:flex-row">
 
487
  <div class="mt-8">
488
  <h4 class="font-bold mb-4">Suivez-nous</h4>
489
  <div class="flex space-x-4">
 
 
 
490
  <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
491
  <i class="fab fa-linkedin-in"></i>
492
  </a>
493
  <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
494
+ <i class="fab fa-youtube"></i>
495
  </a>
496
  <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition">
497
+ <i class="fab fa-twitter"></i>
498
  </a>
499
  </div>
500
  </div>
 
517
  </div>
518
 
519
  <div class="mb-6">
520
+ <label for="entreprise" class="block text-gray-700 font-medium mb-2">Entreprise *</label>
521
+ <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" required>
522
  </div>
523
 
524
  <div class="mb-6">
 
532
  </div>
533
 
534
  <div class="mb-6">
535
+ <label for="service" class="block text-gray-700 font-medium mb-2">Type de besoin *</label>
536
  <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>
537
+ <option value="">Sélectionnez une option</option>
538
+ <option value="preventive">Maintenance préventive</option>
539
+ <option value="corrective">Maintenance corrective</option>
540
+ <option value="audit">Audit électromécanique</option>
541
+ <option value="formation">Formation technique</option>
542
+ <option value="autre">Autre demande</option>
543
  </select>
544
  </div>
545
 
546
  <div class="mb-6">
547
+ <label for="message" class="block text-gray-700 font-medium mb-2">Description de votre besoin *</label>
548
  <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>
549
  </div>
550
 
 
560
  <!-- CTA -->
561
  <section class="py-16 yeo-secondary text-white">
562
  <div class="container mx-auto px-6 text-center">
563
+ <h2 class="text-2xl md:text-3xl font-bold mb-6">Un besoin en maintenance électromécanique?</h2>
564
  <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>
565
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
566
+ <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">
567
+ <i class="fas fa-phone-alt mr-2"></i> Appelez-nous
568
+ </a>
569
+ <a href="#contact" class="border-2 border-white text-white font-bold px-8 py-3 rounded-lg hover:bg-white hover:bg-opacity-10 transition duration-300 inline-block">
570
+ <i class="fas fa-envelope mr-2"></i> Envoyez un email
571
+ </a>
572
+ </div>
573
  </div>
574
  </section>
575
 
 
581
  <h3 class="text-xl font-bold mb-4 flex items-center">
582
  <i class="fas fa-cogs text-2xl mr-2"></i> YeoTech
583
  </h3>
584
+ <p class="text-gray-400">Expert en maintenance électromécanique industrielle depuis 2008. Interventions préventives et correctives sur tout type d'équipements.</p>
585
  </div>
586
 
587
  <div>
588
  <h4 class="text-lg font-bold mb-4">Services</h4>
589
  <ul class="space-y-2 text-gray-400">
590
+ <li><a href="#electromecanique" class="hover:text-white transition">Maintenance Préventive</a></li>
591
+ <li><a href="#electromecanique" class="hover:text-white transition">Maintenance Corrective</a></li>
592
+ <li><a href="#electromecanique" class="hover:text-white transition">Automatismes Industriels</a></li>
593
+ <li><a href="#electromecanique" class="hover:text-white transition">Motorisations</a></li>
594
  </ul>
595
  </div>
596
 
 
598
  <h4 class="text-lg font-bold mb-4">Liens utiles</h4>
599
  <ul class="space-y-2 text-gray-400">
600
  <li><a href="#accueil" class="hover:text-white transition">Accueil</a></li>
601
+ <li><a href="#electromecanique" class="hover:text-white transition">Électromécanique</a></li>
602
  <li><a href="#expertise" class="hover:text-white transition">Expertise</a></li>
603
+ <li><a href="#realisations" class="hover:text-white transition">Réalisations</a></li>
604
  <li><a href="#contact" class="hover:text-white transition">Contact</a></li>
605
  </ul>
606
  </div>
 
611
  <div class="flex">
612
  <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full focus:outline-none">
613
  <button class="yeo-primary hover-yeo-primary px-4 py-2 rounded-r-lg transition">
614
+ <i class="fas fa
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
615
  </html>
prompts.txt CHANGED
@@ -1 +1,2 @@
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
 
 
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
2
+ electromecanique