Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <meta name="description" content="MailHotelPro - Solution automatique de réponse aux emails pour hôtels"> | |
| <title>MailHotelPro - Réponse Automatique aux Emails</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"> | |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@6.6.6/css/flag-icons.min.css"/> | |
| <style> | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); | |
| } | |
| .feature-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); | |
| } | |
| .mobile-menu { | |
| max-height: 0; | |
| overflow: hidden; | |
| transition: max-height 0.3s ease-out; | |
| } | |
| .mobile-menu.open { | |
| max-height: 500px; | |
| } | |
| .language-dropdown { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| top: 100%; | |
| min-width: 160px; | |
| z-index: 1000; | |
| background: white; | |
| border-radius: 0.375rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .language-selector:hover .language-dropdown, | |
| .language-selector:focus-within .language-dropdown { | |
| display: block; | |
| } | |
| .language-option { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| } | |
| .language-option:hover { | |
| background-color: #f3f4f6; | |
| } | |
| .footer-language-dropdown { | |
| display: none; | |
| position: absolute; | |
| left: 0; | |
| top: 100%; | |
| min-width: 160px; | |
| z-index: 1000; | |
| background: #1f2937; | |
| border-radius: 0.375rem; | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .footer-language-selector:hover .footer-language-dropdown, | |
| .footer-language-selector:focus-within .footer-language-dropdown { | |
| display: block; | |
| } | |
| .footer-language-option { | |
| display: flex; | |
| align-items: center; | |
| padding: 0.5rem 1rem; | |
| cursor: pointer; | |
| color: #9ca3af; | |
| } | |
| .footer-language-option:hover { | |
| background-color: #374151; | |
| color: white; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans antialiased text-gray-800 bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm sticky top-0 z-50"> | |
| <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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i class="fas fa-envelope text-blue-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-blue-600">MailHotel<span class="text-blue-400">Pro</span></span> | |
| </div> | |
| </div> | |
| <!-- Menu desktop --> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#features" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium transition-colors duration-300">Fonctionnalités</a> | |
| <a href="#pricing" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium transition-colors duration-300">Tarifs</a> | |
| <a href="#testimonials" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium transition-colors duration-300">Témoignages</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-600 px-3 py-2 font-medium transition-colors duration-300">Contact</a> | |
| <!-- Language Selector Desktop --> | |
| <div class="relative language-selector"> | |
| <button id="language-button" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 focus:outline-none px-3 py-2"> | |
| <span class="fi fi-fr"></span> | |
| <span>Français</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div id="language-dropdown" class="language-dropdown"> | |
| <div class="language-option" data-lang="fr"> | |
| <span class="fi fi-fr mr-3"></span> | |
| <span>Français</span> | |
| </div> | |
| <div class="language-option" data-lang="en"> | |
| <span class="fi fi-gb mr-3"></span> | |
| <span>English</span> | |
| </div> | |
| <div class="language-option" data-lang="es"> | |
| <span class="fi fi-es mr-3"></span> | |
| <span>Español</span> | |
| </div> | |
| <div class="language-option" data-lang="de"> | |
| <span class="fi fi-de mr-3"></span> | |
| <span>Deutsch</span> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#demo" class="ml-2 inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 transition-all duration-300"> | |
| <i class="fas fa-calendar-alt mr-2"></i> Demander une démo | |
| </a> | |
| </div> | |
| <!-- Bouton mobile --> | |
| <div class="md:hidden flex items-center"> | |
| <button id="mobile-menu-button" class="text-gray-500 hover:text-blue-600 focus:outline-none"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Menu mobile --> | |
| <div id="mobile-menu" class="mobile-menu md:hidden bg-white"> | |
| <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3"> | |
| <a href="#features" class="block px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 rounded-md">Fonctionnalités</a> | |
| <a href="#pricing" class="block px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 rounded-md">Tarifs</a> | |
| <a href="#testimonials" class="block px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 rounded-md">Témoignages</a> | |
| <a href="#contact" class="block px-3 py-2 text-gray-700 hover:text-blue-600 hover:bg-gray-50 rounded-md">Contact</a> | |
| <!-- Language Selector Mobile --> | |
| <div class="relative language-selector px-3 py-2"> | |
| <button id="mobile-language-button" class="flex items-center space-x-2 text-gray-700 hover:text-blue-600 focus:outline-none"> | |
| <span class="fi fi-fr"></span> | |
| <span>Français</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div id="mobile-language-dropdown" class="language-dropdown mt-1"> | |
| <div class="language-option" data-lang="fr"> | |
| <span class="fi fi-fr mr-3"></span> | |
| <span>Français</span> | |
| </div> | |
| <div class="language-option" data-lang="en"> | |
| <span class="fi fi-gb mr-3"></span> | |
| <span>English</span> | |
| </div> | |
| <div class="language-option" data-lang="es"> | |
| <span class="fi fi-es mr-3"></span> | |
| <span>Español</span> | |
| </div> | |
| <div class="language-option" data-lang="de"> | |
| <span class="fi fi-de mr-3"></span> | |
| <span>Deutsch</span> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#demo" class="block w-full text-center px-3 py-2 rounded-md text-white bg-blue-600 hover:bg-blue-700"> | |
| Demander une démo | |
| </a> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Automatisez vos réponses emails</h1> | |
| <p class="text-xl mb-8">Notre solution IA répond automatiquement aux emails de vos clients 24h/24, 7j/7.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <a href="#demo" class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-center"> | |
| Essai gratuit | |
| </a> | |
| <a href="#features" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium text-center"> | |
| En savoir plus | |
| </a> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80" | |
| alt="Réponse automatique emails" | |
| class="rounded-lg shadow-2xl max-w-full h-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section id="features" 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-gray-900 mb-4">Fonctionnalités clés</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Découvrez comment notre solution peut transformer votre gestion des emails</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300"> | |
| <div class="text-blue-600 text-4xl mb-6"> | |
| <i class="fas fa-robot"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Réponses intelligentes</h3> | |
| <p class="text-gray-600">Notre IA analyse le contenu des emails et fournit des réponses pertinentes et personnalisées.</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300"> | |
| <div class="text-blue-600 text-4xl mb-6"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">24h/24</h3> | |
| <p class="text-gray-600">Répondez à vos clients à toute heure, même la nuit et les week-ends.</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300"> | |
| <div class="text-blue-600 text-4xl mb-6"> | |
| <i class="fas fa-language"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Multilingue</h3> | |
| <p class="text-gray-600">Prend en charge plusieurs langues pour répondre à une clientèle internationale.</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300"> | |
| <div class="text-blue-600 text-4xl mb-6"> | |
| <i class="fas fa-chart-line"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Analytique</h3> | |
| <p class="text-gray-600">Tableau de bord complet pour suivre les performances et les tendances.</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300"> | |
| <div class="text-blue-600 text-4xl mb-6"> | |
| <i class="fas fa-plug"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Intégrations</h3> | |
| <p class="text-gray-600">Connectez-vous facilement à vos outils existants (PMS, CRM, etc.).</p> | |
| </div> | |
| <div class="feature-card bg-gray-50 p-8 rounded-xl transition-all duration-300"> | |
| <div class="text-blue-600 text-4xl mb-6"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Sécurité</h3> | |
| <p class="text-gray-600">Données cryptées et conformité RGPD pour une protection maximale.</p> | |
| </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-gray-900 mb-4">Tarifs simples et transparents</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Choisissez le plan qui correspond à vos besoins</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200"> | |
| <h3 class="text-xl font-bold mb-4">Starter</h3> | |
| <p class="text-gray-600 mb-6">Parfait pour les petits hôtels</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">49€</span> | |
| <span class="text-gray-600">/mois</span> | |
| </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>Jusqu'à 200 emails/mois</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>3 langues disponibles</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Support email</span> | |
| </li> | |
| </ul> | |
| <a href="#demo" class="block w-full text-center bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 rounded-lg font-medium"> | |
| Commencer | |
| </a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-lg border-2 border-blue-500 relative"> | |
| <div class="absolute top-0 right-0 bg-blue-500 text-white px-3 py-1 text-sm font-bold rounded-bl-lg"> | |
| Populaire | |
| </div> | |
| <h3 class="text-xl font-bold mb-4">Pro</h3> | |
| <p class="text-gray-600 mb-6">Pour les hôtels de taille moyenne</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">99€</span> | |
| <span class="text-gray-600">/mois</span> | |
| </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>Jusqu'à 500 emails/mois</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>5 langues disponibles</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Support prioritaire</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Analytique avancée</span> | |
| </li> | |
| </ul> | |
| <a href="#demo" class="block w-full text-center bg-blue-600 hover:bg-blue-700 text-white py-3 rounded-lg font-medium"> | |
| Choisir ce plan | |
| </a> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-sm border border-gray-200"> | |
| <h3 class="text-xl font-bold mb-4">Enterprise</h3> | |
| <p class="text-gray-600 mb-6">Solution sur mesure pour les grands groupes</p> | |
| <div class="mb-6"> | |
| <span class="text-4xl font-bold">Contact</span> | |
| </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>Volume illimité</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Toutes les langues</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Support 24/7</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-2"></i> | |
| <span>Intégrations personnalisées</span> | |
| </li> | |
| </ul> | |
| <a href="#contact" class="block w-full text-center bg-gray-100 hover:bg-gray-200 text-gray-800 py-3 rounded-lg font-medium"> | |
| Nous contacter | |
| </a> | |
| </div> | |
| </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-gray-900 mb-4">Ce que disent nos clients</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Des hôteliers satisfaits à travers l'Europe</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"MailHotelPro a révolutionné notre service client. Nous répondons maintenant à tous les emails en moins d'une heure, même la nuit !"</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sophie Lambert</h4> | |
| <p class="text-gray-500 text-sm">Directrice, Hôtel Belle Vue</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"L'IA comprend parfaitement les demandes de nos clients et fournit des réponses pertinentes. Nous avons réduit notre temps de réponse de 80%."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Thomas Dubois</h4> | |
| <p class="text-gray-500 text-sm">Gérant, Resort Les Alpes</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-8 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 mr-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"La fonction multilingue est incroyable. Nos clients internationaux sont ravis de recevoir des réponses dans leur langue maternelle."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Client" class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Élodie Martin</h4> | |
| <p class="text-gray-500 text-sm">Directrice marketing, Grand Hôtel</p> | |
| </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="md:flex md:items-center md:justify-between"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-6">Prêt à automatiser vos réponses emails ?</h2> | |
| <p class="text-xl text-gray-600 mb-8">Contactez-nous pour une démonstration personnalisée ou pour toute question.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mr-4 mt-1"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Email</h3> | |
| <p class="text-gray-600">contact@mailhotelpro.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mr-4 mt-1"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Téléphone</h3> | |
| <p class="text-gray-600">+33 1 23 45 67 89</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mr-4 mt-1"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-bold">Adresse</h3> | |
| <p class="text-gray-600">123 Rue de Paris, 75001 Paris, France</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <form id="contact-form" class="bg-white p-8 rounded-xl shadow-sm"> | |
| <div class="mb-6"> | |
| <label for="name" class="block text-gray-700 font-medium mb-2">Nom complet</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="email" class="block text-gray-700 font-medium mb-2">Email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div class="mb-6"> | |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> | |
| <textarea id="message" rows="4" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white py-3 px-4 rounded-lg font-medium transition-colors duration-300"> | |
| Envoyer le message | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section id="demo" class="py-20 bg-blue-600 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">Essayez MailHotelPro gratuitement</h2> | |
| <p class="text-xl mb-8 max-w-3xl mx-auto">Découvrez comment notre solution peut transformer votre gestion des emails avec une démonstration personnalisée.</p> | |
| <form id="demo-form" class="max-w-md mx-auto"> | |
| <div class="mb-6"> | |
| <input type="email" placeholder="Votre email professionnel" class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300 text-gray-900"> | |
| </div> | |
| <div class="mb-6"> | |
| <input type="text" placeholder="Nom de votre établissement" class="w-full px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300 text-gray-900"> | |
| </div> | |
| <button type="submit" class="w-full bg-white text-blue-600 hover:bg-gray-100 py-3 px-4 rounded-lg font-bold text-lg transition-colors duration-300"> | |
| Demander une démo | |
| </button> | |
| </form> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-envelope text-blue-400 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold">MailHotel<span class="text-blue-400">Pro</span></span> | |
| </div> | |
| <p class="text-gray-400">La solution intelligente pour automatiser vos réponses emails et améliorer votre service client.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Navigation</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#features" class="text-gray-400 hover:text-white transition-colors duration-300">Fonctionnalités</a></li> | |
| <li><a href="#pricing" class="text-gray-400 hover:text-white transition-colors duration-300">Tarifs</a></li> | |
| <li><a href="#testimonials" class="text-gray-400 hover:text-white transition-colors duration-300">Témoignages</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition-colors duration-300">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Légal</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Conditions générales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Mentions légales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white transition-colors duration-300">Cookies</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Suivez-nous</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-facebook-f text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-twitter text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-linkedin-in text-xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white transition-colors duration-300"> | |
| <i class="fab fa-instagram text-xl"></i> | |
| </a> | |
| </div> | |
| <div class="mt-6"> | |
| <h4 class="font-medium mb-2">Langue</h4> | |
| <div class="relative footer-language-selector inline-block"> | |
| <button id="footer-language-button" class="flex items-center space-x-2 text-gray-400 hover:text-white focus:outline-none px-3 py-1 border border-gray-700 rounded-lg"> | |
| <span class="fi fi-fr"></span> | |
| <span>Français</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| </button> | |
| <div id="footer-language-dropdown" class="footer-language-dropdown mt-1 left-0"> | |
| <div class="footer-language-option" data-lang="fr"> | |
| <span class="fi fi-fr mr-3"></span> | |
| <span>Français</span> | |
| </div> | |
| <div class="footer-language-option" data-lang="en"> | |
| <span class="fi fi-gb mr-3"></span> | |
| <span>English</span> | |
| </div> | |
| <div class="footer-language-option" data-lang="es"> | |
| <span class="fi fi-es mr-3"></span> | |
| <span>Español</span> | |
| </div> | |
| <div class="footer-language-option" data-lang="de"> | |
| <span class="fi fi-de mr-3"></span> | |
| <span>Deutsch</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> | |
| <p>© 2023 MailHotelPro. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Menu mobile | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('open'); | |
| }); | |
| // Gestion des menus de langue | |
| function setupLanguageSelector(buttonId, dropdownId) { | |
| const button = document.getElementById(buttonId); | |
| const dropdown = document.getElementById(dropdownId); | |
| if (button && dropdown) { | |
| button.addEventListener('click', function(e) { | |
| e.stopPropagation(); | |
| const isOpen = dropdown.style.display === 'block'; | |
| document.querySelectorAll('.language-dropdown, .footer-language-dropdown').forEach(d => { | |
| d.style.display = 'none'; | |
| }); | |
| dropdown.style.display = isOpen ? 'none' : 'block'; | |
| }); | |
| } | |
| } | |
| // Initialiser tous les sélecteurs de langue | |
| setupLanguageSelector('language-button', 'language-dropdown'); | |
| setupLanguageSelector('mobile-language-button', 'mobile-language-dropdown'); | |
| setupLanguageSelector('footer-language-button', 'footer-language-dropdown'); | |
| // Fermer les menus déroulants quand on clique ailleurs | |
| document.addEventListener('click', function() { | |
| document.querySelectorAll('.language-dropdown, .footer-language-dropdown').forEach(dropdown => { | |
| dropdown.style.display = 'none'; | |
| }); | |
| }); | |
| // Gestion du changement de langue | |
| document.querySelectorAll('.language-option, .footer-language-option').forEach(option => { | |
| option.addEventListener('click', function() { | |
| const lang = this.getAttribute('data-lang'); | |
| const flagClass = this.querySelector('.fi').className; | |
| const languageName = this.querySelector('span:not(.fi)').textContent; | |
| // Mettre à jour tous les sélecteurs de langue | |
| document.querySelectorAll('#language-button, #mobile-language-button, #footer-language-button').forEach(button => { | |
| button.innerHTML = ` | |
| <span class="${flagClass}"></span> | |
| <span>${languageName}</span> | |
| <i class="fas fa-chevron-down text-xs"></i> | |
| `; | |
| }); | |
| // Fermer tous les menus déroulants | |
| document.querySelectorAll('.language-dropdown, .footer-language-dropdown').forEach(dropdown => { | |
| dropdown.style.display = 'none'; | |
| }); | |
| // Ici vous pourriez ajouter la logique pour changer la langue du site | |
| console.log(`Langue sélectionnée: ${lang}`); | |
| alert(`Langue changée en ${languageName}`); | |
| }); | |
| }); | |
| // Animation smooth scroll pour les liens | |
| 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' | |
| }); | |
| // Fermer le menu mobile si ouvert | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (mobileMenu.classList.contains('open')) { | |
| mobileMenu.classList.remove('open'); | |
| } | |
| } | |
| }); | |
| }); | |
| // Validation des formulaires | |
| document.getElementById('contact-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Merci pour votre message ! Nous vous contacterons bientôt.'); | |
| this.reset(); | |
| }); | |
| document.getElementById('demo-form').addEventListener('submit', function(e) { | |
| e.preventDefault(); | |
| alert('Merci pour votre demande de démonstration ! Notre équipe va vous contacter rapidement.'); | |
| this.reset(); | |
| }); | |
| </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=hdebbah/mailhotelpro" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |