| | <!DOCTYPE html> |
| | <html lang="fr"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>YeoTech - Maintenance Électromécanique Professionnelle</title> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| | <style> |
| | |
| | @keyframes pulse { |
| | 0%, 100% { transform: scale(1); } |
| | 50% { transform: scale(1.05); } |
| | } |
| | .pulse-animation { |
| | animation: pulse 2s infinite; |
| | } |
| | |
| | |
| | .service-card { |
| | transition: all 0.3s ease; |
| | } |
| | .service-card:hover { |
| | transform: translateY(-5px); |
| | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); |
| | } |
| | |
| | |
| | .form-input { |
| | transition: all 0.3s ease; |
| | } |
| | .form-input:focus { |
| | border-color: #3b82f6; |
| | box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); |
| | } |
| | |
| | |
| | .yeo-primary { |
| | background-color: #1a56db; |
| | } |
| | .yeo-secondary { |
| | background-color: #1e429f; |
| | } |
| | .hover-yeo-primary:hover { |
| | background-color: #1e40af; |
| | } |
| | .text-yeo-primary { |
| | color: #1a56db; |
| | } |
| | .border-yeo-primary { |
| | border-color: #1a56db; |
| | } |
| | |
| | |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(20px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | .animate-fadeIn { |
| | animation: fadeIn 0.8s ease-out forwards; |
| | } |
| | </style> |
| | </head> |
| | <body class="font-sans bg-gray-50"> |
| | |
| | <nav class="yeo-primary text-white shadow-lg sticky top-0 z-50"> |
| | <div class="container mx-auto px-6 py-3 flex justify-between items-center"> |
| | <div class="flex items-center space-x-4"> |
| | <i class="fas fa-cogs text-2xl"></i> |
| | <span class="font-bold text-xl">YeoTech</span> |
| | </div> |
| | <div class="hidden md:flex space-x-8"> |
| | <a href="#accueil" class="hover:text-blue-200 transition">Accueil</a> |
| | <a href="#electromecanique" class="hover:text-blue-200 transition">Électromécanique</a> |
| | <a href="#expertise" class="hover:text-blue-200 transition">Expertise</a> |
| | <a href="#realisations" class="hover:text-blue-200 transition">Réalisations</a> |
| | <a href="#contact" class="hover:text-blue-200 transition">Contact</a> |
| | </div> |
| | <button class="md:hidden focus:outline-none" id="menu-btn"> |
| | <i class="fas fa-bars text-2xl"></i> |
| | </button> |
| | </div> |
| | |
| | <div class="md:hidden hidden yeo-secondary w-full" id="mobile-menu"> |
| | <div class="container mx-auto px-6 py-3 flex flex-col space-y-3"> |
| | <a href="#accueil" class="hover:text-blue-200 transition py-2">Accueil</a> |
| | <a href="#electromecanique" class="hover:text-blue-200 transition py-2">Électromécanique</a> |
| | <a href="#expertise" class="hover:text-blue-200 transition py-2">Expertise</a> |
| | <a href="#realisations" class="hover:text-blue-200 transition py-2">Réalisations</a> |
| | <a href="#contact" class="hover:text-blue-200 transition py-2">Contact</a> |
| | </div> |
| | </div> |
| | </nav> |
| |
|
| | |
| | <section id="accueil" class="bg-gradient-to-r from-blue-900 to-blue-700 text-white py-20"> |
| | <div class="container mx-auto px-6 flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-10 md:mb-0"> |
| | <h1 class="text-4xl md:text-5xl font-bold mb-6">Expert en Maintenance Électromécanique</h1> |
| | <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> |
| | <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <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"> |
| | <i class="fas fa-phone-alt mr-2"></i> Contactez-nous |
| | </a> |
| | <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"> |
| | <i class="fas fa-cogs mr-2"></i> Nos solutions |
| | </a> |
| | </div> |
| | </div> |
| | <div class="md:w-1/2 flex justify-center"> |
| | <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"> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="bg-white py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8 text-center"> |
| | <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition"> |
| | <div class="text-yeo-primary text-4xl font-bold mb-2">15+</div> |
| | <div class="text-gray-600">Années d'expertise</div> |
| | </div> |
| | <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition"> |
| | <div class="text-yeo-primary text-4xl font-bold mb-2">500+</div> |
| | <div class="text-gray-600">Machines maintenues</div> |
| | </div> |
| | <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition"> |
| | <div class="text-yeo-primary text-4xl font-bold mb-2">30+</div> |
| | <div class="text-gray-600">Techniciens spécialisés</div> |
| | </div> |
| | <div class="p-6 border border-gray-200 rounded-lg hover:shadow-lg transition"> |
| | <div class="text-yeo-primary text-4xl font-bold mb-2">98%</div> |
| | <div class="text-gray-600">Taux de satisfaction</div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="electromecanique" class="py-20 bg-gray-100"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Maintenance Électromécanique</h2> |
| | <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div> |
| | <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> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0"> |
| | <div class="text-yeo-primary text-4xl mb-4"> |
| | <i class="fas fa-tools"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Préventive</h3> |
| | <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> |
| | <ul class="text-gray-600 space-y-2"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Vérifications périodiques</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Lubrification et graissage</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Contrôle d'usure</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Rapport détaillé</li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0"> |
| | <div class="text-yeo-primary text-4xl mb-4"> |
| | <i class="fas fa-wrench"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-3">Maintenance Corrective</h3> |
| | <p class="text-gray-600 mb-4">Interventions rapides et efficaces pour réparer vos équipements électromécaniques en panne.</p> |
| | <ul class="text-gray-600 space-y-2"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Diagnostic précis</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Réparation sur site</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Pièces de rechange</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Service d'urgence 24/7</li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0"> |
| | <div class="text-yeo-primary text-4xl mb-4"> |
| | <i class="fas fa-robot"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-3">Automatismes Industriels</h3> |
| | <p class="text-gray-600 mb-4">Maintenance et optimisation de vos systèmes automatisés et lignes de production.</p> |
| | <ul class="text-gray-600 space-y-2"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Automates programmables</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Variateurs de vitesse</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Capteurs et actionneurs</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Mise à jour logicielle</li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0"> |
| | <div class="text-yeo-primary text-4xl mb-4"> |
| | <i class="fas fa-tachometer-alt"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-3">Amélioration Continue</h3> |
| | <p class="text-gray-600 mb-4">Optimisation des performances de vos installations électromécaniques.</p> |
| | <ul class="text-gray-600 space-y-2"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Analyse des vibrations</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Thermographie infrarouge</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Audit énergétique</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Préconisations techniques</li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0"> |
| | <div class="text-yeo-primary text-4xl mb-4"> |
| | <i class="fas fa-cogs"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-3">Motorisations Industrielles</h3> |
| | <p class="text-gray-600 mb-4">Maintenance de tous types de moteurs électriques et systèmes d'entraînement.</p> |
| | <ul class="text-gray-600 space-y-2"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Moteurs asynchrones</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Moteurs à courant continu</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Réducteurs et variateurs</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Alignement laser</li> |
| | </ul> |
| | </div> |
| | |
| | |
| | <div class="bg-white p-8 rounded-xl shadow-md service-card opacity-0"> |
| | <div class="text-yeo-primary text-4xl mb-4"> |
| | <i class="fas fa-conveyor-belt"></i> |
| | </div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-3">Systèmes de Convoyage</h3> |
| | <p class="text-gray-600 mb-4">Maintenance de vos convoyeurs et systèmes de manutention mécanique.</p> |
| | <ul class="text-gray-600 space-y-2"> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Convoyeurs à bande</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Convoyeurs à rouleaux</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Chaînes et pignons</li> |
| | <li class="flex items-center"><i class="fas fa-check-circle text-green-500 mr-2"></i> Maintenance prédictive</li> |
| | </ul> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="expertise" class="py-20 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Notre Expertise en Électromécanique</h2> |
| | <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div> |
| | <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> |
| | </div> |
| | |
| | <div class="flex flex-col md:flex-row items-center"> |
| | <div class="md:w-1/2 mb-10 md:mb-0 md:pr-12"> |
| | <div class="space-y-8"> |
| | <div class="flex items-start"> |
| | <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| | <i class="fas fa-certificate text-yeo-primary text-xl"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-2">Certifications & Qualifications</h3> |
| | <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> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| | <i class="fas fa-tools text-yeo-primary text-xl"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-2">Équipements de Pointe</h3> |
| | <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> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="bg-blue-100 p-3 rounded-full mr-4"> |
| | <i class="fas fa-industry text-yeo-primary text-xl"></i> |
| | </div> |
| | <div> |
| | <h3 class="text-xl font-bold text-gray-800 mb-2">Expérience Sectorielle</h3> |
| | <p class="text-gray-600">Notre expertise couvre divers secteurs industriels : agroalimentaire, pharmaceutique, automobile, aéronautique, énergie et bien d'autres.</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="md:w-1/2"> |
| | <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"> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="realisations" class="py-20 bg-gray-100"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Nos Réalisations en Électromécanique</h2> |
| | <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div> |
| | <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> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-white rounded-xl overflow-hidden shadow-lg service-card opacity-0"> |
| | <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"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold text-gray-800 mb-2">Maintenance Ligne de Production</h3> |
| | <p class="text-gray-600 mb-4">Contrat de maintenance complète pour une ligne de production automatisée dans l'industrie agroalimentaire.</p> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Maintenance préventive</span> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Automatismes</span> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Convoyeurs</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl overflow-hidden shadow-lg service-card opacity-0"> |
| | <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"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold text-gray-800 mb-2">Optimisation Moteurs Électriques</h3> |
| | <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> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Motorisations</span> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Économie d'énergie</span> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Variateurs</span> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-white rounded-xl overflow-hidden shadow-lg service-card opacity-0"> |
| | <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"> |
| | <div class="p-6"> |
| | <h3 class="text-xl font-bold text-gray-800 mb-2">Dépannage Urgent Centrale de Production</h3> |
| | <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> |
| | <div class="flex flex-wrap gap-2"> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Dépannage</span> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Urgence</span> |
| | <span class="bg-blue-100 text-blue-800 text-xs px-3 py-1 rounded-full">Transmission</span> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="text-center mt-12"> |
| | <a href="#contact" class="inline-block yeo-primary hover-yeo-primary text-white font-bold py-3 px-6 rounded-lg transition duration-300"> |
| | <i class="fas fa-envelope mr-2"></i> Demander un devis pour votre projet |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-20 bg-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Ils nous font confiance</h2> |
| | <div class="w-20 h-1 bg-yeo-primary mx-auto mb-6"></div> |
| | <p class="text-gray-600 max-w-2xl mx-auto">Ce que nos clients disent de nos services en maintenance électromécanique.</p> |
| | </div> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl shadow-md opacity-0"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-yellow-400 text-xl"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | <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> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-bold text-gray-800">Pierre Lambert</h4> |
| | <p class="text-gray-600 text-sm">Directeur Maintenance, Industrie Pharmaceutique</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl shadow-md opacity-0"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-yellow-400 text-xl"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | </div> |
| | </div> |
| | <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> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-bold text-gray-800">Sophie Durand</h4> |
| | <p class="text-gray-600 text-sm">Responsable Production, Logistique</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | |
| | <div class="bg-gray-50 p-8 rounded-xl shadow-md opacity-0"> |
| | <div class="flex items-center mb-4"> |
| | <div class="text-yellow-400 text-xl"> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star"></i> |
| | <i class="fas fa-star-half-alt"></i> |
| | </div> |
| | </div> |
| | <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> |
| | <div class="flex items-center"> |
| | <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> |
| | <div> |
| | <h4 class="font-bold text-gray-800">Thomas Moreau</h4> |
| | <p class="text-gray-600 text-sm">Directeur d'Usine, Industrie Automobile</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section id="contact" class="py-20 yeo-primary text-white"> |
| | <div class="container mx-auto px-6"> |
| | <div class="text-center mb-16"> |
| | <h2 class="text-3xl md:text-4xl font-bold mb-4">Contactez YeoTech</h2> |
| | <div class="w-20 h-1 bg-white mx-auto mb-6"></div> |
| | <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> |
| | </div> |
| | |
| | <div class="flex flex-col md:flex-row"> |
| | <div class="md:w-1/2 mb-10 md:mb-0 md:pr-8"> |
| | <div class="bg-white bg-opacity-10 p-8 rounded-xl backdrop-blur-sm"> |
| | <h3 class="text-xl font-bold mb-6">Coordonnées</h3> |
| | |
| | <div class="space-y-6"> |
| | <div class="flex items-start"> |
| | <div class="mr-4 mt-1"> |
| | <i class="fas fa-map-marker-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-bold mb-1">Adresse</h4> |
| | <p>Parc Technologique YeoTech<br>31000 Toulouse, France</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="mr-4 mt-1"> |
| | <i class="fas fa-phone-alt"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-bold mb-1">Téléphone</h4> |
| | <p>05 61 23 45 67<br>Urgences: 06 12 34 56 78</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="mr-4 mt-1"> |
| | <i class="fas fa-envelope"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-bold mb-1">Email</h4> |
| | <p>contact@yeotech.fr<br>support@yeotech.fr</p> |
| | </div> |
| | </div> |
| | |
| | <div class="flex items-start"> |
| | <div class="mr-4 mt-1"> |
| | <i class="fas fa-clock"></i> |
| | </div> |
| | <div> |
| | <h4 class="font-bold mb-1">Horaires</h4> |
| | <p>Lundi-Vendredi: 7h-19h<br>Samedi: 8h-12h<br>Urgences: 24h/24 7j/7</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="mt-8"> |
| | <h4 class="font-bold mb-4">Suivez-nous</h4> |
| | <div class="flex space-x-4"> |
| | <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| | <i class="fab fa-linkedin-in"></i> |
| | </a> |
| | <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| | <i class="fab fa-youtube"></i> |
| | </a> |
| | <a href="#" class="bg-white bg-opacity-20 hover:bg-opacity-30 w-10 h-10 rounded-full flex items-center justify-center transition"> |
| | <i class="fab fa-twitter"></i> |
| | </a> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div class="md:w-1/2"> |
| | <form class="bg-white text-gray-800 p-8 rounded-xl shadow-xl"> |
| | <h3 class="text-xl font-bold mb-6">Demande de devis</h3> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| | <div> |
| | <label for="nom" class="block text-gray-700 font-medium mb-2">Nom *</label> |
| | <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> |
| | </div> |
| | <div> |
| | <label for="prenom" class="block text-gray-700 font-medium mb-2">Prénom *</label> |
| | <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> |
| | </div> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="entreprise" class="block text-gray-700 font-medium mb-2">Entreprise *</label> |
| | <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> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="email" class="block text-gray-700 font-medium mb-2">Email *</label> |
| | <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> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="telephone" class="block text-gray-700 font-medium mb-2">Téléphone *</label> |
| | <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> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="service" class="block text-gray-700 font-medium mb-2">Type de besoin *</label> |
| | <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> |
| | <option value="">Sélectionnez une option</option> |
| | <option value="preventive">Maintenance préventive</option> |
| | <option value="corrective">Maintenance corrective</option> |
| | <option value="audit">Audit électromécanique</option> |
| | <option value="formation">Formation technique</option> |
| | <option value="autre">Autre demande</option> |
| | </select> |
| | </div> |
| | |
| | <div class="mb-6"> |
| | <label for="message" class="block text-gray-700 font-medium mb-2">Description de votre besoin *</label> |
| | <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> |
| | </div> |
| | |
| | <button type="submit" class="w-full yeo-secondary hover-yeo-primary text-white font-bold py-3 px-4 rounded-lg transition duration-300"> |
| | <i class="fas fa-paper-plane mr-2"></i> Envoyer la demande |
| | </button> |
| | </form> |
| | </div> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <section class="py-16 yeo-secondary text-white"> |
| | <div class="container mx-auto px-6 text-center"> |
| | <h2 class="text-2xl md:text-3xl font-bold mb-6">Un besoin en maintenance électromécanique?</h2> |
| | <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> |
| | <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| | <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"> |
| | <i class="fas fa-phone-alt mr-2"></i> Appelez-nous |
| | </a> |
| | <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"> |
| | <i class="fas fa-envelope mr-2"></i> Envoyez un email |
| | </a> |
| | </div> |
| | </div> |
| | </section> |
| |
|
| | |
| | <footer class="bg-gray-900 text-white py-12"> |
| | <div class="container mx-auto px-6"> |
| | <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> |
| | <div> |
| | <h3 class="text-xl font-bold mb-4 flex items-center"> |
| | <i class="fas fa-cogs text-2xl mr-2"></i> YeoTech |
| | </h3> |
| | <p class="text-gray-400">Expert en maintenance électromécanique industrielle depuis 2008. Interventions préventives et correctives sur tout type d'équipements.</p> |
| | </div> |
| | |
| | <div> |
| | <h4 class="text-lg font-bold mb-4">Services</h4> |
| | <ul class="space-y-2 text-gray-400"> |
| | <li><a href="#electromecanique" class="hover:text-white transition">Maintenance Préventive</a></li> |
| | <li><a href="#electromecanique" class="hover:text-white transition">Maintenance Corrective</a></li> |
| | <li><a href="#electromecanique" class="hover:text-white transition">Automatismes Industriels</a></li> |
| | <li><a href="#electromecanique" class="hover:text-white transition">Motorisations</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h4 class="text-lg font-bold mb-4">Liens utiles</h4> |
| | <ul class="space-y-2 text-gray-400"> |
| | <li><a href="#accueil" class="hover:text-white transition">Accueil</a></li> |
| | <li><a href="#electromecanique" class="hover:text-white transition">Électromécanique</a></li> |
| | <li><a href="#expertise" class="hover:text-white transition">Expertise</a></li> |
| | <li><a href="#realisations" class="hover:text-white transition">Réalisations</a></li> |
| | <li><a href="#contact" class="hover:text-white transition">Contact</a></li> |
| | </ul> |
| | </div> |
| | |
| | <div> |
| | <h4 class="text-lg font-bold mb-4">Newsletter</h4> |
| | <p class="text-gray-400 mb-4">Abonnez-vous pour recevoir nos conseils techniques et actualités.</p> |
| | <div class="flex"> |
| | <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg text-gray-800 w-full focus:outline-none"> |
| | <button class="yeo-primary hover-yeo-primary px-4 py-2 rounded-r-lg transition"> |
| | <i class="fas fa |
| | </html> |
