Muso98's picture
ideal chiqmadiku
7901abe verified
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>EduSphere | Smart Learning Hub</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
<script src="https://unpkg.com/feather-icons"></script>
<script src="components/navbar.js"></script>
<script src="components/auth-modal.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#0D47A1',
secondary: '#1976D2',
accent: '#2196F3',
light: '#E3F2FD',
text: '#546E7A'
}
}
}
}
</script>
</head>
<body class="bg-white font-sans text-gray-700">
<custom-navbar></custom-navbar>
<main class="container mx-auto px-4 py-12">
<!-- Hero Section -->
<section class="text-center mb-20">
<h1 class="text-5xl font-bold text-primary mb-6">Revolutionizing Education</h1>
<p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
EduSphere brings teachers, students and parents together in one powerful learning ecosystem
</p>
<div class="flex justify-center gap-4">
<a href="/login.html" class="bg-primary hover:bg-secondary text-white px-8 py-3 rounded-lg font-medium transition-all">
Login
</a>
<a href="/register.html" class="border border-primary text-primary hover:bg-light px-8 py-3 rounded-lg font-medium transition-all">
Register
</a>
</div>
</section>
<!-- Features Grid -->
<section class="grid md:grid-cols-3 gap-8 mb-20">
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
<div class="w-14 h-14 bg-light rounded-full flex items-center justify-center mb-4">
<i data-feather="book" class="text-primary w-6 h-6"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Comprehensive Courses</h3>
<p class="text-gray-600">Structured learning paths with interactive materials and assessments</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
<div class="w-14 h-14 bg-light rounded-full flex items-center justify-center mb-4">
<i data-feather="clipboard" class="text-primary w-6 h-6"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Smart Grading</h3>
<p class="text-gray-600">100-point grading system with detailed feedback and analytics</p>
</div>
<div class="bg-white p-6 rounded-xl shadow-md hover:shadow-lg transition-all">
<div class="w-14 h-14 bg-light rounded-full flex items-center justify-center mb-4">
<i data-feather="users" class="text-primary w-6 h-6"></i>
</div>
<h3 class="text-xl font-semibold mb-2">Collaborative Learning</h3>
<p class="text-gray-600">Integrated communication tools for teachers, students and parents</p>
</div>
</section>
<!-- Dashboard Preview -->
<section class="bg-gradient-to-r from-light to-white p-8 rounded-2xl mb-20">
<div class="flex justify-between items-center mb-8">
<h2 class="text-3xl font-bold text-primary">Role-Based Dashboards</h2>
<div class="flex gap-2">
<button class="px-4 py-2 bg-primary text-white rounded-lg">Admin</button>
<button class="px-4 py-2 border border-primary text-primary rounded-lg">Teacher</button>
<button class="px-4 py-2 border border-primary text-primary rounded-lg">Student</button>
<button class="px-4 py-2 border border-primary text-primary rounded-lg">Parent</button>
</div>
</div>
<div class="bg-white rounded-xl shadow-lg overflow-hidden">
<img src="http://static.photos/education/1200x630/42" alt="Dashboard Preview" class="w-full h-auto">
</div>
</section>
</main>
<custom-auth-modal></custom-auth-modal>
<script src="script.js"></script>
<script>
feather.replace();
</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>