| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Tontine Solidaire - Épargne collective</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> |
| .gradient-bg { |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); |
| } |
| .card-hover: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); |
| } |
| .tontine-item { |
| transition: all 0.3s ease; |
| } |
| .tontine-item:hover { |
| background-color: #f5f3ff; |
| } |
| .modal { |
| transition: opacity 0.3s ease, transform 0.3s ease; |
| } |
| .modal-enter { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| .modal-enter-active { |
| opacity: 1; |
| transform: scale(1); |
| } |
| .modal-exit { |
| opacity: 1; |
| transform: scale(1); |
| } |
| .modal-exit-active { |
| opacity: 0; |
| transform: scale(0.9); |
| } |
| </style> |
| </head> |
| <body class="font-sans bg-gray-50"> |
| |
| <header class="gradient-bg text-white shadow-lg"> |
| <div class="container mx-auto px-4 py-6"> |
| <div class="flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <i class="fas fa-hand-holding-usd text-3xl"></i> |
| <h1 class="text-2xl font-bold">Tontine<span class="text-indigo-200">Solidaire</span></h1> |
| </div> |
| <nav class="hidden md:flex space-x-8"> |
| <a href="#accueil" class="hover:text-indigo-200 transition">Accueil</a> |
| <a href="#fonctionnement" class="hover:text-indigo-200 transition">Fonctionnement</a> |
| <a href="#tontines" class="hover:text-indigo-200 transition">Nos Tontines</a> |
| <a href="#contact" class="hover:text-indigo-200 transition">Contact</a> |
| </nav> |
| <div class="flex items-center space-x-4"> |
| <button id="loginBtn" class="px-4 py-2 rounded-lg hover:bg-indigo-700 transition">Connexion</button> |
| <button id="registerBtn" class="px-4 py-2 bg-white text-indigo-600 rounded-lg font-medium hover:bg-gray-100 transition">Inscription</button> |
| <button id="mobileMenuBtn" class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </div> |
| |
| |
| <div id="mobileMenu" class="hidden md:hidden mt-4 pb-4"> |
| <div class="flex flex-col space-y-3"> |
| <a href="#accueil" class="block py-2 hover:bg-indigo-700 px-4 rounded">Accueil</a> |
| <a href="#fonctionnement" class="block py-2 hover:bg-indigo-700 px-4 rounded">Fonctionnement</a> |
| <a href="#tontines" class="block py-2 hover:bg-indigo-700 px-4 rounded">Nos Tontines</a> |
| <a href="#contact" class="block py-2 hover:bg-indigo-700 px-4 rounded">Contact</a> |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <section id="accueil" class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-4 flex flex-col md:flex-row items-center"> |
| <div class="md:w-1/2 mb-10 md:mb-0"> |
| <h2 class="text-4xl md:text-5xl font-bold mb-6">Épargnez ensemble, <span class="text-indigo-200">grandissez ensemble</span></h2> |
| <p class="text-xl mb-8 text-indigo-100">Rejoignez notre communauté de tontine en ligne sécurisée et bénéficiez d'un système d'épargne collectif fiable et transparent.</p> |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="px-8 py-3 bg-white text-indigo-600 rounded-lg font-bold hover:bg-gray-100 transition">Créer une tontine</button> |
| <button class="px-8 py-3 border-2 border-white text-white rounded-lg font-bold hover:bg-indigo-700 transition">Découvrir</button> |
| </div> |
| </div> |
| <div class="md:w-1/2 flex justify-center"> |
| <img src="https://images.unsplash.com/photo-1554224155-6726b3ff858f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80" alt="Épargne collective" class="rounded-xl shadow-2xl max-w-full h-auto"> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="bg-white py-12"> |
| <div class="container mx-auto px-4"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 text-center"> |
| <div class="p-6 rounded-lg bg-indigo-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">5 000+</div> |
| <div class="text-gray-600">Membres actifs</div> |
| </div> |
| <div class="p-6 rounded-lg bg-indigo-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">15M €</div> |
| <div class="text-gray-600">Épargnés collectivement</div> |
| </div> |
| <div class="p-6 rounded-lg bg-indigo-50"> |
| <div class="text-4xl font-bold text-indigo-600 mb-2">98%</div> |
| <div class="text-gray-600">Taux de satisfaction</div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="fonctionnement" 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-800 mb-4">Comment fonctionne notre tontine ?</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Un système simple, transparent et sécurisé pour épargner ensemble.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
| <div class="bg-white p-8 rounded-xl shadow-md card-hover transition"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-user-plus text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">1. Rejoignez une tontine</h3> |
| <p class="text-gray-600">Choisissez parmi nos différentes tontines selon la durée et le montant qui vous conviennent.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md card-hover transition"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-money-bill-wave text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">2. Effectuez vos versements</h3> |
| <p class="text-gray-600">Versez régulièrement votre contribution selon le calendrier établi par la tontine.</p> |
| </div> |
| |
| <div class="bg-white p-8 rounded-xl shadow-md card-hover transition"> |
| <div class="w-16 h-16 bg-indigo-100 rounded-full flex items-center justify-center mb-6"> |
| <i class="fas fa-hand-holding-usd text-indigo-600 text-2xl"></i> |
| </div> |
| <h3 class="text-xl font-bold mb-3 text-gray-800">3. Recevez votre tour</h3> |
| <p class="text-gray-600">À votre tour, recevez le montant total de la cagnotte selon les règles de la tontine.</p> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="tontines" 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-800 mb-4">Nos tontines disponibles</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Choisissez la formule qui correspond à vos besoins.</p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12"> |
| <div class="bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden card-hover transition"> |
| <div class="gradient-bg text-white p-6"> |
| <h3 class="text-2xl font-bold">Tontine Classique</h3> |
| <p class="text-indigo-200">12 mois - 10 participants</p> |
| </div> |
| <div class="p-6"> |
| <div class="text-4xl font-bold text-gray-800 mb-4">100€<span class="text-lg text-gray-500">/mois</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Durée : 12 mois</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>10 participants</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Tour aléatoire</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Assurance incluse</span> |
| </li> |
| </ul> |
| <button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Rejoindre</button> |
| </div> |
| </div> |
| |
| <div class="bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden card-hover transition"> |
| <div class="gradient-bg text-white p-6"> |
| <h3 class="text-2xl font-bold">Tontine Express</h3> |
| <p class="text-indigo-200">6 mois - 5 participants</p> |
| </div> |
| <div class="p-6"> |
| <div class="text-4xl font-bold text-gray-800 mb-4">200€<span class="text-lg text-gray-500">/mois</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Durée : 6 mois</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>5 participants</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Tour aléatoire</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Assurance incluse</span> |
| </li> |
| </ul> |
| <button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Rejoindre</button> |
| </div> |
| </div> |
| |
| <div class="bg-white border border-gray-200 rounded-xl shadow-lg overflow-hidden card-hover transition"> |
| <div class="gradient-bg text-white p-6"> |
| <h3 class="text-2xl font-bold">Tontine Familiale</h3> |
| <p class="text-indigo-200">24 mois - 20 participants</p> |
| </div> |
| <div class="p-6"> |
| <div class="text-4xl font-bold text-gray-800 mb-4">50€<span class="text-lg text-gray-500">/mois</span></div> |
| <ul class="space-y-3 mb-6"> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Durée : 24 mois</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>20 participants</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Tour défini à l'avance</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-check-circle text-green-500 mr-2"></i> |
| <span>Assurance incluse</span> |
| </li> |
| </ul> |
| <button class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Rejoindre</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center"> |
| <button class="px-8 py-3 border-2 border-indigo-600 text-indigo-600 rounded-lg font-bold hover:bg-indigo-50 transition">Voir toutes les tontines</button> |
| </div> |
| </div> |
| </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-800 mb-4">Témoignages</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Ce que nos membres disent de notre système de tontine.</p> |
| </div> |
| |
| <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="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Marie D.</h4> |
| <p class="text-gray-500 text-sm">Membre depuis 2021</p> |
| </div> |
| </div> |
| <p class="text-gray-600">"Grâce à la tontine, j'ai pu financer les études de mon fils sans avoir à contracter un prêt. Le système est très transparent et sécurisé."</p> |
| <div class="mt-4 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 class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Jean K.</h4> |
| <p class="text-gray-500 text-sm">Membre depuis 2020</p> |
| </div> |
| </div> |
| <p class="text-gray-600">"Je participe à plusieurs tontines depuis 2 ans. C'est devenu mon principal moyen d'épargne. La communauté est très solidaire."</p> |
| <div class="mt-4 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 class="bg-white p-8 rounded-xl shadow-md"> |
| <div class="flex items-center mb-4"> |
| <div class="w-12 h-12 rounded-full bg-indigo-100 flex items-center justify-center mr-4"> |
| <i class="fas fa-user text-indigo-600"></i> |
| </div> |
| <div> |
| <h4 class="font-bold">Amina S.</h4> |
| <p class="text-gray-500 text-sm">Membre depuis 2022</p> |
| </div> |
| </div> |
| <p class="text-gray-600">"La tontine m'a permis de lancer mon petit commerce. J'ai reçu mon tour au bon moment et j'ai pu acheter mon stock initial."</p> |
| <div class="mt-4 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> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section 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-800 mb-4">Questions fréquentes</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Trouvez les réponses aux questions les plus posées.</p> |
| </div> |
| |
| <div class="max-w-3xl mx-auto"> |
| <div class="border border-gray-200 rounded-lg overflow-hidden mb-6"> |
| <button class="faq-toggle w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> |
| <span class="text-lg font-medium text-gray-800">Comment fonctionne le tirage au sort ?</span> |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-6 bg-white"> |
| <p class="text-gray-600">Le tirage au sort est effectué de manière aléatoire et transparente sous la supervision d'un notaire virtuel. Chaque participant a une chance égale d'être sélectionné à chaque tour. Le processus est enregistré et peut être vérifié par tous les membres de la tontine.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden mb-6"> |
| <button class="faq-toggle w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> |
| <span class="text-lg font-medium text-gray-800">Que se passe-t-il si un membre ne paie pas sa cotisation ?</span> |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-6 bg-white"> |
| <p class="text-gray-600">Notre système inclut une assurance qui couvre les impayés. Si un membre ne paie pas sa cotisation à temps, l'assurance prend le relais pour que la tontine ne soit pas impactée. Le membre en défaut sera exclu de la tontine après plusieurs rappels.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden mb-6"> |
| <button class="faq-toggle w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> |
| <span class="text-lg font-medium text-gray-800">Comment sont sécurisés les fonds ?</span> |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-6 bg-white"> |
| <p class="text-gray-600">Les fonds sont déposés sur un compte séquestre dans une banque partenaire. Aucun retrait n'est possible sans l'accord de tous les membres de la tontine. De plus, toutes les transactions sont tracées et enregistrées dans un système blockchain pour une transparence totale.</p> |
| </div> |
| </div> |
| |
| <div class="border border-gray-200 rounded-lg overflow-hidden"> |
| <button class="faq-toggle w-full text-left p-6 bg-gray-50 hover:bg-gray-100 transition flex justify-between items-center"> |
| <span class="text-lg font-medium text-gray-800">Puis-je créer ma propre tontine ?</span> |
| <i class="fas fa-chevron-down text-indigo-600 transition-transform"></i> |
| </button> |
| <div class="faq-content hidden p-6 bg-white"> |
| <p class="text-gray-600">Oui, vous pouvez créer votre propre tontine en choisissant la durée, le montant des cotisations et en invitant des membres de confiance. Notre plateforme vous fournit tous les outils nécessaires pour gérer votre tontine en toute simplicité.</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section class="gradient-bg text-white py-20"> |
| <div class="container mx-auto px-4 text-center"> |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à rejoindre notre communauté ?</h2> |
| <p class="text-xl mb-8 text-indigo-100 max-w-2xl mx-auto">Inscrivez-vous dès maintenant et bénéficiez d'un système d'épargne collectif fiable et transparent.</p> |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
| <button class="px-8 py-3 bg-white text-indigo-600 rounded-lg font-bold hover:bg-gray-100 transition">Créer un compte</button> |
| <button class="px-8 py-3 border-2 border-white text-white rounded-lg font-bold hover:bg-indigo-700 transition">En savoir plus</button> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <section id="contact" class="py-20 bg-white"> |
| <div class="container mx-auto px-4"> |
| <div class="max-w-4xl mx-auto"> |
| <div class="text-center mb-16"> |
| <h2 class="text-3xl md:text-4xl font-bold text-gray-800 mb-4">Contactez-nous</h2> |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Une question ? Notre équipe est là pour vous répondre.</p> |
| </div> |
| |
| <div class="bg-gray-50 rounded-xl p-8 shadow-md"> |
| <form id="contactForm"> |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"> |
| <div> |
| <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-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div> |
| <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-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| </div> |
| <div class="mb-6"> |
| <label for="subject" class="block text-gray-700 font-medium mb-2">Sujet</label> |
| <input type="text" id="subject" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="message" class="block text-gray-700 font-medium mb-2">Message</label> |
| <textarea id="message" rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"></textarea> |
| </div> |
| <button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Envoyer le message</button> |
| </form> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| |
| <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> |
| <div class="flex items-center space-x-2 mb-4"> |
| <i class="fas fa-hand-holding-usd text-2xl text-indigo-400"></i> |
| <h3 class="text-xl font-bold">Tontine<span class="text-indigo-400">Solidaire</span></h3> |
| </div> |
| <p class="text-gray-400 mb-4">Un système d'épargne collectif fiable et transparent pour tous.</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 mb-4">Navigation</h4> |
| <ul class="space-y-2"> |
| <li><a href="#accueil" class="text-gray-400 hover:text-white transition">Accueil</a></li> |
| <li><a href="#fonctionnement" class="text-gray-400 hover:text-white transition">Fonctionnement</a></li> |
| <li><a href="#tontines" class="text-gray-400 hover:text-white transition">Nos Tontines</a></li> |
| <li><a href="#contact" class="text-gray-400 hover:text-white transition">Contact</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Légal</h4> |
| <ul class="space-y-2"> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Conditions générales</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Politique de confidentialité</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">Mentions légales</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-white transition">FAQ</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="text-lg font-bold mb-4">Newsletter</h4> |
| <p class="text-gray-400 mb-4">Abonnez-vous à notre newsletter pour recevoir nos actualités.</p> |
| <form class="flex"> |
| <input type="email" placeholder="Votre email" class="px-4 py-2 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 text-gray-900"> |
| <button type="submit" class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 transition"><i class="fas fa-paper-plane"></i></button> |
| </form> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-12 pt-8 text-center text-gray-400"> |
| <p>© 2023 TontineSolidaire. Tous droits réservés.</p> |
| </div> |
| </div> |
| </footer> |
|
|
| |
| <div id="loginModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 modal"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">Connexion</h3> |
| <button id="closeLoginModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <form id="loginForm"> |
| <div class="mb-4"> |
| <label for="loginEmail" class="block text-gray-700 font-medium mb-2">Email</label> |
| <input type="email" id="loginEmail" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="loginPassword" class="block text-gray-700 font-medium mb-2">Mot de passe</label> |
| <input type="password" id="loginPassword" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition mb-4">Se connecter</button> |
| <div class="text-center"> |
| <a href="#" class="text-indigo-600 hover:text-indigo-800 text-sm">Mot de passe oublié ?</a> |
| </div> |
| </form> |
| <div class="mt-6 pt-6 border-t border-gray-200 text-center"> |
| <p class="text-gray-600">Pas encore de compte ? <a href="#" id="switchToRegister" class="text-indigo-600 hover:text-indigo-800 font-medium">S'inscrire</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="registerModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 modal"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-2xl font-bold text-gray-800">Inscription</h3> |
| <button id="closeRegisterModal" class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <form id="registerForm"> |
| <div class="mb-4"> |
| <label for="registerName" class="block text-gray-700 font-medium mb-2">Nom complet</label> |
| <input type="text" id="registerName" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="registerEmail" class="block text-gray-700 font-medium mb-2">Email</label> |
| <input type="email" id="registerEmail" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="registerPassword" class="block text-gray-700 font-medium mb-2">Mot de passe</label> |
| <input type="password" id="registerPassword" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div class="mb-6"> |
| <label for="registerConfirmPassword" class="block text-gray-700 font-medium mb-2">Confirmer le mot de passe</label> |
| <input type="password" id="registerConfirmPassword" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"> |
| </div> |
| <div class="mb-4"> |
| <input type="checkbox" id="terms" class="mr-2"> |
| <label for="terms" class="text-gray-700">J'accepte les <a href="#" class="text-indigo-600 hover:text-indigo-800">conditions générales</a></label> |
| </div> |
| <button type="submit" class="w-full py-3 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition mb-4">S'inscrire</button> |
| </form> |
| <div class="mt-6 pt-6 border-t border-gray-200 text-center"> |
| <p class="text-gray-600">Déjà un compte ? <a href="#" id="switchToLogin" class="text-indigo-600 hover:text-indigo-800 font-medium">Se connecter</a></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="successModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-xl p-8 max-w-md w-full mx-4 text-center modal"> |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4"> |
| <i class="fas fa-check text-green-600 text-2xl"></i> |
| </div> |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Succès !</h3> |
| <p class="text-gray-600 mb-6" id="successMessage">Votre inscription a été effectuée avec succès.</p> |
| <button id="closeSuccessModal" class="px-6 py-2 bg-indigo-600 text-white rounded-lg font-medium hover:bg-indigo-700 transition">Fermer</button> |
| </div> |
| </div> |
|
|
| <script> |
| |
| const mobileMenuBtn = document.getElementById('mobileMenuBtn'); |
| const mobileMenu = document.getElementById('mobileMenu'); |
| |
| mobileMenuBtn.addEventListener('click', () => { |
| mobileMenu.classList.toggle('hidden'); |
| }); |
| |
| |
| const faqToggles = document.querySelectorAll('.faq-toggle'); |
| |
| faqToggles.forEach(toggle => { |
| toggle.addEventListener('click', () => { |
| const content = toggle.nextElementSibling; |
| const icon = toggle.querySelector('i'); |
| |
| content.classList.toggle('hidden'); |
| icon.classList.toggle('transform'); |
| icon.classList.toggle('rotate-180'); |
| }); |
| }); |
| |
| |
| const loginBtn = document.getElementById('loginBtn'); |
| const registerBtn = document.getElementById('registerBtn'); |
| const loginModal = document.getElementById('loginModal'); |
| const registerModal = document.getElementById('registerModal'); |
| const successModal = document.getElementById('successModal'); |
| const closeLoginModal = document.getElementById('closeLoginModal'); |
| const closeRegisterModal = document.getElementById('closeRegisterModal'); |
| const closeSuccessModal = document.getElementById('closeSuccessModal'); |
| const switchToRegister = document.getElementById('switchToRegister'); |
| const switchToLogin = document.getElementById('switchToLogin'); |
| |
| |
| loginBtn.addEventListener('click', () => { |
| loginModal.classList.remove('hidden'); |
| }); |
| |
| |
| registerBtn.addEventListener('click', () => { |
| registerModal.classList.remove('hidden'); |
| }); |
| |
| |
| closeLoginModal.addEventListener('click', () => { |
| loginModal.classList.add('hidden'); |
| }); |
| |
| closeRegisterModal.addEventListener('click', () => { |
| registerModal.classList.add('hidden'); |
| }); |
| |
| closeSuccessModal.addEventListener('click', () => { |
| successModal.classList.add('hidden'); |
| }); |
| |
| |
| switchToRegister.addEventListener('click', (e) => { |
| e.preventDefault(); |
| loginModal.classList.add('hidden'); |
| registerModal.classList.remove('hidden'); |
| }); |
| |
| switchToLogin.addEventListener('click', (e) => { |
| e.preventDefault(); |
| registerModal.classList.add('hidden'); |
| loginModal.classList.remove('hidden'); |
| }); |
| |
| |
| window.addEventListener('click', (e) => { |
| if (e.target === loginModal) { |
| loginModal.classList.add('hidden'); |
| } |
| if (e.target === registerModal) { |
| registerModal.classList.add('hidden'); |
| } |
| if (e.target === successModal) { |
| successModal.classList.add('hidden'); |
| } |
| }); |
| |
| |
| const loginForm = document.getElementById('loginForm'); |
| const registerForm = document.getElementById('registerForm'); |
| const contactForm = document.getElementById('contactForm'); |
| |
| loginForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| loginModal.classList.add('hidden'); |
| document.getElementById('successMessage').textContent = 'Vous êtes maintenant connecté.'; |
| successModal.classList.remove('hidden'); |
| }); |
| |
| registerForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| registerModal.classList.add('hidden'); |
| document.getElementById('successMessage').textContent = 'Votre compte a été créé avec succès.'; |
| successModal.classList.remove('hidden'); |
| }); |
| |
| contactForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| document.getElementById('successMessage').textContent = 'Votre message a été envoyé avec succès.'; |
| successModal.classList.remove('hidden'); |
| contactForm.reset(); |
| }); |
| |
| |
| 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' |
| }); |
| |
| |
| if (!mobileMenu.classList.contains('hidden')) { |
| mobileMenu.classList.add('hidden'); |
| } |
| } |
| }); |
| }); |
| </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=GinoLab/ticko" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
