Spaces:

lnspeedy
/

test1

Running

App Files Files Community

lnspeedy commited on Apr 8, 2025

Commit

8283da9

verified ·

1 Parent(s): ddef439

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +1326 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test1
-emoji: 📉
-colorFrom: yellow
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test1
+emoji: 🐳
+colorFrom: gray
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1326 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="fr">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>EduVision - Plateforme Éducative Intelligente</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">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: {
+                            50: '#f0f9ff',
+                            100: '#e0f2fe',
+                            200: '#bae6fd',
+                            300: '#7dd3fc',
+                            400: '#38bdf8',
+                            500: '#0ea5e9',
+                            600: '#0284c7',
+                            700: '#0369a1',
+                            800: '#075985',
+                            900: '#0c4a6e',
+                        },
+                        secondary: {
+                            50: '#f5f3ff',
+                            100: '#ede9fe',
+                            200: '#ddd6fe',
+                            300: '#c4b5fd',
+                            400: '#a78bfa',
+                            500: '#8b5cf6',
+                            600: '#7c3aed',
+                            700: '#6d28d9',
+                            800: '#5b21b6',
+                            900: '#4c1d95',
+                        },
+                        dark: '#1e293b',
+                        light: '#f8fafc',
+                    },
+                    animation: {
+                        'float': 'float 6s ease-in-out infinite',
+                        'float-reverse': 'float-reverse 5s ease-in-out infinite',
+                        'pulse-slow': 'pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite',
+                        'wave': 'wave 12s linear infinite',
+                        'gradient': 'gradient 8s ease infinite',
+                    },
+                    keyframes: {
+                        float: {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(-20px)' },
+                        },
+                        'float-reverse': {
+                            '0%, 100%': { transform: 'translateY(0)' },
+                            '50%': { transform: 'translateY(20px)' },
+                        },
+                        wave: {
+                            '0%': { transform: 'translateX(0)' },
+                            '100%': { transform: 'translateX(-100%)' },
+                        },
+                        gradient: {
+                            '0%, 100%': { 'background-position': '0% 50%' },
+                            '50%': { 'background-position': '100% 50%' },
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #f8fafc;
+            overflow-x: hidden;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #0ea5e9, #8b5cf6);
+            background-size: 200% 200%;
+            animation: gradient 8s ease infinite;
+        }
+        .glass-effect {
+            background: rgba(255, 255, 255, 0.15);
+            backdrop-filter: blur(12px);
+            -webkit-backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.18);
+        }
+        .card-hover {
+            transition: all 0.3s ease;
+        }
+        .card-hover:hover {
+            transform: translateY(-8px);
+            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
+        }
+        .ai-chat-bubble {
+            border-radius: 24px 24px 24px 4px;
+        }
+        .user-chat-bubble {
+            border-radius: 24px 24px 4px 24px;
+        }
+        .wave-shape {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            overflow: hidden;
+            line-height: 0;
+        }
+        .wave-shape svg {
+            position: relative;
+            display: block;
+            width: calc(100% + 1.3px);
+            height: 150px;
+        }
+        .wave-shape .shape-fill {
+            fill: #FFFFFF;
+        }
+        .feature-icon {
+            width: 80px;
+            height: 80px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            margin: 0 auto;
+            font-size: 32px;
+        }
+        .course-card {
+            perspective: 1000px;
+        }
+        .course-card-inner {
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .course-card:hover .course-card-inner {
+            transform: rotateY(10deg) scale(1.03);
+        }
+        .progress-ring {
+            transform: rotate(-90deg);
+        }
+        .progress-ring-circle {
+            stroke-dasharray: 283;
+            stroke-dashoffset: 283;
+            transition: stroke-dashoffset 0.5s;
+        }
+        .typing-indicator span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: #8b5cf6;
+            margin: 0 2px;
+            opacity: 0.4;
+        }
+        .typing-indicator span:nth-child(1) {
+            animation: typing-pulse 1s infinite;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation: typing-pulse 1s infinite 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation: typing-pulse 1s infinite 0.4s;
+        }
+        @keyframes typing-pulse {
+            0%, 100% { opacity: 0.4; transform: scale(1); }
+            50% { opacity: 1; transform: scale(1.2); }
+        }
+        .floating-shapes {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            z-index: -1;
+            overflow: hidden;
+        }
+        .floating-shape {
+            position: absolute;
+            opacity: 0.1;
+            border-radius: 50%;
+            filter: blur(40px);
+        }
+        .floating-shape-1 {
+            width: 300px;
+            height: 300px;
+            background: #0ea5e9;
+            top: 10%;
+            left: 10%;
+            animation: float 8s ease-in-out infinite;
+        }
+        .floating-shape-2 {
+            width: 400px;
+            height: 400px;
+            background: #8b5cf6;
+            top: 60%;
+            left: 70%;
+            animation: float-reverse 10s ease-in-out infinite;
+        }
+        .floating-shape-3 {
+            width: 200px;
+            height: 200px;
+            background: #ec4899;
+            top: 30%;
+            left: 50%;
+            animation: float 7s ease-in-out infinite reverse;
+        }
+        .ai-response-loader {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+        .ai-response-loader div {
+            width: 12px;
+            height: 12px;
+            margin: 0 4px;
+            background-color: #8b5cf6;
+            border-radius: 50%;
+            display: inline-block;
+            animation: bounce 1.4s infinite ease-in-out both;
+        }
+        .ai-response-loader div:nth-child(1) {
+            animation-delay: -0.32s;
+        }
+        .ai-response-loader div:nth-child(2) {
+            animation-delay: -0.16s;
+        }
+        @keyframes bounce {
+            0%, 80%, 100% {
+                transform: scale(0);
+            }
+            40% {
+                transform: scale(1);
+            }
+        }
+        .wave-animation {
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 200%;
+            height: 100%;
+            background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23ffffff' opacity='.25'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60-48.47V0Z' fill='%23ffffff' opacity='.5'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23ffffff'/%3E%3C/svg%3E") repeat-x;
+            background-size: 50% 100%;
+            animation: wave 12s linear infinite;
+            transform-origin: bottom;
+        }
+        .knowledge-graph {
+            position: relative;
+            width: 100%;
+            height: 400px;
+            background: #f8fafc;
+            border-radius: 16px;
+            overflow: hidden;
+        }
+        .knowledge-node {
+            position: absolute;
+            width: 60px;
+            height: 60px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-weight: bold;
+            color: white;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            z-index: 2;
+        }
+        .knowledge-node:hover {
+            transform: scale(1.1);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
+        }
+        .knowledge-connection {
+            position: absolute;
+            height: 2px;
+            background: rgba(139, 92, 246, 0.3);
+            transform-origin: 0 0;
+            z-index: 1;
+        }
+        .dashboard-card {
+            transition: all 0.3s ease;
+            border-left: 4px solid transparent;
+        }
+        .dashboard-card:hover {
+            transform: translateY(-5px);
+            border-left-color: #8b5cf6;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        .learning-path {
+            position: relative;
+        }
+        .learning-path::before {
+            content: '';
+            position: absolute;
+            left: 19px;
+            top: 0;
+            bottom: 0;
+            width: 2px;
+            background: #e2e8f0;
+            z-index: 1;
+        }
+        .learning-step {
+            position: relative;
+            z-index: 2;
+        }
+        .learning-step::before {
+            content: '';
+            position: absolute;
+            left: 15px;
+            top: 24px;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            background: #8b5cf6;
+            z-index: 3;
+        }
+        .interactive-3d {
+            transform-style: preserve-3d;
+            transition: transform 0.5s;
+        }
+        .interactive-3d:hover {
+            transform: rotateX(5deg) rotateY(5deg) scale(1.02);
+        }
+        .parallax-bg {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .scroll-indicator {
+            position: absolute;
+            bottom: 30px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 30px;
+            height: 50px;
+            border: 2px solid white;
+            border-radius: 15px;
+        }
+        .scroll-indicator::before {
+            content: '';
+            position: absolute;
+            top: 8px;
+            left: 50%;
+            width: 6px;
+            height: 6px;
+            background: white;
+            border-radius: 50%;
+            transform: translateX(-50%);
+            animation: scroll 2s infinite;
+        }
+        @keyframes scroll {
+            0% { transform: translate(-50%, 0); opacity: 1; }
+            100% { transform: translate(-50%, 20px); opacity: 0; }
+        }
+        /* Dark mode toggle styles */
+        .toggle-checkbox:checked {
+            right: 0;
+            border-color: #8b5cf6;
+        }
+        .toggle-checkbox:checked + .toggle-label {
+            background-color: #8b5cf6;
+        }
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .knowledge-graph {
+                height: 300px;
+            }
+            .wave-animation {
+                animation: wave 20s linear infinite;
+            }
+        }
+    </style>
+</head>
+<body class="antialiased text-dark">
+    <!-- Floating background shapes -->
+    <div class="floating-shapes">
+        <div class="floating-shape floating-shape-1"></div>
+        <div class="floating-shape floating-shape-2"></div>
+        <div class="floating-shape floating-shape-3"></div>
+    </div>
+    <!-- Navigation -->
+    <nav class="fixed w-full z-50 bg-white/80 backdrop-blur-md shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16 items-center">
+                <div class="flex-shrink-0 flex items-center">
+                    <div class="flex items-center">
+                        <i class="fas fa-graduation-cap text-primary-600 text-2xl mr-2"></i>
+                        <span class="text-xl font-bold text-dark">Edu<span class="text-primary-600">Vision</span></span>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-8">
+                        <a href="#features" class="text-dark hover:text-primary-600 font-medium transition">Fonctionnalités</a>
+                        <a href="#courses" class="text-dark hover:text-primary-600 font-medium transition">Cours</a>
+                        <a href="#ai-tutor" class="text-dark hover:text-primary-600 font-medium transition">Tuteur IA</a>
+                        <a href="#dashboard" class="text-dark hover:text-primary-600 font-medium transition">Tableau de bord</a>
+                        <a href="#pricing" class="text-dark hover:text-primary-600 font-medium transition">Tarifs</a>
+                        <button class="gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition shadow-lg hover:shadow-xl">
+                            Essai gratuit
+                        </button>
+                    </div>
+                </div>
+                <div class="md:hidden flex items-center">
+                    <button id="mobile-menu-button" class="text-dark hover:text-primary-600 focus:outline-none">
+                        <i class="fas fa-bars text-2xl"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+        <!-- Mobile menu -->
+        <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg rounded-b-lg">
+            <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+                <a href="#features" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Fonctionnalités</a>
+                <a href="#courses" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Cours</a>
+                <a href="#ai-tutor" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Tuteur IA</a>
+                <a href="#dashboard" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Tableau de bord</a>
+                <a href="#pricing" class="block px-3 py-2 rounded-md text-base font-medium text-dark hover:text-primary-600 hover:bg-gray-50">Tarifs</a>
+                <button class="w-full gradient-bg text-white px-6 py-2 rounded-full font-medium hover:opacity-90 transition shadow-lg mt-2">
+                    Essai gratuit
+                </button>
+            </div>
+        </div>
+    </nav>
+    <!-- Hero Section -->
+    <section class="pt-24 pb-16 md:pt-32 md:pb-24 relative overflow-hidden">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
+                <div class="mb-12 lg:mb-0">
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">
+                        L'éducation <span class="text-primary-600">réinventée</span> par l'IA
+                    </h1>
+                    <p class="text-lg md:text-xl text-gray-600 mb-8">
+                        Découvrez une nouvelle façon d'apprendre avec notre plateforme intelligente qui s'adapte à votre rythme et style d'apprentissage.
+                    </p>
+                    <div class="flex flex-col sm:flex-row gap-4">
+                        <button class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition shadow-lg hover:shadow-xl text-lg">
+                            Commencer maintenant
+                        </button>
+                        <button class="bg-white text-dark px-8 py-3 rounded-full font-medium hover:bg-gray-50 transition shadow hover:shadow-md text-lg border border-gray-200">
+                            Voir la démo
+                        </button>
+                    </div>
+                    <div class="mt-8 flex items-center space-x-6">
+                        <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="User 1">
+                            <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User 2">
+                            <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/women/43.jpg" alt="User 3">
+                            <img class="inline-block h-10 w-10 rounded-full ring-2 ring-white" src="https://randomuser.me/api/portraits/men/76.jpg" alt="User 4">
+                        </div>
+                        <div>
+                            <p class="text-gray-600">Rejoint par <span class="font-semibold text-dark">10,000+</span> apprenants</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="relative">
+                    <div class="glass-effect rounded-3xl overflow-hidden shadow-2xl">
+                        <img src="https://images.unsplash.com/photo-1580927752452-89d86da3fa0a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80" alt="Apprentissage avec IA" class="w-full h-auto rounded-3xl">
+                    </div>
+                    <div class="absolute -bottom-6 -left-6 bg-white p-4 rounded-2xl shadow-xl z-10">
+                        <div class="flex items-center">
+                            <div class="bg-primary-100 p-3 rounded-full mr-3">
+                                <i class="fas fa-brain text-primary-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="font-semibold">Analyse intelligente</p>
+                                <p class="text-sm text-gray-500">Vos progrès en temps réel</p>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="absolute -top-6 -right-6 bg-white p-4 rounded-2xl shadow-xl z-10">
+                        <div class="flex items-center">
+                            <div class="bg-secondary-100 p-3 rounded-full mr-3">
+                                <i class="fas fa-robot text-secondary-600 text-xl"></i>
+                            </div>
+                            <div>
+                                <p class="font-semibold">Tuteur IA</p>
+                                <p class="text-sm text-gray-500">Disponible 24/7</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="wave-shape">
+            <svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
+                <path d="M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z" opacity=".25" class="shape-fill"></path>
+                <path d="M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60-48.47V0Z" opacity=".5" class="shape-fill"></path>
+                <path d="M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z" class="shape-fill"></path>
+            </svg>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <span class="text-primary-600 font-semibold">FONCTIONNALITÉS INNOVANTES</span>
+                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Une expérience d'apprentissage révolutionnaire</h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Notre plateforme combine les dernières avancées en IA avec des méthodes pédagogiques éprouvées pour une expérience d'apprentissage personnalisée.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Feature 1 -->
+                <div class="bg-white rounded-xl p-8 shadow-lg card-hover">
+                    <div class="feature-icon bg-primary-100 text-primary-600 mb-6">
+                        <i class="fas fa-user-astronaut"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Tuteur IA personnalisé</h3>
+                    <p class="text-gray-600 mb-4">
+                        Un assistant intelligent qui s'adapte à votre style d'apprentissage, répond à vos questions et vous guide à travers les concepts difficiles.
+                    </p>
+                    <div class="flex items-center text-primary-600 font-medium">
+                        <span>En savoir plus</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </div>
+                </div>
+                <!-- Feature 2 -->
+                <div class="bg-white rounded-xl p-8 shadow-lg card-hover">
+                    <div class="feature-icon bg-secondary-100 text-secondary-600 mb-6">
+                        <i class="fas fa-project-diagram"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Cartographie des connaissances</h3>
+                    <p class="text-gray-600 mb-4">
+                        Visualisez les relations entre les concepts et identifiez vos lacunes pour un apprentissage plus efficace et ciblé.
+                    </p>
+                    <div class="flex items-center text-secondary-600 font-medium">
+                        <span>En savoir plus</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </div>
+                </div>
+                <!-- Feature 3 -->
+                <div class="bg-white rounded-xl p-8 shadow-lg card-hover">
+                    <div class="feature-icon bg-yellow-100 text-yellow-600 mb-6">
+                        <i class="fas fa-chart-line"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Analyse des progrès</h3>
+                    <p class="text-gray-600 mb-4">
+                        Des tableaux de bord intelligents qui suivent vos progrès et suggèrent des domaines à améliorer pour maximiser votre apprentissage.
+                    </p>
+                    <div class="flex items-center text-yellow-600 font-medium">
+                        <span>En savoir plus</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </div>
+                </div>
+                <!-- Feature 4 -->
+                <div class="bg-white rounded-xl p-8 shadow-lg card-hover">
+                    <div class="feature-icon bg-purple-100 text-purple-600 mb-6">
+                        <i class="fas fa-vr-cardboard"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Expériences immersives</h3>
+                    <p class="text-gray-600 mb-4">
+                        Apprenez grâce à des simulations interactives et des environnements virtuels qui rendent les concepts abstraits tangibles.
+                    </p>
+                    <div class="flex items-center text-purple-600 font-medium">
+                        <span>En savoir plus</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </div>
+                </div>
+                <!-- Feature 5 -->
+                <div class="bg-white rounded-xl p-8 shadow-lg card-hover">
+                    <div class="feature-icon bg-green-100 text-green-600 mb-6">
+                        <i class="fas fa-users"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Apprentissage collaboratif</h3>
+                    <p class="text-gray-600 mb-4">
+                        Travaillez avec d'autres apprenants dans des espaces virtuels, résolvez des problèmes ensemble et partagez vos connaissances.
+                    </p>
+                    <div class="flex items-center text-green-600 font-medium">
+                        <span>En savoir plus</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </div>
+                </div>
+                <!-- Feature 6 -->
+                <div class="bg-white rounded-xl p-8 shadow-lg card-hover">
+                    <div class="feature-icon bg-red-100 text-red-600 mb-6">
+                        <i class="fas fa-microchip"></i>
+                    </div>
+                    <h3 class="text-xl font-bold mb-3">Adaptation en temps réel</h3>
+                    <p class="text-gray-600 mb-4">
+                        Notre système ajuste automatiquement la difficulté et le style de contenu en fonction de vos performances et préférences.
+                    </p>
+                    <div class="flex items-center text-red-600 font-medium">
+                        <span>En savoir plus</span>
+                        <i class="fas fa-arrow-right ml-2"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Knowledge Graph Demo -->
+    <section class="py-16 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="lg:grid lg:grid-cols-2 lg:gap-12 items-center">
+                <div class="mb-12 lg:mb-0">
+                    <span class="text-primary-600 font-semibold">APPRENTISSAGE CONNECTÉ</span>
+                    <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">Cartographie intelligente des connaissances</h2>
+                    <p class="text-lg text-gray-600 mb-8">
+                        Notre système crée une carte personnalisée de vos connaissances, mettant en évidence les relations entre les concepts et identifiant les domaines à renforcer.
+                    </p>
+                    <ul class="space-y-4">
+                        <li class="flex items-start">
+                            <div class="bg-primary-100 p-2 rounded-full mr-4 mt-1">
+                                <i class="fas fa-check text-primary-600 text-sm"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">Visualisation des connexions</h4>
+                                <p class="text-gray-600">Comprenez comment les concepts s'articulent entre eux pour une meilleure rétention.</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="bg-primary-100 p-2 rounded-full mr-4 mt-1">
+                                <i class="fas fa-check text-primary-600 text-sm"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">Identification des lacunes</h4>
+                                <p class="text-gray-600">L'IA détecte automatiquement les concepts mal maîtrisés pour un apprentissage ciblé.</p>
+                            </div>
+                        </li>
+                        <li class="flex items-start">
+                            <div class="bg-primary-100 p-2 rounded-full mr-4 mt-1">
+                                <i class="fas fa-check text-primary-600 text-sm"></i>
+                            </div>
+                            <div>
+                                <h4 class="font-semibold">Parcours personnalisé</h4>
+                                <p class="text-gray-600">Un itinéraire d'apprentissage optimisé en fonction de vos objectifs et compétences.</p>
+                            </div>
+                        </li>
+                    </ul>
+                </div>
+                <div class="relative">
+                    <div class="knowledge-graph shadow-xl rounded-2xl overflow-hidden">
+                        <!-- Knowledge nodes will be added dynamically with JavaScript -->
+                    </div>
+                    <div class="absolute bottom-4 left-4 bg-white px-4 py-2 rounded-lg shadow-md">
+                        <p class="text-sm font-medium">Cliquez sur un nœud pour explorer</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- AI Tutor Section -->
+    <section id="ai-tutor" class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <span class="text-primary-600 font-semibold">TUTEUR INTELLIGENT</span>
+                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Votre assistant pédagogique IA 24/7</h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Posez des questions, obtenez des explications détaillées et recevez un soutien personnalisé à tout moment.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+                <div class="lg:col-span-2">
+                    <div class="bg-gray-50 rounded-2xl shadow-lg overflow-hidden">
+                        <div class="bg-gradient-to-r from-primary-500 to-secondary-500 p-4 text-white">
+                            <div class="flex items-center">
+                                <div class="bg-white/20 p-2 rounded-full mr-3">
+                                    <i class="fas fa-robot"></i>
+                                </div>
+                                <div>
+                                    <h3 class="font-semibold">Assistant EduVision</h3>
+                                    <p class="text-sm opacity-80">Disponible pour vous aider</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="p-6 h-96 overflow-y-auto" id="chat-container">
+                            <!-- AI Tutor chat messages will be added here -->
+                            <div class="flex mb-4">
+                                <div class="flex-shrink-0 mr-3">
+                                    <div class="bg-primary-100 text-primary-600 rounded-full w-10 h-10 flex items-center justify-center">
+                                        <i class="fas fa-robot"></i>
+                                    </div>
+                                </div>
+                                <div class="bg-gray-100 text-gray-800 p-4 rounded-2xl ai-chat-bubble max-w-xs md:max-w-md">
+                                    <p>Bonjour ! Je suis votre assistant pédagogique IA. Comment puis-je vous aider aujourd'hui ?</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 p-4">
+                            <div class="relative">
+                                <input type="text" id="chat-input" placeholder="Posez votre question..." class="w-full bg-white border border-gray-300 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent">
+                                <button id="send-button" class="absolute right-3 top-1/2 transform -translate-y-1/2 text-primary-600 hover:text-primary-700">
+                                    <i class="fas fa-paper-plane"></i>
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div>
+                    <div class="bg-white rounded-xl shadow-lg p-8 h-full">
+                        <h3 class="text-xl font-bold mb-6">Comment votre tuteur IA vous aide</h3>
+                        <div class="space-y-6">
+                            <div class="flex">
+                                <div class="bg-primary-100 text-primary-600 rounded-full w-12 h-12 flex-shrink-0 flex items-center justify-center mr-4">
+                                    <i class="fas fa-lightbulb"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Explications claires</h4>
+                                    <p class="text-gray-600 text-sm">Obtenez des explications adaptées à votre niveau de compréhension.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="bg-secondary-100 text-secondary-600 rounded-full w-12 h-12 flex-shrink-0 flex items-center justify-center mr-4">
+                                    <i class="fas fa-question"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Réponses instantanées</h4>
+                                    <p class="text-gray-600 text-sm">Des réponses à vos questions en quelques secondes, 24h/24.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="bg-yellow-100 text-yellow-600 rounded-full w-12 h-12 flex-shrink-0 flex items-center justify-center mr-4">
+                                    <i class="fas fa-project-diagram"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Connexions conceptuelles</h4>
+                                    <p class="text-gray-600 text-sm">Comprenez comment les idées s'articulent entre elles.</p>
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <div class="bg-purple-100 text-purple-600 rounded-full w-12 h-12 flex-shrink-0 flex items-center justify-center mr-4">
+                                    <i class="fas fa-chart-line"></i>
+                                </div>
+                                <div>
+                                    <h4 class="font-semibold mb-1">Suivi des progrès</h4>
+                                    <p class="text-gray-600 text-sm">Votre tuteur suit votre évolution et adapte ses explications.</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Dashboard Preview -->
+    <section id="dashboard" class="py-16 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <span class="text-primary-600 font-semibold">SUIVI INTELLIGENT</span>
+                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Votre tableau de bord d'apprentissage</h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Visualisez vos progrès, identifiez vos forces et vos points à améliorer avec des analyses intelligentes.
+                </p>
+            </div>
+            <div class="bg-white rounded-2xl shadow-xl overflow-hidden">
+                <div class="bg-gray-800 text-white p-4">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i class="fas fa-chart-bar mr-2"></i>
+                            <span class="font-medium">Tableau de bord EduVision</span>
+                        </div>
+                        <div class="flex items-center space-x-4">
+                            <span class="text-sm">Mise à jour en temps réel</span>
+                            <div class="flex items-center">
+                                <span class="mr-2 text-sm">Mode sombre</span>
+                                <div class="relative inline-block w-10 mr-2 align-middle select-none">
+                                    <input type="checkbox" id="toggle" class="toggle-checkbox absolute block w-6 h-6 rounded-full bg-white border-4 appearance-none cursor-pointer"/>
+                                    <label for="toggle" class="toggle-label block overflow-hidden h-6 rounded-full bg-gray-300 cursor-pointer"></label>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="p-6">
+                    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
+                        <!-- Dashboard Card 1 -->
+                        <div class="dashboard-card bg-white p-6 rounded-xl shadow-md">
+                            <div class="flex justify-between items-start mb-4">
+                                <div>
+                                    <h3 class="text-gray-500 font-medium">Heures d'apprentissage</h3>
+                                    <p class="text-3xl font-bold">24.5 <span class="text-lg text-gray-500">h</span></p>
+                                </div>
+                                <div class="bg-primary-100 text-primary-600 p-3 rounded-lg">
+                                    <i class="fas fa-clock text-xl"></i>
+                                </div>
+                            </div>
+                            <div class="flex items-center text-green-500 text-sm">
+                                <i class="fas fa-arrow-up mr-1"></i>
+                                <span>12% par rapport au mois dernier</span>
+                            </div>
+                        </div>
+                        <!-- Dashboard Card 2 -->
+                        <div class="dashboard-card bg-white p-6 rounded-xl shadow-md">
+                            <div class="flex justify-between items-start mb-4">
+                                <div>
+                                    <h3 class="text-gray-500 font-medium">Concepts maîtrisés</h3>
+                                    <p class="text-3xl font-bold">87 <span class="text-lg text-gray-500">/100</span></p>
+                                </div>
+                                <div class="bg-green-100 text-green-600 p-3 rounded-lg">
+                                    <i class="fas fa-check-circle text-xl"></i>
+                                </div>
+                            </div>
+                            <div class="flex items-center text-green-500 text-sm">
+                                <i class="fas fa-arrow-up mr-1"></i>
+                                <span>8 nouveaux ce mois-ci</span>
+                            </div>
+                        </div>
+                        <!-- Dashboard Card 3 -->
+                        <div class="dashboard-card bg-white p-6 rounded-xl shadow-md">
+                            <div class="flex justify-between items-start mb-4">
+                                <div>
+                                    <h3 class="text-gray-500 font-medium">Niveau actuel</h3>
+                                    <p class="text-3xl font-bold">Intermédiaire <span class="text-lg text-gray-500">+</span></p>
+                                </div>
+                                <div class="bg-purple-100 text-purple-600 p-3 rounded-lg">
+                                    <i class="fas fa-signal text-xl"></i>
+                                </div>
+                            </div>
+                            <div class="flex items-center text-green-500 text-sm">
+                                <i class="fas fa-arrow-up mr-1"></i>
+                                <span>Progression vers Avancé: 65%</span>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Progress Charts -->
+                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
+                        <div class="bg-white p-6 rounded-xl shadow-md">
+                            <div class="flex justify-between items-center mb-4">
+                                <h3 class="font-semibold">Progression des compétences</h3>
+                                <select class="bg-gray-100 border-0 rounded-lg px-3 py-1 text-sm focus:ring-2 focus:ring-primary-500">
+                                    <option>Ce mois-ci</option>
+                                    <option>3 derniers mois</option>
+                                    <option>Cette année</option>
+                                </select>
+                            </div>
+                            <div class="h-64">
+                                <!-- Skill progress chart would be here -->
+                                <div class="flex items-center justify-center h-full bg-gray-50 rounded-lg">
+                                    <p class="text-gray-500">Graphique de progression interactif</p>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="bg-white p-6 rounded-xl shadow-md">
+                            <div class="flex justify-between items-center mb-4">
+                                <h3 class="font-semibold">Répartition du temps</h3>
+                                <select class="bg-gray-100 border-0 rounded-lg px-3 py-1 text-sm focus:ring-2 focus:ring-primary-500">
+                                    <option>Cette semaine</option>
+                                    <option>Ce mois-ci</option>
+                                    <option>Cette année</option>
+                                </select>
+                            </div>
+                            <div class="h-64">
+                                <!-- Time distribution chart would be here -->
+                                <div class="flex items-center justify-center h-full bg-gray-50 rounded-lg">
+                                    <p class="text-gray-500">Graphique de répartition du temps</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Learning Path -->
+                    <div class="bg-white p-6 rounded-xl shadow-md">
+                        <div class="flex justify-between items-center mb-6">
+                            <h3 class="font-semibold">Votre parcours d'apprentissage</h3>
+                            <button class="text-primary-600 hover:text-primary-700 font-medium flex items-center">
+                                <span>Voir tout</span>
+                                <i class="fas fa-chevron-right ml-1"></i>
+                            </button>
+                        </div>
+                        <div class="learning-path space-y-6 pl-8">
+                            <!-- Learning Step 1 -->
+                            <div class="learning-step">
+                                <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md transition">
+                                    <div class="flex items-start">
+                                        <div class="bg-primary-100 text-primary-600 rounded-lg p-3 mr-4">
+                                            <i class="fas fa-play-circle text-xl"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-semibold mb-1">Introduction à l'algèbre linéaire</h4>
+                                            <p class="text-gray-600 text-sm mb-2">Comprendre les bases des vecteurs et matrices</p>
+                                            <div class="flex items-center text-sm">
+                                                <span class="text-gray-500 mr-3">Progression: 85%</span>
+                                                <div class="w-full bg-gray-200 rounded-full h-2">
+                                                    <div class="bg-primary-600 h-2 rounded-full" style="width: 85%"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Learning Step 2 -->
+                            <div class="learning-step">
+                                <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md transition">
+                                    <div class="flex items-start">
+                                        <div class="bg-yellow-100 text-yellow-600 rounded-lg p-3 mr-4">
+                                            <i class="fas fa-book-open text-xl"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-semibold mb-1">Applications pratiques</h4>
+                                            <p class="text-gray-600 text-sm mb-2">Cas d'utilisation en informatique et physique</p>
+                                            <div class="flex items-center text-sm">
+                                                <span class="text-gray-500 mr-3">Progression: 42%</span>
+                                                <div class="w-full bg-gray-200 rounded-full h-2">
+                                                    <div class="bg-yellow-500 h-2 rounded-full" style="width: 42%"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                            <!-- Learning Step 3 -->
+                            <div class="learning-step">
+                                <div class="bg-white border border-gray-200 rounded-xl p-5 shadow-sm hover:shadow-md transition">
+                                    <div class="flex items-start">
+                                        <div class="bg-purple-100 text-purple-600 rounded-lg p-3 mr-4">
+                                            <i class="fas fa-laptop-code text-xl"></i>
+                                        </div>
+                                        <div>
+                                            <h4 class="font-semibold mb-1">Implémentation en Python</h4>
+                                            <p class="text-gray-600 text-sm mb-2">Utiliser NumPy pour les calculs matriciels</p>
+                                            <div class="flex items-center text-sm">
+                                                <span class="text-gray-500 mr-3">Progression: 15%</span>
+                                                <div class="w-full bg-gray-200 rounded-full h-2">
+                                                    <div class="bg-purple-600 h-2 rounded-full" style="width: 15%"></div>
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Courses Section -->
+    <section id="courses" class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <span class="text-primary-600 font-semibold">NOTRE CATALOGUE</span>
+                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Explorez nos cours intelligents</h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Des parcours d'apprentissage adaptatifs couvrant une large gamme de sujets, construits par des experts et optimisés par l'IA.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Course 1 -->
+                <div class="course-card">
+                    <div class="course-card-inner bg-white rounded-xl overflow-hidden shadow-lg card-hover">
+                        <div class="relative">
+                            <img src="https://images.unsplash.com/photo-1624953587687-daf255b6b80a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1180&q=80" alt="Data Science" class="w-full h-48 object-cover">
+                            <div class="absolute top-4 right-4 bg-primary-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                                Nouveau
+                            </div>
+                        </div>
+                        <div class="p-6">
+                            <div class="flex items-center mb-3">
+                                <span class="bg-primary-100 text-primary-600 text-xs font-semibold px-2 py-1 rounded mr-2">Science des données</span>
+                                <span class="text-gray-500 text-sm">Niveau: Intermédiaire</span>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Fondamentaux du Machine Learning</h3>
+                            <p class="text-gray-600 mb-4">Apprenez les algorithmes essentiels et comment les appliquer à des problèmes réels.</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                                    <span class="font-medium">4.9</span>
+                                    <span class="text-gray-500 text-sm ml-1">(128)</span>
+                                </div>
+                                <div class="text-gray-500 text-sm">
+                                    <i class="fas fa-user-graduate mr-1"></i>
+                                    <span>320 apprenants</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 px-6 py-4">
+                            <button class="w-full gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">
+                                Commencer le cours
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Course 2 -->
+                <div class="course-card">
+                    <div class="course-card-inner bg-white rounded-xl overflow-hidden shadow-lg card-hover">
+                        <div class="relative">
+                            <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Programming" class="w-full h-48 object-cover">
+                            <div class="absolute top-4 right-4 bg-secondary-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                                Populaire
+                            </div>
+                        </div>
+                        <div class="p-6">
+                            <div class="flex items-center mb-3">
+                                <span class="bg-blue-100 text-blue-600 text-xs font-semibold px-2 py-1 rounded mr-2">Programmation</span>
+                                <span class="text-gray-500 text-sm">Niveau: Débutant</span>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Python Moderne pour Débutants</h3>
+                            <p class="text-gray-600 mb-4">Maîtrisez les bases de Python et commencez à créer vos propres applications.</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                                    <span class="font-medium">4.8</span>
+                                    <span class="text-gray-500 text-sm ml-1">(256)</span>
+                                </div>
+                                <div class="text-gray-500 text-sm">
+                                    <i class="fas fa-user-graduate mr-1"></i>
+                                    <span>540 apprenants</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 px-6 py-4">
+                            <button class="w-full gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">
+                                Commencer le cours
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <!-- Course 3 -->
+                <div class="course-card">
+                    <div class="course-card-inner bg-white rounded-xl overflow-hidden shadow-lg card-hover">
+                        <div class="relative">
+                            <img src="https://images.unsplash.com/photo-1532094349884-543bc11b234d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80" alt="Mathematics" class="w-full h-48 object-cover">
+                            <div class="absolute top-4 right-4 bg-purple-600 text-white text-xs font-semibold px-3 py-1 rounded-full">
+                                Recommandé
+                            </div>
+                        </div>
+                        <div class="p-6">
+                            <div class="flex items-center mb-3">
+                                <span class="bg-purple-100 text-purple-600 text-xs font-semibold px-2 py-1 rounded mr-2">Mathématiques</span>
+                                <span class="text-gray-500 text-sm">Niveau: Avancé</span>
+                            </div>
+                            <h3 class="text-xl font-bold mb-3">Algèbre Linéaire Appliquée</h3>
+                            <p class="text-gray-600 mb-4">Explorez les concepts avancés et leurs applications en science des données et graphisme.</p>
+                            <div class="flex justify-between items-center">
+                                <div class="flex items-center">
+                                    <i class="fas fa-star text-yellow-400 mr-1"></i>
+                                    <span class="font-medium">4.7</span>
+                                    <span class="text-gray-500 text-sm ml-1">(87)</span>
+                                </div>
+                                <div class="text-gray-500 text-sm">
+                                    <i class="fas fa-user-graduate mr-1"></i>
+                                    <span>210 apprenants</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="border-t border-gray-200 px-6 py-4">
+                            <button class="w-full gradient-bg text-white px-4 py-2 rounded-lg font-medium hover:opacity-90 transition">
+                                Commencer le cours
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button class="border-2 border-primary-600 text-primary-600 font-semibold px-8 py-3 rounded-full hover:bg-primary-50 transition">
+                    Voir tous les cours (24+)
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Pricing Section -->
+    <section id="pricing" class="py-16 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <span class="text-primary-600 font-semibold">TARIFS ABORDABLES</span>
+                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Choisissez votre forfait</h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Accédez à toutes les fonctionnalités avec un abonnement adapté à vos besoins.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto">
+                <!-- Plan 1 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="p-8 text-center">
+                        <h3 class="text-xl font-semibold mb-2">Étudiant</h3>
+                        <p class="text-gray-600 mb-6">Parfait pour les apprenants occasionnels</p>
+                        <div class="mb-6">
+                            <span class="text-4xl font-bold">9€</span>
+                            <span class="text-gray-500">/mois</span>
+                        </div>
+                        <button class="w-full border-2 border-primary-600 text-primary-600 font-medium py-2 rounded-lg hover:bg-primary-50 transition">
+                            Choisir ce plan
+                        </button>
+                    </div>
+                    <div class="border-t border-gray-200 p-8 bg-gray-50">
+                        <ul class="space-y-4">
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Accès à tous les cours</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Tuteur IA basique</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>5 questions/mois avec l'IA</span>
+                            </li>
+                            <li class="flex items-start text-gray-400">
+                                <i class="fas fa-times mt-1 mr-3"></i>
+                                <span>Analyses avancées</span>
+                            </li>
+                            <li class="flex items-start text-gray-400">
+                                <i class="fas fa-times mt-1 mr-3"></i>
+                                <span>Certificats de complétion</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- Plan 2 (Featured) -->
+                <div class="bg-white rounded-xl shadow-2xl overflow-hidden transform scale-105 z-10 border-2 border-primary-600">
+                    <div class="bg-primary-600 text-white py-2 text-center font-medium">
+                        Le plus populaire
+                    </div>
+                    <div class="p-8 text-center">
+                        <h3 class="text-xl font-semibold mb-2">Professionnel</h3>
+                        <p class="text-gray-600 mb-6">Idéal pour une progression sérieuse</p>
+                        <div class="mb-6">
+                            <span class="text-4xl font-bold">19€</span>
+                            <span class="text-gray-500">/mois</span>
+                        </div>
+                        <button class="w-full gradient-bg text-white font-medium py-2 rounded-lg hover:opacity-90 transition shadow-lg">
+                            Choisir ce plan
+                        </button>
+                    </div>
+                    <div class="border-t border-gray-200 p-8 bg-gray-50">
+                        <ul class="space-y-4">
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Accès à tous les cours</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Tuteur IA avancé</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>50 questions/mois avec l'IA</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Analyses avancées</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Certificats de complétion</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- Plan 3 -->
+                <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+                    <div class="p-8 text-center">
+                        <h3 class="text-xl font-semibold mb-2">Établissement</h3>
+                        <p class="text-gray-600 mb-6">Pour écoles et entreprises</p>
+                        <div class="mb-6">
+                            <span class="text-4xl font-bold">Personnalisé</span>
+                        </div>
+                        <button class="w-full border-2 border-primary-600 text-primary-600 font-medium py-2 rounded-lg hover:bg-primary-50 transition">
+                            Nous contacter
+                        </button>
+                    </div>
+                    <div class="border-t border-gray-200 p-8 bg-gray-50">
+                        <ul class="space-y-4">
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Accès illimité pour votre équipe</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Tuteur IA premium</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Questions illimitées avec l'IA</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Tableau de bord d'équipe</span>
+                            </li>
+                            <li class="flex items-start">
+                                <i class="fas fa-check text-green-500 mt-1 mr-3"></i>
+                                <span>Support prioritaire</span>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12 bg-white rounded-xl p-8 max-w-3xl mx-auto shadow-md">
+                <h3 class="text-xl font-semibold mb-4">Vous hésitez encore ?</h3>
+                <p class="text-gray-600 mb-6">Essayez gratuitement pendant 14 jours sans engagement. Aucune carte de crédit requise.</p>
+                <button class="gradient-bg text-white px-8 py-3 rounded-full font-medium hover:opacity-90 transition shadow-lg">
+                    Essai gratuit de 14 jours
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <span class="text-primary-600 font-semibold">TÉMOIGNAGES</span>
+                <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-4">Ce que disent nos apprenants</h2>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">
+                    Découvrez comment EduVision a transformé l'expérience d'apprentissage de nos utilisateurs.
+                </p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition">
+                    <div class="flex items-center mb-6">
+                        <div class="flex-shrink-0 mr-4">
+                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/43.jpg" alt="Sophie Martin">
+                        </div>
+                        <div>
+                            <h4 class="font-semibold">Sophie Martin</h4>
+                            <p class="text-gray-500 text-sm">Étudiante en informatique</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-6">
+                        "Le tuteur IA m'a permis de comprendre des concepts complexes en machine learning que je n'avais pas saisis en cours. Les explications adaptées à mon niveau ont fait toute la différence."
+                    </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="bg-gray-50 rounded-xl p-8 shadow-sm hover:shadow-md transition">
+                    <div class="flex items-center mb-6">
+                        <div class="flex-shrink-0 mr-4">
+                            <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Thomas Leroy">
+                        </div>
+                        <div>
+                            <h4 class="font-semibold">Thomas Leroy</h4>
+                            <p class="text-gray-500 text-sm">Développeur web</p>
+                        </div>
+                    </div>
+                    <p class="text-gray-600 mb-6">
+                        "La carte des connaissances est révolutionnaire. Voir comment les concepts s'articulent m'a aidé à construire une compréhension plus profonde et à identifier mes lacunes rapidement."
+                    </p>
+                    <div class="flex">
+                        <i class="fas fa-star text-yellow-400"></i>
+                        <i class="fas fa-star text-yellow-400"></i
+</html>