Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Safe Driving - Conduite sécurisée intelligente</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> | |
| /* Custom animations */ | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(20px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .animate-fadeIn { | |
| animation: fadeIn 1s ease-out forwards; | |
| } | |
| .delay-100 { animation-delay: 100ms; } | |
| .delay-200 { animation-delay: 200ms; } | |
| .delay-300 { animation-delay: 300ms; } | |
| .delay-400 { animation-delay: 400ms; } | |
| /* Custom scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #3b82f6; | |
| border-radius: 4px; | |
| } | |
| /* Accordion transition */ | |
| .accordion-content { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| /* Testimonial carousel */ | |
| .testimonial-carousel { | |
| scroll-snap-type: x mandatory; | |
| } | |
| .testimonial-slide { | |
| scroll-snap-align: start; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Header --> | |
| <header class="fixed w-full bg-white shadow-md z-50"> | |
| <div class="container mx-auto px-4 py-3 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-2">SD</div> | |
| <div> | |
| <h1 class="text-xl font-bold text-blue-600">Safe Driving</h1> | |
| <p class="text-xs text-gray-500">Conduite intelligente, sécurité optimale</p> | |
| </div> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#home" class="text-blue-600 font-medium hover:text-blue-800 transition">Accueil</a> | |
| <a href="#features" class="text-gray-700 hover:text-blue-600 transition">Fonctionnalités</a> | |
| <a href="#how-it-works" class="text-gray-700 hover:text-blue-600 transition">Comment ça marche</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-blue-600 transition">Tarifs</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 transition">Témoignages</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 transition">Contact</a> | |
| </nav> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition md:block hidden"> | |
| Télécharger l'app | |
| </button> | |
| <button id="mobile-menu-button" class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile menu --> | |
| <div id="mobile-menu" class="hidden md:hidden bg-white py-4 px-4 shadow-lg"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="#home" class="text-blue-600 font-medium">Accueil</a> | |
| <a href="#features" class="text-gray-700">Fonctionnalités</a> | |
| <a href="#how-it-works" class="text-gray-700">Comment ça marche</a> | |
| <a href="#pricing" class="text-gray-700">Tarifs</a> | |
| <a href="#testimonials" class="text-gray-700">Témoignages</a> | |
| <a href="#contact" class="text-gray-700">Contact</a> | |
| <button class="bg-blue-600 text-white px-4 py-2 rounded-full hover:bg-blue-700 transition mt-2"> | |
| Télécharger l'app | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section id="home" class="pt-32 pb-20 bg-gradient-to-r from-blue-50 to-indigo-50"> | |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-12 md:mb-0 animate-fadeIn"> | |
| <h1 class="text-4xl md:text-5xl font-bold text-gray-900 mb-6 leading-tight"> | |
| Roulez serein, <span class="text-blue-600">restez en sécurité</span> | |
| </h1> | |
| <p class="text-lg text-gray-600 mb-8 max-w-lg"> | |
| Suivez votre conduite en temps réel, obtenez des alertes instantanées et améliorez vos habitudes de conduite avec notre technologie intelligente. | |
| </p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="bg-blue-600 text-white px-6 py-3 rounded-full hover:bg-blue-700 transition font-medium text-lg shadow-lg"> | |
| Commencer maintenant | |
| </button> | |
| <button class="flex items-center justify-center border border-blue-600 text-blue-600 px-6 py-3 rounded-full hover:bg-blue-50 transition font-medium text-lg"> | |
| <i class="fas fa-play-circle mr-2"></i> Voir la démo | |
| </button> | |
| </div> | |
| <div class="mt-8 flex items-center space-x-4"> | |
| <div class="flex -space-x-2"> | |
| <img src="https://randomuser.me/api/portraits/women/12.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> | |
| <img src="https://randomuser.me/api/portraits/women/45.jpg" class="w-10 h-10 rounded-full border-2 border-white" alt="User"> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-600"><span class="font-bold">10,000+</span> conducteurs satisfaits</p> | |
| <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> | |
| </div> | |
| <div class="md:w-1/2 animate-fadeIn delay-100"> | |
| <div class="relative max-w-md mx-auto"> | |
| <div class="absolute -inset-4 bg-blue-200 rounded-3xl blur-lg opacity-30"></div> | |
| <div class="relative bg-white p-2 rounded-3xl shadow-xl"> | |
| <div class="bg-gray-900 rounded-2xl overflow-hidden"> | |
| <img src="https://images.unsplash.com/photo-1605559424843-9e4c228bf1c2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" | |
| alt="Safe Driving App Interface" class="w-full h-auto rounded-xl"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Trusted By Section --> | |
| <section class="py-8 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <p class="text-center text-gray-500 mb-6">Ils nous font confiance</p> | |
| <div class="flex flex-wrap justify-center items-center gap-8 md:gap-16 opacity-70"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Michelin-logo.svg/2560px-Michelin-logo.svg.png" class="h-8" alt="Michelin"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/BMW.svg/2048px-BMW.svg.png" class="h-8" alt="BMW"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Allianz_logo.svg/2560px-Allianz_logo.svg.png" class="h-8" alt="Allianz"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Logo_of_Volkswagen.svg/2048px-Logo_of_Volkswagen.svg.png" class="h-8" alt="Volkswagen"> | |
| <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/La_Poste_2011_logo.svg/2560px-La_Poste_2011_logo.svg.png" class="h-8" alt="La Poste"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-16 animate-fadeIn"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Nos fonctionnalités intelligentes</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Découvrez comment Safe Driving transforme votre expérience de conduite avec des outils innovants | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 animate-fadeIn delay-100"> | |
| <div class="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mb-6"> | |
| <i class="fas fa-chart-line text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Analyse en temps réel</h3> | |
| <p class="text-gray-600"> | |
| Détection des accélérations brusques, freinages dangereux et comportements à risque pendant votre conduite. | |
| </p> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 animate-fadeIn delay-200"> | |
| <div class="w-14 h-14 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 mb-6"> | |
| <i class="fas fa-bell text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Alertes intelligentes</h3> | |
| <p class="text-gray-600"> | |
| Notifications pour zones scolaires, limitations de vitesse, fatigue au volant et conditions météo dangereuses. | |
| </p> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 animate-fadeIn delay-300"> | |
| <div class="w-14 h-14 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 mb-6"> | |
| <i class="fas fa-chart-pie text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Statistiques personnalisées</h3> | |
| <p class="text-gray-600"> | |
| Rapports hebdomadaires avec conseils adaptés pour améliorer votre sécurité et réduire votre consommation. | |
| </p> | |
| </div> | |
| <!-- Feature 4 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300 animate-fadeIn delay-400"> | |
| <div class="w-14 h-14 bg-green-100 rounded-full flex items-center justify-center text-green-600 mb-6"> | |
| <i class="fas fa-users text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Partage entre conducteurs</h3> | |
| <p class="text-gray-600"> | |
| Comparez vos performances avec votre famille ou votre flotte d'entreprise pour une saine émulation. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- How It Works Section --> | |
| <section id="how-it-works" class="py-20 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-gray-900 mb-4">Comment ça marche</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| En seulement 3 étapes simples, transformez votre smartphone en coach de conduite personnel | |
| </p> | |
| </div> | |
| <div class="flex flex-col md:flex-row justify-between items-center mb-16"> | |
| <!-- Step 1 --> | |
| <div class="flex flex-col items-center text-center mb-12 md:mb-0 w-full md:w-1/3 px-4 animate-fadeIn"> | |
| <div class="relative mb-6"> | |
| <div class="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 text-2xl font-bold z-10 relative"> | |
| 1 | |
| </div> | |
| <div class="absolute -inset-2 bg-blue-200 rounded-full blur opacity-30"></div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Installez l'application</h3> | |
| <p class="text-gray-600"> | |
| Téléchargez Safe Driving et connectez votre véhicule via Bluetooth ou un adaptateur OBD. | |
| </p> | |
| </div> | |
| <!-- Arrow --> | |
| <div class="hidden md:block text-blue-400 animate-fadeIn delay-100"> | |
| <i class="fas fa-arrow-right text-3xl"></i> | |
| </div> | |
| <!-- Step 2 --> | |
| <div class="flex flex-col items-center text-center mb-12 md:mb-0 w-full md:w-1/3 px-4 animate-fadeIn delay-200"> | |
| <div class="relative mb-6"> | |
| <div class="w-20 h-20 bg-indigo-100 rounded-full flex items-center justify-center text-indigo-600 text-2xl font-bold z-10 relative"> | |
| 2 | |
| </div> | |
| <div class="absolute -inset-2 bg-indigo-200 rounded-full blur opacity-30"></div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Conduisez normalement</h3> | |
| <p class="text-gray-600"> | |
| Notre IA analyse vos données de conduite en temps réel sans perturber votre expérience. | |
| </p> | |
| </div> | |
| <!-- Arrow --> | |
| <div class="hidden md:block text-indigo-400 animate-fadeIn delay-300"> | |
| <i class="fas fa-arrow-right text-3xl"></i> | |
| </div> | |
| <!-- Step 3 --> | |
| <div class="flex flex-col items-center text-center w-full md:w-1/3 px-4 animate-fadeIn delay-400"> | |
| <div class="relative mb-6"> | |
| <div class="w-20 h-20 bg-purple-100 rounded-full flex items-center justify-center text-purple-600 text-2xl font-bold z-10 relative"> | |
| 3 | |
| </div> | |
| <div class="absolute -inset-2 bg-purple-200 rounded-full blur opacity-30"></div> | |
| </div> | |
| <h3 class="text-xl font-bold text-gray-900 mb-3">Recevez vos insights</h3> | |
| <p class="text-gray-600"> | |
| Obtenez des rapports détaillés et des recommandations pour améliorer votre sécurité. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- Video Demo --> | |
| <div class="max-w-4xl mx-auto rounded-xl overflow-hidden shadow-lg animate-fadeIn"> | |
| <div class="relative aspect-w-16 aspect-h-9 bg-gray-900"> | |
| <div class="absolute inset-0 flex items-center justify-center"> | |
| <button class="bg-blue-600 text-white rounded-full w-16 h-16 flex items-center justify-center hover:bg-blue-700 transition transform hover:scale-110"> | |
| <i class="fas fa-play text-xl"></i> | |
| </button> | |
| </div> | |
| <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Safe Driving Demo" class="w-full h-full object-cover opacity-70"> | |
| </div> | |
| <div class="bg-white p-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Découvrez Safe Driving en action</h3> | |
| <p class="text-gray-600 text-sm">Vidéo de démonstration - 1 min 30 sec</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Why Choose Us Section --> | |
| <section class="py-20 bg-gradient-to-r from-blue-50 to-indigo-50"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col lg:flex-row items-center"> | |
| <div class="lg:w-1/2 mb-12 lg:mb-0 lg:pr-12 animate-fadeIn"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-6">Pourquoi choisir Safe Driving ?</h2> | |
| <p class="text-lg text-gray-600 mb-8"> | |
| Contrairement aux solutions basiques, notre technologie avancée offre une expérience complète et personnalisée. | |
| </p> | |
| <div class="space-y-6"> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Précision inégalée</h3> | |
| <p class="text-gray-600"> | |
| Notre algorithme breveté détecte 40% plus de comportements à risque que les solutions concurrentes. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Interface intuitive</h3> | |
| <p class="text-gray-600"> | |
| Une expérience utilisateur fluide et simple, conçue pour ne pas distraire le conducteur. | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex"> | |
| <div class="flex-shrink-0 mt-1"> | |
| <div class="w-8 h-8 bg-blue-100 rounded-full flex items-center justify-center text-blue-600"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| </div> | |
| <div class="ml-4"> | |
| <h3 class="text-lg font-medium text-gray-900">Support 24/7</h3> | |
| <p class="text-gray-600"> | |
| Notre équipe est disponible à tout moment pour répondre à vos questions et résoudre les problèmes. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="lg:w-1/2 animate-fadeIn delay-100"> | |
| <div class="bg-white p-8 rounded-xl shadow-lg"> | |
| <div class="flex items-start mb-8"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Marie D.</h4> | |
| <p class="text-gray-500 text-sm">Utilisatrice depuis 1 an</p> | |
| <div class="flex text-yellow-400 mt-1"> | |
| <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> | |
| <div class="bg-gray-50 p-6 rounded-lg mb-6"> | |
| <p class="text-gray-700 italic"> | |
| "Grâce à Safe Driving, j'ai réduit ma consommation de carburant de 15% et je me sens beaucoup plus en sécurité sur la route. Les alertes pour les zones dangereuses sont particulièrement utiles." | |
| </p> | |
| </div> | |
| <div class="flex justify-between"> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-blue-600">-15%</p> | |
| <p class="text-gray-500 text-sm">Consommation</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-blue-600">92%</p> | |
| <p class="text-gray-500 text-sm">Sécurité ressentie</p> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-2xl font-bold text-blue-600">40%</p> | |
| <p class="text-gray-500 text-sm">Moins d'incidents</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section id="testimonials" class="py-20 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-gray-900 mb-4">Ce que nos utilisateurs disent</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Des conducteurs comme vous partagent leur expérience avec Safe Driving | |
| </p> | |
| </div> | |
| <div class="max-w-6xl mx-auto"> | |
| <div class="testimonial-carousel flex overflow-x-auto pb-8 scrollbar-hide space-x-6"> | |
| <!-- Testimonial 1 --> | |
| <div class="testimonial-slide flex-shrink-0 w-full md:w-1/2 lg:w-1/3 bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Thomas L.</h4> | |
| <p class="text-gray-500 text-sm">Commercial</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <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> | |
| <p class="text-gray-700"> | |
| "En tant que commercial qui roule beaucoup, Safe Driving m'aide à optimiser mes trajets et à réduire ma fatigue au volant. L'analyse post-trajet est très instructive." | |
| </p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="testimonial-slide flex-shrink-0 w-full md:w-1/2 lg:w-1/3 bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Sophie M.</h4> | |
| <p class="text-gray-500 text-sm">Mère de famille</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <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> | |
| <p class="text-gray-700"> | |
| "J'ai installé Safe Driving pour surveiller la conduite de mon fils adolescent. Les alertes en temps réel et les rapports hebdomadaires me rassurent énormément." | |
| </p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="testimonial-slide flex-shrink-0 w-full md:w-1/2 lg:w-1/3 bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-6"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" class="w-12 h-12 rounded-full mr-4" alt="User"> | |
| <div> | |
| <h4 class="font-bold text-gray-900">Jean P.</h4> | |
| <p class="text-gray-500 text-sm">Directeur de flotte</p> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <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-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-700"> | |
| "Pour notre flotte de 20 véhicules, Safe Driving a réduit nos accidents de 30% en 6 mois. L'outil de comparaison entre conducteurs est excellent pour la formation." | |
| </p> | |
| </div> | |
| </div> | |
| <div class="flex justify-center mt-8 space-x-2"> | |
| <button class="w-3 h-3 rounded-full bg-blue-600"></button> | |
| <button class="w-3 h-3 rounded-full bg-blue-200"></button> | |
| <button class="w-3 h-3 rounded-full bg-blue-200"></button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Download Section --> | |
| <section class="py-16 bg-blue-600 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center justify-between"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 animate-fadeIn"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-4">Téléchargez l'application dès maintenant</h2> | |
| <p class="text-lg mb-6 opacity-90"> | |
| Disponible sur iOS et Android. Scannez le QR code ou cliquez sur les boutons ci-dessous. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <button class="bg-black text-white px-6 py-3 rounded-lg flex items-center hover:bg-gray-900 transition"> | |
| <i class="fab fa-apple text-2xl mr-2"></i> | |
| <div class="text-left"> | |
| <p class="text-xs">Télécharger sur</p> | |
| <p class="font-medium">App Store</p> | |
| </div> | |
| </button> | |
| <button class="bg-black text-white px-6 py-3 rounded-lg flex items-center hover:bg-gray-900 transition"> | |
| <i class="fab fa-google-play text-2xl mr-2"></i> | |
| <div class="text-left"> | |
| <p class="text-xs">Disponible sur</p> | |
| <p class="font-medium">Google Play</p> | |
| </div> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center animate-fadeIn delay-100"> | |
| <div class="bg-white p-4 rounded-lg shadow-xl"> | |
| <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://safedriving.com/download" | |
| alt="QR Code" class="w-40 h-40"> | |
| <p class="text-center text-blue-600 mt-2 font-medium">Scan to download</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- FAQ Section --> | |
| <section class="py-20 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-gray-900 mb-4">Questions fréquentes</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Trouvez rapidement les réponses à vos questions | |
| </p> | |
| </div> | |
| <div class="max-w-3xl mx-auto"> | |
| <!-- FAQ Item 1 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left"> | |
| <h3 class="text-lg font-medium text-gray-900">Comment Safe Driving protège-t-il mes données ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Toutes vos données sont chiffrées de bout en bout et stockées de manière sécurisée. Nous ne partageons aucune information personnelle avec des tiers et nous nous conformons strictement au RGPD. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 2 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left"> | |
| <h3 class="text-lg font-medium text-gray-900">Quels véhicules sont compatibles ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Safe Driving est compatible avec la plupart des véhicules fabriqués après 2008 via Bluetooth ou adaptateur OBD. Pour les véhicules plus anciens, certaines fonctionnalités peuvent être limitées. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 3 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left"> | |
| <h3 class="text-lg font-medium text-gray-900">L'application consomme-t-elle beaucoup de batterie ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Non, notre application est optimisée pour une consommation minimale de batterie. En mode conduite, elle consomme environ 5% de batterie par heure, similaire à une application de navigation. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 4 --> | |
| <div class="mb-4 border-b border-gray-200 pb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left"> | |
| <h3 class="text-lg font-medium text-gray-900">Puis-je utiliser Safe Driving à l'étranger ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Oui, Safe Driving fonctionne partout dans le monde. Les alertes spécifiques (comme les zones scolaires) sont disponibles dans plus de 30 pays et nous en ajoutons régulièrement. | |
| </p> | |
| </div> | |
| </div> | |
| <!-- FAQ Item 5 --> | |
| <div class="mb-4"> | |
| <button class="faq-toggle flex justify-between items-center w-full text-left"> | |
| <h3 class="text-lg font-medium text-gray-900">Comment annuler mon abonnement ?</h3> | |
| <i class="fas fa-chevron-down text-blue-600 transition-transform duration-300"></i> | |
| </button> | |
| <div class="accordion-content mt-2"> | |
| <p class="text-gray-600"> | |
| Vous pouvez annuler à tout moment depuis les paramètres de l'application ou en contactant notre support. Aucun frais supplémentaire ne vous sera facturé après l'annulation. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section id="pricing" class="py-20 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-gray-900 mb-4">Nos offres adaptées</h2> | |
| <p class="text-lg text-gray-600 max-w-2xl mx-auto"> | |
| Choisissez le forfait qui correspond à vos besoins | |
| </p> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300 animate-fadeIn"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Gratuit</h3> | |
| <p class="text-gray-600">Parfait pour essayer l'application</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-4xl font-bold text-gray-900">0€<span class="text-lg text-gray-500">/mois</span></p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Analyse basique de conduite</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Alertes sécurité essentielles</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-gray-300 mr-2"></i> | |
| <span>Statistiques avancées</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-gray-300 mr-2"></i> | |
| <span>Support prioritaire</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-gray-300 mr-2"></i> | |
| <span>Fonctionnalités entreprise</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-blue-600 text-blue-600 py-3 rounded-lg hover:bg-blue-50 transition font-medium"> | |
| Commencer | |
| </button> | |
| </div> | |
| <!-- Pro Plan --> | |
| <div class="bg-gradient-to-b from-blue-600 to-blue-700 rounded-xl p-8 shadow-lg transform hover:scale-105 transition duration-300 animate-fadeIn delay-100"> | |
| <div class="mb-6"> | |
| <div class="inline-block bg-yellow-100 text-yellow-800 text-xs font-bold px-3 py-1 rounded-full mb-3"> | |
| POPULAIRE | |
| </div> | |
| <h3 class="text-xl font-bold text-white mb-2">Pro</h3> | |
| <p class="text-blue-100">Pour les conducteurs réguliers</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-4xl font-bold text-white">9,99€<span class="text-lg text-blue-200">/mois</span></p> | |
| </div> | |
| <ul class="space-y-3 mb-8 text-white"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-300 mr-2"></i> | |
| <span>Tout dans Gratuit</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-300 mr-2"></i> | |
| <span>Statistiques détaillées</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-300 mr-2"></i> | |
| <span>Alertes avancées</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-yellow-300 mr-2"></i> | |
| <span>Conseils personnalisés</span> | |
| </li> | |
| <li class="flex items-center text-blue-200"> | |
| <i class="fas fa-times text-blue-300 mr-2"></i> | |
| <span>Fonctionnalités entreprise</span> | |
| </li> | |
| </ul> | |
| <button class="w-full bg-white text-blue-600 py-3 rounded-lg hover:bg-gray-100 transition font-bold"> | |
| Essayer gratuitement | |
| </button> | |
| </div> | |
| <!-- Enterprise Plan --> | |
| <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition duration-300 animate-fadeIn delay-200"> | |
| <div class="mb-6"> | |
| <h3 class="text-xl font-bold text-gray-900 mb-2">Entreprise</h3> | |
| <p class="text-gray-600">Pour les flottes professionnelles</p> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-4xl font-bold text-gray-900">Sur mesure</p> | |
| </div> | |
| <ul class="space-y-3 mb-8"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Tout dans Pro</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Gestion de flotte</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Tableau de bord admin</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Support dédié 24/7</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>API d'intégration</span> | |
| </li> | |
| </ul> | |
| <button class="w-full border border-blue-600 text-blue-600 py-3 rounded-lg hover:bg-blue-50 transition font-medium"> | |
| Contactez-nous | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Newsletter Section --> | |
| <section id="contact" class="py-16 bg-gray-900 text-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="md:w-1/2 mb-8 md:mb-0 animate-fadeIn"> | |
| <h2 class="text-3xl font-bold mb-4">Restez informé</h2> | |
| <p class="text-gray-300 max-w-md"> | |
| Abonnez-vous à notre newsletter pour recevoir des conseils de conduite, des offres exclusives et les dernières nouveautés. | |
| </p> | |
| </div> | |
| <div class="md:w-1/2 animate-fadeIn delay-100"> | |
| <form class="flex flex-col sm:flex-row gap-4"> | |
| <input type="email" placeholder="Votre email" class="flex-grow px-4 py-3 rounded-lg bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-500"> | |
| <button type="submit" class="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition font-medium whitespace-nowrap"> | |
| S'abonner | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-500 mt-2"> | |
| Nous ne partagerons jamais votre email. Désabonnez-vous à tout moment. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-800 text-gray-300 py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-10 h-10 bg-blue-600 rounded-full flex items-center justify-center text-white font-bold text-xl mr-2">SD</div> | |
| <h3 class="text-xl font-bold text-white">Safe Driving</h3> | |
| </div> | |
| <p class="mb-4"> | |
| La solution intelligente pour une conduite plus sûre et plus économique. | |
| </p> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-facebook-f"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition"> | |
| <i class="fab fa-linkedin-in"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-4">Navigation</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#home" class="hover:text-white transition">Accueil</a></li> | |
| <li><a href="#features" class="hover:text-white transition">Fonctionnalités</a></li> | |
| <li><a href="#how-it-works" class="hover:text-white transition">Comment ça marche</a></li> | |
| <li><a href="#pricing" class="hover:text-white transition">Tarifs</a></li> | |
| <li><a href="#testimonials" class="hover:text-white transition">Témoignages</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-4">Légal</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="hover:text-white transition">Mentions légales</a></li> | |
| <li><a href="#" class="hover:text-white transition">Conditions d'utilisation</a></li> | |
| <li><a href="#" class="hover:text-white transition">Politique de confidentialité</a></li> | |
| <li><a href="#" class="hover:text-white transition">Cookies</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-bold text-white mb-4">Contact</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-envelope mr-2 text-blue-400"></i> | |
| contact@safedriving.com | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-phone mr-2 text-blue-400"></i> | |
| +33 1 23 45 67 89 | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-map-marker-alt mr-2 text-blue-400"></i> | |
| 123 Rue de la Sécurité, Paris | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-headset mr-2 text-blue-400"></i> | |
| Support 24/7 | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-500 mb-4 md:mb-0"> | |
| © 2023 Safe Driving. Tous droits réservés. | |
| </p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-500 hover:text-white transition">Accessibilité</a> | |
| <a href="#" class="text-gray-500 hover:text-white transition">CGV</a> | |
| <a href="#" class="text-gray-500 hover:text-white transition">Plan du site</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'); | |
| }); | |
| // FAQ accordion | |
| document.querySelectorAll('.faq-toggle').forEach(button => { | |
| button.addEventListener('click', () => { | |
| const content = button.nextElementSibling; | |
| const icon = button.querySelector('i'); | |
| // Toggle content | |
| if (content.style.maxHeight) { | |
| content.style.maxHeight = null; | |
| icon.classList.remove('transform', 'rotate-180'); | |
| } else { | |
| content.style.maxHeight = content.scrollHeight + 'px'; | |
| icon.classList.add('transform', 'rotate-180'); | |
| } | |
| }); | |
| }); | |
| // Scroll animations | |
| const animateOnScroll = () => { | |
| const elements = document.querySelectorAll('.animate-fadeIn'); | |
| elements.forEach(element => { | |
| const elementPosition = element.getBoundingClientRect().top; | |
| const screenPosition = window.innerHeight / 1.2; | |
| if (elementPosition < screenPosition) { | |
| element.classList.add('animate-fadeIn'); | |
| } | |
| }); | |
| }; | |
| window.addEventListener('scroll', animateOnScroll); | |
| document.addEventListener('DOMContentLoaded', animateOnScroll); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| window.scrollTo({ | |
| top: targetElement.offsetTop - 80, | |
| behavior: 'smooth' | |
| }); | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Testimonial carousel navigation | |
| let currentTestimonial = 0; | |
| const testimonials = document.querySelectorAll('.testimonial-slide'); | |
| const dots = document.querySelectorAll('#testimonial-dots button'); | |
| function showTestimonial(index) { | |
| testimonials.forEach((testimonial, i) => { | |
| if (i === index) { | |
| testimonial.style.display = 'block'; | |
| } else { | |
| testimonial.style.display = 'none'; | |
| } | |
| }); | |
| dots.forEach((dot, i) => { | |
| if (i === index) { | |
| dot.classList.remove('bg-blue-200'); | |
| dot.classList.add('bg-blue-600'); | |
| } else { | |
| dot.classList.remove('bg-blue-600'); | |
| dot.classList.add('bg-blue-200'); | |
| } | |
| }); | |
| currentTestimonial = index; | |
| } | |
| // Initialize first testimonial | |
| showTestimonial(0); | |
| // Auto-rotate testimonials | |
| setInterval(() => { | |
| const nextTestimonial = (currentTestimonial + 1) % testimonials.length; | |
| showTestimonial(nextTestimonial); | |
| }, 5000); | |
| // Dot navigation | |
| dots.forEach((dot, index) => { | |
| dot.addEventListener('click', () => { | |
| showTestimonial(index); | |
| }); | |
| }); | |
| </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=Tokiarivelo/safe-driving" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |