| <!DOCTYPE html> |
| <html lang="fr"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>EduNexus AI - Création de Plateformes de Cours en Ligne</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> |
| @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); |
| |
| :root { |
| --neon-blue: #05d9e8; |
| --neon-purple: #d300c5; |
| --accent-green: #00ff9d; |
| --dark: #0d0221; |
| --darker: #010015; |
| } |
| |
| body { |
| font-family: 'Rajdhani', sans-serif; |
| background-color: var(--darker); |
| color: white; |
| overflow-x: hidden; |
| } |
| |
| .cyber-font { |
| font-family: 'Orbitron', sans-serif; |
| } |
| |
| .neon-text { |
| text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue); |
| } |
| |
| .neon-green { |
| text-shadow: 0 0 10px var(--accent-green), 0 0 20px var(--accent-green); |
| } |
| |
| .glow-box { |
| box-shadow: 0 0 15px rgba(5, 217, 232, 0.5); |
| border: 1px solid rgba(5, 217, 232, 0.3); |
| } |
| |
| .glow-box-green { |
| box-shadow: 0 0 15px rgba(0, 255, 157, 0.5); |
| border: 1px solid rgba(0, 255, 157, 0.3); |
| } |
| |
| .scanline { |
| position: relative; |
| overflow: hidden; |
| } |
| |
| .scanline::after { |
| content: ""; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| height: 100%; |
| background: linear-gradient( |
| to bottom, |
| transparent 0%, |
| rgba(5, 217, 232, 0.1) 50%, |
| transparent 100% |
| ); |
| animation: scan 8s linear infinite; |
| pointer-events: none; |
| } |
| |
| @keyframes scan { |
| 0% { transform: translateY(-100%); } |
| 100% { transform: translateY(100%); } |
| } |
| |
| .terminal-text { |
| font-family: 'Courier New', monospace; |
| color: var(--accent-green); |
| text-shadow: 0 0 5px var(--accent-green); |
| } |
| |
| .cyber-btn { |
| position: relative; |
| overflow: hidden; |
| transition: all 0.3s; |
| z-index: 1; |
| } |
| |
| .cyber-btn::before { |
| content: ''; |
| position: absolute; |
| top: 0; |
| left: -100%; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(90deg, transparent, rgba(5, 217, 232, 0.4), transparent); |
| transition: all 0.5s; |
| z-index: -1; |
| } |
| |
| .cyber-btn:hover::before { |
| left: 100%; |
| } |
| |
| .grid-pattern { |
| background: |
| linear-gradient(rgba(5, 217, 232, 0.1) 1px, transparent 1px), |
| linear-gradient(90deg, rgba(5, 217, 232, 0.1) 1px, transparent 1px); |
| background-size: 40px 40px; |
| } |
| |
| .matrix-fall { |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><text x="0" y="15" font-family="Courier New" font-size="16" fill="rgba(0,255,157,0.1)">0</text></svg>'); |
| opacity: 0.1; |
| z-index: 0; |
| animation: matrixFall 50s linear infinite; |
| } |
| |
| @keyframes matrixFall { |
| 0% { background-position: 0 0; } |
| 100% { background-position: 0 1000px; } |
| } |
| |
| .ai-thinking { |
| position: relative; |
| } |
| |
| .ai-thinking::after { |
| content: "..."; |
| position: absolute; |
| animation: aiDots 1.5s steps(5, end) infinite; |
| } |
| |
| @keyframes aiDots { |
| 0%, 20% { content: "."; } |
| 40% { content: ".."; } |
| 60%, 100% { content: "..."; } |
| } |
| |
| .cyber-card { |
| transform-style: preserve-3d; |
| transform: perspective(1000px); |
| transition: all 0.5s; |
| } |
| |
| .cyber-card:hover { |
| transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-10px); |
| } |
| |
| .course-card { |
| transition: all 0.3s; |
| } |
| |
| .course-card:hover { |
| transform: translateY(-10px); |
| box-shadow: 0 15px 30px rgba(0, 255, 157, 0.3); |
| } |
| |
| .progress-ring { |
| transform: rotate(-90deg); |
| } |
| |
| .progress-ring-circle { |
| stroke-dasharray: 251; |
| stroke-dashoffset: 251; |
| transition: stroke-dashoffset 0.5s; |
| } |
| </style> |
| </head> |
| <body class="scanline"> |
| <div class="matrix-fall"></div> |
| |
| |
| <header class="relative z-10"> |
| <div class="container mx-auto px-6 py-6 flex justify-between items-center"> |
| <div class="flex items-center"> |
| <div class="w-12 h-12 rounded-full glow-box flex items-center justify-center mr-4"> |
| <i class="fas fa-graduation-cap text-2xl text-cyan-300 neon-text"></i> |
| </div> |
| <h1 class="cyber-font text-3xl font-bold"> |
| <span class="text-cyan-300 neon-text">EDU</span> |
| <span class="text-green-400 neon-green">NEXUS</span> |
| <span class="text-purple-400">AI</span> |
| </h1> |
| </div> |
| <nav class="hidden md:block"> |
| <ul class="flex space-x-8"> |
| <li><a href="#" class="cyber-font text-lg hover:text-cyan-300 transition-colors">Accueil</a></li> |
| <li><a href="#" class="cyber-font text-lg hover:text-green-400 transition-colors">Générateur</a></li> |
| <li><a href="#" class="cyber-font text-lg hover:text-purple-400 transition-colors">Fonctionnalités</a></li> |
| <li><a href="#" class="cyber-font text-lg hover:text-cyan-300 transition-colors">Tarifs</a></li> |
| <li><a href="#" class="cyber-font text-lg hover:text-green-400 transition-colors">Contact</a></li> |
| </ul> |
| </nav> |
| <button class="md:hidden text-2xl"> |
| <i class="fas fa-bars"></i> |
| </button> |
| </div> |
| </header> |
| |
| |
| <section class="relative z-10 py-20"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center"> |
| <div> |
| <div class="inline-block px-4 py-2 bg-gray-900 rounded-full glow-box mb-6"> |
| <span class="cyber-font text-sm text-cyan-300">PLATEFORME ÉDUCATIVE IA</span> |
| </div> |
| <h2 class="cyber-font text-5xl md:text-6xl font-bold mb-6"> |
| <span class="text-cyan-300 neon-text">Générez</span> |
| <span class="text-white">votre plateforme</span> |
| <span class="text-green-400 neon-green">de cours en ligne</span> |
| </h2> |
| <p class="text-xl text-gray-300 mb-8 max-w-lg"> |
| Notre IA spécialisée crée des plateformes éducatives complètes avec gestion de cours, étudiants, paiements et certifications en <span class="text-cyan-300 cyber-font">10 secondes</span>. |
| </p> |
| <div class="flex flex-wrap gap-4"> |
| <button class="cyber-btn cyber-font px-8 py-4 bg-green-500 hover:bg-green-600 text-white rounded-lg glow-box-green flex items-center"> |
| <i class="fas fa-bolt mr-2"></i> Créer ma plateforme |
| </button> |
| <button class="cyber-btn cyber-font px-8 py-4 bg-transparent border border-cyan-400 hover:bg-cyan-900/30 text-white rounded-lg glow-box flex items-center"> |
| <i class="fas fa-play-circle mr-2"></i> Voir un exemple |
| </button> |
| </div> |
| </div> |
| <div class="relative"> |
| <div class="glow-box rounded-2xl overflow-hidden border border-cyan-400/30"> |
| <div class="bg-gray-900/80 backdrop-blur-sm p-4"> |
| <div class="flex space-x-2 mb-3"> |
| <div class="w-3 h-3 rounded-full bg-red-500"></div> |
| <div class="w-3 h-3 rounded-full bg-yellow-500"></div> |
| <div class="w-3 h-3 rounded-full bg-green-500"></div> |
| </div> |
| <div class="terminal-text bg-black p-6 rounded-lg h-80 overflow-y-auto"> |
| <p>>> Initialisation de EduNexus AI...</p> |
| <p class="text-green-400">Module éducatif chargé</p> |
| <p>>> Analyse de votre domaine d'expertise...</p> |
| <p class="text-green-400">12 cours types identifiés</p> |
| <p>>> Création de la structure pédagogique...</p> |
| <p class="text-green-400">Arborescence optimisée</p> |
| <p>>> Intégration des outils d'apprentissage...</p> |
| <p class="text-green-400">Quiz, vidéos, PDF configurés</p> |
| <p>>> Configuration du système de paiement...</p> |
| <p class="text-green-400">Stripe & PayPal intégrés</p> |
| <p>>> <span class="text-cyan-300">Plateforme éducative générée en 9.2s</span></p> |
| <p class="text-2xl mt-4"> |
| <span class="text-cyan-300">></span> <span class="ai-thinking text-green-400"></span> |
| </p> |
| </div> |
| </div> |
| </div> |
| <div class="absolute -top-6 -left-6 w-24 h-24 rounded-full bg-green-500/20 blur-xl"></div> |
| <div class="absolute -bottom-6 -right-6 w-32 h-32 rounded-full bg-cyan-500/20 blur-xl"></div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="relative z-10 py-20 grid-pattern"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="cyber-font text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-cyan-300 neon-text">Générateur</span> |
| <span class="text-white">de</span> |
| <span class="text-green-400 neon-green">Plateforme Éducative</span> |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Configurez votre plateforme de cours en ligne en quelques clics avec notre IA spécialisée |
| </p> |
| </div> |
| |
| <div class="glow-box rounded-2xl overflow-hidden bg-gray-900/80 backdrop-blur-sm border border-cyan-400/30"> |
| <div class="p-8"> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> |
| <div class="cyber-card bg-gray-800/50 rounded-xl p-6 border border-cyan-400/20 hover:border-cyan-400/50 transition-all"> |
| <div class="w-14 h-14 rounded-full bg-cyan-900/30 flex items-center justify-center mb-4 glow-box"> |
| <i class="fas fa-book text-2xl text-cyan-300"></i> |
| </div> |
| <h3 class="cyber-font text-xl text-cyan-300 mb-2">Domaine</h3> |
| <p class="text-gray-300 mb-4">Sélectionnez votre domaine d'expertise</p> |
| <select class="w-full bg-gray-900 border border-cyan-400/30 text-white rounded-lg px-4 py-2 focus:outline-none focus:border-cyan-400/50"> |
| <option>Développement Web</option> |
| <option>Data Science</option> |
| <option>Design Graphique</option> |
| <option>Marketing Digital</option> |
| <option>Langues</option> |
| <option>Business</option> |
| </select> |
| </div> |
| |
| <div class="cyber-card bg-gray-800/50 rounded-xl p-6 border border-green-400/20 hover:border-green-400/50 transition-all"> |
| <div class="w-14 h-14 rounded-full bg-green-900/30 flex items-center justify-center mb-4 glow-box-green"> |
| <i class="fas fa-cogs text-2xl text-green-400"></i> |
| </div> |
| <h3 class="cyber-font text-xl text-green-400 mb-2">Fonctionnalités</h3> |
| <p class="text-gray-300 mb-4">Choisissez vos outils pédagogiques</p> |
| <div class="flex flex-wrap gap-2"> |
| <span class="px-3 py-1 rounded-full text-xs bg-green-900/50 text-green-300 border border-green-400/30">Vidéo</span> |
| <span class="px-3 py-1 rounded-full text-xs bg-green-900/50 text-green-300 border border-green-400/30">Quiz</span> |
| <span class="px-3 py-1 rounded-full text-xs bg-gray-800 text-gray-300 border border-gray-700">Certificats</span> |
| <span class="px-3 py-1 rounded-full text-xs bg-gray-800 text-gray-300 border border-gray-700">Forum</span> |
| </div> |
| </div> |
| |
| <div class="cyber-card bg-gray-800/50 rounded-xl p-6 border border-purple-400/20 hover:border-purple-400/50 transition-all"> |
| <div class="w-14 h-14 rounded-full bg-purple-900/30 flex items-center justify-center mb-4" style="box-shadow: 0 0 15px rgba(211, 0, 197, 0.5); border: 1px solid rgba(211, 0, 197, 0.3);"> |
| <i class="fas fa-credit-card text-2xl text-purple-400"></i> |
| </div> |
| <h3 class="cyber-font text-xl text-purple-400 mb-2">Monétisation</h3> |
| <p class="text-gray-300 mb-4">Configurez votre modèle économique</p> |
| <div class="space-y-2"> |
| <label class="flex items-center"> |
| <input type="radio" name="pricing" class="form-radio text-purple-500" checked> |
| <span class="ml-2 text-gray-300">Abonnement</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="radio" name="pricing" class="form-radio text-purple-500"> |
| <span class="ml-2 text-gray-300">Paiement unique</span> |
| </label> |
| <label class="flex items-center"> |
| <input type="radio" name="pricing" class="form-radio text-purple-500"> |
| <span class="ml-2 text-gray-300">Gratuit</span> |
| </label> |
| </div> |
| </div> |
| </div> |
| |
| <div class="bg-gray-800/50 rounded-xl p-6 border border-green-400/30"> |
| <div class="flex flex-col md:flex-row items-center justify-between gap-6"> |
| <div class="w-full md:w-auto"> |
| <h3 class="cyber-font text-xl text-green-400 mb-2">Nom de votre plateforme</h3> |
| <input type="text" placeholder="Ex: CodeMaster Academy" class="bg-gray-900 border border-green-400/30 focus:border-green-400/50 focus:outline-none text-white px-4 py-3 rounded-lg w-full"> |
| </div> |
| <div class="flex items-center w-full md:w-auto"> |
| <div class="mr-4"> |
| <div class="flex items-center mb-1"> |
| <span class="w-3 h-3 rounded-full bg-green-500 mr-2"></span> |
| <span class="text-sm text-gray-300">IA Éducative Active</span> |
| </div> |
| <div class="h-1 w-full bg-gray-700 rounded-full overflow-hidden"> |
| <div class="h-full bg-green-500 rounded-full" style="width: 92%;"></div> |
| </div> |
| </div> |
| <button class="cyber-btn cyber-font px-8 py-3 bg-gradient-to-r from-green-500 to-cyan-600 hover:from-green-600 hover:to-cyan-700 text-white rounded-lg glow-box-green flex items-center whitespace-nowrap"> |
| <i class="fas fa-bolt mr-2"></i> Générer Maintenant |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="relative z-10 py-20"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="cyber-font text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-white">Fonctionnalités</span> |
| <span class="text-green-400 neon-green">Pédagogiques</span> |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Tout ce dont vous avez besoin pour créer une plateforme éducative performante |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="cyber-card bg-gray-900/80 rounded-xl p-8 border border-cyan-400/20 hover:border-cyan-400/50 transition-all backdrop-blur-sm"> |
| <div class="w-16 h-16 rounded-full bg-cyan-900/30 flex items-center justify-center mb-6 mx-auto glow-box"> |
| <i class="fas fa-video text-3xl text-cyan-300"></i> |
| </div> |
| <h3 class="cyber-font text-2xl text-center text-cyan-300 mb-4">Cours Vidéo</h3> |
| <p class="text-gray-300 text-center mb-4"> |
| Hébergement illimité de vidéos HD avec streaming adaptatif et annotations interactives |
| </p> |
| <div class="flex justify-center"> |
| <span class="px-4 py-2 rounded-full text-sm bg-cyan-900/30 text-cyan-300 border border-cyan-400/30">4K Support</span> |
| </div> |
| </div> |
| |
| <div class="cyber-card bg-gray-900/80 rounded-xl p-8 border border-green-400/20 hover:border-green-400/50 transition-all backdrop-blur-sm"> |
| <div class="w-16 h-16 rounded-full bg-green-900/30 flex items-center justify-center mb-6 mx-auto glow-box-green"> |
| <i class="fas fa-tasks text-3xl text-green-400"></i> |
| </div> |
| <h3 class="cyber-font text-2xl text-center text-green-400 mb-4">Système de Quiz</h3> |
| <p class="text-gray-300 text-center mb-4"> |
| Créez des évaluations automatiques avec différents types de questions et feedback personnalisé |
| </p> |
| <div class="flex justify-center"> |
| <span class="px-4 py-2 rounded-full text-sm bg-green-900/30 text-green-300 border border-green-400/30">Auto-correction</span> |
| </div> |
| </div> |
| |
| <div class="cyber-card bg-gray-900/80 rounded-xl p-8 border border-purple-400/20 hover:border-purple-400/50 transition-all backdrop-blur-sm"> |
| <div class="w-16 h-16 rounded-full bg-purple-900/30 flex items-center justify-center mb-6 mx-auto" style="box-shadow: 0 0 15px rgba(211, 0, 197, 0.5); border: 1px solid rgba(211, 0, 197, 0.3);"> |
| <i class="fas fa-certificate text-3xl text-purple-400"></i> |
| </div> |
| <h3 class="cyber-font text-2xl text-center text-purple-400 mb-4">Certifications</h3> |
| <p class="text-gray-300 text-center mb-4"> |
| Générez automatiquement des certificats personnalisés avec vérification en blockchain |
| </p> |
| <div class="flex justify-center"> |
| <span class="px-4 py-2 rounded-full text-sm bg-purple-900/30 text-purple-300 border border-purple-400/30">NFT Compatible</span> |
| </div> |
| </div> |
| |
| <div class="cyber-card bg-gray-900/80 rounded-xl p-8 border border-cyan-400/20 hover:border-cyan-400/50 transition-all backdrop-blur-sm"> |
| <div class="w-16 h-16 rounded-full bg-cyan-900/30 flex items-center justify-center mb-6 mx-auto glow-box"> |
| <i class="fas fa-chart-line text-3xl text-cyan-300"></i> |
| </div> |
| <h3 class="cyber-font text-2xl text-center text-cyan-300 mb-4">Analytiques</h3> |
| <p class="text-gray-300 text-center mb-4"> |
| Tableaux de bord avancés pour suivre la progression des étudiants et l'efficacité des cours |
| </p> |
| <div class="flex justify-center"> |
| <span class="px-4 py-2 rounded-full text-sm bg-cyan-900/30 text-cyan-300 border border-cyan-400/30">Temps réel</span> |
| </div> |
| </div> |
| |
| <div class="cyber-card bg-gray-900/80 rounded-xl p-8 border border-green-400/20 hover:border-green-400/50 transition-all backdrop-blur-sm"> |
| <div class="w-16 h-16 rounded-full bg-green-900/30 flex items-center justify-center mb-6 mx-auto glow-box-green"> |
| <i class="fas fa-robot text-3xl text-green-400"></i> |
| </div> |
| <h3 class="cyber-font text-2xl text-center text-green-400 mb-4">Assistant IA</h3> |
| <p class="text-gray-300 text-center mb-4"> |
| Chatbot pédagogique pour répondre aux questions des étudiants 24/7 avec contexte de cours |
| </p> |
| <div class="flex justify-center"> |
| <span class="px-4 py-2 rounded-full text-sm bg-green-900/30 text-green-300 border border-green-400/30">GPT-4 Turbo</span> |
| </div> |
| </div> |
| |
| <div class="cyber-card bg-gray-900/80 rounded-xl p-8 border border-purple-400/20 hover:border-purple-400/50 transition-all backdrop-blur-sm"> |
| <div class="w-16 h-16 rounded-full bg-purple-900/30 flex items-center justify-center mb-6 mx-auto" style="box-shadow: 0 0 15px rgba(211, 0, 197, 0.5); border: 1px solid rgba(211, 0, 197, 0.3);"> |
| <i class="fas fa-users text-3xl text-purple-400"></i> |
| </div> |
| <h3 class="cyber-font text-2xl text-center text-purple-400 mb-4">Communauté</h3> |
| <p class="text-gray-300 text-center mb-4"> |
| Forums, groupes d'étude et systèmes de mentorat intégrés pour favoriser l'apprentissage social |
| </p> |
| <div class="flex justify-center"> |
| <span class="px-4 py-2 rounded-full text-sm bg-purple-900/30 text-purple-300 border border-purple-400/30">Réseau Social</span> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="relative z-10 py-20 bg-gray-900/50"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="cyber-font text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-cyan-300 neon-text">Exemples</span> |
| <span class="text-white">de</span> |
| <span class="text-green-400 neon-green">Plateformes Générées</span> |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Découvrez des plateformes créées automatiquement par notre IA éducative |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> |
| <div class="course-card bg-gray-800 rounded-xl overflow-hidden border border-cyan-400/20 hover:border-cyan-400/50 transition-all"> |
| <div class="h-48 bg-gradient-to-r from-cyan-500 to-blue-600 flex items-center justify-center"> |
| <i class="fas fa-laptop-code text-6xl text-white opacity-80"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h3 class="cyber-font text-xl text-cyan-300 mb-1">CodeMaster Pro</h3> |
| <p class="text-gray-400 text-sm">Plateforme de développement web</p> |
| </div> |
| <div class="flex items-center"> |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#1a365d" stroke-width="3"></circle> |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#00ff9d" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="25"></circle> |
| <text x="18" y="20" text-anchor="middle" font-size="10" fill="#00ff9d" font-family="Arial" font-weight="bold">75%</text> |
| </svg> |
| </div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-400 mb-4"> |
| <span><i class="fas fa-video mr-1"></i> 42 cours</span> |
| <span><i class="fas fa-user-graduate mr-1"></i> 1.2K étudiants</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-green-400 font-bold">$29.99/mois</span> |
| <button class="px-4 py-2 bg-cyan-900/30 text-cyan-300 rounded-lg text-sm border border-cyan-400/30 hover:bg-cyan-900/50">Voir la démo</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="course-card bg-gray-800 rounded-xl overflow-hidden border border-green-400/20 hover:border-green-400/50 transition-all"> |
| <div class="h-48 bg-gradient-to-r from-green-500 to-teal-600 flex items-center justify-center"> |
| <i class="fas fa-brain text-6xl text-white opacity-80"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h3 class="cyber-font text-xl text-green-400 mb-1">AI Academy</h3> |
| <p class="text-gray-400 text-sm">Formation en intelligence artificielle</p> |
| </div> |
| <div class="flex items-center"> |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#1a365d" stroke-width="3"></circle> |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#00ff9d" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="40"></circle> |
| <text x="18" y="20" text-anchor="middle" font-size="10" fill="#00ff9d" font-family="Arial" font-weight="bold">60%</text> |
| </svg> |
| </div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-400 mb-4"> |
| <span><i class="fas fa-video mr-1"></i> 28 cours</span> |
| <span><i class="fas fa-user-graduate mr-1"></i> 3.4K étudiants</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-green-400 font-bold">$49.99/mois</span> |
| <button class="px-4 py-2 bg-green-900/30 text-green-300 rounded-lg text-sm border border-green-400/30 hover:bg-green-900/50">Voir la démo</button> |
| </div> |
| </div> |
| </div> |
| |
| <div class="course-card bg-gray-800 rounded-xl overflow-hidden border border-purple-400/20 hover:border-purple-400/50 transition-all"> |
| <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-600 flex items-center justify-center"> |
| <i class="fas fa-paint-brush text-6xl text-white opacity-80"></i> |
| </div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <div> |
| <h3 class="cyber-font text-xl text-purple-400 mb-1">Design Nexus</h3> |
| <p class="text-gray-400 text-sm">École de design graphique</p> |
| </div> |
| <div class="flex items-center"> |
| <svg class="w-12 h-12" viewBox="0 0 36 36"> |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#1a365d" stroke-width="3"></circle> |
| <circle cx="18" cy="18" r="16" fill="none" stroke="#00ff9d" stroke-width="3" stroke-dasharray="100 100" stroke-dashoffset="10"></circle> |
| <text x="18" y="20" text-anchor="middle" font-size="10" fill="#00ff9d" font-family="Arial" font-weight="bold">90%</text> |
| </svg> |
| </div> |
| </div> |
| <div class="flex justify-between text-sm text-gray-400 mb-4"> |
| <span><i class="fas fa-video mr-1"></i> 35 cours</span> |
| <span><i class="fas fa-user-graduate mr-1"></i> 2.1K étudiants</span> |
| </div> |
| <div class="flex justify-between items-center"> |
| <span class="text-green-400 font-bold">$24.99/mois</span> |
| <button class="px-4 py-2 bg-purple-900/30 text-purple-300 rounded-lg text-sm border border-purple-400/30 hover:bg-purple-900/50">Voir la démo</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="text-center mt-16"> |
| <button class="cyber-btn cyber-font px-8 py-3 bg-transparent border-2 border-green-400 hover:bg-green-900/20 text-white rounded-lg glow-box-green flex items-center mx-auto"> |
| <i class="fas fa-eye mr-2"></i> Voir plus d'exemples |
| </button> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="relative z-10 py-20"> |
| <div class="container mx-auto px-6"> |
| <div class="text-center mb-16"> |
| <h2 class="cyber-font text-4xl md:text-5xl font-bold mb-4"> |
| <span class="text-white">Ils ont</span> |
| <span class="text-cyan-300 neon-text">créé</span> |
| <span class="text-white">leur</span> |
| <span class="text-green-400 neon-green">plateforme</span> |
| </h2> |
| <p class="text-xl text-gray-300 max-w-3xl mx-auto"> |
| Découvrez ce que nos utilisateurs pensent de notre générateur IA |
| </p> |
| </div> |
| |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| <div class="bg-gray-900/80 rounded-xl p-8 border border-cyan-400/30 backdrop-blur-sm"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-cyan-900/30 flex items-center justify-center mr-4 glow-box"> |
| <i class="fas fa-user-astronaut text-2xl text-cyan-300"></i> |
| </div> |
| <div> |
| <h4 class="cyber-font text-xl text-cyan-300">Sarah K.</h4> |
| <p class="text-gray-400">Formatrice en Data Science</p> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6 italic"> |
| "En 10 secondes, j'ai eu une plateforme complète avec tous les outils pédagogiques dont j'avais besoin. L'IA a même suggéré des structures de cours que je n'avais pas envisagées !" |
| </p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900/80 rounded-xl p-8 border border-green-400/30 backdrop-blur-sm"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-green-900/30 flex items-center justify-center mr-4 glow-box-green"> |
| <i class="fas fa-user-tie text-2xl text-green-400"></i> |
| </div> |
| <div> |
| <h4 class="cyber-font text-xl text-green-400">Marc D.</h4> |
| <p class="text-gray-400">Expert en Cybersécurité</p> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6 italic"> |
| "Je voulais créer une académie en ligne mais je n'avais pas le temps. En quelques clics, tout était prêt : cours, quiz, certificats. Mes étudiants adorent l'interface futuriste !" |
| </p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400"></i> |
| </div> |
| </div> |
| |
| <div class="bg-gray-900/80 rounded-xl p-8 border border-purple-400/30 backdrop-blur-sm"> |
| <div class="flex items-center mb-6"> |
| <div class="w-16 h-16 rounded-full bg-purple-900/30 flex items-center justify-center mr-4" style="box-shadow: 0 0 15px rgba(211, 0, 197, 0.5); border: 1px solid rgba(211, 0, 197, 0.3);"> |
| <i class="fas fa-user-ninja text-2xl text-purple-400"></i> |
| </div> |
| <div> |
| <h4 class="cyber-font text-xl text-purple-400">Léa P.</h4> |
| <p class="text-gray-400">Professeure de Langues</p> |
| </div> |
| </div> |
| <p class="text-gray-300 mb-6 italic"> |
| "L'assistant IA intégré répond aux questions de mes étudiants quand je ne suis pas disponible. Le système de progression automatique est incroyablement précis. 10/10 !" |
| </p> |
| <div class="flex"> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star text-yellow-400 mr-1"></i> |
| <i class="fas fa-star-half-alt text-yellow-400"></i> |
| </div> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <section class="relative z-10 py-32 overflow-hidden"> |
| <div class="absolute inset-0 bg-gradient-to-br from-cyan-900/10 via-green-900/10 to-purple-900/10"></div> |
| <div class="container mx-auto px-6 relative"> |
| <div class="max-w-4xl mx-auto text-center"> |
| <h2 class="cyber-font text-4xl md:text-6xl font-bold mb-6"> |
| <span class="text-cyan-300 neon-text">Prêt à révolutionner</span> |
| <span class="text-white">l'</span> |
| <span class="text-green-400 neon-green">éducation en ligne</span> |
| <span class="text-white">?</span> |
| </h2> |
| <p class="text-xl text-gray-300 mb-10 max-w-3xl mx-auto"> |
| Créez votre académie en ligne en quelques secondes. Aucune compétence technique requise - notre IA s'occupe de tout. |
| </p> |
| <div class="flex flex-wrap justify-center gap-6"> |
| <button class="cyber-btn cyber-font px-10 py-5 bg-gradient-to-r from-green-500 to-cyan-600 hover:from-green-600 hover:to-cyan-700 text-white rounded-xl glow-box-green flex items-center text-lg"> |
| <i class="fas fa-bolt mr-3"></i> Essai Gratuit |
| </button> |
| <button class="cyber-btn cyber-font px-10 py-5 bg-transparent border-2 border-cyan-400 hover:bg-cyan-900/30 text-white rounded-xl glow-box flex items-center text-lg"> |
| <i class="fas fa-play-circle mr-3"></i> Démo Vidéo |
| </button> |
| </div> |
| </div> |
| </div> |
| </section> |
| |
| |
| <footer class="relative z-10 bg-gray-900/80 backdrop-blur-sm border-t border-gray-800 py-16"> |
| <div class="container mx-auto px-6"> |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-12"> |
| <div> |
| <div class="flex items-center mb-6"> |
| <div class="w-10 h-10 rounded-full glow-box flex items-center justify-center mr-3"> |
| <i class="fas fa-graduation-cap text-xl text-cyan-300"></i> |
| </div> |
| <h3 class="cyber-font text-2xl"> |
| <span class="text-cyan-300">EDU</span> |
| <span class="text-green-400">NEXUS</span> |
| </h3> |
| </div> |
| <p class="text-gray-400 mb-6"> |
| Le générateur IA le plus avancé pour créer des plateformes éducatives professionnelles en quelques secondes. |
| </p> |
| <div class="flex space-x-4"> |
| <a href="#" class="w-10 h-10 rounded-full glow-box flex items-center justify-center text-cyan-300 hover:text-white transition-colors"> |
| <i class="fab fa-twitter"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full glow-box flex items-center justify-center text-green-400 hover:text-white transition-colors"> |
| <i class="fab fa-youtube"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full glow-box flex items-center justify-center text-purple-400 hover:text-white transition-colors"> |
| <i class="fab fa-discord"></i> |
| </a> |
| <a href="#" class="w-10 h-10 rounded-full glow-box flex items-center justify-center text-blue-400 hover:text-white transition-colors"> |
| <i class="fab fa-linkedin-in"></i> |
| </a> |
| </div> |
| </div> |
| |
| <div> |
| <h4 class="cyber-font text-lg text-cyan-300 mb-6">Navigation</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition-colors">Accueil</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition-colors">Générateur</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition-colors">Fonctionnalités</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition-colors">Tarifs</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-cyan-300 transition-colors">Blog</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="cyber-font text-lg text-green-400 mb-6">Ressources</h4> |
| <ul class="space-y-3"> |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition-colors">Documentation</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition-colors">Centre d'aide</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition-colors">Tutoriels</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition-colors">API Éducative</a></li> |
| <li><a href="#" class="text-gray-400 hover:text-green-400 transition-colors">Statut</a></li> |
| </ul> |
| </div> |
| |
| <div> |
| <h4 class="cyber-font text-lg text-purple-400 mb-6">Contact</h4> |
| <ul class="space-y-3"> |
| <li class="flex items-start"> |
| <i class="fas fa-map-marker-alt text-purple-400 mt-1 mr-3"></i> |
| <span class="text-gray-400">EdTech Tower, Paris</span> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-envelope text-purple-400 mr-3"></i> |
| <a href="mailto:contact@edunexus.ai" class="text-gray-400 hover:text-purple-400 transition-colors">contact@edunexus.ai</a> |
| </li> |
| <li class="flex items-center"> |
| <i class="fas fa-phone-alt text-purple-400 mr-3"></i> |
| <a href="tel:+33123456789" class="text-gray-400 hover:text-purple-400 transition-colors">+33 1 23 45 67 89</a> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="border-t border-gray-800 mt-16 pt-8 flex flex-col md:flex-row justify-between items-center"> |
| <p class="text-gray-500 text-sm mb-4 md:mb-0"> |
| © 2023 EduNexus AI. Tous droits réservés. |
| </p> |
| <div class="flex space-x-6"> |
| <a href="#" class="text-gray-500 hover:text-cyan-300 transition-colors text-sm">Conditions</a> |
| <a href="#" class="text-gray-500 hover:text-green-400 transition-colors text-sm">Confidentialité</a> |
| <a href="#" class="text-gray-500 hover:text-purple-400 transition-colors text-sm">Cookies</a> |
| </div> |
| </div> |
| </div> |
| </footer> |
| |
| <script> |
| |
| document.querySelectorAll('.cyber-btn').forEach(btn => { |
| btn.addEventListener('mouseenter', function() { |
| if (this.querySelector('i')) { |
| this.querySelector('i').classList.add('fa-spin'); |
| } |
| }); |
| |
| btn.addEventListener('mouseleave', function() { |
| if (this.querySelector('i')) { |
| this.querySelector('i').classList.remove('fa-spin'); |
| } |
| }); |
| }); |
| |
| |
| const terminalLines = document.querySelectorAll('.terminal-text p'); |
| if (terminalLines.length > 0) { |
| let delay = 0; |
| terminalLines.forEach((line, index) => { |
| setTimeout(() => { |
| line.style.opacity = '1'; |
| }, delay); |
| delay += 500; |
| }); |
| } |
| |
| |
| const aiThinking = document.querySelector('.ai-thinking'); |
| if (aiThinking) { |
| setTimeout(() => { |
| aiThinking.textContent = "Prêt!"; |
| aiThinking.style.animation = 'none'; |
| }, 4000); |
| } |
| |
| |
| const courseCards = document.querySelectorAll('.course-card'); |
| courseCards.forEach(card => { |
| card.addEventListener('mouseenter', function() { |
| const icon = this.querySelector('.fa-laptop-code, .fa-brain, .fa-paint-brush'); |
| if (icon) { |
| icon.classList.add('fa-bounce'); |
| } |
| }); |
| |
| card.addEventListener('mouseleave', function() { |
| const icon = this.querySelector('.fa-laptop-code, .fa-brain, .fa-paint-brush'); |
| if (icon) { |
| icon.classList.remove('fa-bounce'); |
| } |
| }); |
| }); |
| </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=docto41/domainai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
