|
|
<!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; } |
|
|
} |
|
|
|
|
|
|
|
|
.toggle-checkbox:checked { |
|
|
right: 0; |
|
|
border-color: #8b5cf6; |
|
|
} |
|
|
|
|
|
.toggle-checkbox:checked + .toggle-label { |
|
|
background-color: #8b5cf6; |
|
|
} |
|
|
|
|
|
|
|
|
@media (max-width: 768px) { |
|
|
.knowledge-graph { |
|
|
height: 300px; |
|
|
} |
|
|
|
|
|
.wave-animation { |
|
|
animation: wave 20s linear infinite; |
|
|
} |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="antialiased text-dark"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
</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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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"> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
