-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
491 lines (430 loc) · 34 KB
/
Copy pathindex.html
File metadata and controls
491 lines (430 loc) · 34 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> TopRank </title>
<link rel="stylesheet" href="./src/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300;400;700&display=swap" rel="stylesheet">
</head>
<body class="font-oxygen md:text-2xl">
<!-- nav bar -->
<div class="bg-cyan-50">
<nav class="relative container mx-auto p-4 border-l-2 border-r-2">
<!-- flex box -->
<div class="flex items-center justify-between">
<!-- <img src="assets/img/Toprank.svg" alt=""> -->
<div class="flex justify-center md:justify-start">
<span class="bg-heroTeal p-2 text-white rounded-full px-6 baseline font-bold"> toprank </span>
</div>
<!-- nav items -->
<div class="md:flex space-x-6">
<a href="#requirements" class="text-textGrey hover:text-borderGrey"> requirements </a>
<!-- <a href="" class="text-textGrey hover:text-borderGrey"> faqs </a> -->
<a href="#join" class="text-textGrey hover:text-borderGrey"> join </a>
<!-- <a href="" class="text-textGrey hover:text-borderGrey"> blog </a> -->
</div>
</div>
</nav>
<hr>
<div class="container flex flex-col-reverse items-center px-6 mx-auto mt-10 space-y-0 md:flex-row md:space-y-0">
<div class="flex flex-col md:mb-32 md:space-y-12 md:w-1/2 ">
<h1 class="max-w-md text-heroTeal text-4xl font-bold text-center sm:mt-10 sm:pt-10 md:text-7xl md:text-left">
A hideout for programmers.
</h1>
<!-- <div class="flex justify-center md:justify-start">
<span class="bg-ctaGrey p-2 text-white rounded-full px-6 baseline font-bold"> toprank </span>
</div> -->
</div>
<div class="relative md:w-1/2">
<div class="absolute top-0 -left-4 w-72 h-72 bg-cyan-300 rounded-full mix-blend-multiply filter blur-2xl opacity-30 animate-blob">
</div>
<div class="absolute top-0 -right-4 w-72 h-72 bg-yellow-400 rounded-full mix-blend-multiply filter blur-2xl opacity-30 max-w-md:animate-blob animation-delay-2000">
</div>
<div class="absolute -bottom-8 left-20 w-72 h-72 bg-pink-400 rounded-full mix-blend-multiply filter blur-2xl opacity-30 max-w-md:animate-blob animation-delay-4000">
</div>
<img class="relative" src="assets/img/flower.png" alt="flower">
</div>
</div>
<div class="container mx-auto md:text-3xl text-center text-textGrey mb-12">
<div class="container mx-auto p-4">
Our system creates a continuous environment that provides the right mix of freedom and responsibility, support and challenge, necessary for the programmer to significantly improve their craft.
</div>
</div>
<hr>
</div>
<div class="container mx-auto sm:pt-12 ">
<p class="font-bold sm:text-start text-4xl md:text-6xl sm:text-5xl text-ctaGrey p-4 sm:p-0"> ambition. </p>
</div>
<section class="container flex flex-col md:flex-row items-center px-6 mx-auto space-y-0 md:space-y-0">
<div class="md:w-1/2">
<div class="sm:m-6 sm:p-12 mt-4 p-2">
<img src="assets/img/rocket.png" alt="rocket">
</div>
</div>
<div class="flex flex-col mb-32 space-y-6 md:w-1/2 ">
<p class="text-2xl"> We believe opportunity and ambition is everywhere. </p>
<p class="text-base sm:text-2xl pb-6">
What's missing is a conducive environment.
Our ambition is to create the missing
conducive environment that births new
generations of developers solving local
problems in the most innovative ways.
</p>
<!-- <div class="flex justify-center md:justify-start">
<div class="rounded-2xl border px-4 py-2 text-gray border-borderGrey my-6">
<a href="">Learn more
<span><svg class="p-2 inline-block" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="gray" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg></span>
</a>
</div>
</div> -->
</div>
</section>
<hr>
<section>
<div class="border border-borderGrey container mx-auto p-6 rounded-3xl m-6">
<span> <svg class="bg-iconGreen rounded-full p-2 inline-block" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> </span>
<div class="container font-bold text-2xl text-start mx-auto py-4 text-ctaGrey"> A plan for local growth.</div>
<div>
We also believe local businesses (and government) are unable to reach
their maximum capacity because they are technically under-staffed.
As such, our hackers are required to “volunteer” a year of their
professional life at a local business or government agency.
</div>
</div>
</section>
<section id="requirements" class="bg-yellowBg pb-6">
<div class="container mx-auto px-4 sm:px-0">
<h1 class="font-bold text-4xl md:text-6xl sm:text-5xl text-start mx-auto pt-6 text-ctaGrey">
requirements
</h1>
<h1 class="font-bold text-4xl md:text-6xl sm:text-5xl text-start mx-auto text-ctaGrey">
for participation.
</h1>
</div>
<div class="container mx-auto text-start">
<div class="border border-borderGrey container mx-auto p-6 rounded-3xl m-6">
<p>
We're new, without funding, which means that at the moment we're
unable to take care of the unnecessary blockers to ensure that everyone
has an equal opportunity to participate. Accept our sincerest apologies.
We promise to tackle them one after the other as resources become
available to us.
</p>
<div class="container font-bold text-2xl md:text-3xl text-start mx-auto py-6 text-ctaGrey">To enrol in TopRank, you should:</div>
<div>
<span> <svg class="bg-cardOrange rounded-full p-1.5 sm:inline-block sm:mr-6 mr-2" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-globe"><circle cx="12" cy="12" r="10"></circle><line x1="2" y1="12" x2="22" y2="12"></line><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
</svg>
</span>
<span class="pb-2 font-bold"> be a citizen or resident of the Republic of Ghana living in Ghana.</span>
<p class="mt-2">
Apprenticeship will be in office at a Ghanaian company or government agency. We're currently not able to sponsor visa nor help with relocation. Restricting the program to only Ghanaian citizens or residents living in Ghana ensures that we don't have to deal with any of the complex legalities of moving a human being around.
</p>
<br>
</div>
<div>
<span> <svg class="bg-webTeal rounded-full p-1.5 sm:inline-block sm:mr-6 mr-2 mt-2" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-calendar"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg></span>
<span class="pb-2 font-bold"> have a minimum of 1 year programming experience.</span>
<p class="mt-2">
TopRank isn't an intro-to-programming program. No, instead we provide the environment for a programmer (i.e. someone already programming in some capacity) to work on projects that enable them to substantially grow their knowledge and skill. If a participant is new to programming, they'd be severely challenged by the lack of time to grasp popular, must-know ideas of programming and work on a project at the same time.
</p>
<br>
</div>
<div>
<span><svg class="bg-iconGreen rounded-full p-1.5 sm:inline-block sm:mr-6 mr-2 mt-2" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-battery-charging"><path d="M5 18H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h3.19M15 6h2a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-3.19"></path><line x1="23" y1="13" x2="23" y2="11"></line><polyline points="11 6 7 12 13 12 9 18"></polyline></svg> </span>
<span class="pb-2 font-bold"> not be employed, or engaged in any part-time activity.</span>
<p class="mt-2">
TopRank is a full-time program. Participants work on their projects and are expected to participate in all events. Part-time engagement makes it impossible. During in-person batches, participants would be expected to be physically present on campus for the entire day.
</p>
<br>
</div>
<div>
<span> <svg class="bg-cardPurple rounded-full p-1.5 sm:inline-block sm:mr-6 mr-2 mt-2" xmlns="http://www.w3.org/2000/svg" width="44" height="44" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-credit-card"><rect x="1" y="4" width="22" height="16" rx="2" ry="2"></rect><line x1="1" y1="10" x2="23" y2="10"></line></svg> </span>
<span class="pb-2 font-bold"> be financially self-sufficient for the duration of the program.</span>
<p class="mt-2">
We acknowledge that spending 4 months unemployed and relying on their savings could be a privilege only a few can afford. Unfortunately it is necessary, at least in the interim, because we're not funded and so are unable to support our participants financially. In the future, we hope to be able to organize no-strings-attached sponsorships for some participants.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="border border-borderGrey container mx-auto p-6 rounded-3xl m-6">
<!-- <span> <svg class="bg-iconGreen rounded-full p-2 inline-block" xmlns="http://www.w3.org/2000/svg" width="60" height="60" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg> </span> -->
<div class="container font-bold text-2xl text-start mx-auto py-4 text-ctaGrey"> <span class="text-4xl"> 🛫 </span> Admissions.</div>
<div>
Admission is open to Ghanaian citizens and residents only. There's a total of 12 spots available per batch. We run 2 batches per year. We open applications for both batches at the same time. Applicants choose which batch they're applying for. We also keep a waiting list, in case accepted participants drop out before start of program. On rare occasions, we may exceed batch size by one or two.
</div>
<br>
<div>
Per batch, half the spots are dedicated to returning participants. We don't expect a lot of uptake here since we try to encourage our previous participants to return as resident experts for their previous projects. Resident experts rework on the projects, allowing them to draw deeper insights, given the extra responsibility they have to guide newer participants.
</div>
<div class="container font-bold text-2xl text-start mx-auto py-4 text-ctaGrey"> <span class="text-4xl">👨🏾💻</span> Resident Experts.</div>
<div>
Per batch, half the spots are dedicated to returning participants. We don't expect a lot of uptake here since we try to encourage our previous participants to return as resident experts for their previous projects. Resident experts rework on the projects, allowing them to draw deeper insights, given the extra responsibility they have to guide newer participants.
</div>
</div>
</section>
<section id="join" class="container mx-auto">
<div class="container mx-auto sm:pt-12 ">
<p class="font-bold sm:text-start text-4xl md:text-6xl sm:text-5xl text-ctaGrey p-4 sm:p-0"> selection process. </p>
</div>
<section class="text-white grid md:grid-cols-3 sm:my-6 p-4 sm:gap-10 gap-6">
<div class="bg-ctaGrey p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-ctaGrey flex justify-center items-center">
<p>1</p>
</div>
<h1 class="my-6 text-3xl font-bold"> Apply </h1>
<p> The process begins
with an online
application.</p>
</div>
<div class="bg-cardOrange p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-cardOrange flex justify-center items-center">
<p>2</p>
</div>
<h1 class="my-6 text-3xl font-bold"> Interview </h1>
<p> If you are shortlisted,
you will be called
for an interview.
</p>
</div>
<div class="bg-cardTeal p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-cardTeal flex justify-center items-center">
<p>3</p>
</div>
<h1 class="my-6 text-3xl font-bold"> Offer </h1>
<p> You will then enrol
for a batch you
applied for. </p>
</div>
</section>
<div class="text-center">
<p class="p-4">
TopRank is self-driven. During the duration of the program hackers can
work individually, collaboratively, or both on projects that excite them.
There will be some instructional classes and assignments, but not enough
to take away the freedom required to pursue individual ambitions.
</p>
</div>
<div id="apply" class="flex justify-center my-12 pb-12">
<a href="https://docs.google.com/forms/d/e/1FAIpQLScTD1FKdwuHbeSwTlmvg7EUIaBnE1biHakT6XZPKDL8GIW7Sg/viewform?pli=1">
<span class="bg-iconGreen sm:p-4 p-2 px-6 text-3xl text-white rounded-full sm:px-8 sm:pb-6 baseline font-bold"> apply now </span>
</a>
</div>
</section>
<hr>
<section class="container mx-auto">
<div class="container mx-auto sm:pt-12 ">
<p class="font-bold sm:text-start text-4xl md:text-6xl sm:text-5xl text-ctaGrey p-4 sm:p-0"> projects. </p>
</div>
<section class="text-white grid md:grid-cols-3 sm:my-6 p-4 sm:gap-10 gap-6">
<div class="bg-ctaGrey p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-ctaGrey flex justify-center items-center">
<p>1</p>
</div>
<h1 class="mt-6 text-3xl font-bold"> Operating</h1>
<h1 class="mb-6 text-3xl font-bold"> System </h1>
<div>
<svg width="80%" height="100%" viewBox="0 0 182 71" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="52" height="71" fill="white"/>
<rect x="60" width="39" height="71" rx="6" fill="white" fill-opacity="0.77"/>
<rect x="107" width="28" height="71" rx="14" fill="white" fill-opacity="0.58"/>
<rect x="121" width="28" height="71" fill="white" fill-opacity="0.58"/>
<rect x="162" width="20" height="21" rx="10" fill="white" fill-opacity="0.58"/>
<path d="M162 25H176C179.314 25 182 27.6863 182 31V46H162V25Z" fill="white" fill-opacity="0.58"/>
<path d="M162 56C162 52.6863 164.686 50 168 50H182V71H162V56Z" fill="white" fill-opacity="0.58"/>
</svg>
</div>
</div>
<div class="bg-cardBeige p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-textGrey flex justify-center items-center">
<p>2</p>
</div>
<h1 class="mt-6 text-3xl font-bold text-textGrey"> Programming </h1>
<h1 class="mb-6 text-3xl font-bold text-textGrey"> Language </h1>
<div>
<svg width="100%" height="100%" viewBox="0 0 210 69" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;">
<rect x="80" y="2" width="50" height="27" style="fill:none;stroke:black;stroke-width:2px;"/>
<rect x="158" y="2" width="50" height="27" style="fill:none;stroke:black;stroke-width:2px;"/>
<rect x="2" y="2" width="50" height="27" style="fill:none;stroke:black;stroke-width:2px;"/>
<path d="M78.707,15.707C79.098,15.317 79.098,14.683 78.707,14.293L72.343,7.929C71.953,7.538 71.32,7.538 70.929,7.929C70.538,8.319 70.538,8.953 70.929,9.343L76.586,15L70.929,20.657C70.538,21.047 70.538,21.68 70.929,22.071C71.32,22.462 71.953,22.462 72.343,22.071L78.707,15.707ZM51,16L78,16L78,14L51,14L51,16Z" style="fill-rule:nonzero;"/>
<rect x="158" y="46" width="27" height="21" style="fill:none;stroke:black;stroke-width:2px;"/>
<rect x="80" y="49" width="33" height="18" style="fill:none;stroke:black;stroke-width:2px;"/>
<g transform="matrix(1.07002,0.114381,-0.109325,1.02272,-0.182019,-8.87354)">
<path d="M78.232,47.973C78.769,47.845 79.101,47.306 78.973,46.768L76.888,38.013C76.76,37.476 76.221,37.144 75.684,37.272C75.147,37.4 74.815,37.939 74.943,38.476L76.796,46.259L69.013,48.112C68.476,48.24 68.144,48.779 68.272,49.316C68.4,49.853 68.939,50.185 69.476,50.057L78.232,47.973ZM51.476,31.852L77.476,47.852L78.524,46.148L52.524,30.148L51.476,31.852Z" style="fill-rule:nonzero;"/>
</g>
<path d="M156.707,15.707C157.098,15.317 157.098,14.683 156.707,14.293L150.343,7.929C149.953,7.538 149.319,7.538 148.929,7.929C148.538,8.319 148.538,8.953 148.929,9.343L154.586,15L148.929,20.657C148.538,21.047 148.538,21.68 148.929,22.071C149.319,22.462 149.953,22.462 150.343,22.071L156.707,15.707ZM129,16L156,16L156,14L129,14L129,16Z" style="fill-rule:nonzero;"/>
<path d="M171.293,44.707C171.683,45.098 172.317,45.098 172.707,44.707L179.071,38.343C179.462,37.953 179.462,37.32 179.071,36.929C178.681,36.538 178.047,36.538 177.657,36.929L172,42.586L166.343,36.929C165.953,36.538 165.319,36.538 164.929,36.929C164.538,37.32 164.538,37.953 164.929,38.343L171.293,44.707ZM171,28L171,44L173,44L173,28L171,28Z" style="fill-rule:nonzero;"/>
</svg>
</div>
</div>
<div class="bg-cardWebTeal p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-cardWebTeal flex justify-center items-center">
<p>3</p>
</div>
<h1 class="mt-6 text-3xl font-bold"> Web</h1>
<h1 class="mb-6 text-3xl font-bold"> Framework </h1>
<div>
<svg width="70%" height="100%" viewBox="0 0 145 70" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="67" y="2" width="76" height="53" rx="5" stroke="white" stroke-width="4"/>
<line x1="92" y1="67.5" x2="118" y2="67.5" stroke="white" stroke-width="5"/>
<path d="M26 53.1666C39.3469 53.1666 50.1666 42.3468 50.1666 28.9999C50.1666 15.653 39.3469 4.83325 26 4.83325C12.6531 4.83325 1.83331 15.653 1.83331 28.9999C1.83331 42.3468 12.6531 53.1666 26 53.1666Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M1.83331 29H50.1666" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M26 4.83325C32.0447 11.4509 35.48 20.039 35.6666 28.9999C35.48 37.9608 32.0447 46.5489 26 53.1666C19.9552 46.5489 16.52 37.9608 16.3333 28.9999C16.52 20.039 19.9552 11.4509 26 4.83325Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</section>
<section class="text-white grid md:grid-cols-3 sm:my-6 p-4 sm:gap-10 gap-6">
<div class="bg-cardGreen p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-textGreen flex justify-center items-center">
<p>4</p>
</div>
<h1 class="mt-6 text-3xl text-textGreen font-bold"> Garbage</h1>
<h1 class="mb-6 text-3xl text-textGreen font-bold"> Collector </h1>
<div>
<svg width="100%" height="100%" viewBox="0 0 223 72" fill="none" xmlns="http://www.w3.org/2000/svg">
<line x1="30" y1="22" x2="30" y2="53" stroke="#398C11" stroke-width="2"/>
<line x1="60" y1="22" x2="60" y2="53" stroke="#398C11" stroke-width="2"/>
<line x1="89" y1="24" x2="89" y2="52" stroke="#398C11" stroke-width="2"/>
<path d="M112 0L112 64" stroke="#398C11" stroke-width="2"/>
<line x1="138" y1="10.9836" x2="139" y2="71.9836" stroke="#398C11" stroke-width="2"/>
<line x1="162" y1="22" x2="162" y2="52" stroke="#398C11" stroke-width="2"/>
<line x1="138.732" y1="12.2953" x2="112.601" y2="0.916852" stroke="#398C11" stroke-width="2"/>
<line x1="139.048" y1="71.0386" x2="111.717" y2="62.9591" stroke="#398C11" stroke-width="2"/>
<line x1="185" y1="24" x2="185" y2="52" stroke="#398C11" stroke-width="2"/>
<rect x="1" y="23" width="221" height="29" stroke="#3D831C" stroke-width="2"/>
</svg>
</div>
</div>
<div class="bg-cardPurple p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-cardPurple flex justify-center items-center">
<p>5</p>
</div>
<h1 class="mt-6 text-3xl font-bold"> File </h1>
<h1 class="mb-6 text-3xl font-bold"> System </h1>
<div>
<svg width="100%" height="100%" viewBox="0 0 228 83" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="85" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="1" y="53" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="85" y="53" width="56" height="29" stroke="white" stroke-width="2"/>
<rect x="175" y="53" width="52" height="29" stroke="white" stroke-width="2"/>
<line x1="52" y1="66" x2="84" y2="66" stroke="white" stroke-width="2"/>
<line x1="142" y1="66" x2="174" y2="66" stroke="white" stroke-width="2"/>
<line x1="112" y1="31" x2="112" y2="52" stroke="white" stroke-width="2"/>
</svg>
</div>
</div>
<div class="bg-webTeal p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-webTeal flex justify-center items-center">
<p>6</p>
</div>
<h1 class="mt-6 text-3xl font-bold"> Frontend Web</h1>
<h1 class="mb-6 text-3xl font-bold"> Framework </h1>
<div>
<svg width="90%" height="100%" viewBox="0 0 186 75" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="19" width="32" height="54" rx="5" stroke="white" stroke-width="4"/>
<rect x="52" y="2" width="76" height="53" rx="5" stroke="white" stroke-width="4"/>
<line x1="76" y1="72.5" x2="102" y2="72.5" stroke="white" stroke-width="5"/>
<path d="M16 24.5H22" stroke="white" stroke-width="2"/>
<path d="M165 70.1666C175.585 70.1666 184.167 61.5854 184.167 50.9999C184.167 40.4145 175.585 31.8333 165 31.8333C154.415 31.8333 145.833 40.4145 145.833 50.9999C145.833 61.5854 154.415 70.1666 165 70.1666Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M145.833 51H184.167" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M165 31.8333C169.794 37.0818 172.519 43.893 172.667 50.9999C172.519 58.1069 169.794 64.9181 165 70.1666C160.206 64.9181 157.481 58.1069 157.333 50.9999C157.481 43.893 160.206 37.0818 165 31.8333Z" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</div>
</div>
</section>
<section class="text-white grid md:grid-cols-3 sm:my-6 p-4 sm:gap-10 gap-6">
<div class="bg-cardOrange p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-cardOrange flex justify-center items-center">
<p>7</p>
</div>
<h1 class="my-6 text-3xl font-bold"> Database </h1>
<div>
<svg width="100%" height="100%" viewBox="0 0 181 80" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="37" y="50" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="91" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="128" y="50" width="52" height="29" stroke="white" stroke-width="2"/>
<path d="M52.8301 28.0147C52.2858 28.1085 51.9207 28.6258 52.0146 29.1701L53.544 38.0392C53.6379 38.5834 54.1551 38.9485 54.6994 38.8547C55.2436 38.7608 55.6088 38.2435 55.5149 37.6993L54.1554 29.8156L62.039 28.4561C62.5833 28.3623 62.9484 27.845 62.8546 27.3007C62.7607 26.7565 62.2434 26.3914 61.6992 26.4852L52.8301 28.0147ZM82.9882 48.9428L53.5767 28.1831L52.4234 29.8171L81.8349 50.5768L82.9882 48.9428Z" fill="white"/>
<path d="M90.7071 13.7071C91.0976 13.3166 91.0976 12.6834 90.7071 12.2929L84.3431 5.92893C83.9526 5.53841 83.3195 5.53841 82.9289 5.92893C82.5384 6.31946 82.5384 6.95262 82.9289 7.34315L88.5858 13L82.9289 18.6569C82.5384 19.0474 82.5384 19.6805 82.9289 20.0711C83.3195 20.4616 83.9526 20.4616 84.3431 20.0711L90.7071 13.7071ZM54 14L90 14V12L54 12V14Z" fill="white"/>
<path d="M126.907 51.6344C127.454 51.5571 127.834 51.0512 127.757 50.5043L126.498 41.5928C126.421 41.046 125.915 40.6653 125.368 40.7426C124.821 40.8198 124.44 41.3258 124.518 41.8726L125.637 49.794L117.715 50.9132C117.169 50.9904 116.788 51.4964 116.865 52.0432C116.942 52.5901 117.448 52.9708 117.995 52.8935L126.907 51.6344ZM97.3988 29.7991L126.166 51.4433L127.368 49.8452L98.6012 28.2009L97.3988 29.7991Z" fill="white"/>
</svg>
</div>
</div>
<div class="bg-typeGreen p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-typeGreen flex justify-center items-center">
<p>8</p>
</div>
<h1 class="my-6 text-3xl font-bold"> Type Checker </h1>
<div>
<svg width="100%" height="100%" viewBox="0 0 210 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="79" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="157" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="1" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<path d="M78.7071 15.7071C79.0976 15.3166 79.0976 14.6834 78.7071 14.2929L72.3431 7.92893C71.9526 7.53841 71.3195 7.53841 70.9289 7.92893C70.5384 8.31946 70.5384 8.95262 70.9289 9.34315L76.5858 15L70.9289 20.6569C70.5384 21.0474 70.5384 21.6805 70.9289 22.0711C71.3195 22.4616 71.9526 22.4616 72.3431 22.0711L78.7071 15.7071ZM51 16H78V14H51V16Z" fill="white"/>
<path d="M156.707 15.7071C157.098 15.3166 157.098 14.6834 156.707 14.2929L150.343 7.92893C149.953 7.53841 149.319 7.53841 148.929 7.92893C148.538 8.31946 148.538 8.95262 148.929 9.34315L154.586 15L148.929 20.6569C148.538 21.0474 148.538 21.6805 148.929 22.0711C149.319 22.4616 149.953 22.4616 150.343 22.0711L156.707 15.7071ZM129 16H156V14H129V16Z" fill="white"/>
</svg>
<br>
<svg width="100%" height="100%" viewBox="0 0 210 31" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect x="79" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="157" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<rect x="1" y="1" width="52" height="29" stroke="white" stroke-width="2"/>
<path d="M78.7071 15.7071C79.0976 15.3166 79.0976 14.6834 78.7071 14.2929L72.3431 7.92893C71.9526 7.53841 71.3195 7.53841 70.9289 7.92893C70.5384 8.31946 70.5384 8.95262 70.9289 9.34315L76.5858 15L70.9289 20.6569C70.5384 21.0474 70.5384 21.6805 70.9289 22.0711C71.3195 22.4616 71.9526 22.4616 72.3431 22.0711L78.7071 15.7071ZM51 16H78V14H51V16Z" fill="white"/>
<path d="M156.707 15.7071C157.098 15.3166 157.098 14.6834 156.707 14.2929L150.343 7.92893C149.953 7.53841 149.319 7.53841 148.929 7.92893C148.538 8.31946 148.538 8.95262 148.929 9.34315L154.586 15L148.929 20.6569C148.538 21.0474 148.538 21.6805 148.929 22.0711C149.319 22.4616 149.953 22.4616 150.343 22.0711L156.707 15.7071ZM129 16H156V14H129V16Z" fill="white"/>
</svg>
</div>
</div>
<div class="bg-ctaGrey p-6 rounded-3xl">
<div class="w-10 h-10 font-bold rounded-full bg-white text-ctaGrey flex justify-center items-center">
<p>9</p>
</div>
<h1 class="my-6 text-3xl font-bold"> + others </h1>
<img width="80%" height="80%" src="assets/icons/others.svg" alt="svg icon showing other projects">
<div>
</div>
</div>
</section>
<!-- <h1 class="font-bold text-4xl text-start mx-auto pt-12 text-ctaGrey my-4" > partners. </h1> -->
</section>
<!-- <hr>
<section class="container mx-auto p-12">
</section>
<hr>
<br> -->
<section class="bg-heroTeal sm:py-12 py-4">
<section class="container mx-auto grid md:grid-cols-3 sm:my-6 p-4 sm:gap-10 gap-6">
<div>
<h1 class="font-bold text-2xl sm:py-12 py-4"> about. </h1>
<p class="text-white"> TopRank is powered by
DevCongress, a growing
developer community
with over 5300 developers,
mostly from Ghana. </p>
<br/>
<a href="http://slack.devcongress.org"> <span class="border-pink bg-devCongressPink rounded-xl text-white p-2 px-4 my-4"> Join our Slack </span></a>
</div>
<div>
<h1 class="font-bold text-2xl sm:py-12 py-4"> partners. </h1>
<p class="text-white"> If you/your company wants
to be a partner, please write to us
at toprank@devcongress.org </p>
</div>
<div>
<h1 class="font-bold text-2xl sm:py-12 py-4"> contact. </h1>
<div class="text-white">
<p><a href="mailto:toprank@devcongress.org">mail </a> </p>
<p><a href="https://twitter.com/devcongress"> twitter</a></p>
<p><a href="https://github.com/devcongress"> github</a></p>
<p><a href="https://facebook.com/devcongress"> facebook </a></p>
<p><a href="https://github.com/orgs/devcongress/teams/toprank-members"> toprank members</a></p>
</div>
</div>
</section>
</section>
</body>
</html>