Spaces:

Ricky760
/

web3-africa-app-development

Running

App Files Files Community

web3-africa-app-development / index.html

Ricky760

Add 3 files

920e732 verified 12 months ago

raw

history blame contribute delete

77.2 kB

	<!DOCTYPE html>
	<html lang="en" class="dark">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Web3 Africa - Learn Blockchain & Crypto</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 = {
	darkMode: 'class',
	theme: {
	extend: {
	colors: {
	africa: {
	dark: '#000000',
	red: '#E30613',
	yellow: '#FCD116',
	green: '#008751',
	orange: '#EF7D00',
	}
	}
	}
	}
	}
	</script>
	<style>
	@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

	body {
	font-family: 'Poppins', sans-serif;
	background-color: #000;
	color: #fff;
	min-height: 100vh;
	}

	.gradient-bg {
	background: linear-gradient(135deg, #000000 0%, #E30613 50%, #FCD116 100%);
	}

	.course-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 25px rgba(239, 125, 0, 0.3);
	}

	.progress-ring__circle {
	transition: stroke-dashoffset 0.35s;
	transform: rotate(-90deg);
	transform-origin: 50% 50%;
	}

	.wallet-connected {
	animation: pulse 2s infinite;
	}

	@keyframes pulse {
	0% {
	box-shadow: 0 0 0 0 rgba(239, 125, 0, 0.7);
	}
	70% {
	box-shadow: 0 0 0 10px rgba(239, 125, 0, 0);
	}
	100% {
	box-shadow: 0 0 0 0 rgba(239, 125, 0, 0);
	}
	}

	/* Mobile menu animation */
	.mobile-menu {
	transition: all 0.3s ease-in-out;
	}

	.mobile-menu-hidden {
	transform: translateX(100%);
	opacity: 0;
	}

	.mobile-menu-visible {
	transform: translateX(0);
	opacity: 1;
	}

	/* Loading spinner */
	.spinner {
	animation: spin 1s linear infinite;
	}

	@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
	}
	</style>
	</head>
	<body class="bg-africa-dark text-white">
	<!-- Simulated Backend State -->
	<script>
	// Simulated database
	const db = {
	users: [],
	courses: [
	{
	id: 'course-1',
	title: 'Blockchain Fundamentals',
	description: 'Learn the basics of blockchain technology and how it works.',
	level: 'Beginner',
	duration: '2 weeks',
	modules: [
	{
	id: 'module-1-1',
	title: 'What is Blockchain?',
	content: 'Blockchain is a decentralized, distributed ledger technology that records transactions across many computers...',
	videoUrl: '',
	imageUrl: '',
	quiz: {
	questions: [
	{
	id: 'q1',
	text: 'What is the main characteristic of blockchain?',
	options: [
	'Centralized control',
	'Decentralized ledger',
	'Single point of failure',
	'Mutable records'
	],
	correctAnswer: 1
	}
	]
	}
	}
	],
	imageUrl: ''
	},
	{
	id: 'course-2',
	title: 'Smart Contracts 101',
	description: 'Introduction to writing and deploying smart contracts on Ethereum.',
	level: 'Intermediate',
	duration: '3 weeks',
	modules: [],
	imageUrl: ''
	}
	],
	jobs: [
	{
	id: 'job-1',
	title: 'Blockchain Developer',
	company: 'AfriChain Labs',
	location: 'Remote',
	description: 'We are looking for a skilled blockchain developer to join our team...'
	}
	]
	};

	// Simulated authentication state
	let currentUser = null;
	let isAdmin = false;
	let walletConnected = false;

	// Simulated API functions
	const api = {
	login: (email, password) => {
	// In a real app, this would be an API call
	const user = db.users.find(u => u.email === email && u.password === password);
	if (user) {
	currentUser = user;
	return { success: true, user };
	}
	return { success: false, message: 'Invalid credentials' };
	},

	signup: (email, password, name) => {
	// Check if user exists
	if (db.users.some(u => u.email === email)) {
	return { success: false, message: 'Email already registered' };
	}

	const newUser = {
	id: `user-${db.users.length + 1}`,
	email,
	password,
	name,
	progress: {},
	savedResources: [],
	joinedAt: new Date().toISOString()
	};

	db.users.push(newUser);
	currentUser = newUser;
	return { success: true, user: newUser };
	},

	connectWallet: () => {
	// Simulate wallet connection
	walletConnected = true;

	if (!currentUser) {
	// Create a wallet user
	const newUser = {
	id: `wallet-user-${Date.now()}`,
	walletAddress: '0x123...abc',
	name: 'Wallet User',
	progress: {},
	savedResources: [],
	joinedAt: new Date().toISOString()
	};

	db.users.push(newUser);
	currentUser = newUser;
	}

	return { success: true, user: currentUser };
	},

	getCourses: () => {
	return db.courses;
	},

	getCourse: (id) => {
	return db.courses.find(c => c.id === id);
	},

	saveProgress: (userId, courseId, moduleId, quizScore) => {
	if (!currentUser) return { success: false };

	if (!currentUser.progress[courseId]) {
	currentUser.progress[courseId] = { completedModules: [], quizScores: {} };
	}

	if (!currentUser.progress[courseId].completedModules.includes(moduleId)) {
	currentUser.progress[courseId].completedModules.push(moduleId);
	}

	if (quizScore !== undefined) {
	currentUser.progress[courseId].quizScores[moduleId] = quizScore;
	}

	return { success: true };
	},

	getJobs: () => {
	return db.jobs;
	}
	};
	</script>

	<!-- App Container -->
	<div id="app" class="min-h-screen flex flex-col">
	<!-- Header -->
	<header class="bg-africa-dark border-b border-africa-orange/20">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
	<div class="flex items-center space-x-2">
	<div class="w-10 h-10 rounded-full bg-gradient-to-br from-africa-red to-africa-yellow flex items-center justify-center">
	<span class="font-bold text-africa-dark">W3A</span>
	</div>
	<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-africa-yellow to-africa-orange">
	Web3Africa
	</h1>
	</div>

	<div class="hidden md:flex items-center space-x-6">
	<nav class="flex space-x-6">
	<a href="#" onclick="showView('home')" class="hover:text-africa-yellow transition">Home</a>
	<a href="#" onclick="showView('courses')" class="hover:text-africa-yellow transition">Courses</a>
	<a href="#" onclick="showView('career')" class="hover:text-africa-yellow transition">Career</a>
	<a href="#" onclick="showView('about')" class="hover:text-africa-yellow transition">About</a>
	</nav>

	<div class="flex items-center space-x-4">
	<button id="wallet-btn" onclick="connectWallet()"
	class="px-4 py-2 rounded-full border border-africa-orange text-africa-orange hover:bg-africa-orange hover:text-africa-dark transition flex items-center space-x-2">
	<i class="fab fa-ethereum"></i>
	<span>Connect Wallet</span>
	</button>

	<button id="auth-btn" onclick="showView('login')"
	class="px-4 py-2 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow transition">
	Sign In
	</button>

	<button onclick="toggleDarkMode()" class="p-2 rounded-full hover:bg-africa-orange/20 transition">
	<i class="fas fa-moon"></i>
	</button>
	</div>
	</div>

	<button id="mobile-menu-btn" onclick="toggleMobileMenu()" class="md:hidden p-2 rounded-full hover:bg-africa-orange/20 transition">
	<i class="fas fa-bars text-xl"></i>
	</button>
	</div>
	</header>

	<!-- Mobile Menu -->
	<div id="mobile-menu" class="mobile-menu mobile-menu-hidden fixed inset-0 bg-africa-dark z-50 p-6 transition-all duration-300">
	<div class="flex justify-between items-center mb-8">
	<div class="flex items-center space-x-2">
	<div class="w-10 h-10 rounded-full bg-gradient-to-br from-africa-red to-africa-yellow flex items-center justify-center">
	<span class="font-bold text-africa-dark">W3A</span>
	</div>
	<h1 class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-africa-yellow to-africa-orange">
	Web3Africa
	</h1>
	</div>
	<button onclick="toggleMobileMenu()" class="p-2 rounded-full hover:bg-africa-orange/20 transition">
	<i class="fas fa-times text-xl"></i>
	</button>
	</div>

	<nav class="flex flex-col space-y-6 mb-8">
	<a href="#" onclick="showView('home'); toggleMobileMenu()" class="text-xl hover:text-africa-yellow transition">Home</a>
	<a href="#" onclick="showView('courses'); toggleMobileMenu()" class="text-xl hover:text-africa-yellow transition">Courses</a>
	<a href="#" onclick="showView('career'); toggleMobileMenu()" class="text-xl hover:text-africa-yellow transition">Career</a>
	<a href="#" onclick="showView('about'); toggleMobileMenu()" class="text-xl hover:text-africa-yellow transition">About</a>
	</nav>

	<div class="flex flex-col space-y-4">
	<button id="mobile-wallet-btn" onclick="connectWallet(); toggleMobileMenu()"
	class="px-6 py-3 rounded-full border border-africa-orange text-africa-orange hover:bg-africa-orange hover:text-africa-dark transition flex items-center justify-center space-x-2">
	<i class="fab fa-ethereum"></i>
	<span>Connect Wallet</span>
	</button>

	<button id="mobile-auth-btn" onclick="showView('login'); toggleMobileMenu()"
	class="px-6 py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow transition">
	Sign In
	</button>

	<button onclick="toggleDarkMode(); toggleMobileMenu()" class="px-6 py-3 rounded-full border border-africa-orange/50 hover:bg-africa-orange/20 transition flex items-center justify-center space-x-2">
	<i class="fas fa-moon"></i>
	<span>Toggle Theme</span>
	</button>
	</div>
	</div>

	<!-- Main Content -->
	<main class="flex-grow container mx-auto px-4 py-8">
	<!-- Home View -->
	<div id="home-view" class="view">
	<section class="mb-16">
	<div class="gradient-bg rounded-3xl p-8 md:p-12 text-center">
	<h1 class="text-4xl md:text-6xl font-bold mb-6">Empowering Africa with Web3 Knowledge</h1>
	<p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Free, accessible education on blockchain, cryptocurrency, and decentralized technologies for Africans.</p>
	<div class="flex flex-col md:flex-row justify-center space-y-4 md:space-y-0 md:space-x-4">
	<button onclick="showView('courses')" class="px-8 py-4 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Explore Courses</button>
	<button onclick="showView('career')" class="px-8 py-4 rounded-full border-2 border-white hover:bg-white hover:text-africa-dark font-bold transition">Career Resources</button>
	</div>
	</div>
	</section>

	<section class="mb-16">
	<h2 class="text-3xl font-bold mb-8 text-center">Why Learn Web3?</h2>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 hover:border-africa-orange transition">
	<div class="w-14 h-14 rounded-full bg-africa-red flex items-center justify-center mb-4">
	<i class="fas fa-university text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2">Financial Inclusion</h3>
	<p class="text-gray-300">Web3 technologies provide access to financial services for the unbanked population across Africa.</p>
	</div>
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 hover:border-africa-orange transition">
	<div class="w-14 h-14 rounded-full bg-africa-yellow flex items-center justify-center mb-4">
	<i class="fas fa-briefcase text-2xl text-africa-dark"></i>
	</div>
	<h3 class="text-xl font-bold mb-2">Career Opportunities</h3>
	<p class="text-gray-300">Blockchain developers are in high demand globally with competitive salaries.</p>
	</div>
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 hover:border-africa-orange transition">
	<div class="w-14 h-14 rounded-full bg-africa-green flex items-center justify-center mb-4">
	<i class="fas fa-globe-africa text-2xl"></i>
	</div>
	<h3 class="text-xl font-bold mb-2">African Innovation</h3>
	<p class="text-gray-300">Be part of the movement building Africa's decentralized future.</p>
	</div>
	</div>
	</section>

	<section class="mb-16">
	<h2 class="text-3xl font-bold mb-8 text-center">Featured Courses</h2>
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="featured-courses">
	<!-- Courses will be loaded here -->
	</div>
	<div class="text-center mt-8">
	<button onclick="showView('courses')" class="px-6 py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">View All Courses</button>
	</div>
	</section>

	<section>
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-8 md:p-12">
	<div class="flex flex-col md:flex-row items-center">
	<div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
	<h2 class="text-3xl font-bold mb-4">Ready to start your Web3 journey?</h2>
	<p class="text-xl mb-6">Join thousands of Africans learning blockchain technology for free.</p>
	<button onclick="showView('signup')" class="px-8 py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Sign Up Now</button>
	</div>
	<div class="md:w-1/2">
	<div class="bg-africa-orange/10 border border-africa-orange/20 rounded-xl p-6">
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-africa-yellow flex items-center justify-center mr-4">
	<i class="fas fa-user-graduate text-africa-dark"></i>
	</div>
	<div>
	<h3 class="font-bold">Student Success</h3>
	<p class="text-sm text-gray-300">"This platform helped me land my first blockchain developer job!"</p>
	</div>
	</div>
	<div class="flex items-center mb-4">
	<div class="w-10 h-10 rounded-full bg-africa-green flex items-center justify-center mr-4">
	<i class="fas fa-chart-line"></i>
	</div>
	<div>
	<h3 class="font-bold">Growing Community</h3>
	<p class="text-sm text-gray-300">10,000+ active learners across Africa</p>
	</div>
	</div>
	<div class="flex items-center">
	<div class="w-10 h-10 rounded-full bg-africa-red flex items-center justify-center mr-4">
	<i class="fas fa-gem"></i>
	</div>
	<div>
	<h3 class="font-bold">Quality Content</h3>
	<p class="text-sm text-gray-300">Courses created by industry experts</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</section>
	</div>

	<!-- Courses View -->
	<div id="courses-view" class="view hidden">
	<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-8">
	<h2 class="text-3xl font-bold mb-4 md:mb-0">All Courses</h2>
	<div class="flex space-x-2">
	<button id="filter-all" onclick="filterCourses('all')" class="px-4 py-2 rounded-full bg-africa-orange text-africa-dark">All</button>
	<button id="filter-beginner" onclick="filterCourses('beginner')" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20">Beginner</button>
	<button id="filter-intermediate" onclick="filterCourses('intermediate')" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20">Intermediate</button>
	<button id="filter-advanced" onclick="filterCourses('advanced')" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20">Advanced</button>
	</div>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="all-courses">
	<!-- Courses will be loaded here -->
	</div>
	</div>

	<!-- Course Detail View -->
	<div id="course-detail-view" class="view hidden">
	<div class="mb-6">
	<button onclick="showView('courses')" class="flex items-center text-africa-orange hover:text-africa-yellow transition">
	<i class="fas fa-arrow-left mr-2"></i> Back to Courses
	</button>
	</div>

	<div id="course-detail-content">
	<!-- Course details will be loaded here -->
	</div>
	</div>

	<!-- Module Detail View -->
	<div id="module-detail-view" class="view hidden">
	<div class="mb-6">
	<button onclick="backToCourseDetail()" class="flex items-center text-africa-orange hover:text-africa-yellow transition">
	<i class="fas fa-arrow-left mr-2"></i> Back to Course
	</button>
	</div>

	<div id="module-detail-content">
	<!-- Module details will be loaded here -->
	</div>

	<div id="quiz-section" class="mt-12 hidden">
	<h3 class="text-2xl font-bold mb-6 border-b border-africa-orange/30 pb-2">Module Quiz</h3>
	<div id="quiz-questions">
	<!-- Quiz questions will be loaded here -->
	</div>
	<button id="submit-quiz" onclick="submitQuiz()" class="mt-6 px-6 py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Submit Quiz</button>
	</div>

	<div id="quiz-result" class="mt-12 hidden">
	<!-- Quiz results will be shown here -->
	</div>
	</div>

	<!-- Career View -->
	<div id="career-view" class="view hidden">
	<h2 class="text-3xl font-bold mb-8">Web3 Career Center</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-12">
	<div class="md:col-span-2">
	<h3 class="text-2xl font-bold mb-4">Building a Web3 Career</h3>
	<p class="mb-6">The Web3 ecosystem offers numerous opportunities for Africans to build rewarding careers in blockchain development, smart contract engineering, decentralized finance (DeFi), and more.</p>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 mb-6">
	<h4 class="text-xl font-bold mb-3 text-africa-yellow">Career Paths</h4>
	<ul class="space-y-3">
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>Blockchain Developer:</strong> Build decentralized applications (dApps) on various blockchains</span>
	</li>
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>Smart Contract Engineer:</strong> Write and audit secure smart contracts</span>
	</li>
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>DeFi Specialist:</strong> Work with decentralized finance protocols and applications</span>
	</li>
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>Web3 UX Designer:</strong> Design user-friendly interfaces for decentralized applications</span>
	</li>
	</ul>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<h4 class="text-xl font-bold mb-3 text-africa-yellow">Resources</h4>
	<ul class="space-y-3">
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>Portfolio Building:</strong> Contribute to open-source Web3 projects to showcase your skills</span>
	</li>
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>Networking:</strong> Join African Web3 communities and attend blockchain events</span>
	</li>
	<li class="flex items-start">
	<span class="text-africa-orange mr-2">•</span>
	<span><strong>Freelancing:</strong> Start with small projects on Web3 freelance platforms</span>
	</li>
	</ul>
	</div>
	</div>

	<div>
	<h3 class="text-2xl font-bold mb-4">Job Opportunities</h3>
	<p class="mb-6">Browse the latest Web3 job opportunities available to Africans.</p>

	<div id="job-listings" class="space-y-4">
	<!-- Job listings will be loaded here -->
	</div>
	</div>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-8">
	<h3 class="text-2xl font-bold mb-4 text-center">African Web3 Communities</h3>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
	<a href="#" class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 hover:border-africa-orange transition group">
	<div class="w-12 h-12 rounded-full bg-africa-red flex items-center justify-center mb-4 mx-auto">
	<i class="fab fa-telegram text-xl"></i>
	</div>
	<h4 class="text-lg font-bold mb-2 text-center group-hover:text-africa-yellow">Nigeria Web3 Devs</h4>
	<p class="text-center text-sm text-gray-300">Largest Nigerian blockchain developer community</p>
	</a>
	<a href="#" class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 hover:border-africa-orange transition group">
	<div class="w-12 h-12 rounded-full bg-africa-green flex items-center justify-center mb-4 mx-auto">
	<i class="fab fa-discord text-xl"></i>
	</div>
	<h4 class="text-lg font-bold mb-2 text-center group-hover:text-africa-yellow">Kenya Blockchain Hub</h4>
	<p class="text-center text-sm text-gray-300">East Africa's premier blockchain community</p>
	</a>
	<a href="#" class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 hover:border-africa-orange transition group">
	<div class="w-12 h-12 rounded-full bg-africa-yellow flex items-center justify-center mb-4 mx-auto">
	<i class="fab fa-twitter text-xl text-africa-dark"></i>
	</div>
	<h4 class="text-lg font-bold mb-2 text-center group-hover:text-africa-yellow">Africa Web3 Space</h4>
	<p class="text-center text-sm text-gray-300">Pan-African Web3 discussions and opportunities</p>
	</a>
	</div>
	</div>
	</div>

	<!-- About View -->
	<div id="about-view" class="view hidden">
	<h2 class="text-3xl font-bold mb-8">About Web3Africa</h2>

	<div class="grid grid-cols-1 md:grid-cols-2 gap-12 mb-12">
	<div>
	<h3 class="text-2xl font-bold mb-4 text-africa-yellow">Our Mission</h3>
	<p class="mb-6">Web3Africa is a non-profit initiative dedicated to providing free, high-quality education on blockchain and Web3 technologies to Africans.</p>
	<p>We believe that decentralized technologies present a unique opportunity for Africa to leapfrog traditional financial and technological infrastructure, creating more inclusive and equitable systems.</p>
	</div>

	<div>
	<h3 class="text-2xl font-bold mb-4 text-africa-yellow">Our Approach</h3>
	<ul class="space-y-4">
	<li class="flex items-start">
	<div class="w-8 h-8 rounded-full bg-africa-orange flex items-center justify-center mr-3 mt-1 flex-shrink-0">
	<i class="fas fa-check text-africa-dark text-sm"></i>
	</div>
	<span><strong>Free Access:</strong> All our courses and resources are completely free to ensure accessibility.</span>
	</li>
	<li class="flex items-start">
	<div class="w-8 h-8 rounded-full bg-africa-orange flex items-center justify-center mr-3 mt-1 flex-shrink-0">
	<i class="fas fa-check text-africa-dark text-sm"></i>
	</div>
	<span><strong>Practical Focus:</strong> We emphasize hands-on learning with real-world projects.</span>
	</li>
	<li class="flex items-start">
	<div class="w-8 h-8 rounded-full bg-africa-orange flex items-center justify-center mr-3 mt-1 flex-shrink-0">
	<i class="fas fa-check text-africa-dark text-sm"></i>
	</div>
	<span><strong>Community Driven:</strong> Our content is created and reviewed by African Web3 professionals.</span>
	</li>
	<li class="flex items-start">
	<div class="w-8 h-8 rounded-full bg-africa-orange flex items-center justify-center mr-3 mt-1 flex-shrink-0">
	<i class="fas fa-check text-africa-dark text-sm"></i>
	</div>
	<span><strong>Mobile Optimized:</strong> Designed for learners with limited bandwidth and mobile-only access.</span>
	</li>
	</ul>
	</div>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-8 mb-12">
	<h3 class="text-2xl font-bold mb-6 text-center">Our Team</h3>
	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="text-center">
	<div class="w-32 h-32 rounded-full bg-africa-orange/20 border border-africa-orange/30 mx-auto mb-4 overflow-hidden">
	<img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Team member" class="w-full h-full object-cover">
	</div>
	<h4 class="font-bold text-lg">Amina Diallo</h4>
	<p class="text-africa-orange mb-2">Founder & Lead Educator</p>
	<p class="text-sm text-gray-300">Former blockchain developer at major DeFi protocol</p>
	</div>
	<div class="text-center">
	<div class="w-32 h-32 rounded-full bg-africa-orange/20 border border-africa-orange/30 mx-auto mb-4 overflow-hidden">
	<img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Team member" class="w-full h-full object-cover">
	</div>
	<h4 class="font-bold text-lg">Kwame Osei</h4>
	<p class="text-africa-orange mb-2">Technical Director</p>
	<p class="text-sm text-gray-300">Smart contract auditor with 5+ years experience</p>
	</div>
	<div class="text-center">
	<div class="w-32 h-32 rounded-full bg-africa-orange/20 border border-africa-orange/30 mx-auto mb-4 overflow-hidden">
	<img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Team member" class="w-full h-full object-cover">
	</div>
	<h4 class="font-bold text-lg">Naledi Banda</h4>
	<p class="text-africa-orange mb-2">Community Manager</p>
	<p class="text-sm text-gray-300">Organizer of Africa Blockchain Week</p>
	</div>
	</div>
	</div>

	<div class="text-center">
	<h3 class="text-2xl font-bold mb-4">Support Our Mission</h3>
	<p class="mb-6 max-w-2xl mx-auto">Web3Africa is funded by donations and grants. Help us keep education free and accessible to all Africans.</p>
	<button class="px-8 py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Donate Now</button>
	</div>
	</div>

	<!-- Login View -->
	<div id="login-view" class="view hidden max-w-md mx-auto">
	<h2 class="text-3xl font-bold mb-2">Welcome Back</h2>
	<p class="text-gray-300 mb-8">Sign in to continue your Web3 learning journey</p>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 mb-6">
	<form id="login-form" onsubmit="handleLogin(event)">
	<div class="mb-4">
	<label for="login-email" class="block mb-2">Email</label>
	<input type="email" id="login-email" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	</div>
	<div class="mb-6">
	<label for="login-password" class="block mb-2">Password</label>
	<input type="password" id="login-password" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	</div>
	<button type="submit" class="w-full py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Sign In</button>
	</form>
	</div>

	<div class="text-center mb-6">
	<p class="text-gray-300">Or connect with</p>
	</div>

	<button onclick="connectWallet()" class="w-full py-3 rounded-full border border-africa-orange text-africa-orange hover:bg-africa-orange/10 font-bold transition mb-6 flex items-center justify-center space-x-2">
	<i class="fab fa-ethereum"></i>
	<span>Wallet Connect</span>
	</button>

	<div class="text-center">
	<p class="text-gray-300">Don't have an account? <button onclick="showView('signup')" class="text-africa-orange hover:text-africa-yellow">Sign up</button></p>
	</div>
	</div>

	<!-- Signup View -->
	<div id="signup-view" class="view hidden max-w-md mx-auto">
	<h2 class="text-3xl font-bold mb-2">Join Web3Africa</h2>
	<p class="text-gray-300 mb-8">Create your free account to start learning</p>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 mb-6">
	<form id="signup-form" onsubmit="handleSignup(event)">
	<div class="mb-4">
	<label for="signup-name" class="block mb-2">Full Name</label>
	<input type="text" id="signup-name" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	</div>
	<div class="mb-4">
	<label for="signup-email" class="block mb-2">Email</label>
	<input type="email" id="signup-email" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	</div>
	<div class="mb-6">
	<label for="signup-password" class="block mb-2">Password</label>
	<input type="password" id="signup-password" required minlength="6" class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	</div>
	<button type="submit" class="w-full py-3 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Create Account</button>
	</form>
	</div>

	<div class="text-center mb-6">
	<p class="text-gray-300">Or connect with</p>
	</div>

	<button onclick="connectWallet()" class="w-full py-3 rounded-full border border-africa-orange text-africa-orange hover:bg-africa-orange/10 font-bold transition mb-6 flex items-center justify-center space-x-2">
	<i class="fab fa-ethereum"></i>
	<span>Wallet Connect</span>
	</button>

	<div class="text-center">
	<p class="text-gray-300">Already have an account? <button onclick="showView('login')" class="text-africa-orange hover:text-africa-yellow">Sign in</button></p>
	</div>
	</div>

	<!-- Dashboard View -->
	<div id="dashboard-view" class="view hidden">
	<h2 class="text-3xl font-bold mb-6">My Dashboard</h2>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<span class="w-8 h-8 rounded-full bg-africa-red flex items-center justify-center mr-3">
	<i class="fas fa-book text-sm"></i>
	</span>
	My Courses
	</h3>
	<div id="enrolled-courses">
	<!-- Enrolled courses will be shown here -->
	<p class="text-gray-300">You haven't enrolled in any courses yet.</p>
	</div>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<span class="w-8 h-8 rounded-full bg-africa-yellow flex items-center justify-center mr-3">
	<i class="fas fa-chart-line text-sm text-africa-dark"></i>
	</span>
	My Progress
	</h3>
	<div class="flex flex-col items-center">
	<div class="relative w-32 h-32 mb-4">
	<svg class="w-full h-full" viewBox="0 0 100 100">
	<circle class="text-africa-dark/20" stroke-width="10" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" />
	<circle class="text-africa-orange progress-ring__circle" stroke-width="10" stroke-linecap="round" stroke="currentColor" fill="transparent" r="40" cx="50" cy="50" stroke-dasharray="251.2" stroke-dashoffset="175.84" />
	</svg>
	<div class="absolute inset-0 flex items-center justify-center">
	<span class="text-2xl font-bold">30%</span>
	</div>
	</div>
	<p class="text-center text-gray-300">Overall course completion</p>
	</div>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<span class="w-8 h-8 rounded-full bg-africa-green flex items-center justify-center mr-3">
	<i class="fas fa-trophy text-sm"></i>
	</span>
	Achievements
	</h3>
	<div class="grid grid-cols-3 gap-3">
	<div class="bg-africa-dark border border-africa-orange/20 rounded-lg p-3 flex flex-col items-center">
	<div class="w-12 h-12 rounded-full bg-africa-orange/20 flex items-center justify-center mb-2">
	<i class="fas fa-medal text-africa-orange"></i>
	</div>
	<span class="text-xs text-center">First Course</span>
	</div>
	<div class="bg-africa-dark border border-africa-orange/20 rounded-lg p-3 flex flex-col items-center opacity-50">
	<div class="w-12 h-12 rounded-full bg-africa-orange/10 flex items-center justify-center mb-2">
	<i class="fas fa-star text-gray-500"></i>
	</div>
	<span class="text-xs text-center text-gray-500">Quiz Master</span>
	</div>
	<div class="bg-africa-dark border border-africa-orange/20 rounded-lg p-3 flex flex-col items-center opacity-50">
	<div class="w-12 h-12 rounded-full bg-africa-orange/10 flex items-center justify-center mb-2">
	<i class="fas fa-code text-gray-500"></i>
	</div>
	<span class="text-xs text-center text-gray-500">Developer</span>
	</div>
	</div>
	</div>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 mb-8">
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<span class="w-8 h-8 rounded-full bg-africa-orange flex items-center justify-center mr-3">
	<i class="fas fa-bookmark text-sm text-africa-dark"></i>
	</span>
	Saved Resources
	</h3>
	<div id="saved-resources">
	<p class="text-gray-300">You haven't saved any resources yet.</p>
	</div>
	</div>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<h3 class="text-xl font-bold mb-4 flex items-center">
	<span class="w-8 h-8 rounded-full bg-africa-red flex items-center justify-center mr-3">
	<i class="fas fa-history text-sm"></i>
	</span>
	Recent Activity
	</h3>
	<div id="recent-activity">
	<div class="flex items-start py-3 border-b border-africa-orange/10 last:border-0">
	<div class="w-8 h-8 rounded-full bg-africa-orange/20 flex items-center justify-center mr-3 mt-1">
	<i class="fas fa-book text-africa-orange text-sm"></i>
	</div>
	<div>
	<p class="text-sm">You started <strong>Blockchain Fundamentals</strong> course</p>
	<p class="text-xs text-gray-400">2 days ago</p>
	</div>
	</div>
	<div class="flex items-start py-3 border-b border-africa-orange/10 last:border-0">
	<div class="w-8 h-8 rounded-full bg-africa-green/20 flex items-center justify-center mr-3 mt-1">
	<i class="fas fa-user-plus text-africa-green text-sm"></i>
	</div>
	<div>
	<p class="text-sm">You joined Web3Africa</p>
	<p class="text-xs text-gray-400">1 week ago</p>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Admin Panel View -->
	<div id="admin-view" class="view hidden">
	<h2 class="text-3xl font-bold mb-6">Admin Panel</h2>

	<div class="mb-8">
	<div class="flex flex-wrap gap-2 mb-6">
	<button onclick="showAdminSection('courses')" class="px-4 py-2 rounded-full bg-africa-orange text-africa-dark">Manage Courses</button>
	<button onclick="showAdminSection('users')" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20">Manage Users</button>
	<button onclick="showAdminSection('content')" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20">Manage Content</button>
	<button onclick="showAdminSection('analytics')" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20">Analytics</button>
	</div>

	<div id="admin-courses-section">
	<div class="flex justify-between items-center mb-6">
	<h3 class="text-2xl font-bold">Courses</h3>
	<button onclick="showAddCourseModal()" class="px-4 py-2 rounded-full bg-africa-green hover:bg-africa-green/80 text-africa-dark font-bold">
	<i class="fas fa-plus mr-2"></i> Add Course
	</button>
	</div>

	<div class="overflow-x-auto">
	<table class="w-full border-collapse">
	<thead>
	<tr class="border-b border-africa-orange/20">
	<th class="text-left py-3 px-4">Title</th>
	<th class="text-left py-3 px-4">Level</th>
	<th class="text-left py-3 px-4">Modules</th>
	<th class="text-left py-3 px-4">Enrollments</th>
	<th class="text-left py-3 px-4">Actions</th>
	</tr>
	</thead>
	<tbody id="admin-courses-list">
	<!-- Courses will be listed here -->
	</tbody>
	</table>
	</div>
	</div>

	<div id="admin-users-section" class="hidden">
	<h3 class="text-2xl font-bold mb-6">Users</h3>
	<div class="overflow-x-auto">
	<table class="w-full border-collapse">
	<thead>
	<tr class="border-b border-africa-orange/20">
	<th class="text-left py-3 px-4">Name</th>
	<th class="text-left py-3 px-4">Email</th>
	<th class="text-left py-3 px-4">Joined</th>
	<th class="text-left py-3 px-4">Progress</th>
	<th class="text-left py-3 px-4">Actions</th>
	</tr>
	</thead>
	<tbody id="admin-users-list">
	<!-- Users will be listed here -->
	</tbody>
	</table>
	</div>
	</div>
	</div>
	</div>
	</main>

	<!-- Footer -->
	<footer class="bg-africa-dark border-t border-africa-orange/20 py-8">
	<div class="container mx-auto px-4">
	<div class="grid grid-cols-1 md:grid-cols-4 gap-8 mb-8">
	<div>
	<div class="flex items-center space-x-2 mb-4">
	<div class="w-8 h-8 rounded-full bg-gradient-to-br from-africa-red to-africa-yellow flex items-center justify-center">
	<span class="font-bold text-xs text-africa-dark">W3A</span>
	</div>
	<h3 class="font-bold">Web3Africa</h3>
	</div>
	<p class="text-gray-300 text-sm">Empowering Africa through blockchain education.</p>
	</div>

	<div>
	<h4 class="font-bold mb-4">Learn</h4>
	<ul class="space-y-2">
	<li><a href="#" onclick="showView('courses')" class="text-gray-300 hover:text-africa-orange text-sm transition">Courses</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Resources</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Blog</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">FAQ</a></li>
	</ul>
	</div>

	<div>
	<h4 class="font-bold mb-4">Community</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Discord</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Telegram</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Twitter</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">GitHub</a></li>
	</ul>
	</div>

	<div>
	<h4 class="font-bold mb-4">Support Us</h4>
	<ul class="space-y-2">
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Donate</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Volunteer</a></li>
	<li><a href="#" class="text-gray-300 hover:text-africa-orange text-sm transition">Partnerships</a></li>
	</ul>
	</div>
	</div>

	<div class="pt-6 border-t border-africa-orange/10 flex flex-col md:flex-row justify-between items-center">
	<p class="text-gray-400 text-sm mb-4 md:mb-0">© 2023 Web3Africa. All rights reserved.</p>
	<div class="flex space-x-4">
	<a href="#" class="text-gray-400 hover:text-africa-orange transition"><i class="fab fa-twitter"></i></a>
	<a href="#" class="text-gray-400 hover:text-africa-orange transition"><i class="fab fa-discord"></i></a>
	<a href="#" class="text-gray-400 hover:text-africa-orange transition"><i class="fab fa-telegram"></i></a>
	<a href="#" class="text-gray-400 hover:text-africa-orange transition"><i class="fab fa-github"></i></a>
	</div>
	</div>
	</div>
	</footer>
	</div>

	<!-- Add Course Modal -->
	<div id="add-course-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6 w-full max-w-md">
	<div class="flex justify-between items-center mb-4">
	<h3 class="text-xl font-bold">Add New Course</h3>
	<button onclick="hideAddCourseModal()" class="p-2 rounded-full hover:bg-africa-orange/20 transition">
	<i class="fas fa-times"></i>
	</button>
	</div>

	<form id="add-course-form" onsubmit="addNewCourse(event)">
	<div class="mb-4">
	<label for="course-title" class="block mb-2">Title</label>
	<input type="text" id="course-title" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	</div>

	<div class="mb-4">
	<label for="course-description" class="block mb-2">Description</label>
	<textarea id="course-description" required rows="3" class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none"></textarea>
	</div>

	<div class="mb-4">
	<label for="course-level" class="block mb-2">Level</label>
	<select id="course-level" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none">
	<option value="beginner">Beginner</option>
	<option value="intermediate">Intermediate</option>
	<option value="advanced">Advanced</option>
	</select>
	</div>

	<div class="mb-4">
	<label for="course-duration" class="block mb-2">Duration</label>
	<input type="text" id="course-duration" required class="w-full px-4 py-3 rounded-lg bg-africa-dark border border-africa-orange/30 focus:border-africa-orange focus:outline-none" placeholder="e.g. 2 weeks">
	</div>

	<div class="flex justify-end space-x-3">
	<button type="button" onclick="hideAddCourseModal()" class="px-4 py-2 rounded-full border border-africa-orange hover:bg-africa-orange/20 transition">Cancel</button>
	<button type="submit" class="px-4 py-2 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">Add Course</button>
	</div>
	</form>
	</div>
	</div>

	<!-- Loading Overlay -->
	<div id="loading-overlay" class="fixed inset-0 bg-black bg-opacity-70 flex items-center justify-center z-50 hidden">
	<div class="text-center">
	<div class="w-16 h-16 border-4 border-africa-orange border-t-transparent rounded-full spinner mb-4 mx-auto"></div>
	<p class="text-white">Loading...</p>
	</div>
	</div>

	<!-- App Script -->
	<script>
	// Current view state
	let currentView = 'home';
	let currentCourseId = null;
	let currentModuleId = null;
	let quizAnswers = {};

	// Initialize the app
	function initApp() {
	showView('home');
	loadFeaturedCourses();
	loadAllCourses();
	loadJobs();

	// Check if user is logged in (simulated)
	if (currentUser) {
	updateAuthUI();
	}

	// Check if admin
	if (isAdmin) {
	document.getElementById('auth-btn').innerHTML = 'Admin';
	document.getElementById('mobile-auth-btn').innerHTML = 'Admin';
	loadAdminCourses();
	loadAdminUsers();
	}
	}

	// Show a specific view
	function showView(viewId) {
	// Hide all views
	document.querySelectorAll('.view').forEach(view => {
	view.classList.add('hidden');
	});

	// Show the selected view
	document.getElementById(`${viewId}-view`).classList.remove('hidden');

	// Update current view
	currentView = viewId;

	// Special cases
	if (viewId === 'dashboard' && currentUser) {
	loadDashboard();
	}
	}

	// Toggle mobile menu
	function toggleMobileMenu() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('mobile-menu-hidden');
	menu.classList.toggle('mobile-menu-visible');
	}

	// Toggle dark mode
	function toggleDarkMode() {
	document.documentElement.classList.toggle('dark');
	}

	// Connect wallet
	function connectWallet() {
	showLoading();

	// Simulate wallet connection delay
	setTimeout(() => {
	const result = api.connectWallet();

	if (result.success) {
	walletConnected = true;
	updateAuthUI();

	// Update wallet button
	const walletBtn = document.getElementById('wallet-btn');
	const mobileWalletBtn = document.getElementById('mobile-wallet-btn');

	walletBtn.innerHTML = '<i class="fab fa-ethereum"></i> <span>0x123...abc</span>';
	mobileWalletBtn.innerHTML = '<i class="fab fa-ethereum"></i> <span>0x123...abc</span>';

	walletBtn.classList.add('wallet-connected');
	mobileWalletBtn.classList.add('wallet-connected');

	// Show dashboard
	showView('dashboard');
	}

	hideLoading();
	}, 1500);
	}

	// Update authentication UI
	function updateAuthUI() {
	if (currentUser) {
	document.getElementById('auth-btn').innerHTML = currentUser.name \|\| 'My Account';
	document.getElementById('mobile-auth-btn').innerHTML = currentUser.name \|\| 'My Account';

	// Update click handlers
	document.getElementById('auth-btn').onclick = () => showView('dashboard');
	document.getElementById('mobile-auth-btn').onclick = () => {
	showView('dashboard');
	toggleMobileMenu();
	};
	}
	}

	// Handle login form submission
	function handleLogin(event) {
	event.preventDefault();
	showLoading();

	const email = document.getElementById('login-email').value;
	const password = document.getElementById('login-password').value;

	setTimeout(() => {
	const result = api.login(email, password);

	if (result.success) {
	currentUser = result.user;
	updateAuthUI();
	showView('dashboard');
	} else {
	alert(result.message \|\| 'Login failed');
	}

	hideLoading();
	}, 1000);
	}

	// Handle signup form submission
	function handleSignup(event) {
	event.preventDefault();
	showLoading();

	const name = document.getElementById('signup-name').value;
	const email = document.getElementById('signup-email').value;
	const password = document.getElementById('signup-password').value;

	setTimeout(() => {
	const result = api.signup(email, password, name);

	if (result.success) {
	currentUser = result.user;
	updateAuthUI();
	showView('dashboard');
	} else {
	alert(result.message \|\| 'Signup failed');
	}

	hideLoading();
	}, 1000);
	}

	// Filter courses by level
	function filterCourses(level) {
	const allCourses = api.getCourses();
	const container = document.getElementById('all-courses');

	// Update active filter button
	document.querySelectorAll('[id^="filter-"]').forEach(btn => {
	btn.classList.remove('bg-africa-orange', 'text-africa-dark');
	btn.classList.add('border', 'border-africa-orange', 'hover:bg-africa-orange/20');
	});

	document.getElementById(`filter-${level}`).classList.add('bg-africa-orange', 'text-africa-dark');
	document.getElementById(`filter-${level}`).classList.remove('border', 'border-africa-orange', 'hover:bg-africa-orange/20');

	// Filter courses
	const filteredCourses = level === 'all'
	? allCourses
	: allCourses.filter(course => course.level.toLowerCase() === level);

	// Render filtered courses
	container.innerHTML = '';
	filteredCourses.forEach(course => {
	container.innerHTML += createCourseCard(course);
	});
	}

	// Load featured courses
	function loadFeaturedCourses() {
	const courses = api.getCourses().slice(0, 3);
	const container = document.getElementById('featured-courses');

	container.innerHTML = '';
	courses.forEach(course => {
	container.innerHTML += createCourseCard(course);
	});
	}

	// Load all courses
	function loadAllCourses() {
	const courses = api.getCourses();
	const container = document.getElementById('all-courses');

	container.innerHTML = '';
	courses.forEach(course => {
	container.innerHTML += createCourseCard(course);
	});
	}

	// Create course card HTML
	function createCourseCard(course) {
	const levelColor = {
	beginner: 'green',
	intermediate: 'yellow',
	advanced: 'red'
	};

	return `
	<div class="course-card bg-africa-dark border border-africa-orange/20 rounded-xl overflow-hidden transition duration-300">
	<div class="h-40 bg-africa-${levelColor[course.level.toLowerCase()]}/10 flex items-center justify-center">
	<i class="fas fa-laptop-code text-4xl text-africa-${levelColor[course.level.toLowerCase()]}"></i>
	</div>
	<div class="p-6">
	<div class="flex justify-between items-start mb-2">
	<h3 class="font-bold text-lg">${course.title}</h3>
	<span class="text-xs px-2 py-1 rounded-full bg-africa-${levelColor[course.level.toLowerCase()]}/20 text-africa-${levelColor[course.level.toLowerCase()]}">${course.level}</span>
	</div>
	<p class="text-gray-300 text-sm mb-4">${course.description}</p>
	<div class="flex justify-between items-center">
	<span class="text-xs text-gray-400">${course.duration}</span>
	<button onclick="showCourseDetail('${course.id}')" class="text-xs px-3 py-1 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow transition">View Course</button>
	</div>
	</div>
	</div>
	`;
	}

	// Show course detail
	function showCourseDetail(courseId) {
	currentCourseId = courseId;
	const course = api.getCourse(courseId);

	if (!course) {
	alert('Course not found');
	return;
	}

	const container = document.getElementById('course-detail-content');

	const levelColor = {
	beginner: 'green',
	intermediate: 'yellow',
	advanced: 'red'
	};

	// Create modules list
	let modulesHtml = '';
	if (course.modules && course.modules.length > 0) {
	modulesHtml = `
	<div class="mt-8">
	<h3 class="text-2xl font-bold mb-6">Course Modules</h3>
	<div class="space-y-3">
	${course.modules.map(module => `
	<div class="bg-africa-dark border border-africa-orange/20 rounded-lg p-4 hover:border-africa-orange transition cursor-pointer" onclick="showModuleDetail('${courseId}', '${module.id}')">
	<div class="flex justify-between items-center">
	<h4 class="font-bold">${module.title}</h4>
	<i class="fas fa-chevron-right text-africa-orange"></i>
	</div>
	</div>
	`).join('')}
	</div>
	</div>
	`;
	} else {
	modulesHtml = `
	<div class="mt-8 bg-africa-dark border border-africa-orange/20 rounded-lg p-8 text-center">
	<i class="fas fa-book-open text-4xl text-africa-orange mb-4"></i>
	<p class="text-gray-300">More modules coming soon!</p>
	</div>
	`;
	}

	container.innerHTML = `
	<div class="flex flex-col md:flex-row gap-8 mb-8">
	<div class="md:w-1/3">
	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<div class="h-40 bg-africa-${levelColor[course.level.toLowerCase()]}/10 flex items-center justify-center rounded-lg mb-4">
	<i class="fas fa-laptop-code text-4xl text-africa-${levelColor[course.level.toLowerCase()]}"></i>
	</div>
	<div class="space-y-4">
	<div>
	<span class="text-xs text-gray-400">Level</span>
	<p class="font-bold">${course.level}</p>
	</div>
	<div>
	<span class="text-xs text-gray-400">Duration</span>
	<p class="font-bold">${course.duration}</p>
	</div>
	<div>
	<span class="text-xs text-gray-400">Modules</span>
	<p class="font-bold">${course.modules ? course.modules.length : 0}</p>
	</div>
	<button class="w-full py-2 rounded-full bg-africa-orange text-africa-dark hover:bg-africa-yellow font-bold transition">
	Enroll Now
	</button>
	</div>
	</div>
	</div>
	<div class="md:w-2/3">
	<h2 class="text-3xl font-bold mb-4">${course.title}</h2>
	<div class="flex items-center mb-6">
	<span class="text-xs px-2 py-1 rounded-full bg-africa-${levelColor[course.level.toLowerCase()]}/20 text-africa-${levelColor[course.level.toLowerCase()]} mr-3">${course.level}</span>
	<span class="text-gray-400 text-sm">${course.duration} • ${course.modules ? course.modules.length : 0} modules</span>
	</div>
	<p class="mb-6">${course.description}</p>

	${modulesHtml}
	</div>
	</div>
	`;

	showView('course-detail');
	}

	// Show module detail
	function showModuleDetail(courseId, moduleId) {
	currentCourseId = courseId;
	currentModuleId = moduleId;

	const course = api.getCourse(courseId);
	if (!course) {
	alert('Course not found');
	return;
	}

	const module = course.modules.find(m => m.id === moduleId);
	if (!module) {
	alert('Module not found');
	return;
	}

	const container = document.getElementById('module-detail-content');

	container.innerHTML = `
	<div class="mb-8">
	<h2 class="text-2xl font-bold mb-2">${module.title}</h2>
	<p class="text-gray-400 mb-6">From: ${course.title}</p>

	<div class="bg-africa-dark border border-africa-orange/20 rounded-xl p-6">
	<h3 class="text-xl font-bold mb-4">Content</h3>
	<div class="prose prose-invert max-w-none">
	<p>${module.content \|\| 'No content available yet.'}</p>
	</div>

	${module.videoUrl ? `
	<div class="mt-6">
	<h3 class="text-xl font-bold mb-4">Video</h3>
	<div class="aspect-w-16 aspect-h-9 bg-africa-orange/10 rounded-lg overflow-hidden flex items-center justify-center">
	<i class="fas fa-play text-4xl text-africa-orange"></i>
	</div>
	</div>
	` : ''}

	${module.imageUrl ? `
	<div class="mt-6">
	<h3 class="text-xl font-bold mb-4">Image</h3>
	<div class="bg-africa-orange/10 rounded-lg overflow-hidden flex items-center justify-center h-48">
	<i class="fas fa-image text-4xl text-africa-orange"></i>
	</div>
	</div>
	` : ''}
	</div>
	</div>
	`;

	// Show quiz section if available
	const quizSection = document.getElementById('quiz-section');
	const quizResult = document.getElementById('quiz-result');

	if (module.quiz && module.quiz.questions.length > 0) {
	loadQuizQuestions(module.quiz.questions);
	quizSection.classList.remove('hidden');
	quizResult.classList.add('hidden');
	} else {
	quizSection.classList.add('hidden');
	quizResult.classList.add('hidden');
	}

	showView('module-detail');
	}

	// Back to course detail
	function backToCourseDetail() {
	showCourseDetail(currentCourseId);
	}

	// Load quiz questions
	function loadQuizQuestions(questions) {
	const container = document.getElementById('quiz-questions');

	container.innerHTML = '';
	questions.forEach((question, qIndex) => {
	container.innerHTML += `
	<div class="mb-8">
	<h4 class="font-bold mb-4">${qIndex + 1}. ${question.text}</h4>

	</html>