Spaces:

docto41
/

edugen

Running

App Files Files Community

edugen / index.html

docto41

Add 2 files

ebcefd6 verified 11 months ago

raw

history blame contribute delete

63.7 kB

	<!DOCTYPE html>
	<html lang="fr">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>EduGen - Plateforme de création de sites de cours</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;700&family=Poppins:wght@300;400;600;700&display=swap');

	:root {
	--primary: #6c5ce7;
	--secondary: #00cec9;
	--dark: #2d3436;
	--light: #f5f6fa;
	}

	body {
	font-family: 'Poppins', sans-serif;
	background-color: #0f0f1a;
	color: var(--light);
	overflow-x: hidden;
	}

	.font-futuristic {
	font-family: 'Orbitron', sans-serif;
	}

	.gradient-text {
	background: linear-gradient(90deg, var(--primary), var(--secondary));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	}

	.gradient-bg {
	background: linear-gradient(135deg, var(--primary), var(--secondary));
	}

	.card-glass {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	}

	.hover-scale {
	transition: transform 0.3s ease;
	}

	.hover-scale:hover {
	transform: scale(1.05);
	}

	.pulse-animation {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	box-shadow: 0 0 0 0 rgba(108, 92, 231, 0.7);
	}
	70% {
	box-shadow: 0 0 0 15px rgba(108, 92, 231, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(108, 92, 231, 0);
	}
	}

	.floating {
	animation: floating 6s ease-in-out infinite;
	}

	@keyframes floating {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
	100% { transform: translateY(0px); }
	}

	.glow {
	filter: drop-shadow(0 0 10px rgba(108, 92, 231, 0.7));
	}

	.neon-border {
	position: relative;
	}

	.neon-border::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 20px;
	padding: 2px;
	background: linear-gradient(45deg, var(--primary), var(--secondary));
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	}

	.typewriter {
	overflow: hidden;
	border-right: .15em solid var(--secondary);
	white-space: nowrap;
	animation: typing 3.5s steps(40, end), blink-caret .75s step-end infinite;
	}

	@keyframes typing {
	from { width: 0 }
	to { width: 100% }
	}

	@keyframes blink-caret {
	from, to { border-color: transparent }
	50% { border-color: var(--secondary) }
	}

	.grid-pattern {
	background-image:
	linear-gradient(rgba(108, 92, 231, 0.1) 1px, transparent 1px),
	linear-gradient(90deg, rgba(108, 92, 231, 0.1) 1px, transparent 1px);
	background-size: 30px 30px;
	}
	</style>
	</head>
	<body class="grid-pattern">
	<!-- Navigation -->
	<nav class="bg-black bg-opacity-50 backdrop-filter backdrop-blur-lg fixed w-full z-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex items-center justify-between h-16">
	<div class="flex items-center">
	<div class="flex-shrink-0">
	<span class="text-2xl font-bold gradient-text font-futuristic">EDUGEN</span>
	</div>
	<div class="hidden md:block">
	<div class="ml-10 flex items-baseline space-x-4">
	<a href="#" class="text-white hover:text-purple-300 px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="hero">Accueil</a>
	<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="features">Fonctionnalités</a>
	<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="demo">Exemples</a>
	<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="pricing">Tarifs</a>
	<a href="#" class="text-gray-300 hover:text-white px-3 py-2 rounded-md text-sm font-medium nav-link" data-section="testimonials">Contact</a>
	</div>
	</div>
	</div>
	<div class="hidden md:block">
	<div class="ml-4 flex items-center md:ml-6">
	<button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium transition duration-300 transform hover:scale-105 free-trial-btn">
	Essai gratuit
	</button>
	</div>
	</div>
	<div class="-mr-2 flex md:hidden">
	<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-white hover:bg-gray-700 focus:outline-none mobile-menu-btn">
	<span class="sr-only">Open main menu</span>
	<svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
	<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
	</svg>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div class="hidden mobile-menu">
	<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 bg-black bg-opacity-90">
	<a href="#" class="text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="hero">Accueil</a>
	<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="features">Fonctionnalités</a>
	<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="demo">Exemples</a>
	<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="pricing">Tarifs</a>
	<a href="#" class="text-gray-300 hover:text-white block px-3 py-2 rounded-md text-base font-medium nav-link" data-section="testimonials">Contact</a>
	<button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium transition duration-300 transform hover:scale-105 w-full mt-4 free-trial-btn">
	Essai gratuit
	</button>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<section class="relative pt-32 pb-20 md:pt-40 md:pb-32" id="hero">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="md:flex md:items-center md:justify-between">
	<div class="md:w-1/2 mb-12 md:mb-0">
	<h1 class="text-4xl md:text-6xl font-bold mb-6 font-futuristic">
	<span class="gradient-text typewriter">Créez votre plateforme de cours en ligne</span>
	</h1>
	<p class="text-lg md:text-xl text-gray-300 mb-8">
	Notre intelligence artificielle construit pour vous un site complet de formation en ligne, avec gestion des élèves, paiements et contenu interactif.
	</p>
	<div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4">
	<button class="gradient-bg hover:opacity-90 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 flex items-center justify-center start-now-btn">
	<span>Commencer maintenant</span>
	<i class="fas fa-arrow-right ml-3"></i>
	</button>
	<button class="bg-transparent border-2 border-purple-500 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 hover:bg-purple-900 hover:bg-opacity-30 flex items-center justify-center demo-btn">
	<i class="fas fa-play-circle mr-3 text-xl"></i>
	<span>Voir la démo</span>
	</button>
	</div>
	<div class="mt-8 flex items-center">
	<div class="flex -space-x-2">
	<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/12.jpg" alt="">
	<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
	<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/45.jpg" alt="">
	<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/76.jpg" alt="">
	</div>
	<div class="ml-4">
	<p class="text-sm text-gray-300">Rejoint par <span class="text-white font-bold">850+</span> formateurs</p>
	</div>
	</div>
	</div>
	<div class="md:w-1/2 relative">
	<div class="relative max-w-lg mx-auto">
	<div class="card-glass p-6 rounded-3xl overflow-hidden">
	<div class="bg-gray-900 rounded-2xl overflow-hidden">
	<div class="bg-gray-800 px-4 py-3 flex items-center">
	<div class="flex space-x-2">
	<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="ml-4 text-sm text-gray-400">dashboard.html</div>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-center mb-6">
	<h3 class="text-xl font-bold text-white">Tableau de bord du formateur</h3>
	<span class="text-xs px-2 py-1 bg-purple-900 text-purple-200 rounded-full">GÉNÉRÉ AUTOMATIQUEMENT</span>
	</div>
	<div class="grid grid-cols-3 gap-4 mb-6">
	<div class="bg-gray-700 rounded-lg p-4 text-center">
	<div class="text-2xl font-bold text-white">142</div>
	<div class="text-xs text-gray-400">Élèves</div>
	</div>
	<div class="bg-gray-700 rounded-lg p-4 text-center">
	<div class="text-2xl font-bold text-white">8</div>
	<div class="text-xs text-gray-400">Cours</div>
	</div>
	<div class="bg-gray-700 rounded-lg p-4 text-center">
	<div class="text-2xl font-bold text-white">€3,240</div>
	<div class="text-xs text-gray-400">Revenus</div>
	</div>
	</div>
	<div class="mb-6">
	<div class="flex justify-between items-center mb-2">
	<span class="text-sm font-medium text-gray-300">Progression des élèves</span>
	<span class="text-xs text-gray-500">78% complété</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2">
	<div class="gradient-bg h-2 rounded-full" style="width: 78%"></div>
	</div>
	</div>
	<div>
	<div class="text-sm font-medium text-gray-300 mb-2">Derniers cours ajoutés</div>
	<div class="space-y-3">
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full gradient-bg flex items-center justify-center">
	<i class="fas fa-code text-white"></i>
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-white">Programmation Python</p>
	<p class="text-xs text-gray-400">42 leçons • 12h de contenu</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="flex-shrink-0 h-10 w-10 rounded-full gradient-bg flex items-center justify-center">
	<i class="fas fa-paint-brush text-white"></i>
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-white">Design UI/UX</p>
	<p class="text-xs text-gray-400">28 leçons • 8h de contenu</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="absolute -bottom-10 -left-10 w-32 h-32 rounded-full gradient-bg opacity-20 filter blur-3xl"></div>
	<div class="absolute -top-10 -right-10 w-40 h-40 rounded-full bg-blue-500 opacity-20 filter blur-3xl"></div>
	</div>
	</div>
	</div>
	</div>
	<div class="absolute top-0 left-0 w-full h-full -z-10 overflow-hidden">
	<div class="absolute top-0 right-0 w-96 h-96 rounded-full gradient-bg opacity-10 filter blur-3xl"></div>
	<div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-blue-500 opacity-10 filter blur-3xl"></div>
	</div>
	</section>

	<!-- Features Section -->
	<section class="py-20 relative" id="features">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-20">
	<h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
	<span class="gradient-text">Fonctionnalités intelligentes</span>
	</h2>
	<p class="text-xl text-gray-300 max-w-3xl mx-auto">
	Notre plateforme utilise l'IA pour automatiser la création de votre site de formation avec toutes les fonctionnalités essentielles.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Feature 1 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mb-6 glow">
	<i class="fas fa-robot text-2xl text-white"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Génération automatique</h3>
	<p class="text-gray-300 mb-4">
	Notre IA crée votre site en quelques minutes avec une structure optimisée pour l'apprentissage en ligne.
	</p>
	<div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="1">
	<span>En savoir plus</span>
	<i class="fas fa-arrow-right ml-2"></i>
	</div>
	</div>

	<!-- Feature 2 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mb-6 glow">
	<i class="fas fa-chalkboard-teacher text-2xl text-white"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Tableau de bord complet</h3>
	<p class="text-gray-300 mb-4">
	Gérez facilement vos élèves, cours, paiements et statistiques depuis une interface intuitive.
	</p>
	<div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="2">
	<span>En savoir plus</span>
	<i class="fas fa-arrow-right ml-2"></i>
	</div>
	</div>

	<!-- Feature 3 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mb-6 glow">
	<i class="fas fa-credit-card text-2xl text-white"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Système de paiement</h3>
	<p class="text-gray-300 mb-4">
	Intégration native avec Stripe et PayPal pour vendre vos cours et abonnements en toute sécurité.
	</p>
	<div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="3">
	<span>En savoir plus</span>
	<i class="fas fa-arrow-right ml-2"></i>
	</div>
	</div>

	<!-- Feature 4 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mb-6 glow">
	<i class="fas fa-video text-2xl text-white"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Hébergement vidéo</h3>
	<p class="text-gray-300 mb-4">
	Stream optimisé pour vos vidéos de cours avec lecteur personnalisable et suivi de progression.
	</p>
	<div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="4">
	<span>En savoir plus</span>
	<i class="fas fa-arrow-right ml-2"></i>
	</div>
	</div>

	<!-- Feature 5 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mb-6 glow">
	<i class="fas fa-mobile-alt text-2xl text-white"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Design responsive</h3>
	<p class="text-gray-300 mb-4">
	Votre site s'adapte parfaitement à tous les appareils : mobile, tablette et ordinateur.
	</p>
	<div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="5">
	<span>En savoir plus</span>
	<i class="fas fa-arrow-right ml-2"></i>
	</div>
	</div>

	<!-- Feature 6 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="w-16 h-16 gradient-bg rounded-2xl flex items-center justify-center mb-6 glow">
	<i class="fas fa-chart-line text-2xl text-white"></i>
	</div>
	<h3 class="text-xl font-bold mb-3">Analytiques avancées</h3>
	<p class="text-gray-300 mb-4">
	Suivez les performances de vos cours et le comportement de vos élèves avec des rapports détaillés.
	</p>
	<div class="flex items-center text-purple-300 font-medium feature-more-btn" data-feature="6">
	<span>En savoir plus</span>
	<i class="fas fa-arrow-right ml-2"></i>
	</div>
	</div>
	</div>
	</div>

	<div class="absolute top-1/4 left-0 w-40 h-40 rounded-full gradient-bg opacity-10 filter blur-3xl -z-10"></div>
	<div class="absolute bottom-0 right-0 w-60 h-60 rounded-full bg-blue-500 opacity-10 filter blur-3xl -z-10"></div>
	</section>

	<!-- Demo Section -->
	<section class="py-20 relative overflow-hidden" id="demo">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="flex flex-col lg:flex-row items-center">
	<div class="lg:w-1/2 mb-12 lg:mb-0 relative">
	<div class="relative max-w-lg mx-auto">
	<div class="absolute -top-20 -left-20 w-64 h-64 rounded-full gradient-bg opacity-20 filter blur-3xl -z-10"></div>
	<div class="card-glass p-2 rounded-3xl overflow-hidden neon-border">
	<div class="bg-gray-900 rounded-2xl overflow-hidden">
	<div class="bg-gray-800 px-4 py-3 flex items-center">
	<div class="flex space-x-2">
	<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="ml-4 text-sm text-gray-400">course-player.html</div>
	</div>
	<div class="p-6">
	<div class="mb-6">
	<div class="aspect-w-16 aspect-h-9 bg-gray-800 rounded-lg overflow-hidden">
	<div class="w-full h-48 bg-gray-700 flex items-center justify-center">
	<i class="fas fa-play-circle text-5xl text-purple-500"></i>
	</div>
	</div>
	</div>
	<div class="mb-6">
	<h3 class="text-xl font-bold text-white mb-2">Introduction à Python</h3>
	<div class="flex items-center text-sm text-gray-400 mb-4">
	<span>Leçon 1 sur 42</span>
	<span class="mx-2">•</span>
	<span>12 min</span>
	</div>
	<div class="w-full bg-gray-700 rounded-full h-2 mb-2">
	<div class="gradient-bg h-2 rounded-full" style="width: 25%"></div>
	</div>
	<div class="flex justify-between text-xs text-gray-400">
	<span>5:32 / 12:00</span>
	<span>75% complété</span>
	</div>
	</div>
	<div class="flex justify-between">
	<button class="flex items-center text-gray-300 hover:text-white prev-lesson-btn">
	<i class="fas fa-step-backward mr-2"></i>
	<span>Précédent</span>
	</button>
	<button class="gradient-bg text-white px-6 py-2 rounded-full font-medium next-lesson-btn">
	Suivant
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="lg:w-1/2 lg:pl-12">
	<h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
	<span class="gradient-text">Expérience élève premium</span>
	</h2>
	<p class="text-xl text-gray-300 mb-8">
	Offrez à vos élèves une expérience d'apprentissage fluide et engageante avec notre lecteur de cours optimisé.
	</p>
	<ul class="space-y-6">
	<li class="flex">
	<div class="flex-shrink-0">
	<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center">
	<i class="fas fa-check text-white"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-bold text-white">Suivi de progression</h3>
	<p class="text-gray-300">Les élèves voient leur avancement dans chaque cours et leçon.</p>
	</div>
	</li>
	<li class="flex">
	<div class="flex-shrink-0">
	<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center">
	<i class="fas fa-check text-white"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-bold text-white">Notes et signets</h3>
	<p class="text-gray-300">Fonctionnalités intégrées pour prendre des notes et marquer des sections importantes.</p>
	</div>
	</li>
	<li class="flex">
	<div class="flex-shrink-0">
	<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center">
	<i class="fas fa-check text-white"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-bold text-white">Vitesse variable</h3>
	<p class="text-gray-300">Les élèves peuvent ajuster la vitesse de lecture des vidéos.</p>
	</div>
	</li>
	<li class="flex">
	<div class="flex-shrink-0">
	<div class="w-10 h-10 rounded-full gradient-bg flex items-center justify-center">
	<i class="fas fa-check text-white"></i>
	</div>
	</div>
	<div class="ml-4">
	<h3 class="text-lg font-bold text-white">Sous-titres</h3>
	<p class="text-gray-300">Support pour les sous-titres dans plusieurs langues.</p>
	</div>
	</li>
	</ul>
	</div>
	</div>
	</div>
	</section>

	<!-- Pricing Section -->
	<section class="py-20 relative" id="pricing">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-20">
	<h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
	<span class="gradient-text">Tarifs simples</span>
	</h2>
	<p class="text-xl text-gray-300 max-w-3xl mx-auto">
	Choisissez le plan qui correspond à vos besoins. Pas de frais cachés, annulation à tout moment.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
	<!-- Basic Plan -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="text-center mb-8">
	<h3 class="text-2xl font-bold mb-2">Starter</h3>
	<p class="text-gray-300 mb-4">Parfait pour commencer</p>
	<div class="text-4xl font-bold mb-2">€29<span class="text-lg text-gray-400">/mois</span></div>
	<p class="text-sm text-gray-400">ou €290/an (-20%)</p>
	</div>
	<ul class="space-y-4 mb-8">
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">1 site de cours</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Jusqu'à 100 élèves</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">10 cours maximum</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Support par email</span>
	</li>
	<li class="flex items-center opacity-50">
	<i class="fas fa-times text-red-400 mr-3"></i>
	<span class="text-gray-300">Certificats personnalisés</span>
	</li>
	<li class="flex items-center opacity-50">
	<i class="fas fa-times text-red-400 mr-3"></i>
	<span class="text-gray-300">Intégrations premium</span>
	</li>
	</ul>
	<button class="w-full bg-transparent border-2 border-purple-500 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-900 hover:bg-opacity-30 transition duration-300 select-plan-btn" data-plan="starter">
	Choisir ce plan
	</button>
	</div>

	<!-- Popular Plan -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border relative">
	<div class="absolute top-0 right-0 bg-purple-600 text-white text-xs font-bold px-3 py-1 rounded-bl-lg rounded-tr-2xl">
	POPULAIRE
	</div>
	<div class="text-center mb-8">
	<h3 class="text-2xl font-bold mb-2">Pro</h3>
	<p class="text-gray-300 mb-4">Pour les formateurs sérieux</p>
	<div class="text-4xl font-bold mb-2">€79<span class="text-lg text-gray-400">/mois</span></div>
	<p class="text-sm text-gray-400">ou €790/an (-20%)</p>
	</div>
	<ul class="space-y-4 mb-8">
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">3 sites de cours</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Jusqu'à 1000 élèves</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">50 cours maximum</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Support prioritaire</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Certificats personnalisés</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Intégrations premium</span>
	</li>
	</ul>
	<button class="w-full gradient-bg text-white px-6 py-3 rounded-full font-medium hover:opacity-90 transition duration-300 select-plan-btn" data-plan="pro">
	Choisir ce plan
	</button>
	</div>

	<!-- Enterprise Plan -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300 neon-border">
	<div class="text-center mb-8">
	<h3 class="text-2xl font-bold mb-2">Enterprise</h3>
	<p class="text-gray-300 mb-4">Pour les organisations</p>
	<div class="text-4xl font-bold mb-2">€199<span class="text-lg text-gray-400">/mois</span></div>
	<p class="text-sm text-gray-400">ou €1990/an (-20%)</p>
	</div>
	<ul class="space-y-4 mb-8">
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Sites illimités</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Élèves illimités</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Cours illimités</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Support 24/7</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">Certificats avancés</span>
	</li>
	<li class="flex items-center">
	<i class="fas fa-check text-green-400 mr-3"></i>
	<span class="text-gray-300">API complète</span>
	</li>
	</ul>
	<button class="w-full bg-transparent border-2 border-purple-500 text-white px-6 py-3 rounded-full font-medium hover:bg-purple-900 hover:bg-opacity-30 transition duration-300 select-plan-btn" data-plan="enterprise">
	Choisir ce plan
	</button>
	</div>
	</div>

	<div class="text-center mt-12">
	<p class="text-gray-300">
	Vous avez des besoins spécifiques ? <a href="#" class="text-purple-300 hover:text-white font-medium contact-btn">Contactez notre équipe</a> pour une solution sur mesure.
	</p>
	</div>
	</div>
	</section>

	<!-- Testimonials -->
	<section class="py-20 relative" id="testimonials">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="text-center mb-20">
	<h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
	<span class="gradient-text">Ils nous font confiance</span>
	</h2>
	<p class="text-xl text-gray-300 max-w-3xl mx-auto">
	Découvrez ce que nos clients disent de notre plateforme.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
	<!-- Testimonial 1 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300">
	<div class="flex items-center mb-6">
	<div class="flex-shrink-0">
	<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="">
	</div>
	<div class="ml-4">
	<div class="text-lg font-bold text-white">Sophie Martin</div>
	<div class="text-purple-300">Formatrice en design</div>
	</div>
	</div>
	<p class="text-gray-300 mb-6">
	"En tant que designer, je voulais un site qui reflète mon style. EduGen a créé exactement ce dont j'avais besoin sans que j'aie à toucher une ligne de code. Mes élèves adorent l'interface !"
	</p>
	<div class="flex">
	<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>

	<!-- Testimonial 2 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300">
	<div class="flex items-center mb-6">
	<div class="flex-shrink-0">
	<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="">
	</div>
	<div class="ml-4">
	<div class="text-lg font-bold text-white">Thomas Leroy</div>
	<div class="text-purple-300">Formateur en développement</div>
	</div>
	</div>
	<p class="text-gray-300 mb-6">
	"J'ai lancé ma plateforme de cours de programmation en une journée. Le système de paiement intégré est parfait et me permet de me concentrer sur la création de contenu plutôt que sur la technique."
	</p>
	<div class="flex">
	<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>

	<!-- Testimonial 3 -->
	<div class="card-glass hover-scale p-8 rounded-3xl transition-all duration-300">
	<div class="flex items-center mb-6">
	<div class="flex-shrink-0">
	<img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="">
	</div>
	<div class="ml-4">
	<div class="text-lg font-bold text-white">Émilie Dubois</div>
	<div class="text-purple-300">Centre de formation</div>
	</div>
	</div>
	<p class="text-gray-300 mb-6">
	"Nous avons migré notre centre de formation vers EduGen et les résultats sont impressionnants. L'engagement de nos élèves a augmenté de 40% grâce à l'interface intuitive et aux fonctionnalités d'apprentissage."
	</p>
	<div class="flex">
	<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>
	</div>

	<div class="absolute top-1/3 left-0 w-40 h-40 rounded-full gradient-bg opacity-10 filter blur-3xl -z-10"></div>
	<div class="absolute bottom-0 right-0 w-60 h-60 rounded-full bg-blue-500 opacity-10 filter blur-3xl -z-10"></div>
	</section>

	<!-- CTA Section -->
	<section class="py-20 relative overflow-hidden">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="card-glass rounded-3xl overflow-hidden neon-border">
	<div class="bg-gradient-to-r from-purple-900 to-blue-900 p-12 text-center">
	<div class="max-w-3xl mx-auto">
	<h2 class="text-3xl md:text-5xl font-bold mb-6 font-futuristic">
	<span class="gradient-text">Prêt à lancer votre plateforme ?</span>
	</h2>
	<p class="text-xl text-gray-300 mb-8">
	Essayez EduGen gratuitement pendant 14 jours. Aucune carte de crédit requise.
	</p>
	<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
	<button class="gradient-bg hover:opacity-90 text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 free-trial-btn">
	Commencer l'essai gratuit
	</button>
	<button class="bg-transparent border-2 border-white text-white px-8 py-4 rounded-full font-bold text-lg transition duration-300 transform hover:scale-105 hover:bg-white hover:bg-opacity-10 demo-btn">
	Voir une démo
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div class="absolute top-0 left-0 w-full h-full -z-10 overflow-hidden">
	<div class="absolute top-0 right-0 w-96 h-96 rounded-full gradient-bg opacity-10 filter blur-3xl"></div>
	<div class="absolute bottom-0 left-0 w-80 h-80 rounded-full bg-blue-500 opacity-10 filter blur-3xl"></div>
	</div>
	</section>

	<!-- Footer -->
	<footer class="bg-black bg-opacity-50 pt-20 pb-12">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="grid grid-cols-2 md:grid-cols-5 gap-8 mb-12">
	<div class="col-span-2">
	<h3 class="text-2xl font-bold gradient-text font-futuristic mb-6">EDUGEN</h3>
	<p class="text-gray-300 mb-6">
	La plateforme intelligente pour créer et gérer vos sites de formation en ligne automatiquement.
	</p>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-white social-link" data-social="facebook">
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white social-link" data-social="twitter">
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white social-link" data-social="linkedin">
	<i class="fab fa-linkedin-in"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-white social-link" data-social="instagram">
	<i class="fab fa-instagram"></i>
	</a>
	</div>
	</div>
	<div>
	<h4 class="text-lg font-bold text-white mb-4">Produit</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="features">Fonctionnalités</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="pricing">Tarifs</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="demo">Exemples</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="integrations">Intégrations</a></li>
	</ul>
	</div>
	<div>
	<h4 class="text-lg font-bold text-white mb-4">Ressources</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="docs">Documentation</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="blog">Blog</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="tutorials">Tutoriels</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="faq">FAQ</a></li>
	</ul>
	</div>
	<div>
	<h4 class="text-lg font-bold text-white mb-4">Entreprise</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="about">À propos</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="careers">Carrières</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="contact">Contact</a></li>
	<li><a href="#" class="text-gray-400 hover:text-white footer-link" data-link="press">Presse</a></li>
	</ul>
	</div>
	</div>
	<div class="border-t border-gray-800 pt-8">
	<div class="flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400 mb-4 md:mb-0">
	© 2023 EduGen. Tous droits réservés.
	</p>
	<div class="flex space-x-6">
	<a href="#" class="text-gray-400 hover:text-white footer-link" data-link="legal">Mentions légales</a>
	<a href="#" class="text-gray-400 hover:text-white footer-link" data-link="privacy">Politique de confidentialité</a>
	<a href="#" class="text-gray-400 hover:text-white footer-link" data-link="terms">CGU</a>
	</div>
	</div>
	</div>
	</div>
	</footer>

	<!-- Floating Elements -->
	<div class="fixed bottom-10 right-10 w-16 h-16 rounded-full gradient-bg flex items-center justify-center text-white text-2xl cursor-pointer hover:scale-110 transition-transform duration-300 pulse-animation chat-btn">
	<i class="fas fa-comment-dots"></i>
	</div>

	<div class="fixed top-1/4 left-10 w-12 h-12 rounded-full bg-blue-500 flex items-center justify-center text-white text-xl cursor-pointer hover:scale-110 transition-transform duration-300 floating help-btn">
	<i class="fas fa-question"></i>
	</div>

	<!-- Modal -->
	<div class="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 hidden modal">
	<div class="bg-gray-900 rounded-2xl max-w-md w-full p-6 relative card-glass">
	<button class="absolute top-4 right-4 text-gray-400 hover:text-white close-modal">
	<i class="fas fa-times text-xl"></i>
	</button>
	<div class="modal-content">
	<!-- Content will be inserted here by JavaScript -->
	</div>
	</div>
	</div>

	<script>
	// Simple animations
	document.addEventListener('DOMContentLoaded', function() {
	// Animate elements on scroll
	const animateOnScroll = function() {
	const elements = document.querySelectorAll('.hover-scale');

	elements.forEach(element => {
	const elementPosition = element.getBoundingClientRect().top;
	const screenPosition = window.innerHeight / 1.3;

	if(elementPosition < screenPosition) {
	element.style.opacity = '1';
	element.style.transform = 'translateY(0)';
	}
	});
	};

	// Set initial state
	const animatedElements = document.querySelectorAll('.hover-scale');
	animatedElements.forEach(element => {
	element.style.opacity = '0';
	element.style.transform = 'translateY(20px)';
	element.style.transition = 'all 0.6s ease';
	});

	// Run on load
	animateOnScroll();

	// Run on scroll
	window.addEventListener('scroll', animateOnScroll);

	// Typewriter effect
	const typewriterElement = document.querySelector('.typewriter');
	if(typewriterElement) {
	setTimeout(() => {
	typewriterElement.style.borderRight = 'none';
	}, 3500);
	}

	// Mobile menu toggle
	const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
	const mobileMenu = document.querySelector('.mobile-menu');

	mobileMenuBtn.addEventListener('click', function() {
	mobileMenu.classList.toggle('hidden');
	});

	// Modal functionality
	const modal = document.querySelector('.modal');
	const closeModalBtn = document.querySelector('.close-modal');
	const modalContent = document.querySelector('.modal-content');

	function openModal(title, content) {
	modalContent.innerHTML = `
	<h3 class="text-2xl font-bold mb-4 gradient-text">${title}</h3>
	<div class="text-gray-300 mb-6">${content}</div>
	<button class="gradient-bg hover:opacity-90 text-white px-6 py-2 rounded-full font-medium w-full close-modal">
	Fermer
	</button>
	`;
	modal.classList.remove('hidden');
	document.body.style.overflow = 'hidden';

	// Re-add event listeners for new close buttons
	document.querySelectorAll('.close-modal').forEach(btn => {
	btn.addEventListener('click', closeModal);
	});
	}

	function closeModal() {
	modal.classList.add('hidden');
	document.body.style.overflow = '';
	}

	closeModalBtn.addEventListener('click', closeModal);

	// Close modal when clicking outside
	modal.addEventListener('click', function(e) {
	if(e.target === modal) {
	closeModal();
	}
	});

	// Button functionalities
	// Free trial buttons
	document.querySelectorAll('.free-trial-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	openModal(
	'Essai gratuit',
	'Votre essai gratuit de 14 jours commence maintenant ! Un compte va être créé pour vous. Remplissez le formulaire suivant pour continuer.'
	);
	});
	});

	// Demo buttons
	document.querySelectorAll('.demo-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	openModal(
	'Démonstration',
	'Voici une démonstration de notre plateforme en action. Vous pouvez explorer toutes les fonctionnalités dans cet environnement de démonstration.'
	);
	});
	});

	// Start now button
	document.querySelector('.start-now-btn').addEventListener('click', function() {
	openModal(
	'Commencer maintenant',
	'Prêt à créer votre plateforme de cours ? Choisissez un nom de domaine et commencez à personnaliser votre site dès maintenant.'
	);
	});

	// Feature more buttons
	document.querySelectorAll('.feature-more-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	const featureNum = this.getAttribute('data-feature');
	const featureTitles = [
	'',
	'Génération automatique',
	'Tableau de bord complet',
	'Système de paiement',
	'Hébergement vidéo',
	'Design responsive',
	'Analytiques avancées'
	];
	const featureContents = [
	'',
	'Notre IA analyse votre contenu et crée une structure optimisée pour l\'apprentissage en ligne, avec navigation intuitive et parcours pédagogique personnalisé.',
	'Accédez à toutes les données importantes en un clin d\'œil : progression des élèves, revenus, taux de complétion des cours et bien plus encore.',
	'Intégration transparente avec Stripe, PayPal et autres processeurs de paiement. Gérez les abonnements, les remboursements et les promotions directement depuis votre tableau de bord.',
	'Hébergez vos vidéos en toute sécurité avec lecture adaptative en fonction de la connexion internet. Suivi précis du temps passé sur chaque vidéo par vos élèves.',
	'Votre site s\'affichera parfaitement sur tous les appareils, avec une interface adaptée à chaque taille d\'écran pour une expérience utilisateur optimale.',
	'Découvrez des insights détaillés sur le comportement de vos élèves : quels cours sont les plus populaires, où les élèves abandonnent, quels sujets nécessitent plus d\'explications.'
	];

	openModal(
	featureTitles[featureNum],
	featureContents[featureNum]
	);
	});
	});

	// Select plan buttons
	document.querySelectorAll('.select-plan-btn').forEach(btn => {
	btn.addEventListener('click', function() {
	const plan = this.getAttribute('data-plan');
	const planNames = {
	'starter': 'Starter',
	'pro': 'Pro',
	'enterprise': 'Enterprise'
	};

	openModal(
	`Plan ${planNames[plan]} sélectionné`,
	`Vous avez choisi le plan ${planNames[plan]}. Vous allez être redirigé vers notre formulaire sécurisé pour finaliser votre abonnement.`
	);
	});
	});

	// Contact button
	document.querySelector('.contact-btn').addEventListener('click', function(e) {
	e.preventDefault();
	openModal(
	'Contactez notre équipe',
	'Notre équipe est disponible pour répondre à toutes vos questions. Remplissez le formulaire ci-dessous et nous vous répondrons dans les plus brefs délais.'
	);
	});

	// Lesson navigation buttons
	document.querySelector('.prev-lesson-btn').addEventListener('click', function() {
	openModal(
	'Leçon précédente',
	'Navigation vers la leçon précédente. Votre progression sera automatiquement sauvegardée.'
	);
	});

	document.querySelector('.next-lesson-btn').addEventListener('click', function() {
	openModal(
	'Leçon suivante',
	'Navigation vers la leçon suivante. Votre progression sera automatiquement sauvegardée.'
	);
	});

	// Chat button
	document.querySelector('.chat-btn').addEventListener('click', function() {
	openModal(
	'Support en direct',
	'Connectez-vous avec un membre de notre équipe de support en temps réel. Nous sommes disponibles 24/7 pour répondre à vos questions.'
	);
	});

	// Help button
	document.querySelector('.help-btn').addEventListener('click', function() {
	openModal(
	'Centre d\'aide',
	'Parcourez notre centre d\'aide pour trouver des réponses à vos questions ou contactez notre équipe de support.'
	);
	});

	// Navigation links
	document.querySelectorAll('.nav-link').forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	const sectionId = this.getAttribute('data-section');
	const section = document.getElementById(sectionId);

	if(section) {
	// Close mobile menu if open
	mobileMenu.classList.add('hidden');

	// Scroll to section
	window.scrollTo({
	top: section.offsetTop - 80,
	behavior: 'smooth'
	});
	}
	});
	});

	// Footer links
	document.querySelectorAll('.footer-link').forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	const linkType = this.getAttribute('data-link');
	openModal(
	'Information',
	`Vous serez redirigé vers la page ${linkType}. Cette fonctionnalité est en cours de développement.`
	);
	});
	});

	// Social links
	document.querySelectorAll('.social-link').forEach(link => {
	link.addEventListener('click', function(e) {
	e.preventDefault();
	const social = this.getAttribute('data-social');
	openModal(
	'Réseaux sociaux',
	`Vous serez redirigé vers notre page ${social}. Cette fonctionnalité est en cours de développement.`
	);
	});
	});
	});
	</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/edugen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>