Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>MonadMakers - Blockchain Education for African Youth</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #6B46C1 0%, #4299E1 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); | |
| } | |
| .age-group-tab.active { | |
| border-bottom: 3px solid #6B46C1; | |
| color: #6B46C1; | |
| } | |
| .timeline-item::before { | |
| content: ''; | |
| position: absolute; | |
| left: -38px; | |
| top: 0; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 50%; | |
| background: #6B46C1; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50"> | |
| <!-- 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-cube text-purple-600 text-2xl mr-2"></i> | |
| <span class="text-xl font-bold text-gray-900">MonadMakers</span> | |
| </div> | |
| </div> | |
| <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8"> | |
| <a href="#about" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">About</a> | |
| <a href="#curriculum" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Curriculum</a> | |
| <a href="#timeline" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Timeline</a> | |
| <a href="#resources" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Resources</a> | |
| <a href="#contact" class="bg-purple-600 text-white px-4 py-2 rounded-md text-sm font-medium hover:bg-purple-700">Get Involved</a> | |
| </div> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <header class="gradient-bg text-white"> | |
| <div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">Empowering African Youth Through Blockchain</h1> | |
| <p class="text-xl md:text-2xl mb-8 max-w-3xl mx-auto">Teaching blockchain fundamentals to underprivileged students ages 8-18 using the Monad testnet</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#contact" class="bg-white text-purple-600 px-8 py-3 rounded-md text-lg font-semibold hover:bg-gray-100">Join the Program</a> | |
| <a href="#about" class="bg-transparent border-2 border-white text-white px-8 py-3 rounded-md text-lg font-semibold hover:bg-white hover:text-purple-600">Learn More</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- About Section --> | |
| <section id="about" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">About MonadMakers</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">A revolutionary educational initiative bringing blockchain technology to underprivileged youth across Africa through hands-on learning and real-world applications.</p> | |
| </div> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-graduation-cap text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Education First</h3> | |
| <p class="text-gray-600">Age-appropriate curriculum designed for students with no prior programming experience, making blockchain concepts accessible to all.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-hands-helping text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Community Impact</h3> | |
| <p class="text-gray-600">Students earn NFT rewards for community service, connecting blockchain technology with real-world social impact.</p> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-bolt text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Sustainable Model</h3> | |
| <p class="text-gray-600">Designed to attract developer grants and create pathways to tech careers, ensuring long-term viability and growth.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Curriculum Section --> | |
| <section id="curriculum" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Age-Appropriate Curriculum</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Tailored learning paths for different age groups, all using the Monad blockchain testnet.</p> | |
| </div> | |
| <!-- Age Group Tabs --> | |
| <div class="flex justify-center mb-8 border-b border-gray-200"> | |
| <button class="age-group-tab active px-6 py-3 font-medium text-sm" data-age="8-10">Ages 8-10</button> | |
| <button class="age-group-tab px-6 py-3 font-medium text-sm" data-age="11-14">Ages 11-14</button> | |
| <button class="age-group-tab px-6 py-3 font-medium text-sm" data-age="15-18">Ages 15-18</button> | |
| </div> | |
| <!-- Curriculum Content --> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <!-- Ages 8-10 Content (default visible) --> | |
| <div class="age-content" data-age="8-10"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Foundational Concepts</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Introduction to digital ownership through simple NFT creation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Blockchain basics explained through storytelling and games</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Creating digital art for NFTs using simple tools</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="age-content" data-age="8-10"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Hands-On Activities</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-paint-brush text-blue-500 mt-1 mr-2"></i> | |
| <span>Design and mint simple NFTs representing community service</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-wallet text-blue-500 mt-1 mr-2"></i> | |
| <span>Set up Monad testnet wallets with guided assistance</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-trophy text-blue-500 mt-1 mr-2"></i> | |
| <span>Earn NFT badges for completing educational milestones</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Ages 11-14 Content (hidden by default) --> | |
| <div class="age-content hidden" data-age="11-14"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Intermediate Concepts</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Understanding smart contracts through visual programming</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Modifying simple smart contract templates for NFTs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Introduction to decentralized applications (dApps)</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="age-content hidden" data-age="11-14"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Project-Based Learning</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-project-diagram text-blue-500 mt-1 mr-2"></i> | |
| <span>Create NFT collections representing local culture</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-code text-blue-500 mt-1 mr-2"></i> | |
| <span>Basic smart contract modification with Blockly</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-users text-blue-500 mt-1 mr-2"></i> | |
| <span>Team projects to solve local problems with blockchain</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <!-- Ages 15-18 Content (hidden by default) --> | |
| <div class="age-content hidden" data-age="15-18"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Advanced Topics</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Writing and deploying custom smart contracts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Understanding consensus mechanisms and cryptography</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check text-green-500 mt-1 mr-2"></i> | |
| <span>Building full-stack dApps on Monad testnet</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="age-content hidden" data-age="15-18"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm"> | |
| <h3 class="text-xl font-semibold mb-4 text-purple-600">Career Pathways</h3> | |
| <ul class="space-y-3"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-briefcase text-blue-500 mt-1 mr-2"></i> | |
| <span>Developing portfolio projects for tech careers</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-laptop-code text-blue-500 mt-1 mr-2"></i> | |
| <span>Contributing to open-source blockchain projects</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-hand-holding-usd text-blue-500 mt-1 mr-2"></i> | |
| <span>Applying for micro-grants to continue education</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Implementation Timeline --> | |
| <section id="timeline" class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Implementation Timeline</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our phased approach to rolling out MonadMakers across Africa</p> | |
| </div> | |
| <div class="relative pl-12"> | |
| <!-- Timeline line --> | |
| <div class="absolute left-8 top-0 h-full w-0.5 bg-purple-200"></div> | |
| <!-- Timeline items --> | |
| <div class="relative mb-12 timeline-item"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 1</span> | |
| <span class="ml-4 text-gray-500">Months 1-3</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Pilot Program Development</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Curriculum development for all age groups</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Smart contract template creation</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Partner with 3 schools in different regions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="relative mb-12 timeline-item"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 2</span> | |
| <span class="ml-4 text-gray-500">Months 4-6</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Pilot Implementation</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Train educators and community leaders</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Launch with 150 students across pilot locations</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Develop NFT reward system for community service</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="relative mb-12 timeline-item"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 3</span> | |
| <span class="ml-4 text-gray-500">Months 7-12</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Scale and Expand</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Expand to 10+ schools across 5 countries</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Launch student NFT showcase platform</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Implement micro-grant system for top students</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="relative timeline-item"> | |
| <div class="bg-gray-50 p-6 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-2"> | |
| <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 4</span> | |
| <span class="ml-4 text-gray-500">Year 2+</span> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Sustainable Growth</h3> | |
| <ul class="space-y-2 text-gray-600"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Establish regional blockchain education hubs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Develop train-the-trainer programs</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i> | |
| <span>Secure ongoing funding through grants and partnerships</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Resources Section --> | |
| <section id="resources" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Key Resources</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything needed to implement MonadMakers in your community</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-book-open text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Lesson Plans</h3> | |
| <p class="text-gray-600 mb-4">Complete curriculum for all age groups, with activities and assessments.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| Download Resources | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-file-code text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Smart Contract Templates</h3> | |
| <p class="text-gray-600 mb-4">Pre-built contracts students can modify for their NFT projects.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| View on GitHub | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-wallet text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Wallet Setup Guide</h3> | |
| <p class="text-gray-600 mb-4">Step-by-step instructions for creating Monad testnet wallets.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| Download Guide | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-chalkboard-teacher text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Educator Training</h3> | |
| <p class="text-gray-600 mb-4">Online courses for teachers to learn blockchain fundamentals.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| Start Training | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-trophy text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Reward System</h3> | |
| <p class="text-gray-600 mb-4">Framework for tracking and rewarding community service with NFTs.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| Learn More | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300"> | |
| <div class="text-purple-600 mb-4"> | |
| <i class="fas fa-graduation-cap text-3xl"></i> | |
| </div> | |
| <h3 class="text-xl font-semibold mb-3">Micro-Grants Info</h3> | |
| <p class="text-gray-600 mb-4">How to apply for funding to support student projects.</p> | |
| <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center"> | |
| Application Details | |
| <i class="fas fa-arrow-right ml-2"></i> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Impact Metrics --> | |
| <section class="py-16 bg-purple-700 text-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-bold mb-4">Measuring Our Impact</h2> | |
| <p class="text-xl max-w-3xl mx-auto">Key metrics to evaluate the success of MonadMakers</p> | |
| </div> | |
| <div class="grid md:grid-cols-4 gap-8"> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold mb-2">1,000+</div> | |
| <div class="text-lg">Students Trained</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold mb-2">75%</div> | |
| <div class="text-lg">Completion Rate</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold mb-2">500+</div> | |
| <div class="text-lg">NFT Projects Created</div> | |
| </div> | |
| <div class="text-center"> | |
| <div class="text-4xl font-bold mb-2">30%</div> | |
| <div class="text-lg">Pursuing Tech Careers</div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Challenges Section --> | |
| <section class="py-16 bg-white"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Addressing Challenges</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our approach to overcoming potential obstacles</p> | |
| </div> | |
| <div class="grid md:grid-cols-2 gap-8"> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Limited Internet Access</h3> | |
| <p class="text-gray-600 mb-4">Many communities have unreliable or expensive internet connections.</p> | |
| <div class="bg-white p-4 rounded border-l-4 border-red-500"> | |
| <h4 class="font-medium mb-2">Our Solution:</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Offline learning materials and activities</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Local blockchain nodes for school networks</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Data-light applications optimized for mobile</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Limited Technical Expertise</h3> | |
| <p class="text-gray-600 mb-4">Many educators lack blockchain experience to teach the material.</p> | |
| <div class="bg-white p-4 rounded border-l-4 border-red-500"> | |
| <h4 class="font-medium mb-2">Our Solution:</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Comprehensive teacher training program</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Remote support from blockchain experts</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Peer learning networks among educators</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Device Availability</h3> | |
| <p class="text-gray-600 mb-4">Students may lack personal computers or smartphones.</p> | |
| <div class="bg-white p-4 rounded border-l-4 border-red-500"> | |
| <h4 class="font-medium mb-2">Our Solution:</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Shared device labs at partner schools</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Mobile-first curriculum design</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Partnerships for device donations</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="bg-gray-50 p-6 rounded-lg"> | |
| <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Sustainability</h3> | |
| <p class="text-gray-600 mb-4">Maintaining long-term funding and support.</p> | |
| <div class="bg-white p-4 rounded border-l-4 border-red-500"> | |
| <h4 class="font-medium mb-2">Our Solution:</h4> | |
| <ul class="space-y-2"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Revenue from NFT marketplace fees</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Developer grants and corporate sponsorships</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Alumni network contributions</span> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-16 bg-gray-50"> | |
| <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> | |
| <div class="text-center mb-12"> | |
| <h2 class="text-3xl font-bold text-gray-900 mb-4">Get Involved</h2> | |
| <p class="text-xl text-gray-600 max-w-3xl mx-auto">Join us in bringing blockchain education to African youth</p> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-md overflow-hidden"> | |
| <div class="md:flex"> | |
| <div class="md:w-1/2 gradient-bg p-8 text-white"> | |
| <h3 class="text-2xl font-bold mb-4">Become a Partner</h3> | |
| <p class="mb-6">Whether you're a school, NGO, tech company, or individual, there are many ways to support MonadMakers.</p> | |
| <div class="space-y-4"> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-full p-2"> | |
| <i class="fas fa-school text-lg"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-semibold">Educational Institutions</h4> | |
| <p class="text-sm opacity-90">Implement our curriculum in your school</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-full p-2"> | |
| <i class="fas fa-hand-holding-heart text-lg"></i> | |
| </div> | |
| <div class="ml-3"> | |
| <h4 class="font-semibold">NGOs & Community Groups</h4> | |
| <p class="text-sm opacity-90">Bring MonadMakers to your community</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-full p-2"> | |
| <i class="fas fa-briefcase text-lg"></i> | |
| </div> | |
| </html> |