Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>LinguaQuest - Apprentissage de Langues Interactif</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> | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .floating { | |
| animation: float 3s ease-in-out infinite; | |
| } | |
| .language-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); | |
| } | |
| .progress-ring__circle { | |
| transition: stroke-dashoffset 0.5s; | |
| transform: rotate(-90deg); | |
| transform-origin: 50% 50%; | |
| } | |
| .chat-bubble { | |
| position: relative; | |
| border-radius: 1.25rem; | |
| } | |
| .chat-bubble:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 20%; | |
| width: 0; | |
| height: 0; | |
| border: 10px solid transparent; | |
| border-top-color: #3B82F6; | |
| border-bottom: 0; | |
| margin-left: -10px; | |
| margin-bottom: -10px; | |
| } | |
| .user-bubble:after { | |
| left: 80%; | |
| border-top-color: #10B981; | |
| } | |
| .fade-in { | |
| animation: fadeIn 0.5s ease-in; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; } | |
| to { opacity: 1; } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation --> | |
| <nav class="bg-white shadow-lg"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex justify-between items-center py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-language text-3xl text-blue-500"></i> | |
| <span class="ml-2 text-2xl font-bold text-blue-600">LinguaQuest</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:flex items-center space-x-8"> | |
| <a href="#" class="text-blue-600 font-medium">Accueil</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Cours</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Jeux</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Progression</a> | |
| <a href="#" class="text-gray-600 hover:text-blue-600">Communauté</a> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="px-4 py-2 text-blue-600 border border-blue-600 rounded-full hover:bg-blue-50 transition"> | |
| Connexion | |
| </button> | |
| <button id="upgradeBtn" class="px-4 py-2 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full hover:from-blue-600 hover:to-blue-700 transition shadow-md"> | |
| Premium | |
| </button> | |
| <button class="md:hidden text-gray-600"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section class="bg-gradient-to-r from-blue-500 to-blue-600 text-white py-16"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="flex flex-col md:flex-row items-center"> | |
| <div class="md:w-1/2 mb-10 md:mb-0"> | |
| <h1 class="text-4xl md:text-5xl font-bold mb-6">Apprenez une langue comme jamais auparavant</h1> | |
| <p class="text-xl mb-8 opacity-90">Jeux interactifs, quiz captivants et conversations simulées pour maîtriser une nouvelle langue naturellement.</p> | |
| <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4"> | |
| <button class="px-6 py-3 bg-white text-blue-600 rounded-full font-medium hover:bg-gray-100 transition shadow-lg"> | |
| Commencer gratuitement | |
| </button> | |
| <button class="px-6 py-3 border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition"> | |
| <i class="fas fa-play mr-2"></i> Voir la démo | |
| </button> | |
| </div> | |
| </div> | |
| <div class="md:w-1/2 flex justify-center"> | |
| <div class="relative w-80 h-80"> | |
| <div class="absolute top-0 left-0 w-64 h-64 bg-blue-400 rounded-full opacity-20"></div> | |
| <div class="absolute top-10 right-0 w-64 h-64 bg-blue-300 rounded-full opacity-20"></div> | |
| <img src="https://images.unsplash.com/photo-1546410531-bb4caa6b424d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" | |
| class="absolute floating w-64 h-64 object-cover rounded-xl shadow-2xl border-4 border-white" alt="Language Learning"> | |
| <div class="absolute -bottom-5 -right-5 bg-white p-4 rounded-xl shadow-lg"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-trophy text-green-600 text-xl"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <p class="text-xs text-gray-500">Points gagnés</p> | |
| <p class="font-bold text-gray-800">1,245 XP</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Languages Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Choisissez votre langue</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Apprenez n'importe quelle langue avec nos méthodes interactives et amusantes.</p> | |
| </div> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6"> | |
| <!-- Language Cards --> | |
| <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-blue-50 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-3xl">🇫🇷</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center text-gray-800">Français</h3> | |
| <p class="text-gray-500 text-center mt-2">Débutant</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 relative"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-blue-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="40"></circle> | |
| </svg> | |
| <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-blue-600">60%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-3xl">🇪🇸</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center text-gray-800">Espagnol</h3> | |
| <p class="text-gray-500 text-center mt-2">Intermédiaire</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 relative"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-red-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="25"></circle> | |
| </svg> | |
| <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-red-600">75%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-yellow-50 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-3xl">🇩🇪</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center text-gray-800">Allemand</h3> | |
| <p class="text-gray-500 text-center mt-2">Débutant</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 relative"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-yellow-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="70"></circle> | |
| </svg> | |
| <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-yellow-600">30%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-green-50 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-3xl">🇮🇹</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center text-gray-800">Italien</h3> | |
| <p class="text-gray-500 text-center mt-2">Avancé</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 relative"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-green-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="10"></circle> | |
| </svg> | |
| <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-green-600">90%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-purple-50 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-3xl">🇯🇵</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center text-gray-800">Japonais</h3> | |
| <p class="text-gray-500 text-center mt-2">Débutant</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 relative"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-purple-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="85"></circle> | |
| </svg> | |
| <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-purple-600">15%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="language-card bg-white rounded-xl shadow-md overflow-hidden transition duration-300 cursor-pointer"> | |
| <div class="p-6"> | |
| <div class="w-16 h-16 bg-pink-50 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <span class="text-3xl">🇨🇳</span> | |
| </div> | |
| <h3 class="text-xl font-semibold text-center text-gray-800">Chinois</h3> | |
| <p class="text-gray-500 text-center mt-2">Nouveau</p> | |
| <div class="mt-4 flex justify-center"> | |
| <div class="w-12 h-12 relative"> | |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-gray-200" stroke-width="2"></circle> | |
| <circle cx="18" cy="18" r="16" fill="none" class="stroke-pink-500 progress-ring__circle" stroke-width="2" stroke-dasharray="100" stroke-dashoffset="95"></circle> | |
| </svg> | |
| <span class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-xs font-bold text-pink-600">5%</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-6 py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition"> | |
| <i class="fas fa-plus mr-2"></i> Voir plus de langues | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Features Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Notre méthode révolutionnaire</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Apprenez naturellement avec des activités interactives conçues par des experts.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Feature 1 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-gamepad text-blue-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Jeux éducatifs</h3> | |
| <p class="text-gray-600">Apprenez sans effort avec nos jeux conçus pour renforcer votre mémoire et votre compréhension.</p> | |
| <div class="mt-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Mémorisation par répétition espacée</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Adapté à votre niveau</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-blue-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Système de récompenses</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 2 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-comments text-green-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Conversations simulées</h3> | |
| <p class="text-gray-600">Pratiquez des dialogues réels avec notre IA qui s'adapte à vos réponses pour une expérience naturelle.</p> | |
| <div class="mt-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Scénarios de la vie quotidienne</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Correction instantanée</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-green-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Prononciation évaluée</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Feature 3 --> | |
| <div class="bg-white p-8 rounded-xl shadow-sm hover:shadow-md transition"> | |
| <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mb-6"> | |
| <i class="fas fa-trophy text-purple-600 text-2xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3 text-gray-800">Quiz interactifs</h3> | |
| <p class="text-gray-600">Testez vos connaissances avec des quiz variés qui s'adaptent à votre progression.</p> | |
| <div class="mt-6"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Questions à choix multiples</span> | |
| </div> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Associations d'images</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="w-2 h-2 bg-purple-500 rounded-full mr-2"></div> | |
| <span class="text-sm text-gray-600">Défis chronométrés</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Interactive Demo Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Essayez notre simulateur de conversation</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Pratiquez une conversation réelle avec notre IA linguistique.</p> | |
| </div> | |
| <div class="bg-gray-50 rounded-xl p-6 shadow-inner max-w-3xl mx-auto"> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center"> | |
| <i class="fas fa-robot text-white"></i> | |
| </div> | |
| <span class="ml-3 font-medium">Assistant Lingua</span> | |
| </div> | |
| <div class="flex items-center space-x-2"> | |
| <span class="text-sm text-gray-500">Niveau : Débutant</span> | |
| <span class="text-sm px-2 py-1 bg-blue-100 text-blue-600 rounded-full">Français</span> | |
| </div> | |
| </div> | |
| <div id="chatContainer" class="h-96 overflow-y-auto mb-6 space-y-4"> | |
| <!-- Chat messages will appear here --> | |
| <div class="chat-bubble bg-blue-100 text-gray-800 p-4 max-w-xs fade-in"> | |
| <p>Bonjour ! Je m'appelle Lingua. Comment puis-je vous aider à apprendre le français aujourd'hui ?</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-1 bg-white rounded-full shadow-sm border border-gray-200 overflow-hidden"> | |
| <input id="userInput" type="text" placeholder="Tapez votre réponse en français..." class="w-full px-4 py-3 focus:outline-none"> | |
| </div> | |
| <button id="sendBtn" class="w-12 h-12 bg-blue-500 text-white rounded-full flex items-center justify-center hover:bg-blue-600 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-microphone"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| <button class="text-gray-500 hover:text-blue-500"> | |
| <i class="fas fa-language"></i> | |
| </button> | |
| </div> | |
| <button id="hintBtn" class="text-sm text-blue-500 hover:text-blue-700 flex items-center"> | |
| <i class="fas fa-lightbulb mr-1"></i> Aide | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-8 text-center"> | |
| <p class="text-gray-600 mb-4">Cette démo utilise notre version gratuite avec des fonctionnalités limitées.</p> | |
| <button class="px-6 py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-md"> | |
| <i class="fas fa-crown mr-2"></i> Débloquer toutes les fonctionnalités | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Pricing Section --> | |
| <section class="py-16 bg-gray-50"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Choisissez votre plan</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Accédez à plus de fonctionnalités et apprenez sans limites.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto"> | |
| <!-- Free Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-800">Gratuit</h3> | |
| <span class="ml-auto px-3 py-1 bg-blue-100 text-blue-600 text-sm rounded-full">Basique</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">Parfait pour essayer et découvrir notre plateforme.</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold text-gray-800">$0</span> | |
| <span class="text-gray-500">/mois</span> | |
| </div> | |
| <button class="w-full py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition"> | |
| Commencer | |
| </button> | |
| </div> | |
| <div class="border-t border-gray-200 px-8 py-6 bg-gray-50"> | |
| <h4 class="text-sm font-semibold text-gray-500 uppercase mb-4">Ce qui est inclus</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Accès à 3 jeux par jour</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">5 minutes de conversation simulée</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">1 quiz quotidien</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-red-400 mr-3"></i> | |
| <span>Contenu avancé</span> | |
| </li> | |
| <li class="flex items-center text-gray-400"> | |
| <i class="fas fa-times text-red-400 mr-3"></i> | |
| <span>Mode hors ligne</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Premium Plan --> | |
| <div class="bg-white rounded-xl shadow-lg overflow-hidden border-2 border-blue-500 relative"> | |
| <div class="absolute top-0 right-0 bg-blue-500 text-white text-xs font-bold px-3 py-1 rounded-bl-lg"> | |
| Le plus populaire | |
| </div> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-800">Premium</h3> | |
| <span class="ml-auto px-3 py-1 bg-blue-100 text-blue-600 text-sm rounded-full">Illimité</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">Pour ceux qui veulent apprendre sérieusement.</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold text-gray-800">$9.99</span> | |
| <span class="text-gray-500">/mois</span> | |
| </div> | |
| <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-md"> | |
| Essayer gratuitement | |
| </button> | |
| </div> | |
| <div class="border-t border-gray-200 px-8 py-6 bg-gray-50"> | |
| <h4 class="text-sm font-semibold text-gray-500 uppercase mb-4">Ce qui est inclus</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Accès illimité à tous les jeux</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Conversations simulées illimitées</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Quiz personnalisés</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Contenu avancé et exclusif</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Mode hors ligne</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Family Plan --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden border border-gray-200"> | |
| <div class="p-8"> | |
| <div class="flex items-center mb-6"> | |
| <h3 class="text-2xl font-bold text-gray-800">Famille</h3> | |
| <span class="ml-auto px-3 py-1 bg-purple-100 text-purple-600 text-sm rounded-full">Économique</span> | |
| </div> | |
| <p class="text-gray-600 mb-6">Parfait pour les familles ou les petits groupes.</p> | |
| <div class="mb-8"> | |
| <span class="text-4xl font-bold text-gray-800">$19.99</span> | |
| <span class="text-gray-500">/mois</span> | |
| </div> | |
| <button class="w-full py-3 border-2 border-purple-500 text-purple-500 rounded-full font-medium hover:bg-purple-50 transition"> | |
| En savoir plus | |
| </button> | |
| </div> | |
| <div class="border-t border-gray-200 px-8 py-6 bg-gray-50"> | |
| <h4 class="text-sm font-semibold text-gray-500 uppercase mb-4">Ce qui est inclus</h4> | |
| <ul class="space-y-3"> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Jusqu'à 6 comptes Premium</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Suivi des progrès individuels</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Contrôle parental</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Toutes les fonctionnalités Premium</span> | |
| </li> | |
| <li class="flex items-center"> | |
| <i class="fas fa-check text-green-500 mr-3"></i> | |
| <span class="text-gray-600">Support prioritaire</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <p class="text-gray-600">Vous avez une entreprise ou une école ? <a href="#" class="text-blue-500 hover:underline">Contactez-nous</a> pour des tarifs spéciaux.</p> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-800 mb-4">Ce que disent nos utilisateurs</h2> | |
| <p class="text-xl text-gray-600 max-w-2xl mx-auto">Des milliers d'étudiants ont amélioré leurs compétences linguistiques avec LinguaQuest.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-12 h-12 rounded-full object-cover" alt="User"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Sophie Martin</h4> | |
| <div class="flex items-center mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Les jeux de LinguaQuest m'ont fait oublier que j'étais en train d'apprendre. En trois mois, je peux maintenant tenir une conversation en espagnol avec mes collègues !"</p> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-12 h-12 rounded-full object-cover" alt="User"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Thomas Leroy</h4> | |
| <div class="flex items-center mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star-half-alt text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"Le simulateur de conversation est incroyablement réaliste. C'est comme avoir un tuteur personnel disponible 24/7. J'ai enfin surmonté ma peur de parler allemand."</p> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-gray-50 p-6 rounded-xl"> | |
| <div class="flex items-center mb-4"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-12 h-12 rounded-full object-cover" alt="User"> | |
| <div class="ml-4"> | |
| <h4 class="font-semibold">Camille Dubois</h4> | |
| <div class="flex items-center mt-1"> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| <i class="fas fa-star text-yellow-400"></i> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 italic">"J'utilise LinguaQuest avec mes enfants. Le plan famille est parfait et ils adorent les jeux éducatifs. Nous apprenons l'italien ensemble avant nos vacances !"</p> | |
| </div> | |
| </div> | |
| <div class="mt-12 text-center"> | |
| <button class="px-6 py-3 border-2 border-blue-500 text-blue-500 rounded-full font-medium hover:bg-blue-50 transition"> | |
| <i class="fas fa-comment-alt mr-2"></i> Lire plus de témoignages | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- CTA Section --> | |
| <section class="py-16 bg-gradient-to-r from-blue-600 to-blue-700 text-white"> | |
| <div class="max-w-6xl mx-auto px-4 text-center"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-6">Prêt à parler couramment une nouvelle langue ?</h2> | |
| <p class="text-xl mb-8 max-w-2xl mx-auto opacity-90">Rejoignez plus de 500,000 apprenants qui utilisent déjà LinguaQuest.</p> | |
| <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> | |
| <button class="px-8 py-4 bg-white text-blue-600 rounded-full font-bold hover:bg-gray-100 transition shadow-xl text-lg"> | |
| Commencer gratuitement | |
| </button> | |
| <button class="px-8 py-4 border-2 border-white text-white rounded-full font-bold hover:bg-white hover:bg-opacity-10 transition text-lg"> | |
| <i class="fas fa-crown mr-2"></i> Essayer Premium | |
| </button> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-gray-900 text-white pt-16 pb-8"> | |
| <div class="max-w-6xl mx-auto px-4"> | |
| <div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12"> | |
| <div class="col-span-2"> | |
| <div class="flex items-center mb-4"> | |
| <i class="fas fa-language text-3xl text-blue-400"></i> | |
| <span class="ml-2 text-2xl font-bold text-white">LinguaQuest</span> | |
| </div> | |
| <p class="text-gray-400 mb-4">La manière la plus amusante et efficace d'apprendre une nouvelle langue.</p> | |
| <div class="flex space-x-4"> | |
| <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-instagram"></i> | |
| </a> | |
| <a href="#" class="text-gray-400 hover:text-white"> | |
| <i class="fab fa-youtube"></i> | |
| </a> | |
| </div> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Apprendre</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Cours</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Jeux</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Quiz</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Conversations</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Langues</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Entreprise</h4> | |
| <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">Carrières</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Presse</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Blog</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Contact</a></li> | |
| </ul> | |
| </div> | |
| <div> | |
| <h4 class="text-lg font-semibold mb-4">Support</h4> | |
| <ul class="space-y-2"> | |
| <li><a href="#" class="text-gray-400 hover:text-white">FAQ</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Centre d'aide</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Confidentialité</a></li> | |
| <li><a href="#" class="text-gray-400 hover:text-white">Conditions</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 pt-8 flex flex-col md:flex-row justify-between items-center"> | |
| <p class="text-gray-400 mb-4 md:mb-0">© 2023 LinguaQuest. Tous droits réservés.</p> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Mentions légales</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Politique de confidentialité</a> | |
| <a href="#" class="text-gray-400 hover:text-white text-sm">Paramètres des cookies</a> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <!-- Upgrade Modal --> | |
| <div id="upgradeModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> | |
| <div class="bg-white rounded-xl max-w-md w-full mx-4 p-8 relative"> | |
| <button id="closeModal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| <div class="text-center mb-6"> | |
| <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4"> | |
| <i class="fas fa-crown text-blue-500 text-2xl"></i> | |
| </div> | |
| <h3 class="text-2xl font-bold text-gray-800 mb-2">Passez à Premium</h3> | |
| <p class="text-gray-600">Débloquez toutes les fonctionnalités et apprenez sans limites.</p> | |
| </div> | |
| <div class="space-y-4 mb-6"> | |
| <div class="flex items-center p-4 border border-gray-200 rounded-lg"> | |
| <div class="w-10 h-10 bg-blue-50 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-infinity text-blue-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Accès illimité</h4> | |
| <p class="text-sm text-gray-500">À tous les jeux et conversations</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-4 border border-gray-200 rounded-lg"> | |
| <div class="w-10 h-10 bg-green-50 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-chart-line text-green-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Progression rapide</h4> | |
| <p class="text-sm text-gray-500">Apprenez 2x plus vite</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center p-4 border border-gray-200 rounded-lg"> | |
| <div class="w-10 h-10 bg-purple-50 rounded-full flex items-center justify-center mr-4"> | |
| <i class="fas fa-mobile-alt text-purple-500"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">Mode hors ligne</h4> | |
| <p class="text-sm text-gray-500">Apprenez n'importe où</p> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full py-3 bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-full font-medium hover:from-blue-600 hover:to-blue-700 transition shadow-md mb-4"> | |
| Essayer 7 jours gratuitement | |
| </button> | |
| <p class="text-center text-xs text-gray-500">Ensuite $9.99/mois. Annulez à tout moment.</p> | |
| </div> | |
| </div> | |
| <script> | |
| // Chat simulation | |
| const chatContainer = document.getElementById('chatContainer'); | |
| const userInput = document.getElementById('userInput'); | |
| const sendBtn = document.getElementById('sendBtn'); | |
| const hintBtn = document.getElementById('hintBtn'); | |
| const botResponses = [ | |
| "Très bien ! Pouvez-vous me dire comment vous vous appelez en français ?", | |
| "Enchanté de faire votre connaissance ! Quel âge avez-vous ?", | |
| "C'est un bon début. Parlons de vos hobbies. Qu'aimez-vous faire pendant votre temps libre ?", | |
| "Intéressant ! Moi j'aide les gens à apprendre le français. Avez-vous déjà visité la France ?", | |
| "Merci pour cette conversation ! Voulez-vous pratiquer un autre sujet ?" | |
| ]; | |
| let currentResponse = 0; | |
| function addBotMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'chat-bubble bg-blue-100 text-gray-800 p-4 max-w-xs fade-in'; | |
| messageDiv.innerHTML = `<p>${message}</p>`; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| } | |
| function addUserMessage(message) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'chat-bubble user-bubble bg-green-100 text-gray-800 p-4 max-w-xs ml-auto fade-in'; | |
| messageDiv.innerHTML = `<p>${message}</p>`; | |
| chatContainer.appendChild(messageDiv); | |
| chatContainer.scrollTop = chatContainer.scrollHeight; | |
| // Bot responds after a short delay | |
| setTimeout(() => { | |
| if (currentResponse < botResponses.length) { | |
| addBotMessage(botResponses[currentResponse]); | |
| currentResponse++; | |
| } else { | |
| addBotMessage("Nous avons atteint la limite de la version gratuite. Passez à Premium pour continuer !"); | |
| } | |
| }, 1000); | |
| } | |
| sendBtn.addEventListener('click', () => { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addUserMessage(message); | |
| userInput.value = ''; | |
| } | |
| }); | |
| userInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| addUserMessage(message); | |
| userInput.value = ''; | |
| } | |
| } | |
| }); | |
| hintBtn.addEventListener('click', () => { | |
| const hints = [ | |
| "Essayez de dire 'Bonjour, je m'appelle [votre nom]'", | |
| "Vous pourriez répondre avec 'J'ai [âge] ans'", | |
| "Dites quelque chose comme 'J'aime [activité]'", | |
| "Répondez avec 'Oui' ou 'Non' puis développez", | |
| "Essayez de poser une question comme 'Quel est votre plat préféré ?'" | |
| ]; | |
| if (currentResponse < hints.length) { | |
| alert(`Indice: ${hints[currentResponse]}`); | |
| } else { | |
| alert("Passez à Premium pour plus d'indices et de fonctionnalités !"); | |
| } | |
| }); | |
| // Upgrade modal | |
| const upgradeBtn = document.getElementById('upgradeBtn'); | |
| const upgradeModal = document.getElementById('upgradeModal'); | |
| const closeModal = document.getElementById('closeModal'); | |
| upgradeBtn.addEventListener('click', () => { | |
| upgradeModal.classList.remove('hidden'); | |
| }); | |
| closeModal.addEventListener('click', () => { | |
| upgradeModal.classList.add('hidden'); | |
| }); | |
| // Close modal when clicking outside | |
| upgradeModal.addEventListener('click', (e) => { | |
| if (e.target === upgradeModal) { | |
| upgradeModal.classList.add('hidden'); | |
| } | |
| }); | |
| // Demo conversation starter | |
| setTimeout(() => { | |
| addBotMessage("Essayez de taper 'Bonjour' pour commencer la conversation !"); | |
| }, 2000); | |
| </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=zama1/linguaquest" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |