Hugging Face's logo

Spaces:
abdulshabazz
/
create-it
Running

App Files Community
abdulshabazz commited on
Commit
1f2585a
·
verified ·
1 Parent(s): 4b0efaa

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +611 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Create It
3
- emoji: 💻
4
- colorFrom: purple
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: create-it
3
+ emoji: 🐳
4
+ colorFrom: blue
5
  colorTo: blue
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,611 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MonadMakers - Blockchain Education for African Youth</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #6B46C1 0%, #4299E1 100%);
12
+ }
13
+ .card-hover:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .age-group-tab.active {
18
+ border-bottom: 3px solid #6B46C1;
19
+ color: #6B46C1;
20
+ }
21
+ .timeline-item::before {
22
+ content: '';
23
+ position: absolute;
24
+ left: -38px;
25
+ top: 0;
26
+ width: 20px;
27
+ height: 20px;
28
+ border-radius: 50%;
29
+ background: #6B46C1;
30
+ }
31
+ </style>
32
+ </head>
33
+ <body class="font-sans bg-gray-50">
34
+ <!-- Navigation -->
35
+ <nav class="bg-white shadow-md">
36
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
37
+ <div class="flex justify-between h-16">
38
+ <div class="flex items-center">
39
+ <div class="flex-shrink-0 flex items-center">
40
+ <i class="fas fa-cube text-purple-600 text-2xl mr-2"></i>
41
+ <span class="text-xl font-bold text-gray-900">MonadMakers</span>
42
+ </div>
43
+ </div>
44
+ <div class="hidden md:ml-6 md:flex md:items-center md:space-x-8">
45
+ <a href="#about" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">About</a>
46
+ <a href="#curriculum" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Curriculum</a>
47
+ <a href="#timeline" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Timeline</a>
48
+ <a href="#resources" class="text-gray-900 hover:text-purple-600 px-3 py-2 text-sm font-medium">Resources</a>
49
+ <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>
50
+ </div>
51
+ </div>
52
+ </div>
53
+ </nav>
54
+
55
+ <!-- Hero Section -->
56
+ <header class="gradient-bg text-white">
57
+ <div class="max-w-7xl mx-auto py-24 px-4 sm:px-6 lg:px-8 text-center">
58
+ <h1 class="text-4xl md:text-6xl font-bold mb-6">Empowering African Youth Through Blockchain</h1>
59
+ <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>
60
+ <div class="flex flex-col sm:flex-row justify-center gap-4">
61
+ <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>
62
+ <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>
63
+ </div>
64
+ </div>
65
+ </header>
66
+
67
+ <!-- About Section -->
68
+ <section id="about" class="py-16 bg-white">
69
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
70
+ <div class="text-center mb-12">
71
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">About MonadMakers</h2>
72
+ <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>
73
+ </div>
74
+
75
+ <div class="grid md:grid-cols-3 gap-8">
76
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
77
+ <div class="text-purple-600 mb-4">
78
+ <i class="fas fa-graduation-cap text-3xl"></i>
79
+ </div>
80
+ <h3 class="text-xl font-semibold mb-3">Education First</h3>
81
+ <p class="text-gray-600">Age-appropriate curriculum designed for students with no prior programming experience, making blockchain concepts accessible to all.</p>
82
+ </div>
83
+
84
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
85
+ <div class="text-purple-600 mb-4">
86
+ <i class="fas fa-hands-helping text-3xl"></i>
87
+ </div>
88
+ <h3 class="text-xl font-semibold mb-3">Community Impact</h3>
89
+ <p class="text-gray-600">Students earn NFT rewards for community service, connecting blockchain technology with real-world social impact.</p>
90
+ </div>
91
+
92
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
93
+ <div class="text-purple-600 mb-4">
94
+ <i class="fas fa-bolt text-3xl"></i>
95
+ </div>
96
+ <h3 class="text-xl font-semibold mb-3">Sustainable Model</h3>
97
+ <p class="text-gray-600">Designed to attract developer grants and create pathways to tech careers, ensuring long-term viability and growth.</p>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ </section>
102
+
103
+ <!-- Curriculum Section -->
104
+ <section id="curriculum" class="py-16 bg-gray-50">
105
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
106
+ <div class="text-center mb-12">
107
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Age-Appropriate Curriculum</h2>
108
+ <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>
109
+ </div>
110
+
111
+ <!-- Age Group Tabs -->
112
+ <div class="flex justify-center mb-8 border-b border-gray-200">
113
+ <button class="age-group-tab active px-6 py-3 font-medium text-sm" data-age="8-10">Ages 8-10</button>
114
+ <button class="age-group-tab px-6 py-3 font-medium text-sm" data-age="11-14">Ages 11-14</button>
115
+ <button class="age-group-tab px-6 py-3 font-medium text-sm" data-age="15-18">Ages 15-18</button>
116
+ </div>
117
+
118
+ <!-- Curriculum Content -->
119
+ <div class="grid md:grid-cols-2 gap-8">
120
+ <!-- Ages 8-10 Content (default visible) -->
121
+ <div class="age-content" data-age="8-10">
122
+ <div class="bg-white p-6 rounded-lg shadow-sm">
123
+ <h3 class="text-xl font-semibold mb-4 text-purple-600">Foundational Concepts</h3>
124
+ <ul class="space-y-3">
125
+ <li class="flex items-start">
126
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
127
+ <span>Introduction to digital ownership through simple NFT creation</span>
128
+ </li>
129
+ <li class="flex items-start">
130
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
131
+ <span>Blockchain basics explained through storytelling and games</span>
132
+ </li>
133
+ <li class="flex items-start">
134
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
135
+ <span>Creating digital art for NFTs using simple tools</span>
136
+ </li>
137
+ </ul>
138
+ </div>
139
+ </div>
140
+
141
+ <div class="age-content" data-age="8-10">
142
+ <div class="bg-white p-6 rounded-lg shadow-sm">
143
+ <h3 class="text-xl font-semibold mb-4 text-purple-600">Hands-On Activities</h3>
144
+ <ul class="space-y-3">
145
+ <li class="flex items-start">
146
+ <i class="fas fa-paint-brush text-blue-500 mt-1 mr-2"></i>
147
+ <span>Design and mint simple NFTs representing community service</span>
148
+ </li>
149
+ <li class="flex items-start">
150
+ <i class="fas fa-wallet text-blue-500 mt-1 mr-2"></i>
151
+ <span>Set up Monad testnet wallets with guided assistance</span>
152
+ </li>
153
+ <li class="flex items-start">
154
+ <i class="fas fa-trophy text-blue-500 mt-1 mr-2"></i>
155
+ <span>Earn NFT badges for completing educational milestones</span>
156
+ </li>
157
+ </ul>
158
+ </div>
159
+ </div>
160
+
161
+ <!-- Ages 11-14 Content (hidden by default) -->
162
+ <div class="age-content hidden" data-age="11-14">
163
+ <div class="bg-white p-6 rounded-lg shadow-sm">
164
+ <h3 class="text-xl font-semibold mb-4 text-purple-600">Intermediate Concepts</h3>
165
+ <ul class="space-y-3">
166
+ <li class="flex items-start">
167
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
168
+ <span>Understanding smart contracts through visual programming</span>
169
+ </li>
170
+ <li class="flex items-start">
171
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
172
+ <span>Modifying simple smart contract templates for NFTs</span>
173
+ </li>
174
+ <li class="flex items-start">
175
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
176
+ <span>Introduction to decentralized applications (dApps)</span>
177
+ </li>
178
+ </ul>
179
+ </div>
180
+ </div>
181
+
182
+ <div class="age-content hidden" data-age="11-14">
183
+ <div class="bg-white p-6 rounded-lg shadow-sm">
184
+ <h3 class="text-xl font-semibold mb-4 text-purple-600">Project-Based Learning</h3>
185
+ <ul class="space-y-3">
186
+ <li class="flex items-start">
187
+ <i class="fas fa-project-diagram text-blue-500 mt-1 mr-2"></i>
188
+ <span>Create NFT collections representing local culture</span>
189
+ </li>
190
+ <li class="flex items-start">
191
+ <i class="fas fa-code text-blue-500 mt-1 mr-2"></i>
192
+ <span>Basic smart contract modification with Blockly</span>
193
+ </li>
194
+ <li class="flex items-start">
195
+ <i class="fas fa-users text-blue-500 mt-1 mr-2"></i>
196
+ <span>Team projects to solve local problems with blockchain</span>
197
+ </li>
198
+ </ul>
199
+ </div>
200
+ </div>
201
+
202
+ <!-- Ages 15-18 Content (hidden by default) -->
203
+ <div class="age-content hidden" data-age="15-18">
204
+ <div class="bg-white p-6 rounded-lg shadow-sm">
205
+ <h3 class="text-xl font-semibold mb-4 text-purple-600">Advanced Topics</h3>
206
+ <ul class="space-y-3">
207
+ <li class="flex items-start">
208
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
209
+ <span>Writing and deploying custom smart contracts</span>
210
+ </li>
211
+ <li class="flex items-start">
212
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
213
+ <span>Understanding consensus mechanisms and cryptography</span>
214
+ </li>
215
+ <li class="flex items-start">
216
+ <i class="fas fa-check text-green-500 mt-1 mr-2"></i>
217
+ <span>Building full-stack dApps on Monad testnet</span>
218
+ </li>
219
+ </ul>
220
+ </div>
221
+ </div>
222
+
223
+ <div class="age-content hidden" data-age="15-18">
224
+ <div class="bg-white p-6 rounded-lg shadow-sm">
225
+ <h3 class="text-xl font-semibold mb-4 text-purple-600">Career Pathways</h3>
226
+ <ul class="space-y-3">
227
+ <li class="flex items-start">
228
+ <i class="fas fa-briefcase text-blue-500 mt-1 mr-2"></i>
229
+ <span>Developing portfolio projects for tech careers</span>
230
+ </li>
231
+ <li class="flex items-start">
232
+ <i class="fas fa-laptop-code text-blue-500 mt-1 mr-2"></i>
233
+ <span>Contributing to open-source blockchain projects</span>
234
+ </li>
235
+ <li class="flex items-start">
236
+ <i class="fas fa-hand-holding-usd text-blue-500 mt-1 mr-2"></i>
237
+ <span>Applying for micro-grants to continue education</span>
238
+ </li>
239
+ </ul>
240
+ </div>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ </section>
245
+
246
+ <!-- Implementation Timeline -->
247
+ <section id="timeline" class="py-16 bg-white">
248
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
249
+ <div class="text-center mb-12">
250
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Implementation Timeline</h2>
251
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our phased approach to rolling out MonadMakers across Africa</p>
252
+ </div>
253
+
254
+ <div class="relative pl-12">
255
+ <!-- Timeline line -->
256
+ <div class="absolute left-8 top-0 h-full w-0.5 bg-purple-200"></div>
257
+
258
+ <!-- Timeline items -->
259
+ <div class="relative mb-12 timeline-item">
260
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
261
+ <div class="flex items-center mb-2">
262
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 1</span>
263
+ <span class="ml-4 text-gray-500">Months 1-3</span>
264
+ </div>
265
+ <h3 class="text-xl font-semibold mb-3">Pilot Program Development</h3>
266
+ <ul class="space-y-2 text-gray-600">
267
+ <li class="flex items-start">
268
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
269
+ <span>Curriculum development for all age groups</span>
270
+ </li>
271
+ <li class="flex items-start">
272
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
273
+ <span>Smart contract template creation</span>
274
+ </li>
275
+ <li class="flex items-start">
276
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
277
+ <span>Partner with 3 schools in different regions</span>
278
+ </li>
279
+ </ul>
280
+ </div>
281
+ </div>
282
+
283
+ <div class="relative mb-12 timeline-item">
284
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
285
+ <div class="flex items-center mb-2">
286
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 2</span>
287
+ <span class="ml-4 text-gray-500">Months 4-6</span>
288
+ </div>
289
+ <h3 class="text-xl font-semibold mb-3">Pilot Implementation</h3>
290
+ <ul class="space-y-2 text-gray-600">
291
+ <li class="flex items-start">
292
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
293
+ <span>Train educators and community leaders</span>
294
+ </li>
295
+ <li class="flex items-start">
296
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
297
+ <span>Launch with 150 students across pilot locations</span>
298
+ </li>
299
+ <li class="flex items-start">
300
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
301
+ <span>Develop NFT reward system for community service</span>
302
+ </li>
303
+ </ul>
304
+ </div>
305
+ </div>
306
+
307
+ <div class="relative mb-12 timeline-item">
308
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
309
+ <div class="flex items-center mb-2">
310
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 3</span>
311
+ <span class="ml-4 text-gray-500">Months 7-12</span>
312
+ </div>
313
+ <h3 class="text-xl font-semibold mb-3">Scale and Expand</h3>
314
+ <ul class="space-y-2 text-gray-600">
315
+ <li class="flex items-start">
316
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
317
+ <span>Expand to 10+ schools across 5 countries</span>
318
+ </li>
319
+ <li class="flex items-start">
320
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
321
+ <span>Launch student NFT showcase platform</span>
322
+ </li>
323
+ <li class="flex items-start">
324
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
325
+ <span>Implement micro-grant system for top students</span>
326
+ </li>
327
+ </ul>
328
+ </div>
329
+ </div>
330
+
331
+ <div class="relative timeline-item">
332
+ <div class="bg-gray-50 p-6 rounded-lg shadow-sm">
333
+ <div class="flex items-center mb-2">
334
+ <span class="bg-purple-100 text-purple-800 text-sm font-semibold px-3 py-1 rounded-full">Phase 4</span>
335
+ <span class="ml-4 text-gray-500">Year 2+</span>
336
+ </div>
337
+ <h3 class="text-xl font-semibold mb-3">Sustainable Growth</h3>
338
+ <ul class="space-y-2 text-gray-600">
339
+ <li class="flex items-start">
340
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
341
+ <span>Establish regional blockchain education hubs</span>
342
+ </li>
343
+ <li class="flex items-start">
344
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
345
+ <span>Develop train-the-trainer programs</span>
346
+ </li>
347
+ <li class="flex items-start">
348
+ <i class="fas fa-circle text-xs text-purple-500 mt-2 mr-2"></i>
349
+ <span>Secure ongoing funding through grants and partnerships</span>
350
+ </li>
351
+ </ul>
352
+ </div>
353
+ </div>
354
+ </div>
355
+ </div>
356
+ </section>
357
+
358
+ <!-- Resources Section -->
359
+ <section id="resources" class="py-16 bg-gray-50">
360
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
361
+ <div class="text-center mb-12">
362
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Key Resources</h2>
363
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Everything needed to implement MonadMakers in your community</p>
364
+ </div>
365
+
366
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
367
+ <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
368
+ <div class="text-purple-600 mb-4">
369
+ <i class="fas fa-book-open text-3xl"></i>
370
+ </div>
371
+ <h3 class="text-xl font-semibold mb-3">Lesson Plans</h3>
372
+ <p class="text-gray-600 mb-4">Complete curriculum for all age groups, with activities and assessments.</p>
373
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
374
+ Download Resources
375
+ <i class="fas fa-arrow-right ml-2"></i>
376
+ </a>
377
+ </div>
378
+
379
+ <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
380
+ <div class="text-purple-600 mb-4">
381
+ <i class="fas fa-file-code text-3xl"></i>
382
+ </div>
383
+ <h3 class="text-xl font-semibold mb-3">Smart Contract Templates</h3>
384
+ <p class="text-gray-600 mb-4">Pre-built contracts students can modify for their NFT projects.</p>
385
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
386
+ View on GitHub
387
+ <i class="fas fa-arrow-right ml-2"></i>
388
+ </a>
389
+ </div>
390
+
391
+ <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
392
+ <div class="text-purple-600 mb-4">
393
+ <i class="fas fa-wallet text-3xl"></i>
394
+ </div>
395
+ <h3 class="text-xl font-semibold mb-3">Wallet Setup Guide</h3>
396
+ <p class="text-gray-600 mb-4">Step-by-step instructions for creating Monad testnet wallets.</p>
397
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
398
+ Download Guide
399
+ <i class="fas fa-arrow-right ml-2"></i>
400
+ </a>
401
+ </div>
402
+
403
+ <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
404
+ <div class="text-purple-600 mb-4">
405
+ <i class="fas fa-chalkboard-teacher text-3xl"></i>
406
+ </div>
407
+ <h3 class="text-xl font-semibold mb-3">Educator Training</h3>
408
+ <p class="text-gray-600 mb-4">Online courses for teachers to learn blockchain fundamentals.</p>
409
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
410
+ Start Training
411
+ <i class="fas fa-arrow-right ml-2"></i>
412
+ </a>
413
+ </div>
414
+
415
+ <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
416
+ <div class="text-purple-600 mb-4">
417
+ <i class="fas fa-trophy text-3xl"></i>
418
+ </div>
419
+ <h3 class="text-xl font-semibold mb-3">Reward System</h3>
420
+ <p class="text-gray-600 mb-4">Framework for tracking and rewarding community service with NFTs.</p>
421
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
422
+ Learn More
423
+ <i class="fas fa-arrow-right ml-2"></i>
424
+ </a>
425
+ </div>
426
+
427
+ <div class="bg-white p-6 rounded-lg shadow-sm card-hover transition-all duration-300">
428
+ <div class="text-purple-600 mb-4">
429
+ <i class="fas fa-graduation-cap text-3xl"></i>
430
+ </div>
431
+ <h3 class="text-xl font-semibold mb-3">Micro-Grants Info</h3>
432
+ <p class="text-gray-600 mb-4">How to apply for funding to support student projects.</p>
433
+ <a href="#" class="text-purple-600 font-medium hover:text-purple-800 inline-flex items-center">
434
+ Application Details
435
+ <i class="fas fa-arrow-right ml-2"></i>
436
+ </a>
437
+ </div>
438
+ </div>
439
+ </div>
440
+ </section>
441
+
442
+ <!-- Impact Metrics -->
443
+ <section class="py-16 bg-purple-700 text-white">
444
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
445
+ <div class="text-center mb-12">
446
+ <h2 class="text-3xl font-bold mb-4">Measuring Our Impact</h2>
447
+ <p class="text-xl max-w-3xl mx-auto">Key metrics to evaluate the success of MonadMakers</p>
448
+ </div>
449
+
450
+ <div class="grid md:grid-cols-4 gap-8">
451
+ <div class="text-center">
452
+ <div class="text-4xl font-bold mb-2">1,000+</div>
453
+ <div class="text-lg">Students Trained</div>
454
+ </div>
455
+ <div class="text-center">
456
+ <div class="text-4xl font-bold mb-2">75%</div>
457
+ <div class="text-lg">Completion Rate</div>
458
+ </div>
459
+ <div class="text-center">
460
+ <div class="text-4xl font-bold mb-2">500+</div>
461
+ <div class="text-lg">NFT Projects Created</div>
462
+ </div>
463
+ <div class="text-center">
464
+ <div class="text-4xl font-bold mb-2">30%</div>
465
+ <div class="text-lg">Pursuing Tech Careers</div>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ </section>
470
+
471
+ <!-- Challenges Section -->
472
+ <section class="py-16 bg-white">
473
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
474
+ <div class="text-center mb-12">
475
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Addressing Challenges</h2>
476
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Our approach to overcoming potential obstacles</p>
477
+ </div>
478
+
479
+ <div class="grid md:grid-cols-2 gap-8">
480
+ <div class="bg-gray-50 p-6 rounded-lg">
481
+ <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Limited Internet Access</h3>
482
+ <p class="text-gray-600 mb-4">Many communities have unreliable or expensive internet connections.</p>
483
+ <div class="bg-white p-4 rounded border-l-4 border-red-500">
484
+ <h4 class="font-medium mb-2">Our Solution:</h4>
485
+ <ul class="space-y-2">
486
+ <li class="flex items-start">
487
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
488
+ <span>Offline learning materials and activities</span>
489
+ </li>
490
+ <li class="flex items-start">
491
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
492
+ <span>Local blockchain nodes for school networks</span>
493
+ </li>
494
+ <li class="flex items-start">
495
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
496
+ <span>Data-light applications optimized for mobile</span>
497
+ </li>
498
+ </ul>
499
+ </div>
500
+ </div>
501
+
502
+ <div class="bg-gray-50 p-6 rounded-lg">
503
+ <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Limited Technical Expertise</h3>
504
+ <p class="text-gray-600 mb-4">Many educators lack blockchain experience to teach the material.</p>
505
+ <div class="bg-white p-4 rounded border-l-4 border-red-500">
506
+ <h4 class="font-medium mb-2">Our Solution:</h4>
507
+ <ul class="space-y-2">
508
+ <li class="flex items-start">
509
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
510
+ <span>Comprehensive teacher training program</span>
511
+ </li>
512
+ <li class="flex items-start">
513
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
514
+ <span>Remote support from blockchain experts</span>
515
+ </li>
516
+ <li class="flex items-start">
517
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
518
+ <span>Peer learning networks among educators</span>
519
+ </li>
520
+ </ul>
521
+ </div>
522
+ </div>
523
+
524
+ <div class="bg-gray-50 p-6 rounded-lg">
525
+ <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Device Availability</h3>
526
+ <p class="text-gray-600 mb-4">Students may lack personal computers or smartphones.</p>
527
+ <div class="bg-white p-4 rounded border-l-4 border-red-500">
528
+ <h4 class="font-medium mb-2">Our Solution:</h4>
529
+ <ul class="space-y-2">
530
+ <li class="flex items-start">
531
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
532
+ <span>Shared device labs at partner schools</span>
533
+ </li>
534
+ <li class="flex items-start">
535
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
536
+ <span>Mobile-first curriculum design</span>
537
+ </li>
538
+ <li class="flex items-start">
539
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
540
+ <span>Partnerships for device donations</span>
541
+ </li>
542
+ </ul>
543
+ </div>
544
+ </div>
545
+
546
+ <div class="bg-gray-50 p-6 rounded-lg">
547
+ <h3 class="text-xl font-semibold mb-3 text-red-600">Challenge: Sustainability</h3>
548
+ <p class="text-gray-600 mb-4">Maintaining long-term funding and support.</p>
549
+ <div class="bg-white p-4 rounded border-l-4 border-red-500">
550
+ <h4 class="font-medium mb-2">Our Solution:</h4>
551
+ <ul class="space-y-2">
552
+ <li class="flex items-start">
553
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
554
+ <span>Revenue from NFT marketplace fees</span>
555
+ </li>
556
+ <li class="flex items-start">
557
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
558
+ <span>Developer grants and corporate sponsorships</span>
559
+ </li>
560
+ <li class="flex items-start">
561
+ <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
562
+ <span>Alumni network contributions</span>
563
+ </li>
564
+ </ul>
565
+ </div>
566
+ </div>
567
+ </div>
568
+ </div>
569
+ </section>
570
+
571
+ <!-- Contact Section -->
572
+ <section id="contact" class="py-16 bg-gray-50">
573
+ <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
574
+ <div class="text-center mb-12">
575
+ <h2 class="text-3xl font-bold text-gray-900 mb-4">Get Involved</h2>
576
+ <p class="text-xl text-gray-600 max-w-3xl mx-auto">Join us in bringing blockchain education to African youth</p>
577
+ </div>
578
+
579
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
580
+ <div class="md:flex">
581
+ <div class="md:w-1/2 gradient-bg p-8 text-white">
582
+ <h3 class="text-2xl font-bold mb-4">Become a Partner</h3>
583
+ <p class="mb-6">Whether you're a school, NGO, tech company, or individual, there are many ways to support MonadMakers.</p>
584
+
585
+ <div class="space-y-4">
586
+ <div class="flex items-start">
587
+ <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-full p-2">
588
+ <i class="fas fa-school text-lg"></i>
589
+ </div>
590
+ <div class="ml-3">
591
+ <h4 class="font-semibold">Educational Institutions</h4>
592
+ <p class="text-sm opacity-90">Implement our curriculum in your school</p>
593
+ </div>
594
+ </div>
595
+
596
+ <div class="flex items-start">
597
+ <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-full p-2">
598
+ <i class="fas fa-hand-holding-heart text-lg"></i>
599
+ </div>
600
+ <div class="ml-3">
601
+ <h4 class="font-semibold">NGOs & Community Groups</h4>
602
+ <p class="text-sm opacity-90">Bring MonadMakers to your community</p>
603
+ </div>
604
+ </div>
605
+
606
+ <div class="flex items-start">
607
+ <div class="flex-shrink-0 bg-white bg-opacity-20 rounded-full p-2">
608
+ <i class="fas fa-briefcase text-lg"></i>
609
+ </div>
610
+
611
+ </html>