Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Nos Offres Télémédecine | Elodia Tech</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap'); | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| scroll-behavior: smooth; | |
| } | |
| .hero-gradient { | |
| background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); | |
| } | |
| .offer-card { | |
| transition: all 0.3s ease; | |
| border: 1px solid #e5e7eb; | |
| } | |
| .offer-card:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); | |
| border-color: #3B82F6; | |
| } | |
| .highlight-badge { | |
| position: absolute; | |
| top: -12px; | |
| right: 20px; | |
| } | |
| .elodia-blue { | |
| color: #1D4ED8; | |
| } | |
| .elodia-light-blue { | |
| color: #3B82F6; | |
| } | |
| .elodia-bg-blue { | |
| background-color: #1D4ED8; | |
| } | |
| .elodia-bg-light-blue { | |
| background-color: #3B82F6; | |
| } | |
| .elodia-border-blue { | |
| border-color: #1D4ED8; | |
| } | |
| .feature-image-bg { | |
| background-size: cover; | |
| background-position: center; | |
| position: relative; | |
| z-index: 1; | |
| overflow: hidden; | |
| } | |
| .feature-image-bg::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background: rgba(255, 255, 255, 0.85); | |
| z-index: -1; | |
| } | |
| .pharmacie-bg { | |
| background-image: url('https://images.unsplash.com/photo-1587854692152-cbe660dbde88?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'); | |
| } | |
| .patients-bg { | |
| background-image: url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'); | |
| } | |
| .pharmacienne-bg { | |
| background-image: url('https://images.unsplash.com/photo-1622253692010-333f2da60341?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80'); | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link:after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: #3B82F6; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover:after { | |
| width: 100%; | |
| } | |
| .offer-feature-item { | |
| display: flex; | |
| align-items: flex-start; | |
| margin-bottom: 1rem; | |
| } | |
| .offer-feature-icon { | |
| background-color: #EFF6FF; | |
| color: #3B82F6; | |
| border-radius: 50%; | |
| width: 32px; | |
| height: 32px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-right: 1rem; | |
| flex-shrink: 0; | |
| } | |
| .comparison-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| } | |
| .comparison-table th, .comparison-table td { | |
| padding: 1rem; | |
| text-align: left; | |
| border-bottom: 1px solid #E5E7EB; | |
| } | |
| .comparison-table th { | |
| background-color: #F9FAFB; | |
| font-weight: 600; | |
| } | |
| .comparison-table tr:last-child td { | |
| border-bottom: none; | |
| } | |
| .check-icon { | |
| color: #10B981; | |
| } | |
| .cross-icon { | |
| color: #EF4444; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm sticky top-0 z-50"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center"> | |
| <img src="https://elodiatech.com/wp-content/uploads/2023/12/Logo-Elodia-Tech.png" alt="Elodia Tech Logo" class="h-12"> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="index.html" class="nav-link text-gray-700 hover:text-blue-500">Accueil</a> | |
| <a href="offres.html" class="nav-link text-blue-500 font-medium">Nos offres</a> | |
| <a href="#contact" class="nav-link text-gray-700 hover:text-blue-500">Contact</a> | |
| </nav> | |
| <div class="hidden md:block"> | |
| <a href="#" class="elodia-bg-blue text-white px-6 py-2 rounded-full hover:bg-blue-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Livret d'information | |
| </a> | |
| </div> | |
| <button class="md:hidden text-gray-700" id="mobile-menu-button"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| <!-- Mobile Menu --> | |
| <div class="md:hidden hidden absolute top-16 left-0 right-0 bg-white shadow-md p-4 z-50" id="mobile-menu"> | |
| <div class="flex flex-col space-y-4"> | |
| <a href="index.html" class="text-gray-700 hover:text-blue-500">Accueil</a> | |
| <a href="offres.html" class="text-blue-500 font-medium">Nos offres</a> | |
| <a href="#contact" class="text-gray-700 hover:text-blue-500">Contact</a> | |
| <a href="#" class="elodia-bg-blue text-white px-6 py-2 rounded-full hover:bg-blue-700 transition text-center"> | |
| <i class="fas fa-download mr-2"></i> Livret d'information | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-gradient text-white py-20"> | |
| <div class="container mx-auto px-4"> | |
| <div class="max-w-3xl mx-auto text-center"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Nos offres de télémédecine pour pharmacies</h1> | |
| <p class="text-xl mb-8">Découvrez nos solutions adaptées à votre pharmacie pour développer votre activité et améliorer la prise en charge de vos patients.</p> | |
| <div class="flex justify-center gap-4"> | |
| <a href="#offres" class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition">Voir les offres</a> | |
| <a href="#comparaison" class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition">Comparer</a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Offres Section --> | |
| <section id="offres" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Nos solutions pour votre pharmacie</h2> | |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12"> | |
| <!-- Offre MedispotOne --> | |
| <div class="offer-card bg-white rounded-xl shadow-md overflow-hidden relative"> | |
| <div class="absolute highlight-badge bg-yellow-400 text-gray-900 px-4 py-1 rounded-full text-sm font-bold"> | |
| SOLUTION LA PLUS POPULAIRE | |
| </div> | |
| <div class="p-8"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">MedispotOne</h3> | |
| <p class="text-gray-600">Solution complète de télémédecine pour pharmacie</p> | |
| </div> | |
| <div class="bg-blue-50 text-blue-800 px-4 py-2 rounded-lg"> | |
| <span class="text-2xl font-bold">499€</span> | |
| <span class="text-sm">/mois</span> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-gray-700 mb-6">Transformez votre pharmacie en centre de télémédecine avec notre solution tout-en-un incluant cabine médicale, logiciel et accompagnement.</p> | |
| <div class="space-y-4"> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Cabine médicale connectée</h4> | |
| <p class="text-gray-600 text-sm">Espace dédié équipé pour les consultations</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Logiciel de gestion intégré</h4> | |
| <p class="text-gray-600 text-sm">Planning, dossier patient, facturation</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Réseau de médecins partenaires</h4> | |
| <p class="text-gray-600 text-sm">Accès à notre réseau de professionnels</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Formation complète</h4> | |
| <p class="text-gray-600 text-sm">Prise en main et bonnes pratiques</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Support technique 7j/7</h4> | |
| <p class="text-gray-600 text-sm">Assistance téléphonique et en ligne</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#contact" class="block w-full elodia-bg-blue text-white text-center py-3 rounded-lg hover:bg-blue-700 transition">Demander une démo</a> | |
| </div> | |
| </div> | |
| <!-- Offre Telepharma --> | |
| <div class="offer-card bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="p-8"> | |
| <div class="flex justify-between items-start mb-6"> | |
| <div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Telepharma</h3> | |
| <p class="text-gray-600">Solution légère de téléconsultation</p> | |
| </div> | |
| <div class="bg-blue-50 text-blue-800 px-4 py-2 rounded-lg"> | |
| <span class="text-2xl font-bold">199€</span> | |
| <span class="text-sm">/mois</span> | |
| </div> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-gray-700 mb-6">Solution économique pour proposer des téléconsultations dans votre pharmacie sans investissement lourd.</p> | |
| <div class="space-y-4"> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Logiciel de téléconsultation</h4> | |
| <p class="text-gray-600 text-sm">Interface simple et intuitive</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Compatibilité multi-appareils</h4> | |
| <p class="text-gray-600 text-sm">Ordinateur, tablette ou smartphone</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Réseau de médecins optionnel</h4> | |
| <p class="text-gray-600 text-sm">Accès possible à notre réseau</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Formation en ligne</h4> | |
| <p class="text-gray-600 text-sm">Tutoriels et documentation</p> | |
| </div> | |
| </div> | |
| <div class="offer-feature-item"> | |
| <div class="offer-feature-icon"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Support technique 5j/7</h4> | |
| <p class="text-gray-600 text-sm">Assistance par email et chat</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <a href="#contact" class="block w-full bg-gray-100 text-gray-800 text-center py-3 rounded-lg hover:bg-gray-200 transition">Demander une démo</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Points Forts Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Les avantages de nos solutions</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="elodia-blue mb-4"> | |
| <i class="fas fa-chart-line text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Augmentation du CA</h3> | |
| <p class="text-gray-600">Nos partenaires voient en moyenne une augmentation de 15 à 30% de leur chiffre d'affaires grâce aux services additionnels.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="elodia-blue mb-4"> | |
| <i class="fas fa-users text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Fidélisation clientèle</h3> | |
| <p class="text-gray-600">Créez un lien fort avec vos patients en leur offrant des services de santé innovants et pratiques.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="elodia-blue mb-4"> | |
| <i class="fas fa-bullseye text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Différenciation</h3> | |
| <p class="text-gray-600">Positionnez-vous comme une pharmacie innovante et augmentez votre visibilité dans votre territoire.</p> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mt-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="elodia-blue mb-4"> | |
| <i class="fas fa-shield-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Sécurité des données</h3> | |
| <p class="text-gray-600">Hébergement HDS certifié et chiffrement des données conforme RGPD pour une sécurité maximale.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="elodia-blue mb-4"> | |
| <i class="fas fa-exchange-alt text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Interopérabilité</h3> | |
| <p class="text-gray-600">Intégration avec les principaux logiciels métiers et systèmes d'information de santé.</p> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md text-center"> | |
| <div class="elodia-blue mb-4"> | |
| <i class="fas fa-headset text-4xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Support réactif</h3> | |
| <p class="text-gray-600">Assistance technique disponible 7j/7 avec temps de réponse garanti pour une tranquillité d'esprit.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Comparaison Section --> | |
| <section id="comparaison" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Comparaison des offres</h2> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <div class="overflow-x-auto"> | |
| <table class="comparison-table"> | |
| <thead> | |
| <tr> | |
| <th class="w-1/3">Fonctionnalités</th> | |
| <th class="w-1/3 text-center">Telepharma</th> | |
| <th class="w-1/3 text-center">MedispotOne</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <tr> | |
| <td>Cabine médicale physique</td> | |
| <td class="text-center"><i class="fas fa-times cross-icon"></i></td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Logiciel de téléconsultation</td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Gestion des rendez-vous</td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Dossier patient complet</td> | |
| <td class="text-center"><i class="fas fa-times cross-icon"></i></td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Réseau de médecins partenaires</td> | |
| <td class="text-center">Optionnel</td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Intégration avec logiciel pharmacie</td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Formation en présentiel</td> | |
| <td class="text-center"><i class="fas fa-times cross-icon"></i></td> | |
| <td class="text-center"><i class="fas fa-check check-icon"></i></td> | |
| </tr> | |
| <tr> | |
| <td>Support technique</td> | |
| <td class="text-center">5j/7 (email/chat)</td> | |
| <td class="text-center">7j/7 (téléphone/chat)</td> | |
| </tr> | |
| <tr> | |
| <td>Prix mensuel</td> | |
| <td class="text-center font-bold">199€/mois</td> | |
| <td class="text-center font-bold">499€/mois</td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <a href="#contact" class="inline-block elodia-bg-blue text-white px-8 py-3 rounded-full hover:bg-blue-700 transition">Demander un conseil personnalisé</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Témoignages Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="container mx-auto px-4"> | |
| <h2 class="text-3xl font-bold text-center mb-12 text-gray-800">Ils nous font confiance</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <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-700 mb-6">"Depuis l'installation de MedispotOne, notre pharmacie est devenue un véritable pôle de santé. Les patients apprécient la qualité des consultations et notre chiffre d'affaires a augmenté de 22% en 6 mois."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/43.jpg" alt="Marie D." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Marie D.</h4> | |
| <p class="text-gray-600 text-sm">Pharmacienne à Lyon</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <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-700 mb-6">"La solution Telepharma nous a permis de proposer des téléconsultations sans investissement lourd. Simple à mettre en place et très appréciée par nos patients, surtout les personnes âgées."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Pierre L." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Pierre L.</h4> | |
| <p class="text-gray-600 text-sm">Pharmacien à Marseille</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-8 rounded-xl shadow-md"> | |
| <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-700 mb-6">"L'accompagnement d'Elodia Tech a été déterminant dans le succès de notre transition vers la télémédecine. Leur expertise et leur réactivité font toute la différence."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/65.jpg" alt="Sophie M." class="w-12 h-12 rounded-full mr-4"> | |
| <div> | |
| <h4 class="font-bold">Sophie M.</h4> | |
| <p class="text-gray-600 text-sm">Pharmacienne à Toulouse</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 hero-gradient text-white"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="text-3xl font-bold mb-6">Prêt à transformer votre pharmacie ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto">Rejoignez les centaines de pharmacies qui ont déjà adopté nos solutions de télémédecine.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#contact" class="bg-white text-blue-600 px-8 py-3 rounded-full font-medium hover:bg-gray-100 transition">Contactez-nous</a> | |
| <a href="tel:+33123456789" class="border-2 border-white text-white px-8 py-3 rounded-full font-medium hover:bg-white hover:text-blue-600 transition"> | |
| <i class="fas fa-phone-alt mr-2"></i> 01 23 45 67 89 | |
| </a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <div class="md:w-1/2"> | |
| <h2 class="text-3xl font-bold mb-6 text-gray-800">Contactez notre équipe</h2> | |
| <p class="text-gray-600 mb-8">Nos experts sont à votre disposition pour répondre à vos questions et vous accompagner dans votre projet de télémédecine.</p> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-gray-700 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> | |
| <label for="email" class="block text-gray-700 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> | |
| <label for="phone" class="block text-gray-700 mb-2">Téléphone</label> | |
| <input type="tel" id="phone" 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> | |
| <label for="pharmacy" class="block text-gray-700 mb-2">Nom de votre pharmacie</label> | |
| <input type="text" id="pharmacy" 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> | |
| <label for="message" class="block text-gray-700 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 elodia-bg-blue text-white px-6 py-3 rounded-full hover:bg-blue-700 transition">Envoyer le message</button> | |
| </form> | |
| </div> | |
| <div class="md:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-xl h-full"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Nos coordonnées</h3> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <i class="fas fa-map-marker-alt elodia-blue mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Adresse</h4> | |
| <p class="text-gray-600">12 rue de la Paix, 75002 Paris</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-phone-alt elodia-blue mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Téléphone</h4> | |
| <p class="text-gray-600">01 23 45 67 89</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-envelope elodia-blue mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Email</h4> | |
| <p class="text-gray-600">contact@elodiatech.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <i class="fas fa-clock elodia-blue mt-1 mr-3"></i> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Horaires</h4> | |
| <p class="text-gray-600">Lundi - Vendredi : 9h - 18h</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Suivez-nous</h3> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-600 hover:text-blue-600"> | |
| <i class="fab fa-facebook-f text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600"> | |
| <i class="fab fa-twitter text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600"> | |
| <i class="fab fa-linkedin-in text-2xl"></i> | |
| </a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600"> | |
| <i class="fab fa-instagram text-2xl"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h3 class="text-xl font-semibold mb-4 text-gray-800">Demandez notre documentation</h3> | |
| <a href="#" class="inline-block elodia-bg-blue text-white px-6 py-2 rounded-full hover:bg-blue-700 transition"> | |
| <i class="fas fa-download mr-2"></i> Télécharger le livret | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white py-12"> | |
| <div class="container mx-auto px-4"> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> | |
| <div> | |
| <img src="https://elodiatech.com/wp-content/uploads/2023/12/Logo-Elodia-Tech.png" alt="Elodia Tech Logo" class="h-10 mb-4"> | |
| <p class="text-gray-400">Solutions innovantes de télémédecine pour les professionnels de santé.</p> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Solutions</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pour les pharmacies</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pour les infirmiers</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pour les médecins</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Pour les établissements</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h3 class="text-lg font-semibold mb-4">Entreprise</h3> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">À propos</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Actualités</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Carrières</a></li> | |
| <li><a href="#contact" class="text-gray-400 hover:text-white">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">Mentions légales</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">CGU</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Politique de confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cookies</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-800 mt-8 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 Elodia Tech. 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-linkedin-in"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-instagram"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('mobile-menu-button').addEventListener('click', function() { | |
| const menu = document.getElementById('mobile-menu'); | |
| menu.classList.toggle('hidden'); | |
| }); | |
| // Smooth scrolling for anchor links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function(e) { | |
| if (this.getAttribute('href') === '#') return; | |
| e.preventDefault(); | |
| const targetId = this.getAttribute('href'); | |
| const targetElement = document.querySelector(targetId); | |
| if (targetElement) { | |
| // Close mobile menu if open | |
| const mobileMenu = document.getElementById('mobile-menu'); | |
| if (!mobileMenu.classList.contains('hidden')) { | |
| mobileMenu.classList.add('hidden'); | |
| } | |
| targetElement.scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=elodiatech/pce" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |