|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>EduGenius - AI-Powered K12 Learning</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
|
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6B73FF 0%, #000DFF 50%, #0085FF 100%); |
|
|
} |
|
|
|
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
|
|
|
.typing-indicator::after { |
|
|
content: '...'; |
|
|
animation: typing 1.5s infinite; |
|
|
} |
|
|
|
|
|
@keyframes typing { |
|
|
0% { content: '.'; } |
|
|
33% { content: '..'; } |
|
|
66% { content: '...'; } |
|
|
} |
|
|
|
|
|
.subject-icon { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.subject-icon:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
|
|
|
.chat-bubble { |
|
|
border-radius: 20px; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.user-bubble { |
|
|
background-color: #3B82F6; |
|
|
color: white; |
|
|
} |
|
|
|
|
|
.ai-bubble { |
|
|
background-color: #F3F4F6; |
|
|
color: #1F2937; |
|
|
} |
|
|
|
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar { |
|
|
width: 6px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-track { |
|
|
background: #f1f1f1; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb { |
|
|
background: #888; |
|
|
border-radius: 3px; |
|
|
} |
|
|
|
|
|
.custom-scrollbar::-webkit-scrollbar-thumb:hover { |
|
|
background: #555; |
|
|
} |
|
|
|
|
|
|
|
|
@keyframes float { |
|
|
0% { transform: translateY(0px); } |
|
|
50% { transform: translateY(-10px); } |
|
|
100% { transform: translateY(0px); } |
|
|
} |
|
|
|
|
|
.floating { |
|
|
animation: float 3s ease-in-out infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 font-sans"> |
|
|
|
|
|
<nav class="bg-white shadow-md"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-graduation-cap text-blue-600 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-blue-600">EduGenius</span> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:space-x-8"> |
|
|
<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Subjects</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Progress</a> |
|
|
<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Resources</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium">Sign In</button> |
|
|
</div> |
|
|
<div class="-mr-2 flex items-center sm:hidden"> |
|
|
<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false"> |
|
|
<span class="sr-only">Open main menu</span> |
|
|
<i class="fas fa-bars"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="gradient-bg text-white"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8 lg:py-24"> |
|
|
<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center"> |
|
|
<div class="mb-8 lg:mb-0"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl mb-4"> |
|
|
Personalized Learning with AI Tutors |
|
|
</h1> |
|
|
<p class="text-xl text-blue-100 max-w-3xl"> |
|
|
EduGenius uses advanced LLM agents to provide tailored education for K12 students, adapting to each learner's pace and style. |
|
|
</p> |
|
|
<div class="mt-8 flex flex-col sm:flex-row gap-4"> |
|
|
<button class="bg-white text-blue-600 hover:bg-gray-100 px-6 py-3 rounded-lg font-medium text-lg shadow-lg transform transition hover:scale-105"> |
|
|
Get Started |
|
|
</button> |
|
|
<button class="bg-blue-800 bg-opacity-60 hover:bg-opacity-70 text-white px-6 py-3 rounded-lg font-medium text-lg shadow-lg transform transition hover:scale-105"> |
|
|
<i class="fas fa-play mr-2"></i> Watch Demo |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative"> |
|
|
<div class="bg-white bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-3xl p-6 shadow-2xl"> |
|
|
<div class="bg-white rounded-2xl p-4 h-96 overflow-hidden"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> |
|
|
<i class="fas fa-robot text-blue-600"></i> |
|
|
</div> |
|
|
<span class="ml-2 font-medium">Math AI Tutor</span> |
|
|
</div> |
|
|
<div class="h-64 overflow-y-auto custom-scrollbar space-y-3" id="demo-chat"> |
|
|
<div class="flex justify-start"> |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
Hi there! I'm your math tutor. What would you like to learn today? |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<div class="user-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
I'm having trouble with fractions. |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-start"> |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
No problem! Let's start with the basics. What's 1/2 + 1/4? |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<div class="user-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
Is it 2/6? |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-start"> |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
Almost! Let me explain. First, we need a common denominator. 2 and 4 share 4 as a common denominator... |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 flex items-center border-t pt-3"> |
|
|
<input type="text" placeholder="Type your question..." class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button class="ml-2 bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute -bottom-10 -left-10 w-24 h-24 bg-yellow-400 rounded-full flex items-center justify-center shadow-xl floating"> |
|
|
<i class="fas fa-lightbulb text-4xl text-white"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
How Our AI Tutors Help You Learn |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Powered by advanced LLM technology, our tutors provide personalized, engaging learning experiences. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 card-hover"> |
|
|
<div class="bg-blue-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-user-graduate text-blue-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Personalized Learning</h3> |
|
|
<p class="text-gray-500"> |
|
|
AI adapts to your learning style and pace, providing customized explanations and practice. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 card-hover"> |
|
|
<div class="bg-green-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-brain text-green-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Multi-Subject Support</h3> |
|
|
<p class="text-gray-500"> |
|
|
From math to history, our specialized AI tutors cover all K12 subjects with expertise. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 card-hover"> |
|
|
<div class="bg-purple-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-chart-line text-purple-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">Progress Tracking</h3> |
|
|
<p class="text-gray-500"> |
|
|
Detailed analytics help you and parents track learning progress and identify areas to improve. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-xl transition duration-300 card-hover"> |
|
|
<div class="bg-yellow-100 w-12 h-12 rounded-full flex items-center justify-center mb-4"> |
|
|
<i class="fas fa-clock text-yellow-600 text-xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">24/7 Availability</h3> |
|
|
<p class="text-gray-500"> |
|
|
Learn anytime, anywhere. Our AI tutors are always ready to help with homework or concepts. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Explore Our Subjects |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Comprehensive coverage of all K12 subjects with specialized AI tutors for each. |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300 transform hover:-translate-y-1"> |
|
|
<div class="bg-red-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 subject-icon"> |
|
|
<i class="fas fa-square-root-alt text-red-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Mathematics</h3> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300 transform hover:-translate-y-1"> |
|
|
<div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 subject-icon"> |
|
|
<i class="fas fa-flask text-blue-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Science</h3> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300 transform hover:-translate-y-1"> |
|
|
<div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 subject-icon"> |
|
|
<i class="fas fa-book text-green-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">English</h3> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300 transform hover:-translate-y-1"> |
|
|
<div class="bg-yellow-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 subject-icon"> |
|
|
<i class="fas fa-landmark text-yellow-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">History</h3> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300 transform hover:-translate-y-1"> |
|
|
<div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 subject-icon"> |
|
|
<i class="fas fa-globe-americas text-purple-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Geography</h3> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md text-center hover:shadow-lg transition duration-300 transform hover:-translate-y-1"> |
|
|
<div class="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 subject-icon"> |
|
|
<i class="fas fa-paint-brush text-indigo-600 text-2xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900">Art</h3> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 text-center"> |
|
|
<button class="bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-medium text-lg shadow-md"> |
|
|
View All Subjects |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="lg:text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
How EduGenius Works |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto"> |
|
|
Simple steps to personalized learning with AI tutors |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10"> |
|
|
<div class="relative"> |
|
|
<div class="hidden lg:block absolute inset-0 h-1/2"></div> |
|
|
<div class="relative grid grid-cols-1 gap-8 lg:grid-cols-3"> |
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-blue-500 rounded-md p-3"> |
|
|
<i class="fas fa-user-plus text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Step 1</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Create your profile and select your grade level |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-green-500 rounded-md p-3"> |
|
|
<i class="fas fa-book-open text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Step 2</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Choose subjects and topics you want to learn |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white overflow-hidden shadow rounded-lg"> |
|
|
<div class="px-4 py-5 sm:p-6"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 bg-purple-500 rounded-md p-3"> |
|
|
<i class="fas fa-robot text-white text-xl"></i> |
|
|
</div> |
|
|
<div class="ml-5 w-0 flex-1"> |
|
|
<h3 class="text-lg font-medium text-gray-900">Step 3</h3> |
|
|
<p class="mt-1 text-sm text-gray-500"> |
|
|
Start learning with your personalized AI tutor |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 relative lg:flex lg:items-center lg:justify-center"> |
|
|
<div class="max-w-md mx-auto lg:max-w-2xl lg:mx-0 lg:flex-1"> |
|
|
<div class="bg-blue-600 rounded-2xl shadow-xl overflow-hidden"> |
|
|
<div class="px-6 py-8 sm:p-10 sm:pb-6"> |
|
|
<div> |
|
|
<h3 class="inline-flex px-4 py-1 rounded-full text-sm font-semibold tracking-wide uppercase bg-white text-blue-600"> |
|
|
Interactive Demo |
|
|
</h3> |
|
|
</div> |
|
|
<div class="mt-4 flex items-baseline text-3xl font-extrabold text-white"> |
|
|
Try our AI tutor now |
|
|
</div> |
|
|
<p class="mt-5 text-lg text-blue-100"> |
|
|
Experience how our AI tutors can help you understand complex concepts through simple conversations. |
|
|
</p> |
|
|
</div> |
|
|
<div class="px-6 pt-6 pb-8 bg-blue-700 rounded-bl-2xl rounded-br-2xl"> |
|
|
<div class="mt-6"> |
|
|
<div class="rounded-lg overflow-hidden"> |
|
|
<div id="demo-chat-2" class="h-48 bg-white rounded-t-lg p-4 overflow-y-auto custom-scrollbar space-y-3"> |
|
|
<div class="flex justify-start"> |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
Hi! I'm your AI tutor. What would you like to learn about? |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-end"> |
|
|
<div class="user-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
Tell me about photosynthesis |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex justify-start"> |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
Great! Photosynthesis is how plants make food using sunlight... |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center bg-gray-100 px-4 py-3 rounded-b-lg"> |
|
|
<input type="text" placeholder="Ask me anything..." class="flex-1 border rounded-full px-4 py-2 focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
<button class="ml-2 bg-blue-600 text-white rounded-full p-2 hover:bg-blue-700"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="py-12 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
What Students & Parents Say |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Real experiences from our learning community |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-medium">Sarah J.</h4> |
|
|
<p class="text-gray-500 text-sm">Parent of 5th grader</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
"My daughter was struggling with math, but after using EduGenius for just 2 weeks, her confidence has skyrocketed. The AI tutor explains concepts in ways she actually understands." |
|
|
</p> |
|
|
<div class="mt-4 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T."> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-medium">Michael T.</h4> |
|
|
<p class="text-gray-500 text-sm">8th grade student</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
"I love that I can ask my AI tutor the same question multiple times without feeling judged. It's like having a patient teacher available 24/7." |
|
|
</p> |
|
|
<div class="mt-4 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star-half-alt"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-white p-6 rounded-xl shadow-md"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="w-12 h-12 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Dr. Lisa M."> |
|
|
<div class="ml-4"> |
|
|
<h4 class="font-medium">Dr. Lisa M.</h4> |
|
|
<p class="text-gray-500 text-sm">Middle School Principal</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-600"> |
|
|
"As an educator, I'm impressed by how well the AI tutors adapt to different learning styles. We've seen measurable improvements in our students' test scores." |
|
|
</p> |
|
|
<div class="mt-4 flex text-yellow-400"> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
<i class="fas fa-star"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-blue-700"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between"> |
|
|
<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl"> |
|
|
<span class="block">Ready to transform learning?</span> |
|
|
<span class="block text-blue-200">Start your free trial today.</span> |
|
|
</h2> |
|
|
<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50"> |
|
|
Get started |
|
|
</a> |
|
|
</div> |
|
|
<div class="ml-3 inline-flex rounded-md shadow"> |
|
|
<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 bg-opacity-60 hover:bg-opacity-70"> |
|
|
<i class="fas fa-info-circle mr-2"></i> Learn more |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">About</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Blog</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Press</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Product</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Features</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Pricing</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Subjects</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Learning Guides</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Worksheets</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Videos</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Webinars</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h3 class="text-white font-medium mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-twitter"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-linkedin-in"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-youtube"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<p class="text-gray-300">Subscribe to our newsletter</p> |
|
|
<div class="mt-2 flex"> |
|
|
<input type="email" placeholder="Your email" class="px-3 py-2 rounded-l-md text-sm w-full"> |
|
|
<button class="bg-blue-600 text-white px-4 py-2 rounded-r-md text-sm"> |
|
|
<i class="fas fa-paper-plane"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-12 border-t border-gray-700 pt-8"> |
|
|
<div class="md:flex md:items-center md:justify-between"> |
|
|
<div class="flex space-x-6 md:order-2"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300">Privacy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300">Terms</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300">Cookie Policy</a> |
|
|
</div> |
|
|
<p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1"> |
|
|
© 2023 EduGenius. All rights reserved. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
const demoChats = [document.getElementById('demo-chat'), document.getElementById('demo-chat-2')]; |
|
|
|
|
|
demoChats.forEach(chat => { |
|
|
if (chat) { |
|
|
|
|
|
chat.scrollTop = chat.scrollHeight; |
|
|
|
|
|
|
|
|
setInterval(() => { |
|
|
const typingIndicator = document.createElement('div'); |
|
|
typingIndicator.className = 'flex justify-start'; |
|
|
typingIndicator.innerHTML = ` |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
<span class="typing-indicator"></span> |
|
|
</div> |
|
|
`; |
|
|
chat.appendChild(typingIndicator); |
|
|
chat.scrollTop = chat.scrollHeight; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
typingIndicator.remove(); |
|
|
|
|
|
|
|
|
const responses = [ |
|
|
"Let me break this down for you step by step...", |
|
|
"Great question! Here's what you need to know...", |
|
|
"I can see you're curious about this. Let me explain...", |
|
|
"That's an important concept. Here's how it works..." |
|
|
]; |
|
|
|
|
|
const response = responses[Math.floor(Math.random() * responses.length)]; |
|
|
const aiResponse = document.createElement('div'); |
|
|
aiResponse.className = 'flex justify-start'; |
|
|
aiResponse.innerHTML = ` |
|
|
<div class="ai-bubble chat-bubble px-4 py-2 max-w-xs"> |
|
|
${response} |
|
|
</div> |
|
|
`; |
|
|
chat.appendChild(aiResponse); |
|
|
chat.scrollTop = chat.scrollHeight; |
|
|
}, 1500); |
|
|
}, 8000); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const mobileMenuButton = document.querySelector('[aria-controls="mobile-menu"]'); |
|
|
if (mobileMenuButton) { |
|
|
mobileMenuButton.addEventListener('click', function() { |
|
|
const expanded = this.getAttribute('aria-expanded') === 'true'; |
|
|
this.setAttribute('aria-expanded', !expanded); |
|
|
|
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
const subjectIcons = document.querySelectorAll('.subject-icon'); |
|
|
subjectIcons.forEach(icon => { |
|
|
icon.addEventListener('mouseenter', function() { |
|
|
this.style.transform = 'scale(1.1)'; |
|
|
}); |
|
|
icon.addEventListener('mouseleave', function() { |
|
|
this.style.transform = 'scale(1)'; |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=datatune/edu" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
