Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>DebatAcademique | Plateforme de débats universitaires</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> | |
| <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| .argument-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); | |
| } | |
| .skill-meter { | |
| height: 8px; | |
| border-radius: 4px; | |
| background-color: #e5e7eb; | |
| } | |
| .skill-progress { | |
| height: 100%; | |
| border-radius: 4px; | |
| background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%); | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-sm"> | |
| <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"> | |
| <div class="flex-shrink-0 flex items-center"> | |
| <i data-feather="message-square" class="text-indigo-600 h-8 w-8"></i> | |
| <span class="ml-2 text-xl font-bold text-gray-900">DebatAcademique</span> | |
| </div> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:space-x-8"> | |
| <a href="#" class="border-indigo-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Accueil</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Débats</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Compétences</a> | |
| <a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Profil</a> | |
| </div> | |
| <div class="hidden sm:ml-6 sm:flex sm:items-center"> | |
| <button class="bg-indigo-600 hover:bg-indigo-700 text-white px-4 py-2 rounded-md text-sm font-medium">Se connecter</button> | |
| </div> | |
| <div class="-mr-2 flex items-center sm:hidden"> | |
| <button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500"> | |
| <i data-feather="menu"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <div class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> | |
| <div class="text-center"> | |
| <h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl"> | |
| Développez votre esprit critique | |
| </h1> | |
| <p class="mt-6 max-w-lg mx-auto text-xl"> | |
| Une plateforme sécurisée pour débattre, argumenter et progresser dans vos compétences académiques. | |
| </p> | |
| <div class="mt-10"> | |
| <a href="#" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-gray-50"> | |
| Commencer un débat | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Featured Debates --> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Débats en cours</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Participez aux discussions actuelles | |
| </p> | |
| </div> | |
| <div class="mt-10 grid gap-8 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1"> | |
| <!-- Debate Card 1 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden argument-card transition duration-300 ease-in-out" data-aos="fade-up"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-indigo-100 text-indigo-800">Philosophie</span> | |
| <span class="ml-auto text-sm text-gray-500">24 participants</span> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">La liberté d'expression doit-elle avoir des limites ?</h3> | |
| <p class="mt-3 text-base text-gray-500"> | |
| Débat sur les limites éthiques et légales de la liberté d'expression dans les sociétés modernes. | |
| </p> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="clock" class="text-gray-400"></i> | |
| </div> | |
| <div class="ml-2 text-sm text-gray-500">3 jours restants</div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">Participer →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Debate Card 2 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden argument-card transition duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800">Science</span> | |
| <span class="ml-auto text-sm text-gray-500">42 participants</span> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">L'intelligence artificielle menace-t-elle l'humanité ?</h3> | |
| <p class="mt-3 text-base text-gray-500"> | |
| Discussion sur les risques et opportunités du développement de l'IA pour notre société. | |
| </p> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="clock" class="text-gray-400"></i> | |
| </div> | |
| <div class="ml-2 text-sm text-gray-500">5 jours restants</div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">Participer →</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Debate Card 3 --> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden argument-card transition duration-300 ease-in-out" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="p-6"> | |
| <div class="flex items-center"> | |
| <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-purple-100 text-purple-800">Économie</span> | |
| <span class="ml-auto text-sm text-gray-500">18 participants</span> | |
| </div> | |
| <h3 class="mt-4 text-xl font-semibold text-gray-900">Le revenu universel est-il une solution viable ?</h3> | |
| <p class="mt-3 text-base text-gray-500"> | |
| Analyse des avantages et inconvénients du revenu universel dans les économies contemporaines. | |
| </p> | |
| <div class="mt-6 flex items-center justify-between"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0"> | |
| <i data-feather="clock" class="text-gray-400"></i> | |
| </div> | |
| <div class="ml-2 text-sm text-gray-500">2 jours restants</div> | |
| </div> | |
| <button class="text-indigo-600 hover:text-indigo-900 text-sm font-medium">Participer →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-10 text-center"> | |
| <a href="#" class="text-indigo-600 hover:text-indigo-900 font-medium">Voir tous les débats →</a> | |
| </div> | |
| </div> | |
| <!-- Skills Tracking --> | |
| <div class="bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12"> | |
| <div class="lg:text-center"> | |
| <h2 class="text-base text-indigo-600 font-semibold tracking-wide uppercase">Suivi des compétences</h2> | |
| <p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl"> | |
| Améliorez vos capacités d'argumentation | |
| </p> | |
| <p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> | |
| Notre système analyse et suit votre progression dans différentes compétences académiques clés. | |
| </p> | |
| </div> | |
| <div class="mt-10 grid gap-8 lg:grid-cols-3 md:grid-cols-2 sm:grid-cols-1"> | |
| <!-- Skill 1 --> | |
| <div class="bg-white p-6 rounded-lg shadow" data-aos="fade-up"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-indigo-500 rounded-md p-3"> | |
| <i data-feather="book" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Recherche documentaire</h3> | |
| <div class="mt-2"> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 75%"></div> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">75% de maîtrise</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skill 2 --> | |
| <div class="bg-white p-6 rounded-lg shadow" data-aos="fade-up" data-aos-delay="100"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-green-500 rounded-md p-3"> | |
| <i data-feather="edit-3" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Construction d'argument</h3> | |
| <div class="mt-2"> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 60%"></div> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">60% de maîtrise</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Skill 3 --> | |
| <div class="bg-white p-6 rounded-lg shadow" data-aos="fade-up" data-aos-delay="200"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> | |
| <i data-feather="users" class="text-white h-6 w-6"></i> | |
| </div> | |
| <div class="ml-5 w-0 flex-1"> | |
| <h3 class="text-lg font-medium text-gray-900">Dialectique</h3> | |
| <div class="mt-2"> | |
| <div class="skill-meter"> | |
| <div class="skill-progress" style="width: 82%"></div> | |
| </div> | |
| <p class="mt-1 text-sm text-gray-500">82% de maîtrise</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- CTA Section --> | |
| <div class="bg-indigo-700"> | |
| <div class="max-w-2xl mx-auto text-center py-16 px-4 sm:py-20 sm:px-6 lg:px-8"> | |
| <h2 class="text-3xl font-extrabold text-white sm:text-4xl"> | |
| <span class="block">Prêt à développer vos compétences ?</span> | |
| <span class="block">Rejoignez notre communauté académique.</span> | |
| </h2> | |
| <p class="mt-4 text-lg leading-6 text-indigo-200"> | |
| Inscrivez-vous gratuitement et commencez à participer aux débats dès aujourd'hui. | |
| </p> | |
| <a href="#" class="mt-8 w-full inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50 sm:w-auto"> | |
| S'inscrire maintenant | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Footer --> | |
| <footer class="bg-white"> | |
| <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8"> | |
| <nav class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer"> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Accueil</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Débats</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Compétences</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">FAQ</a> | |
| </div> | |
| <div class="px-5 py-2"> | |
| <a href="#" class="text-base text-gray-500 hover:text-gray-900">Confidentialité</a> | |
| </div> | |
| </nav> | |
| <div class="mt-8 flex justify-center space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="twitter"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="facebook"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-gray-500"> | |
| <i data-feather="linkedin"></i> | |
| </a> | |
| </div> | |
| <p class="mt-8 text-center text-base text-gray-400"> | |
| © 2023 DebatAcademique. Tous droits réservés. | |
| </p> | |
| </div> | |
| </footer> | |
| <script> | |
| AOS.init({ | |
| duration: 800, | |
| easing: 'ease-in-out', | |
| once: true | |
| }); | |
| </script> | |
| <script> | |
| feather.replace(); | |
| </script> | |
| </body> | |
| </html> | |