True Banana
<body class="bg-gray-100 font-sans leading-normal tracking-normal"> <nav class="bg-white border shadow-lg"> <div class="max-w-6xl mx-auto px-4"> <div class="flex justify-between"> <div class="flex space-x-4"> <div> <a href="#" class="flex items-center py-5 px-2 text-gray-700 hover:text-gray-900"> <i class="iconoir-accessibility"></i> <span class="ml-2 text-2xl font-semibold">Doctolib</span> </a> </div> <div class="hidden md:flex items-center space-x-1"> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 flex items-center"> <i class="iconoir-accessibility-tech"></i> <span class="ml-1">Accueil</span> </a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 flex items-center"> <i class="iconoir-activity"></i> <span class="ml-1">Prendre Rendez-vous</span> </a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 flex items-center"> <i class="iconoir-album-list"></i> <span class="ml-1">Mon Compte</span> </a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 flex items-center"> <i class="iconoir-apple-imac-2021-side"></i> <span class="ml-1">Aide</span> </a> <a href="#" class="py-5 px-3 text-gray-700 hover:text-gray-900 flex items-center"> <i class="iconoir-book"></i> <span class="ml-1">Blog</span> </a> </div> </div> <div class="hidden md:flex items-center space-x-1"> <a href="#" class="py-2 px-3 relative"> <button class="flex items-center relative"> <i class="iconoir-bell"></i> <span class="absolute top-0 right-0 inline-block w-2 h-2 bg-red-500 rounded-full"></span> </button> </a> <a href="#" class="py-2 px-3 bg-blue-500 text-white rounded hover:bg-blue-400 transition duration-300 flex items-center"> <i class="iconoir-chat-bubble-check"></i> <span class="ml-1">Se Connecter</span> </a> </div> </div> </div> <div class="md:hidden"> <button class="mobile-menu-button"> <i class="iconoir-cloud-download"></i> </button> </div> <div class="mobile-menu hidden md:hidden"> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200 flex items-center"> <i class="iconoir-accessibility-tech"></i> <span class="ml-1">Accueil</span> </a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200 flex items-center"> <i class="iconoir-activity"></i> <span class="ml-1">Prendre Rendez-vous</span> </a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200 flex items-center"> <i class="iconoir-album-list"></i> <span class="ml-1">Mon Compte</span> </a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200 flex items-center"> <i class="iconoir-apple-imac-2021-side"></i> <span class="ml-1">Aide</span> </a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200 flex items-center"> <i class="iconoir-book"></i> <span class="ml-1">Blog</span> </a> <a href="#" class="block py-2 px-4 text-sm hover:bg-gray-200 flex items-center"> <i class="iconoir-bell"></i> <span class="absolute top-0 right-0 inline-block w-2 h-2 bg-red-500 rounded-full"></span> </a> <a href="#" class="block py-2 px-4 text-sm bg-blue-500 text-white rounded hover:bg-blue-400 transition duration-300 flex items-center"> <i class="iconoir-chat-bubble-check"></i> <span class="ml-1">Se Connecter</span> </a> </div> </nav> <header class="bg-gradient-to-r from-blue-500 to-purple-600 py-20"> <div class="max-w-6xl mx-auto px-4 text-center text-white"> <h1 class="text-5xl font-bold mb-4">Bienvenue sur Doctolib</h1> <p class="text-2xl mb-8">Votre santé, notre priorité. Prenez rendez-vous en ligne avec vos médecins.</p> <div class="flex justify-center"> <a href="#" class="bg-white text-blue-500 py-3 px-6 rounded-full hover:bg-gray-200 transition duration-300 mr-4">Prendre Rendez-vous</a> <a href="#" class="bg-transparent border-2 border-white text-white py-3 px-6 rounded-full hover:bg-white hover:text-blue-500 transition duration-300">Créer un Compte</a> </div> </div> </header> <section class="py-20 bg-gray-50"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-blue-600">Nos Services</h2> <p class="text-gray-600">Découvrez les services que nous offrons pour votre santé.</p> </div> <div class="grid grid-cols-1 md:grid-cols-4 gap-8"> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-apple-imac-2021-side"></i> <h3 class="text-2xl font-bold mb-2 text-blue-500">Consultations</h3> <p class="text-gray-600">Prenez rendez-vous pour des consultations médicales en ligne ou en personne.</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-bell"></i> <h3 class="text-2xl font-bold mb-2 text-blue-500">Urgences</h3> <p class="text-gray-600">Accédez rapidement aux services d'urgence et aux soins critiques.</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-calendar"></i> <h3 class="text-2xl font-bold mb-2 text-blue-500">Suivi de Santé</h3> <p class="text-gray-600">Suivez vos rendez-vous, traitements et dossiers médicaux facilement.</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-book"></i> <h3 class="text-2xl font-bold mb-2 text-blue-500">Blog</h3> <p class="text-gray-600">Lisez nos articles pour rester informé sur la santé et le bien-être.</p> </div> </div> </div> </section> <section class="bg-gray-100 py-20"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-blue-600">Témoignages</h2> <p class="text-gray-600">Ce que nos patients disent de nous.</p> </div> <div class="flex flex-col space-y-8"> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <p class="text-gray-600 italic">"Grâce à Doctolib, j'ai pu prendre rendez-vous avec mon médecin en quelques clics. Un service exceptionnel!"</p> <p class="text-right font-bold mt-4 text-blue-500">- Marie Dupont</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <p class="text-gray-600 italic">"Le suivi de ma santé n'a jamais été aussi facile. Je recommande vivement!"</p> <p class="text-right font-bold mt-4 text-blue-500">- Jean Martin</p> </div> </div> </div> </section> <section class="bg-gray-50 py-20"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-blue-600">Statistiques</h2> <p class="text-gray-600">Découvrez nos réalisations.</p> </div> <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-activity"></i> <h3 class="text-3xl font-bold mb-2 text-blue-500">1500+</h3> <p class="text-gray-600">Rendez-vous pris</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-calendar"></i> <h3 class="text-3xl font-bold mb-2 text-blue-500">300+</h3> <p class="text-gray-600">Médecins disponibles</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <i class="iconoir-cloud-check"></i> <h3 class="text-3xl font-bold mb-2 text-blue-500">98%</h3> <p class="text-gray-600">Satisfaction des patients</p> </div> </div> </div> </section> <section class="bg-gradient-to-r from-blue-500 to-purple-600 py-20"> <div class="max-w-6xl mx-auto px-4 text-center text-white"> <h2 class="text-4xl font-bold mb-4">Prêt à commencer?</h2> <p class="text-2xl mb-8">Rejoignez-nous et prenez soin de votre santé dès aujourd'hui!</p> <div class="flex justify-center"> <a href="#" class="bg-white text-blue-500 py-3 px-6 rounded-full hover:bg-gray-200 transition duration-300 mr-4">Prendre Rendez-vous</a> <a href="#" class="bg-transparent border-2 border-white text-white py-3 px-6 rounded-full hover:bg-white hover:text-blue-500 transition duration-300">Créer un Compte</a> </div> </div> </section> <section class="bg-gray-100 py-20"> <div class="max-w-6xl mx-auto px-4"> <div class="text-center mb-12"> <h2 class="text-4xl font-bold text-blue-600">Derniers Articles du Blog</h2> <p class="text-gray-600">Restez informé avec nos derniers articles.</p> </div> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <img src="https://www.tailwindai.dev/placeholder.svg" alt="Article 1" class="w-full h-48 object-cover rounded-t-lg mb-4"> <h3 class="text-2xl font-bold mb-2 text-blue-500">Titre de l'Article 1</h3> <p class="text-gray-600">Un aperçu des sujets de santé et de bien-être abordés dans cet article.</p> </div> <div class="bg-white p-6 rounded-lg border hover:shadow-lg transition duration-300"> <img src="https://www.tailwindai.dev/placeholder.svg" alt="Article 2" class="w-full h-48 object-cover rounded-t-lg mb-4"> <h3 class="text-2xl font-bold mb-2 text-blue-500">Titre de l'Article 2</h3> <p class="text-gray-600">Découvrez des conseils et des informations utiles pour votre santé.</p> </div> </div> </div> </section> <footer class="bg-white border py-8"> <div class="max-w-6xl mx-auto px-4"> <div class="flex justify-between items-center"> <div class="flex space-x-4"> <a href="#" class="text-gray-700 hover:text-gray-900"> <i class="iconoir-facebook"></i> </a> <a href="#" class="text-gray-700 hover:text-gray-900"> <i class="iconoir-twitter"></i> </a> <a href="#" class="text-gray-700 hover:text-gray-900"> <i class="iconoir-instagram"></i> </a> <a href="#" class="text-gray-700 hover:text-gray-900"> <i class="iconoir-linkedin"></i> </a> </div> <div class="text-gray-600"> <p>© 2023 Doctolib. Tous droits réservés.</p> </div> </div> </div> </footer> </body>