📄 PRD – Site web pour garage spécialisé en pompes à injection diesel 🧾 1. Contexte du projet Electrodiesel Baia est un garagiste indépendant spécialisé dans la réparation et la reprogrammation de pompes à injection diesel, souhaitant disposer d’un site web professionnel, simple, moderne et sécurisé. Objectif : présenter ses services, gagner en visibilité, et générer des demandes de contact/devis ou de rendez-vous. 🎯 2. Objectifs fonctionnels ✅ Objectifs principaux : • Présenter clairement l’activité (services + expertise spécifique) • Crédibiliser le garage (avis, photos, certifications…) • Faciliter la prise de contact et de rendez-vous • Permettre au client de demander un devis en ligne • Optimiser le site pour un bon référencement local SEO 🗂 3. Fonctionnalités attendues 🔹 Pages principales : 1. Accueil • Présentation rapide • Services en avant • Call-to-action "Demander un devis" / "Prendre RDV" 2. À propos • Parcours du garagiste • Expertise sur les pompes à injection • Certifications et marques couvertes 3. Services • Diagnostic électronique • Réparation pompe à injection • Reprogrammation / calibrage • Entretien général4. Avis clients (témoignages manuels ou Google intégrés) 5. Devis en ligne (formulaire interactif avec : • Type de véhicule • Symptômes rencontrés • Téléchargement de photos • Coordonnées du client) 6. Prendre RDV (intégration Google Agenda ou outil simple) 7. Contact • Adresse, téléphone, WhatsApp • Carte Google Maps intégrée • Horaires 8. Mentions légales & Politique RGPD 🔐 4. Contraintes techniques & sécurité • Site sécurisé en HTTPS • Protection anti-spam (Google reCAPTCHA v3) • Anti-injection (validation des formulaires côté serveur) • Données personnelles stockées localement ou envoyées par email sécurisé 🧱 5. Architecture technique Composant Techno possible (selon profil étudiant) Frontend HTML/CSS/JS + Bootstrap ou Tailwind Backend léger PHP simple (ou Flask/Node.js si niveau OK) CMS (facultatif) WordPress personnalisé Formulaire Envoi par email (PHPMailer, Formspree…) Base de données Pas nécessaire (optionnelle pour les devis) Hébergement Local (pour test) + version en ligne (GitHub Pages ou OVH/IONOS) 🎨 6. Charte graphique simplifiée • Couleurs : bleu foncé (propre, technique), gris métal, touches orange ou rouge • Typographie : sans-serif lisible • Icônes mécaniques / automobile• Photos haute qualité du garage et de pompes à injection 🔍 7. SEO & performance • Titres et balises optimisés • Vitesse de chargement soignée • Optimisation mobile (responsive à 100 %) • Sitemap.xml + robots.txt • Google My Business intégré 🧪 8. Tests & validation • Test affichage mobile • Test performance (Lighthouse) • Test sécurité basique • Validation formulaire (spam, injection) • Présentation au client final 🗃 9. Livrables attendus • Code source complet • Fiche utilisateur (mode d’emploi) • Vidéo de présentation du site • Journal des tests • Démo en ligneBonjour, Essaies de voir d'autres styles plus moderne et qui mettent en avant et en valeur les services (par exemple chaque service dans une section a part) et qui mettent en avant le partenariat avec la marque Bosch Le reste (a porpos de nous, témoignages, formauliares le smettres dans d'autres paeg séparées)voici 2 exemples de pages d'accueil a utiliser. tu peux commencer par developper la 01 en ajoutant un menu avec logo (le nom : ElectroDiesel Baia en bleu foncé) et un menu simple (accueil, nos services, nos clients, contact) - Follow Up Deployment
3b0390b
verified
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ElectroDiesel Baia - Spécialiste pompes à injection diesel</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> | |
| .hero { | |
| background-image: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('https://images.unsplash.com/photo-1600861195091-690c92f1d2cc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .service-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .partner-logo { | |
| filter: grayscale(100%); | |
| opacity: 0.6; | |
| transition: all 0.3s ease; | |
| } | |
| .partner-logo:hover { | |
| filter: grayscale(0); | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-md sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-blue-800 rounded-full flex items-center justify-center mr-3"> | |
| <i class="fas fa-car text-white text-xl"></i> | |
| </div> | |
| <a href="#" class="text-2xl font-bold text-blue-800">ElectroDiesel Baia</a> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="text-blue-800 font-medium hover:text-orange-500 transition">Accueil</a> | |
| <a href="#" class="text-gray-600 font-medium hover:text-orange-500 transition">Nos services</a> | |
| <a href="#" class="text-gray-600 font-medium hover:text-orange-500 transition">Nos clients</a> | |
| <a href="#" class="text-gray-600 font-medium hover:text-orange-500 transition">Contact</a> | |
| </nav> | |
| <button class="md:hidden text-gray-600" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div class="md:hidden hidden bg-white py-4 px-4 shadow-lg" id="mobile-menu"> | |
| <a href="#" class="block py-2 text-blue-800 font-medium">Accueil</a> | |
| <a href="#" class="block py-2 text-gray-600 font-medium">Nos services</a> | |
| <a href="#" class="block py-2 text-gray-600 font-medium">Nos clients</a> | |
| <a href="#" class="block py-2 text-gray-600 font-medium">Contact</a> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero text-white py-20 md:py-32"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Expert en pompes à injection diesel</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Réparation, diagnostic et reprogrammation par des spécialistes certifiés</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#" class="bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Demander un devis</a> | |
| <a href="#" class="bg-transparent hover:bg-white hover:text-blue-800 text-white font-bold py-3 px-6 border-2 border-white rounded-lg transition duration-300">Prendre rendez-vous</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Nos services experts</h2> | |
| <div class="w-20 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-microchip text-6xl text-blue-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Diagnostic électronique</h3> | |
| <p class="text-gray-600 mb-4">Analyse précise des défauts de votre système d'injection avec des outils professionnels.</p> | |
| <a href="#" class="text-orange-500 font-medium hover:text-orange-600 flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-tools text-6xl text-blue-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Réparation pompe à injection</h3> | |
| <p class="text-gray-600 mb-4">Réparation complète de votre pompe à injection par des techniciens qualifiés.</p> | |
| <a href="#" class="text-orange-500 font-medium hover:text-orange-600 flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-laptop-code text-6xl text-blue-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Reprogrammation / calibrage</h3> | |
| <p class="text-gray-600 mb-4">Optimisation des performances de votre moteur diesel grâce à notre expertise en reprogrammation.</p> | |
| <a href="#" class="text-orange-500 font-medium hover:text-orange-600 flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="service-card bg-gray-50 rounded-lg overflow-hidden shadow-md transition duration-300"> | |
| <div class="h-48 bg-gray-200 flex items-center justify-center"> | |
| <i class="fas fa-oil-can text-6xl text-blue-800"></i> | |
| </div> | |
| <div class="p-6"> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Entretien général</h3> | |
| <p class="text-gray-600 mb-4">Maintenance préventive pour prolonger la durée de vie de votre système d'injection.</p> | |
| <a href="#" class="text-orange-500 font-medium hover:text-orange-600 flex items-center"> | |
| En savoir plus <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Bosch Partnership Section --> | |
| <section class="py-16 bg-blue-800 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Partenariat officiel Bosch</h2> | |
| <p class="text-lg mb-6">Nous sommes fiers d'être un centre agréé Bosch, garantissant l'utilisation de pièces d'origine et de procédures de réparation certifiées.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-orange-500 mr-3"></i> | |
| <span>Pièces d'origine garanties</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-orange-500 mr-3"></i> | |
| <span>Formation continue des techniciens</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-orange-500 mr-3"></i> | |
| <span>Outils de diagnostic spécifiques</span> | |
| </li> | |
| </ul> | |
| <a href="#" class="inline-block bg-orange-500 hover:bg-orange-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300">Découvrir nos certifications</a> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Bosch-logo.svg/1200px-Bosch-logo.svg.png" alt="Bosch Logo" class="w-64 h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-blue-800 mb-4">Pourquoi choisir ElectroDiesel Baia ?</h2> | |
| <div class="w-20 h-1 bg-orange-500 mx-auto"></div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="text-center p-6"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-medal text-3xl text-blue-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Expertise certifiée</h3> | |
| <p class="text-gray-600">Nos techniciens sont formés et certifiés par les plus grands équipementiers automobiles.</p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-clock text-3xl text-blue-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Rapidité d'intervention</h3> | |
| <p class="text-gray-600">Diagnostic rapide et réparations effectuées dans les meilleurs délais pour minimiser votre immobilisation.</p> | |
| </div> | |
| <div class="text-center p-6"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-6"> | |
| <i class="fas fa-euro-sign text-3xl text-blue-800"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-blue-800 mb-3">Tarifs transparents</h3> | |
| <p class="text-gray-600">Devis détaillé avant toute intervention, sans surprise. Prix compétitifs pour une qualité premium.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-16 bg-orange-500 text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à redonner vie à votre moteur diesel ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Contactez-nous dès aujourd'hui pour un diagnostic gratuit ou prenez rendez-vous en ligne.</p> | |
| <div class="flex flex-col md:flex-row justify-center gap-4"> | |
| <a href="#" class="bg-white hover:bg-gray-100 text-orange-500 font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| <i class="fas fa-phone-alt mr-2"></i> 04 12 34 56 78 | |
| </a> | |
| <a href="#" class="bg-blue-800 hover:bg-blue-900 text-white font-bold py-3 px-6 rounded-lg transition duration-300"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Prendre rendez-vous | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Partners Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h3 class="text-xl text-gray-600">Ils nous font confiance</h3> | |
| </div> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Bosch-logo.svg/1200px-Bosch-logo.svg.png" alt="Bosch" class="partner-logo h-12 md:h-16"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/46/Denso_logo.svg/2560px-Denso_logo.svg.png" alt="Denso" class="partner-logo h-12 md:h-16"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Delphi_Technologies_logo_2017.svg/1200px-Delphi_Technologies_logo_2017.svg.png" alt="Delphi" class="partner-logo h-12 md:h-16"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Siemens_logo.svg/1200px-Siemens_logo.svg.png" alt="Siemens" class="partner-logo h-12 md:h-16"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Valeo_Logo.svg/2560px-Valeo_Logo.svg.png" alt="Valeo" class="partner-logo h-12 md:h-16"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">ElectroDiesel Baia</h3> | |
| <p class="mb-4">Spécialiste en réparation et reprogrammation de pompes à injection diesel.</p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-facebook-f"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Nos services</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Diagnostic électronique</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Réparation pompe à injection</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Reprogrammation / calibrage</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Entretien général</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Contact</h3> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-3 text-orange-500"></i> | |
| <span class="text-gray-400">123 Rue du Garage, 75000 Paris</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-3 text-orange-500"></i> | |
| <span class="text-gray-400">04 12 34 56 78</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-3 text-orange-500"></i> | |
| <span class="text-gray-400">contact@electrodieselbaia.fr</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-bold mb-4">Horaires</h3> | |
| <ul class="space-y-2 text-gray-400"> | |
| <li class="flex justify-between"> | |
| <span>Lundi - Vendredi</span> | |
| <span>8h - 18h</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Samedi</span> | |
| <span>9h - 12h</span> | |
| </li> | |
| <li class="flex justify-between"> | |
| <span>Dimanche</span> | |
| <span>Fermé</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 ElectroDiesel Baia. Tous droits réservés.</p> | |
| <div class="mt-4"> | |
| <a href="#" class="text-sm hover:text-white">Mentions légales</a> | |
| <span class="mx-2">•</span> | |
| <a href="#" class="text-sm hover:text-white">Politique de confidentialité</a> | |
| <span class="mx-2">•</span> | |
| <a href="#" class="text-sm hover:text-white">CGV</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| if (targetId === '#') return; | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <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=Nonoms9/nono" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |