Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ActionRéparOrdi - Expert en dépannage informatique dans l'Essonne</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"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: '#2563eb', | |
| secondary: '#7c3aed', | |
| accent: '#f59e0b', | |
| dark: '#1e293b', | |
| light: '#f8fafc', | |
| }, | |
| fontFamily: { | |
| sans: ['Inter', 'sans-serif'], | |
| }, | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .glass-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.2); | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); | |
| } | |
| .service-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); | |
| } | |
| .parallax { | |
| background-attachment: fixed; | |
| background-position: center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| } | |
| .animate-float { | |
| animation: float 6s ease-in-out infinite; | |
| } | |
| @keyframes float { | |
| 0% { transform: translateY(0px); } | |
| 50% { transform: translateY(-20px); } | |
| 100% { transform: translateY(0px); } | |
| } | |
| .fade-in { | |
| opacity: 0; | |
| transition: opacity 0.6s ease-in; | |
| } | |
| .fade-in.visible { | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 text-dark"> | |
| <!-- Floating Contact Button --> | |
| <div class="fixed bottom-8 right-8 z-50"> | |
| <div class="relative group"> | |
| <button id="contact-btn" class="bg-primary hover:bg-blue-700 text-white w-16 h-16 rounded-full shadow-lg flex items-center justify-center transition-all duration-300 transform group-hover:rotate-45"> | |
| <i class="fas fa-comment-alt text-2xl"></i> | |
| </button> | |
| <div class="absolute bottom-20 right-0 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 space-y-2"> | |
| <a href="tel:0664205096" class="bg-green-500 hover:bg-green-600 text-white w-12 h-12 rounded-full shadow flex items-center justify-center block"> | |
| <i class="fas fa-phone"></i> | |
| </a> | |
| <a href="mailto:contact@actionreparordi.com" class="bg-red-500 hover:bg-red-600 text-white w-12 h-12 rounded-full shadow flex items-center justify-center block"> | |
| <i class="fas fa-envelope"></i> | |
| </a> | |
| <a href="https://wa.me/33664205096" class="bg-green-600 hover:bg-green-700 text-white w-12 h-12 rounded-full shadow flex items-center justify-center block"> | |
| <i class="fab fa-whatsapp"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Emergency Banner --> | |
| <div class="bg-red-600 text-white py-2 px-4 text-center"> | |
| <p class="font-medium"><i class="fas fa-exclamation-triangle mr-2"></i> Urgence informatique ? Appelez-nous immédiatement au <a href="tel:0664205096" class="font-bold underline">06 64 20 50 96</a> pour une intervention rapide !</p> | |
| </div> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg sticky top-0 z-40"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="flex justify-between h-16"> | |
| <div class="flex items-center"> | |
| <a href="#" class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-laptop-code text-primary text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-primary">Action<span class="text-secondary">RéparOrdi</span></span> | |
| </a> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#home" class="text-dark hover:text-primary px-3 py-2 font-medium">Accueil</a> | |
| <a href="#about" class="text-dark hover:text-primary px-3 py-2 font-medium">À propos</a> | |
| <a href="#services" class="text-dark hover:text-primary px-3 py-2 font-medium">Services</a> | |
| <a href="#pricing" class="text-dark hover:text-primary px-3 py-2 font-medium">Tarifs</a> | |
| <a href="#testimonials" class="text-dark hover:text-primary px-3 py-2 font-medium">Témoignages</a> | |
| <a href="#contact" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium">Contact</a> | |
| </div> | |
| <div class="-mr-2 flex items-center md:hidden"> | |
| <button id="mobile-menu-btn" class="inline-flex items-center justify-center p-2 rounded-md text-dark hover:text-primary focus:outline-none"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#home" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Accueil</a> | |
| <a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">À propos</a> | |
| <a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Services</a> | |
| <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Tarifs</a> | |
| <a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary hover:bg-gray-50">Témoignages</a> | |
| <a href="#contact" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-primary hover:bg-blue-700">Contact</a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero-gradient text-white py-20 md:py-32 relative overflow-hidden"> | |
| <div class="absolute inset-0 opacity-20"> | |
| <div class="absolute inset-0 bg-gradient-to-br from-primary to-secondary"></div> | |
| </div> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10"> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold leading-tight mb-6">Votre expert en dépannage informatique dans l'Essonne</h1> | |
| <p class="text-xl mb-8">Solutions rapides et efficaces pour tous vos besoins informatiques à domicile ou en atelier.</p> | |
| <div class="flex flex-wrap gap-4"> | |
| <a href="#contact" class="bg-accent hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-phone-alt mr-2"></i> Contactez-nous | |
| </a> | |
| <a href="#services" class="bg-white hover:bg-gray-100 text-primary font-bold py-3 px-6 rounded-lg transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-laptop-code mr-2"></i> Nos services | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-full max-w-md"> | |
| <div class="absolute -top-10 -left-10 w-32 h-32 bg-accent rounded-full opacity-20 animate-pulse"></div> | |
| <div class="absolute -bottom-10 -right-10 w-32 h-32 bg-purple-500 rounded-full opacity-20 animate-pulse"></div> | |
| <img src="https://images.unsplash.com/photo-1551033406-61139e2614c8?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Dépannage informatique" class="rounded-lg shadow-2xl relative z-10 animate-float"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Stats Section --> | |
| <section class="bg-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 gap-8 text-center"> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-primary mb-2" id="visitor-count">0</div> | |
| <div class="text-gray-600">Visiteurs</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-secondary mb-2">100%</div> | |
| <div class="text-gray-600">Satisfaction</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-accent mb-2">15+</div> | |
| <div class="text-gray-600">Ans d'expérience</div> | |
| </div> | |
| <div class="p-4"> | |
| <div class="text-4xl font-bold text-primary mb-2">1000+</div> | |
| <div class="text-gray-600">Clients satisfaits</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">À propos de nous</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Chez Action Répar Ordi, nous nous engageons à fournir des services informatiques de qualité supérieure avec une approche personnalisée.</p> | |
| </div> | |
| <div class="md:flex items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0 md:pr-10"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden glass-card"> | |
| <img src="https://images.unsplash.com/photo-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" alt="Notre équipe" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Notre expertise à votre service</h3> | |
| <p class="text-gray-600 mb-6">Forts d'une vaste expérience, nous intervenons rapidement pour résoudre vos problèmes informatiques à domicile ou en atelier. Notre équipe de professionnels est formée aux dernières technologies pour vous offrir des solutions adaptées à vos besoins.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-2"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-600">Intervention rapide dans un rayon de 30 km autour de Vert-le-Petit</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-2"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-600">Matériel reconditionné de qualité à prix compétitifs</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-2"> | |
| <i class="fas fa-check-circle text-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-gray-600">Solutions personnalisées pour chaque client</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <a href="#contact" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white bg-primary hover:bg-blue-700"> | |
| <i class="fas fa-envelope mr-2"></i> Demander un devis | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Nos services</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Nous proposons une gamme complète de services pour répondre à tous vos besoins informatiques.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 service-card"> | |
| <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-tools text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Dépannage Informatique</h3> | |
| <p class="text-gray-600 mb-4">Intervention rapide pour tout type de panne, directement chez vous ou en atelier. Nous diagnostiquons et réparons votre matériel avec professionnalisme.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Réparation matérielle | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Dépannage logiciel | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Récupération de données | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 service-card"> | |
| <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-wifi text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Configuration Internet</h3> | |
| <p class="text-gray-600 mb-4">Connectivité rapide et fiable. Nous configurons et optimisons votre connexion internet pour des performances maximales.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Installation box internet | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Optimisation Wi-Fi | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Sécurisation réseau | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 service-card"> | |
| <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-tachometer-alt text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Optimisation de PC</h3> | |
| <p class="text-gray-600 mb-4">Améliorez la vitesse et la performance de votre ordinateur avec nos solutions sur mesure. Votre machine retrouvera une seconde jeunesse.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Nettoyage système | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Mise à jour logicielle | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Optimisation démarrage | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 service-card"> | |
| <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-hdd text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Installation SSD</h3> | |
| <p class="text-gray-600 mb-4">Profitez d'une réactivité accrue grâce à nos installations de disques SSD. Une solution efficace pour booster les performances de votre ordinateur.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Migration système | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Installation propre | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Configuration optimale | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 service-card"> | |
| <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-shield-virus text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Suppression de virus</h3> | |
| <p class="text-gray-600 mb-4">Protection complète contre les logiciels malveillants pour assurer la sécurité de vos données. Nous éliminons toutes les menaces et sécurisons votre système.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Analyse approfondie | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Nettoyage complet | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Protection antivirus | |
| </li> | |
| </ul> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md hover:shadow-xl transition-all duration-300 service-card"> | |
| <div class="bg-primary bg-opacity-10 rounded-full w-16 h-16 flex items-center justify-center mb-4"> | |
| <i class="fas fa-laptop text-primary text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-dark mb-3">Matériel reconditionné</h3> | |
| <p class="text-gray-600 mb-4">Découvrez notre sélection de PC portables et tours reconditionnés, alliant performance et économies. Tous nos appareils sont testés et garantis.</p> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Garantie 12 mois | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Configuration adaptée | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Installation logicielle | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Nos tarifs</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Des tarifs transparents et compétitifs pour des services de qualité.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <!-- Basic Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105"> | |
| <div class="bg-primary text-white py-4 px-6"> | |
| <h3 class="text-xl font-bold">Dépannage à domicile</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold text-dark mb-4">45€ <span class="text-lg font-normal text-gray-500">/intervention</span></div> | |
| <p class="text-gray-600 mb-6">Lorsque la panne peut être réparée directement chez vous.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Déplacement compris (30 km) | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Diagnostic complet | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Réparation immédiate | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Conseils personnalisés | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block w-full bg-primary hover:bg-blue-700 text-white text-center font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Prendre rendez-vous | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Popular Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105 relative"> | |
| <div class="absolute top-0 right-0 bg-accent text-white text-xs font-bold px-3 py-1 transform translate-x-2 -translate-y-2 rounded-full"> | |
| POPULAIRE | |
| </div> | |
| <div class="bg-secondary text-white py-4 px-6"> | |
| <h3 class="text-xl font-bold">Réparation en atelier</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold text-dark mb-4">65€ <span class="text-lg font-normal text-gray-500">/intervention</span></div> | |
| <p class="text-gray-600 mb-6">Dans les cas où nous devons emmener le PC à l'atelier.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Prise en charge et livraison | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Réparation approfondie | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Nettoyage complet | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Tests approfondis | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block w-full bg-secondary hover:bg-purple-700 text-white text-center font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Prendre rendez-vous | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Additional --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden transform transition-all duration-300 hover:scale-105"> | |
| <div class="bg-accent text-white py-4 px-6"> | |
| <h3 class="text-xl font-bold">Options supplémentaires</h3> | |
| </div> | |
| <div class="p-6"> | |
| <div class="text-4xl font-bold text-dark mb-4">0.50€ <span class="text-lg font-normal text-gray-500">/km</span></div> | |
| <p class="text-gray-600 mb-6">Au-delà de 30 kilomètres autour de Vert-le-Petit.</p> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Calcul précis du trajet | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Facturation transparente | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Intervention rapide | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> Même qualité de service | |
| </li> | |
| </ul> | |
| <div class="bg-gray-100 p-4 rounded-lg"> | |
| <h4 class="font-bold text-dark mb-2">Calculateur de distance</h4> | |
| <div class="flex items-center mb-2"> | |
| <input type="number" id="distance-input" placeholder="Distance en km" class="flex-1 border border-gray-300 rounded-l-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary"> | |
| <button id="calculate-btn" class="bg-primary hover:bg-blue-700 text-white px-4 py-2 rounded-r-lg">Calculer</button> | |
| </div> | |
| <div id="distance-result" class="font-medium text-primary"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 bg-white rounded-xl shadow-md p-6 max-w-4xl mx-auto"> | |
| <h3 class="text-xl font-bold text-dark mb-4 text-center">Garantie de satisfaction</h3> | |
| <p class="text-gray-600 text-center">Toutes nos interventions sont garanties. Si le problème persiste dans les 15 jours suivant notre intervention, nous revenons gratuitement pour le résoudre.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Témoignages clients</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Découvrez ce que nos clients disent de nos services.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark">Sophie M.</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic">"Un service exceptionnel ! Grâce à Action Répare Ordinateur, mon ordinateur fonctionne comme au premier jour. Je recommande sans hésiter !"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark">Pierre L.</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic">"Professionnalisme et rapidité, je suis entièrement satisfait de l'intervention. Merci!"</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark">Sté. Time is Light</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic">"Si vous avez un problème avec votre PC, imprimante ou autre, besoin de le réparer ou de le changer, l'installation d'un matériel ou d'un logiciel, de connexion internet urgent. ACTION REPAR'ORD se déplace à domicile et trouve toujours une solution à un prix défiant toute concurrence. Cela fait plusieurs années que mon entreprise fait appel à ses services. Rien à dire à part merci beaucoup !"</p> | |
| </div> | |
| <!-- Testimonial 4 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark">M. G.</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic">"Nous faisons appel aux services de ce réparateur informatique depuis plusieurs années. Son professionnalisme et sa réactivité sont un atout précieux pour nos deux entreprises. Il a toujours su trouver des solutions efficaces à nos problèmes informatiques, que ce soit en intervenant directement sur nos locaux ou dans son atelier. Nous recommandons vivement ses services."</p> | |
| </div> | |
| <!-- Testimonial 5 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark">Marie DOUADY</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic">"Reactif, efficace et rapide, Pierre nous a remis un PC à neuf (en mieux)! avec des solutions et des conseils. merci"</p> | |
| </div> | |
| <!-- Testimonial 6 --> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-md"> | |
| <div class="flex items-center mb-4"> | |
| <div class="flex-shrink-0"> | |
| <div class="w-12 h-12 rounded-full bg-primary bg-opacity-10 flex items-center justify-center"> | |
| <i class="fas fa-user text-primary"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark">Hélène Perrichon</h4> | |
| <div class="flex text-yellow-400"> | |
| <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> | |
| </div> | |
| <p class="text-gray-600 italic">"Une amie m'a chaleureusement recommandé vos services et ce en quoi je l'a remercie, car nous n'avions plus d'Internet et vous êtes venu très vite, appel du lundi mercredi dépanné... non seulement vous avez trouvé très rapidement la panne mais l'avez neutralisée, en plus vous m'avez nettoyé l'ordi et l'avez doté de mémoire supplémentaire et cela avec sourire et gentillesse et je ne devrais pas le dire mais pour un coût des plus abordable! quoi demander de plus.... ? Grand merci"</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Map Section --> | |
| <section class="bg-gray-100 py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 p-8"> | |
| <h3 class="text-2xl font-bold text-dark mb-4">Zone d'intervention</h3> | |
| <p class="text-gray-600 mb-6">Nous intervenons dans un rayon de 30 kilomètres autour de Vert-le-Petit dans l'Essonne.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-2"> | |
| <i class="fas fa-map-marker-alt text-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-bold text-dark">Adresse</h4> | |
| <p class="text-gray-600">30 rue Jules Ferry, 91710 Vert-le-Petit, France</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-2"> | |
| <i class="fas fa-phone-alt text-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-bold text-dark">Téléphone</h4> | |
| <p class="text-gray-600"><a href="tel:0664205096" class="hover:text-primary">06 64 20 50 96</a></p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-2"> | |
| <i class="fas fa-clock text-primary"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-bold text-dark">Horaires</h4> | |
| <p class="text-gray-600">Lundi - Vendredi: 9h - 19h</p> | |
| <p class="text-gray-600">Samedi: 9h - 13h</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div id="map" class="h-96 w-full"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-16"> | |
| <h2 class="text-3xl font-bold text-dark mb-4">Contactez-nous</h2> | |
| <div class="w-20 h-1 bg-primary mx-auto mb-6"></div> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Votre ordinateur mérite le meilleur ! Contactez-nous dès aujourd'hui pour un devis gratuit.</p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-12"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Envoyez-nous un message</h3> | |
| <form id="contact-form" class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Nom complet</label> | |
| <input type="text" id="name" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Email</label> | |
| <input type="email" id="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="phone" class="block text-sm font-medium text-gray-700 mb-1">Téléphone</label> | |
| <input type="tel" id="phone" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label for="service" class="block text-sm font-medium text-gray-700 mb-1">Service demandé</label> | |
| <select id="service" name="service" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"> | |
| <option value="">Sélectionnez un service</option> | |
| <option value="Dépannage à domicile">Dépannage à domicile</option> | |
| <option value="Réparation en atelier">Réparation en atelier</option> | |
| <option value="Configuration internet">Configuration internet</option> | |
| <option value="Optimisation PC">Optimisation PC</option> | |
| <option value="Installation SSD">Installation SSD</option> | |
| <option value="Suppression virus">Suppression virus</option> | |
| <option value="Matériel reconditionné">Matériel reconditionné</option> | |
| <option value="Autre">Autre</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <textarea id="message" name="message" rows="5" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"></textarea> | |
| </div> | |
| <div> | |
| <button type="submit" class="w-full bg-primary hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg transition duration-300"> | |
| <i class="fas fa-paper-plane mr-2"></i> Envoyer le message | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <div> | |
| <h3 class="text-2xl font-bold text-dark mb-6">Informations de contact</h3> | |
| <div class="bg-white rounded-xl shadow-md p-6 mb-8"> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-3"> | |
| <i class="fas fa-map-marker-alt text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark mb-1">Adresse</h4> | |
| <p class="text-gray-600">30 rue Jules Ferry, 91710 Vert-le-Petit, France</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-3"> | |
| <i class="fas fa-phone-alt text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark mb-1">Téléphone</h4> | |
| <p class="text-gray-600"><a href="tel:0664205096" class="hover:text-primary">06 64 20 50 96</a></p> | |
| </div> | |
| </div> | |
| <div class="flex items-start mb-6"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-3"> | |
| <i class="fas fa-envelope text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark mb-1">Email</h4> | |
| <p class="text-gray-600"><a href="mailto:contact@actionreparordi.com" class="hover:text-primary">contact@actionreparordi.com</a></p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-primary bg-opacity-10 rounded-full p-3"> | |
| <i class="fas fa-clock text-primary text-xl"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <h4 class="font-bold text-dark mb-1">Horaires d'ouverture</h4> | |
| <p class="text-gray-600">Lundi - Vendredi: 9h - 19h</p> | |
| <p class="text-gray-600">Samedi: 9h - 13h</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-xl shadow-md p-6"> | |
| <h4 class="font-bold text-dark mb-4">Suivez-nous</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="w-10 h-10 bg-blue-600 hover:bg-blue-700 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-pink-600 hover:bg-pink-700 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-blue-400 hover:bg-blue-500 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="w-10 h-10 bg-red-600 hover:bg-red-700 text-white rounded-full flex items-center justify-center"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Call to Action --> | |
| <section class="py-16 bg-primary text-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Prêt à redonner vie à votre ordinateur ?</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Contactez-nous dès aujourd'hui pour un diagnostic gratuit et une solution adaptée à vos besoins.</p> | |
| <a href="tel:0664205096" class="inline-flex items-center px-8 py-4 border border-transparent text-lg font-bold rounded-md shadow-sm text-primary bg-white hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-white transition duration-300 transform hover:scale-105"> | |
| <i class="fas fa-phone-alt mr-3"></i> 06 64 20 50 96 | |
| </a> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-dark text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">ActionRéparOrdi</h3> | |
| <p class="text-gray-400">Expert en dépannage informatique dans l'Essonne. Solutions rapides et efficaces pour tous vos besoins informatiques.</p> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Liens rapides</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="text-gray-400 hover:text-white">Accueil</a></li> | |
| <li><a href="#about" class="text-gray-400 hover:text-white">À propos</a></li> | |
| <li><a href="#services" class="text-gray-400 hover:text-white">Services</a></li> | |
| <li><a href="#pricing" class="text-gray-400 hover:text-white">Tarifs</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Services</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Dépannage à domicile</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Réparation en atelier</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Configuration internet</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Optimisation PC</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Matériel reconditionné</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-map-marker-alt mt-1 mr-2 text-gray-400"></i> | |
| <span class="text-gray-400">30 rue Jules Ferry, 91710 Vert-le-Petit, France</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone-alt mr-2 text-gray-400"></i> | |
| <a href="tel:0664205096" class="text-gray-400 hover:text-white">06 64 20 50 96</a> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-gray-400"></i> | |
| <a href="mailto:contact@actionreparordi.com" class="text-gray-400 hover:text-white">contact@actionreparordi.com</a> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2025 ActionRéparOrdi. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <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-twitter"></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> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-btn').addEventListener('click', function() { | |
| document.getElementById('mobile-menu').classList.toggle('hidden'); | |
| }); | |
| // Animate visitor counter | |
| function animateCounter(element, start, end, duration) { | |
| let startTimestamp = null; | |
| const step = (timestamp) => { | |
| if (!startTimestamp) startTimestamp = timestamp; | |
| const progress = Math.min((timestamp - startTimestamp) / duration, 1); | |
| element.innerHTML = Math.floor(progress * (end - start) + start).toLocaleString(); | |
| if (progress < 1) { | |
| window.requestAnimationFrame(step); | |
| } | |
| }; | |
| window.requestAnimationFrame(step); | |
| } | |
| // Start counter animation when element is in viewport | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| animateCounter(document.getElementById('visitor-count'), 0, 66462, 2000); | |
| observer.unobserve(entry.target); | |
| } | |
| }); | |
| }, {threshold: 0.5}); | |
| observer.observe(document.getElementById('visitor-count')); | |
| // Distance calculator | |
| document.getElementById('calculate-btn').addEventListener('click', function() { | |
| const distance = parseFloat(document.getElementById('distance-input').value); | |
| if (distance && !isNaN(distance)) { | |
| const baseDistance = 30; | |
| if (distance <= baseDistance) { | |
| document.getElementById('distance-result').textContent = "Déplacement inclus dans le tarif de base"; | |
| } else { | |
| const extraDistance = distance - baseDistance; | |
| const cost = extraDistance * 0.50; | |
| document.getElementById('distance-result').textContent = `Coût supplémentaire: ${cost.toFixed(2)}€ (${extraDistance} km × 0.50€/km)`; | |
| } | |
| } else { | |
| document.getElementById('distance-result').textContent = "Veuillez entrer une distance valide"; | |
| } | |
| }); | |
| // Form submission | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Merci pour votre message ! Nous vous contacterons rapidement.'); | |
| this.reset(); | |
| }); | |
| // Scroll reveal animation | |
| function checkVisibility() { | |
| const elements = document.querySelectorAll('.fade-in'); | |
| elements.forEach(element => { | |
| const elementTop = element.getBoundingClientRect().top; | |
| const windowHeight = window.innerHeight; | |
| if (elementTop < windowHeight - 100) { | |
| element.classList.add('visible'); | |
| } | |
| }); | |
| } | |
| // Add fade-in class to sections | |
| document.querySelectorAll('section').forEach(section => { | |
| section.classList.add('fade-in'); | |
| }); | |
| // Check visibility on load and scroll | |
| window.addEventListener('load', checkVisibility); | |
| window.addEventListener('scroll', checkVisibility); | |
| // Initialize map | |
| function initMap() { | |
| // This is a placeholder for actual Google Maps API implementation | |
| // In a real implementation, you would need a Google Maps API key | |
| const mapElement = document.getElementById('map'); | |
| if (mapElement) { | |
| mapElement.innerHTML = ` | |
| <div class="h-full w-full bg-gray-200 flex items-center justify-center"> | |
| <div class="text-center p-4"> | |
| <i class="fas fa-map-marked-alt text-4xl text-primary mb-4"></i> | |
| <h3 class="font-bold text-lg mb-2">30 rue Jules Ferry</h3> | |
| <p class="text-gray-600">91710 Vert-le-Petit, France</p> | |
| <p class="mt-4 text-sm text-gray-500">Zone d'intervention: 30km autour</p> | |
| </div> | |
| </div> | |
| `; | |
| } | |
| } | |
| // Initialize map when DOM is loaded | |
| document.addEventListener('DOMContentLoaded', initMap); | |
| </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=FunnyCatAnimals/catanimals" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |