Spaces:

datatune
/

edu

Running

App Files Files Community

datatune commited on Jul 13

Commit

71efc52

verified ·

1 Parent(s): c1d1037

undefined - Initial Deployment

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: edu
+emoji: 🐳
+colorFrom: gray
+colorTo: blue
 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,674 @@
-<!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="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>
+        /* Custom CSS for animations and effects */
+        .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 */
+        .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;
+        }
+        /* Floating animation for mascot */
+        @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">
+    <!-- Navigation -->
+    <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>
+    <!-- Hero Section -->
+    <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>
+    <!-- Features Section -->
+    <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>
+    <!-- Subjects Section -->
+    <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>
+    <!-- How It Works Section -->
+    <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>
+    <!-- Testimonials -->
+    <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>
+    <!-- CTA Section -->
+    <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 -->
+    <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">
+                        &copy; 2023 EduGenius. All rights reserved.
+                    </p>
+                </div>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Simple demo chat animation
+        document.addEventListener('DOMContentLoaded', function() {
+            const demoChats = [document.getElementById('demo-chat'), document.getElementById('demo-chat-2')];
+            demoChats.forEach(chat => {
+                if (chat) {
+                    // Auto-scroll to bottom
+                    chat.scrollTop = chat.scrollHeight;
+                    // Simulate typing indicator
+                    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;
+                        // Remove typing indicator after delay
+                        setTimeout(() => {
+                            typingIndicator.remove();
+                            // Add AI response
+                            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);
+                }
+            });
+            // Mobile menu toggle
+            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);
+                    // You would toggle your mobile menu here
+                });
+            }
+            // Subject icons animation
+            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>