-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
503 lines (475 loc) · 40.5 KB
/
index.html
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
492
493
494
495
496
497
498
499
500
501
502
503
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- HTML Meta Tags -->
<meta name="description" content="We're a team of students from the European School of Luxembourg II, take part in the F1 in Schools Project.">
<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://icarus-team.com/">
<meta property="og:type" content="website">
<meta property="og:title" content="Icarus Team">
<meta property="og:description" content="We're a team of students from the European School of Luxembourg II, take part in the F1 in Schools Project.">
<meta property="og:image" content="https://opengraph.b-cdn.net/production/documents/a633b21c-b360-4ada-96e4-439f4d783a45.png?token=ksh4AaA3BqO1SJx02w4YNniTzEiKuFFSoTxMb0t4UhA&height=718&width=1200&expires=33245999732">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="icarus-team.com">
<meta property="twitter:url" content="https://icarus-team.com/">
<meta name="twitter:title" content="Icarus Team">
<meta name="twitter:description" content="We're a team of students from the European School of Luxembourg II, take part in the F1 in Schools Project.">
<meta name="twitter:image" content="https://opengraph.b-cdn.net/production/documents/a633b21c-b360-4ada-96e4-439f4d783a45.png?token=ksh4AaA3BqO1SJx02w4YNniTzEiKuFFSoTxMb0t4UhA&height=718&width=1200&expires=33245999732">
<!-- Meta Tags Generated via https://www.opengraph.xyz -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/css/build.css">
<title>Icarus | Home</title>
<link rel="icon" type="image/x-icon" href="/assets/favicon_rounded.png">
</head>
<body onload="progressBar()">
<div class="max-w-6xl mx-auto px-4 py-2">
<div class="flex justify-between mb-1">
<span class="text-base font-medium text-icarus-red">Progress towards World Finals</span>
<span class="text-base font-medium text-icarus-red"> <span id="currentAmout" class="font-bold">700</span> <span class="">/ 30,000 €</span></span>
</div>
<div class="w-full rounded-full bg-gray-700">
<div class="bg-icarus-red text-base font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" id="progress" style="width: 2.3%"> 2.3%</div>
</div>
</div>
<div id="nav-bar" class="max-w-5xl mx-auto">
<nav class="flex items-center justify-between">
<a href="#home" class="py-2 w-fit text-center"><img src="/assets/logo.webp" width="1414" height="976" alt="icarus logo" class="w-16 sm:w-28 aspect-auto"></a>
<div class="flex gap-0 items-center">
<div id="menuBtn" class="cursor-pointer">
<svg class="w-6 mr-4 sm:w-10 aspect-square md:hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path d="M4 18L20 18" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M4 12L20 12" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
<path d="M4 6L20 6" stroke="#000000" stroke-width="2" stroke-linecap="round"/>
</svg>
<div id="menu" class="hidden gap-0 absolute z-20 top-0 right-0 w-full h-full bg-black-1/2 md:hidden">
<div class="flex flex-col w-max px-6 py-2 rounded bg-slate-50 absolute right-0 top-0">
<a href="#f1-in-schools" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">F1 in Schools</a>
<a href="#about-us" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">About Us</a>
<a href="#support-us" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">Support Us</a>
<a href="#sponsors" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">Our Sponsors</a>
<a href="#our-team" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">Our Team</a>
<a href="#work-with-us" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">Work With Us</a>
<a href="#contact-us" class="py-2 text-gray-700 hover:bg-gray-100 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-32 text-md text-center">Contact</a>
<a href="/fr/" class="flex justify-center items-center py-2 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-full text-md text-center lg:text-lg"><img src="/assets/fr.svg" class="lg:h-7 rounded-lg w-8 h-6 lg:w-10"></a>
</div>
</div>
<div class="hidden md:flex md:gap-2 lg:gap-4">
<a href="#f1-in-schools" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">F1 in Schools</a>
<a href="#about-us" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">About Us</a>
<a href="#support-us" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">Support Us</a>
<a href="#sponsors" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">Our Sponsors</a>
<a href="#our-team" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">Our Team</a>
<a href="#work-with-us" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">Work With Us</a>
<a href="#contact-us" class="py-2 px-1 text-gray-700 rounded-full hover:underline hover:font-semibold hover:text-icarus-red text-md text-center lg:text-lg">Contact</a>
<a href="/fr/" class="py-2 px-1 rounded-full hover:underline hover:font-semibold hover:text-icarus-red w-16 text-md text-center lg:text-lg lg:w-16"><img src="/assets/fr.svg" class="lg:h-7 rounded-lg w-8 h-6 lg:w-10"></a>
</div>
</div>
</nav>
</div>
<div id="home" class="relative">
<img src="/assets/event_pictures/sr_team.webp" fetchpriority="high" width="3045" height="1821" alt="team photo" class="brightness-50 z-0">`
<div class="absolute top-5 left-1/2 transform -translate-x-1/2 sm:top-1/2 sm:-translate-y-1/2 text-white p-2 rounded text-center z-10">
<h1 class="uppercase text-3xl text-bold md:text-5xl lg:text-7xl font-bold font-DelaGothic">Icarus</h1>
<p class="text-center italic text-gray-300 text-xs md:text-sm lg:text-md">Official <a href="#f1-in-schools" class="underline hover:text-icarus-red">F1 in Schools</a>™ team</p>
<br class="my-1 mx-0 block">
<p class="text-md md:text-lg lg:text-2xl w-64 lg:w-96">Proud winners of the <span class="font-bold">Judges' Favorite</span> and <span class="font-bold">Regional T1 Top Team</span> Awards</p>
</div>
</div>
<div id="f1-in-schools" class="max-w-5xl mx-auto p-4 text-justify">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-center font-bold">F1 in Schools</h1>
<p class="text-sm text-gray-500 italic text-center lg:text-md">What is it? </p>
<br>
<div class="flex flex-wrap gap-7">
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/2018_wc.webp" height="1667" width="2500" loading="lazy" alt="Leap Austalia - 2018 World Championship" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >Leap Australia - 2018 World Championship</p>
</div>
</div>
</div>
<div class="text-xl w-fit flex-1">
<p class="text-sm md:text-lg">
F1 in Schools is an international educational program that encourages <span class="text-icarus-red font-bold">students</span> to learn about science, technology, engineering, and mathematics (<span class=" font-bold text-icarus-red">STEM</span>) subjects through designing, building, and racing <span class=" font-bold text-icarus-red">miniature Formula One cars</span>. The program promotes hands-on learning and helps students develop important skills such as teamwork, problem-solving, and project management. By participating in F1 in Schools, students have the opportunity to showcase their creativity, work with <span class=" font-bold text-icarus-red">cutting-edge technology</span>, and potentially pursue careers in STEM fields. This program is open to students of all ages and is a fun and engaging way to learn about STEM subjects and develop valuable life skills.
</p>
<br>
<a href="https://www.f1inschools.com/" target="_blank" class="font-light text-sm md:text-lg lg:text-xl py-[6px] px-3 border-solid border-icarus-red border-2 rounded hover:bg-icarus-red hover:text-white hover:underline tracking-wide">Learn more</a>
</div>
</div>
<br><br>
<div class="flex justify-between">
<div class="text-center max-w-36 lg:max-w-60">
<h3 class="text-icarus-red font-bold text-3xl text-bold md:text-4xl lg:text-5xl"><span id="countries">44</span></h3>
<p class="text-black text-sm md:text-lg" >
<span class="font-bold ">countries</span> are actively involved.
</p>
</div>
<div class="text-center max-w-36 lg:max-w-60">
<h3 class="text-icarus-red font-bold text-3xl text-bold md:text-4xl lg:text-5xl"><span id="schools1">26</span>,<span id="schools2">000</span></h3>
<p class="text-black text-sm md:text-lg">
<span class=" font-bold ">schools</span> participate in the challenge.
</p>
</div>
<div class="text-center max-w-36 lg:max-w-60">
<h3 class="text-icarus-red font-bold text-3xl text-bold md:text-4xl lg:text-5xl" ><span id="students1">2</span>,<span id="students2">000</span>,<span id="students3">000</span></h3>
<p class="text-black text-sm md:text-lg" >
<span class=" font-bold ">students</span> compete for the 1st place.
</p>
</div>
</div>
</div>
<br class="my-1 mx-0 block">
<div id="about-us" class="max-w-5xl mx-auto p-4">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-center font-bold">About Us</h1>
<div class="text-center italic text-gray-500">
<img src="/assets/open_q.svg" width="800" height="800" alt="opening quote" class="w-4 inline-block text-sm md:text-md">
Without ambition one starts nothing. Without work one finishes nothing. The prize will not be sent to you. <span class="underline">You</span> have to win it.
<img src="/assets/close_q.svg" width="800" height="800" alt="closing quote" class="w-4 inline-block">
<br>
- Ralph Waldo Emerson
</div>
<br>
<div class="text-justify">
<div class="flex flex-wrap gap-7">
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/event_pictures/both_trophies.webp" height="1235" width="1093" loading="lazy" alt="photo of our trophies" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >Our trophies</p>
</div>
</div>
</div>
<div class="text-xl w-fit flex-1 ">
<h2 class="text-xl md:text-2xl font-semibold lg:text-3xl">Who are we?</h2>
<br>
<p class="text-sm md:text-lg">We are Team Icarus, a <span class="text-icarus-red font-bold">Luxembourgish</span> F1 in Schools team that was established in October 2022. Our team is dedicated to constantly improving all aspects, including our car design, communication, and presentation skills. We have participated in several events and have received two awards: the <span class="text-icarus-red font-bold"> ‘Judges’ Favorite’</span> award, and the <span class="text-icarus-red font-bold">‘Regional T1 Top Team’</span> award, for our simultaneously performant and appealing race car. </p>
</div>
</div>
<br>
<div class="flex flex-wrap gap-7">
<div class="text-xl w-fit flex-1">
<h2 class="text-xl font-semibold lg:text-3xl">Our first event</h2>
<br>
<p class="text-sm md:text-lg">Our first race was in December of 2022, where we faced challenging opposition at Luxembourg’s highest level of competition. Despite being new to the project, we were winners of the ‘Judges’ Favorite’ award, which was an immense and unprecedented success given our inexperience, lack of resources, and time pressure. Such a performance has <span class="text-icarus-red font-bold">set our standards high</span> and has been a source of motivation and <span class="text-icarus-red font-bold">ambition</span> for us to strive for excellence today. </p>
</div>
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/event_pictures/participants.webp" width="812" height="612" loading="lazy" alt="group picture of all participants in the December's event" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >December's event</p>
</div>
</div>
</div>
</div>
<br>
<div class="flex flex-wrap gap-7">
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/event_pictures/new_car.webp" width="2016" height="1134" loading="lazy" alt="photo of our car" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >Our newest car design</p>
</div>
</div>
</div>
<div class="text-xl w-fit flex-1">
<h2 class="text-xl font-semibold lg:text-3xl">June 2023</h2>
<br>
<p class="text-sm md:text-lg">Recently, we have recruited <span class="text-icarus-red font-bold">three new members</span> who have immeasurably boosted the <span class="text-icarus-red font-bold"><span class="text-icarus-red font-bold"></span></span>, and spirit. Competing at our first event all together in June of 2023, Icarus were declared winners, and we were awarded the ‘Regional T1 Top Team’ for outperforming the competition since preparation. </p>
</div>
</div>
<br>
<div class="flex flex-wrap gap-7">
<div class="text-xl w-fit flex-1">
<h2 class="text-xl font-semibold lg:text-3xl">Showrun September 2023</h2>
<br>
<p class="text-sm md:text-lg">In September of 2023, we participated in ISL’s F1 in Schools ‘Show Run’, where we presented our pit display, team, and car to potential competitors in this worldwide competition. This event provided invaluable experience to our team, strengthening bonds and communications between members, as well as developing <span class="text-icarus-red font-bold">relationships with other teams.</span> </p>
<br class="my-1 mx-0 block">
<p class="text-sm md:text-lg">Winning the greatest award at national level has driven us to push our limits – We are now dedicated to qualifying for the <span class="text-icarus-red font-bold">2024 World Finals</span>, where we hope to represent Luxembourg on the international stage. </p>
</div>
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/event_pictures/sr_pit_display_2.webp" width="4032" height="3024" loading="lazy" alt="picture of our pit display in September 2023" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >Our pit display at September's event</p>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
<div id="support-us" class="relative">
<img loading="lazy" src="/assets/event_pictures/sr_team_st.webp" width="4032" height="2621" alt="photo of the team testing at the smoke tunnel" class="w-full brightness-[35%]">
<div class="absolute top-5 sm:top-1/2 left-1/2 transform -translate-x-1/2 sm:-translate-y-1/2 text-white w-full p-2 rounded">
<h1 class="uppercase text-3xl md:text-5xl lg:text-7xl text-bold font-bold text-center">Support Us</h1>
<br class="my-1 mx-0 block lg:my-4">
<p class="text-md md:text-lg lg:text-2xl text-center">We have started a GoFundMe page, where you can help us achieve our goals!</p>
<p class="text-md md:text-lg lg:text-2xl text-center">Are you a company? <a href="#work-with-us" class="underline hover:text-icarus-red">Work with us!</a></p>
<br class="my-2 mx-0 block lg:my-6">
<p class="text-center">
<a href="https://gofund.me/a9f4c52e" class="font-light text-sm md:text-lg lg:text-xl py-[6px] px-3 border-solid border-icarus-red border-2 rounded hover:bg-icarus-red hover:text-white hover:underline tracking-wide">GoFundMe</a>
</p>
</div>
</div>
<br>
<div id="sponsors" class="max-w-5xl mx-auto p-4">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-center font-bold">Our Sponsors</h1>
<p class="text-sm text-gray-500 italic text-center lg:text-md">We are immensely thankful to our sponsors and their contributions to this project! Without them, we would not be where we are!</p>
<br>
<div class="flex justify-evenly flex-wrap items-center">
<div>
<a href="https://www.apeeel2.lu/" target="_blank">
<img src="/assets/sponsor_logos/apeeel.png" loading="lazy" alt="apeeel logo" class="rounded lg:max-w-72 max-w-36 md:max-w-48">
</a>
</div>
<!-- <div>
<a href="https://www.myhr.lu/" target="_blank">
<img src="/assets/sponsor_logos/myhr-simple.png" loading="lazy" alt="myHR logo" class="rounded lg:max-w-72 max-w-36 md:max-w-48 bg-[#1976d2] p-1.5">
</a>
</div> -->
</div>
<br>
<p class="text-center text-sm md:text-base">Want your logo here? Get in <a href="#contact" class="underline hover:text-icarus-red">contact with us</a> and promote your brand!</p>
</div>
<br>
<div id="our-team" class="max-w-5xl mx-auto">
<h1 class="text-3xl md:text-4xl text-black text-center font-bold">Our Team</h1>
<p class="text-sm text-gray-500 italic text-center lg:text-md">Let us introduce ourselves</p>
<br>
<div class="flex flex-wrap justify-evenly">
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/celia.webp" width="2692" height="2692" alt="team leader Celia" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Celia</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Team Manager</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg"> Celia is the founder and leader of Icarus. At the forefront of our team, Celia undertakes numerous tasks across all fields, ranging from administration to car design. </p>
</div>
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/nikos.webp" width="194" height="194" alt="designer engineering Nikos" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Nikos</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Design Engineer</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg"> Nikos is responsible for combining the performance and design of our car, relentlessly working on every detail in search of the greatest competitive edge. </p>
</div>
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/lukas.webp" width="940" height="940" alt=" IT & designer Lukas" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Lukas</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">IT & Designer</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg"> Lukas manages our online presence. Maintaining our website and responsible for the team’s online collaboration, Lukas invaluably ties the entire team together. </p>
</div>
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/jan.webp" width="192" height="192" alt="Graphical designer Jan" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center ">Jan</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Graphical Designer</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg">Jan’s creative mind not only provides us with our logo and pit display but has also been a source of significant improvement in our overall presentation. </p>
</div>
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/rohan.webp" width="1824" height="1824" alt="finance maanger Rohan" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Rohan</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Finance Manager</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg"> Rohan, responsible for the team’s external communication, simultaneously looks after the team’s funds, overseeing team decisions from a financial perspective. </p>
</div>
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/romeo.webp" width="203" height="203" alt="marketing manager Romeo" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Romeo</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Marketing Manager</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg"> Romeo is in charge of our team’s marketing strategies and securing sponsorship deals for our team. In parallel, he adds to all administrative tasks, working particularly closely with Rohan. </p>
</div>
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/cheilas.webp" width="157" height="157" alt="team supervisor Mr. Cheilas" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Mr. Cheilas</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Supervisor</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg"> Mr. Cheilas, our team supervisor, ensures the cohesion through the provision of an experienced and knowledgeable perspective on all decisions. </p>
</div>
</div>
</div>
<br>
<div id="work-with-us" class="max-w-5xl mx-auto px-4 text-center ">
<h1 class="text-3xl md:text-4xl lg:text-5xl text-center font-bold">Work with us</h1>
<p class="text-sm text-gray-500 italic text-center lg:text-md">Are you a comapny trying to increase its visibility? </p>
<br>
<div class="text-justify">
<div class="flex flex-wrap gap-7">
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/event_pictures/bake_sale.webp" height="5355" width="4284" loading="lazy" alt="our table at the bake sale in March 2024" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >Bake Sale in March 2024</p>
</div>
</div>
</div>
<div class="text-xl w-fit flex-1 ">
<h2 class="text-xl md:text-2xl font-semibold lg:text-3xl">Sponsor Us</h2>
<br>
<p class="text-sm md:text-lg">Through a sponsorship, we are seeking in-kind or <span class="text-icarus-red font-bold">financial contribution</span>. We believe in the <span class="text-icarus-red font-bold">hospitable and professional treatment</span> of all sponsors. Our ability to display our sponsors across social media, local outreach events, our website, and large competitions widens the target demographic to all ages, and a variety of educated audiences in the STEM community all across the globe.
<br>
The sponsorship funds will be meticulously allocated to cover essential aspects such as <span class="text-icarus-red font-bold">travel</span>, <span class="text-icarus-red font-bold">accomodation</span>, and meals for events, <span class="text-icarus-red font-bold">competition entry fees</span>, the engineering and development of the car, as well as the creation of an engaging pit display. Additionally, a portion will be dedicated to <span class="text-icarus-red font-bold">branding</span> efforts to ensure both the team and our sponsors receive maximum exposure throughout the competition.
</p>
</div>
</div>
</div>
<br>
<div class="text-justify">
<div class="flex flex-wrap gap-7">
<div class="text-xl w-fit flex-1 ">
<h2 class="text-xl md:text-2xl font-semibold lg:text-3xl">What are the benefits?</h2>
<br>
<p class="text-sm md:text-lg">
Sponsoring an F1 in Schools team not only showcases your brand's <span class="text-icarus-red font-bold">commitment to education and innovation</span> but also offers a unique promotional strategy outlined in our sponsorship table. This partnership aligns your company with the thrill of Formula 1, subtly enhancing your brand image as innovative and supportive. The sponsorship table ensures your brand gains <span class="text-icarus-red font-bold">global exposure</span> and connects with future talents in a way no other platform can match. It's a strategic move for brands aiming to stand out and make a meaningful impact in youth and educational development.
</p>
</div>
<div>
<div class="relative group max-w-[90vw] mx-auto md:max-w-md">
<img src="/assets/event_pictures/showrun_table.webp" height="3629" width="4839" loading="lazy" alt="team discussion during the showrun in september 2023" class="max-w-[90vw] md:max-w-md flex-1 rounded group-hover:brightness-50">
<div class="absolute hidden text-white bottom-0 group-hover:block group-hover:bg-icarus-red-1/2 w-full rounded bg-opacity-50">
<p class="text-md md:text-lg text-center" >Showrun September 2023</p>
</div>
</div>
</div>
</div>
</div>
<br>
<div class="flex justify-center">
<table class="text-white border-2 border-white">
<caption class="text-black text-xl md:text-3xl text-center font-bold">Icarus Sponsorship Tiers <p class="text-sm text-gray-500 italic text-center lg:text-md font-normal">We are open to negotiations about any other forms of promotion or markerting that you may think of!</p></caption>
<tr class="border-2 border-white">
<th class=" bg-blue-950 text-sm md:text-base lg:text-lg">Advantages</th>
<th class="py-1.5 px-0.5 border-2 border-white min-w-[70px] md:min-w-28 lg:min-w-40 text-sm md:text-base lg:text-lg bg-icarus-red ">Elite <br> <span class="text-xs md:text-sm font-normal py-0 my-0">3,500€+</span></th>
<th class="py-1.5 px-0.5 border-2 border-white min-w-[70px] md:min-w-28 lg:min-w-40 text-sm md:text-base lg:text-lg bg-amber-600 ">Gold <br> <span class="text-xs md:text-sm font-normal py-0 my-0">2,500€+</span></th>
<th class="py-1.5 px-0.5 border-2 border-white min-w-[70px] md:min-w-28 lg:min-w-40 text-sm md:text-base lg:text-lg bg-zinc-700 ">Silver <br> <span class="text-xs md:text-sm font-normal py-0 my-0">1,500€+</span></th>
<th class="py-1.5 px-0.5 border-2 border-white min-w-[70px] md:min-w-28 lg:min-w-40 text-sm md:text-base lg:text-lg bg-yellow-800 ">Bronze <br> <span class="text-xs md:text-sm font-normal py-0 my-0">500€+</span></th>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Certificate of Appreciation</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-zinc-500 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-yellow-600 text-sm lg:text-lg text-center">✓</td>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Recognition on Social Media</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-zinc-500 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-yellow-600 text-sm lg:text-lg text-center">✓</td>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Logo on Website</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-zinc-500 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-yellow-600 text-sm lg:text-lg text-center">✓</td>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Logo in Portfolios</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-zinc-500 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-yellow-600 text-sm lg:text-lg text-center">✓</td>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Logo in Pit Display</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-zinc-500 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-yellow-600 "></td>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Logo on Uniform</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-zinc-500 "></td>
<td class="border-2 border-whte bg-yellow-600 "></td>
</tr>
<tr>
<td class="border-2 border-whte bg-blue-950 text-sm md:text-base md:font-semibold p-2 max-w-44 text-center">Logo on Car</td>
<td class="border-2 border-whte bg-red-600 text-sm lg:text-lg text-center">✓</td>
<td class="border-2 border-whte bg-amber-400"></td>
<td class="border-2 border-whte bg-zinc-500 "></td>
<td class="border-2 border-whte bg-yellow-600"></td>
</tr>
</table>
</div>
<div class="text-sm">
Interested in enhancing your company's profile or ready to make a difference? <a href="mailto:teamicarus@gmx.com?subject=Partnership%20Inquiry&body=Dear%20Icarus%2C%0A%0AI%20hope%20this%20message%20finds%20you%20well.%20I%20am%20%5Btitle%5D%20%5Bname%5D%20from%20%5Byour%20company%20name%5D%2C%20and%20we%20are%20very%20interested%20in%20exploring%20partnership%20opportunities%20with%20you.%20Specifically%2C%20we%20are%20looking%20at%20the%20%5Btier%20name%5D%20sponsorship%20tier.%20Could%20you%20please%20provide%20us%20with%20more%20detailed%20information%20about%20what%20this%20entails%3F%0A%0AThank%20you%20for%20considering%20our%20inquiry.%20We%20look%20forward%20to%20the%20possibility%20of%20working%20together.%0A%0AWarm%20regards%2C%0A%0A%5Btitle%5D%20%5Bname%5D%0A%5Bcompany%5D" class="underline hover:text-icarus-red hover:font-bold">Reach out to us</a> for more information.
</div>
</div>
<br>
<br class="my-1 mx-0 block">
<div id="contact-us" class="relative">
<img loading="lazy" src="/assets/event_pictures/racing.webp" width="811" height="420" alt="our team racing our car in December 2023" class="w-full brightness-[35%]">
<div class="absolute top-5 sm:top-1/2 left-1/2 transform -translate-x-1/2 sm:-translate-y-1/2 text-white w-full p-2 rounded">
<h1 class="uppercase text-3xl md:text-5xl lg:text-7xl text-bold font-bold text-center">Contact Us</h1>
<p class="text-sm md:text-md lg:text-xl text-center">Have any questions or want to know more?</p>
<br class="my-1 mx-0 block lg:my-4">
<p class="text-md md:text-lg lg:text-2xl text-center">Stay updated and follow us on our <a href="https://www.instagram.com/icarusluxembourg/" class="underline hover:text-icarus-red">Instagram</a></p>
<p class="text-md md:text-lg lg:text-2xl text-center">Or get in touch us with us? Email us!</p>
<br class="my-3 mx-0 block">
<p class="text-center">
<a href="https://www.instagram.com/icarusluxembourg/" taget="_blank" class="font-light text-sm md:text-lg lg:text-xl py-[6px] px-3 border-solid border-icarus-red border-2 rounded hover:bg-icarus-red hover:text-white hover:underline tracking-wide mr-2 md:mr-4 lg:mr-8">Instragram</a>
<a href="mailto:teamicarus@gmx.com" target="_blank" class="font-light text-sm md:text-lg lg:text-xl py-[6px] px-3 border-solid border-icarus-red border-2 rounded hover:bg-icarus-red hover:text-white hover:underline tracking-wide">Email</a>
</p>
</div>
</div>
<footer id="footer" class="bg-black text-white text-center text-sm">
<br>
<p>Email: <a href="mailto:teamicarus@gmx.com" class="underline hover:text-icarus-red">teamicarus@gmx.com</a></p>
<br class="my-1 mx-0 block">
<p>@2024 by Icarus </p>
</footer>
<script>
const menuBtn = document.getElementById('menuBtn');
const menu = document.getElementById('menu');
menuBtn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
<script>
const progressBar = () => {
const totalMoney = 1700;
const currentAmout = document.getElementById("currentAmout");
currentAmout.innerHTML = totalMoney;
const progress = document.getElementById("progress");
progress.innerHTML = Math.round(totalMoney / 30000 * 1000)/10 + "%";
progress.style.width = Math.round(totalMoney / 30000 * 100) + "%";
}
function delay(time) {
return new Promise(resolve => setTimeout(resolve, time));
}
const counter = async (id) => {
const element = document.getElementById(id);
let max = element.innerText
if (max === "000") {
var inc = Math.floor(1000/75)
} else {
var inc = max/75
}
for (let i = 0; i < 75; i++) {
element.innerText = Math.round(i * inc)
await delay(2)
}
element.innerText = max
}
const f1_counters = () => {
let arr = ["countries","schools1","schools2","students1","students2","students3"]
arr.forEach(element => {
counter(element)
});
}
</script>
</body>
</html>