-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
512 lines (483 loc) · 39.4 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
504
505
506
507
508
509
510
511
512
<!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 STEM Racing 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 STEM Racing 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 STEM Racing 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 -->
<link rel="preload" as="image" href="/assets/edited/team_photo1_2.webp" media="(max-width: 648px)">
<link rel="preload" as="image" href="/assets/edited/team_photo9_16.webp" media="(min-width: 649px) and (max-width: 768px)">
<link rel="preload" as="image" href="/assets/edited/team_photo4_5.webp" media="(min-width: 769px) and (max-width: 1023px)">
<link rel="preload" as="image" href="/assets/edited/team_photo4_3.webp" media="(min-width: 1024px)">
<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 class="overflow-x-hidden">
<nav class="bg-transparent fixed w-full z-20 top-0 start-0" id="navbar">
<div class="max-w-6xl mx-auto">
<div class="flex flex-wrap items-start md:items-center justify-between mx-auto p-3">
<a href="#home" class="space-x-3 rtl:space-x-reverse">
<img src="/assets/logo.webp" class="h-8 md:h-12" alt="Icarus Logo">
</a>
<div>
<div class="flex justify-end md:order-2 space-x-3 md:space-x-0 rtl:space-x-reverse">
<button id="menuBtn" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-icarus-red rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200">
<span class="sr-only">Open main menu</span>
<svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
</svg>
</button>
</div>
<div id="nav">
<div id="menu" class="absolute md:relative right-2 items-center justify-between hidden w-auto md:flex md:order-1">
<ul class="flex flex-col p-4 border-2 md:border-none border-icarus-red md:p-0 mt-4 font-medium rounded-lg md:space-x-8 rtl:space-x-reverse md:flex-row md:mt-0 bg-gray-100 md:bg-transparent md:text-lg">
<li>
<a href="#f1-in-schools" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">STEM Racing</a>
</li>
<li>
<a href="#about-us" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">About Us</a>
</li>
<li>
<a href="#support-us" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">Support Us</a>
</li>
<li>
<a href="#our-sponsors" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">Our Sponsors</a>
</li>
<li>
<a href="#our-team" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">Our Team</a>
</li>
<li>
<a href="#work-with-us" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">Work With Us</a>
</li>
<li>
<a href="#contact" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0">Contact</a>
</li>
<li>
<a href="./fr/" class="block py-2 px-3 rounded md:text-white md:hover:text-icarus-red md:p-0"><img src="/assets/fr.svg" class="lg:h-7 rounded-lg w-8 h-6 lg:w-10"></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
<!-- flowbite.com -->
<div class="relative bg-icarus-red w-screen" id="home">
<div id="default-carousel" class="relative w-full z-0 ml-0 mt-0" data-carousel="slide">
<!-- Carousel wrapper -->
<div class="relative overflow-hidden h-screen mt-0">
<div class="hidden duration-1000 ease-in-out" data-carousel-item>
<picture class="absolute block w-screen h-screen -translate-x-1/2 top-0 left-1/2 brightness-50 z-0 t-0">
<source srcset="/assets/edited/team_photo1_2.webp" media="(max-width: 648px)">
<source srcset="/assets/edited/team_photo9_16.webp" media="(min-width: 649px) and (max-width: 768px)">
<source srcset="/assets/edited/team_photo4_5.webp" media="(min-width: 769px) and (max-width: 1023px)">
<source srcset="/assets/edited/team_photo4_3.webp" media="(min-width: 1024px)">
<img src="/assets/edited/team_photo9_16.webp" alt="Team photo at our pit display 2023">
</picture>
</div>
<!-- <div class="hidden duration-1000 ease-in-out object-cover" data-carousel-item>
<picture class="absolute block w-screen h-screen -translate-x-1/2 top-0 left-1/2 brightness-50 z-0 t-0 object-cover">
<source srcset="/assets/edited/icarus_podium1_2.webp" media="(max-width: 648px)">
<source srcset="/assets/edited/icarus_podium9_16.webp" media="(min-width: 649px) and (max-width: 768px)">
<source srcset="/assets/edited/icarus_podium4_5.webp" media="(min-width: 769px) and (max-width: 1023px)">
<source srcset="/assets/edited/icarus_podium4_3.webp" media="(min-width: 1024px)">
<img src="/assets/edited/icarus_podium9_16.webp" alt="Our team at the podium">
</picture>
</div>
<div class="hidden duration-1000 ease-in-out" data-carousel-item>
<picture class="absolute block w-screen h-screen -translate-x-1/2 top-0 left-1/2 brightness-50 z-0 t-0">
<source srcset="/assets/edited/pit_display1_2.webp" media="(max-width: 648px)">
<source srcset="/assets/edited/pit_display9_16.webp" media="(min-width: 649px) and (max-width: 768px)">
<source srcset="/assets/edited/pit_display4_5.webp" media="(min-width: 769px) and (max-width: 1023px)">
<source srcset="/assets/edited/pit_display4_3.webp" media="(min-width: 1024px)">
<img src="/assets/edited/pit_display9_16.webp" alt="Our team at the pit display 2024">
</picture>
</div> -->
<div class="hidden duration-1000 ease-in-out" data-carousel-item>
<picture class="absolute block w-screen h-screen -translate-x-1/2 top-0 left-1/2 brightness-50 z-0 t-0">
<source srcset="/assets/edited/team_smoke_tunnel1_2.webp" media="(max-width: 648px)">
<source srcset="/assets/edited/team_smoke_tunnel9_16.webp" media="(min-width: 649px) and (max-width: 768px)">
<source srcset="/assets/edited/team_smoke_tunnel4_5.webp" media="(min-width: 769px) and (max-width: 1023px)">
<source srcset="/assets/edited/team_smoke_tunnel4_3.webp" media="(min-width: 1024px)">
<img src="/assets/edited/team_smoke_tunnel9_16.webp" alt="Our team at the smoke tunnel">
</picture>
</div>
<div class="hidden duration-1000 ease-in-out" data-carousel-item>
<picture class="absolute block w-screen h-screen -translate-x-1/2 top-0 left-1/2 brightness-50 z-0 t-0">
<source srcset="/assets/edited/bake_sale1_2.webp" media="(max-width: 648px)">
<source srcset="/assets/edited/bake_sale9_16.webp" media="(min-width: 649px) and (max-width: 768px)">
<source srcset="/assets/edited/bake_sale4_5.webp" media="(min-width: 769px) and (max-width: 1023px)">
<source srcset="/assets/edited/bake_sale4_3.webp" media="(min-width: 1024px)">
<img src="/assets/edited/bake_sale9_16.webp" alt="Bake Sale Image">
</picture>
</div>
</div>
<!-- Slider indicators -->
<div class="absolute z-30 flex -translate-x-1/2 bottom-5 left-1/2 space-x-3 rtl:space-x-reverse">
<button type="button" class="w-2 h-2 rounded-full" aria-current="true" aria-label="Slide 1" data-carousel-slide-to="0"></button>
<!-- <button type="button" class="w-2 h-2 rounded-full" aria-current="false" aria-label="Slide 2" data-carousel-slide-to="1"></button>
<button type="button" class="w-2 h-2 rounded-full" aria-current="false" aria-label="Slide 3" data-carousel-slide-to="2"></button> -->
<button type="button" class="w-2 h-2 rounded-full" aria-current="false" aria-label="Slide 4" data-carousel-slide-to="3"></button>
<button type="button" class="w-2 h-2 rounded-full" aria-current="false" aria-label="Slide 5" data-carousel-slide-to="4"></button>
</div>
</div>
<div class="absolute top-50 left-1/2 transform -translate-x-1/2 top-1/2 -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">STEM Racing</a>™ team</p>
<br class="my-1 mx-0 block">
<p class="text-md md:text-lg lg:text-xl 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">STEM Racing</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 Australia - 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">
STEM Racing, formerly known as 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 STEM Racing, 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.stemracing.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>
<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/pit_display_2024.webp" height="1235" width="1093" loading="lazy" alt="our pit display in 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">2024 Pit Display</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 Icarus, a <span class="text-icarus-red font-bold">Luxembourgish</span> STEM Racing 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 won a total of 5 awards, including the <span class="text-icarus-red font-bold"> ‘Judges’ Favorite’</span>, <span class="text-icarus-red font-bold">‘Regional T1 Top Team’</span>, and ‘Fastest Car’ awards, by creating a simultaneously highly performant and visually appealing car. </p>
</div>
</div>
<br>
<!-- flowbite.com -->
<ol class="relative border-s border-icarus-red">
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">October 2022</time>
<h3 class="text-lg font-semibold text-gray-900">Establishment of the team</h3>
<p class="text-base font-normal text-gray-500">Being fascinated by Formula 1 and engineering, Celia decided to form a new team, quickly inviting Nikos and Lukas to join. We worked tirelessly to create the very first, car portfolios and presentation.</p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">December 2022</time>
<h3 class="text-lg font-semibold text-gray-900">Our first event</h3>
<p class="text-base font-normal text-gray-500">Our first race at the Luxembourg's highest level of competition and despite our inexperience, lack of time and resources, we won the ‘Judges’ Favorite Award.’ Such performance as set out standards high and has been a source of motivation and ambition for us to strive for excellence today. </p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">May 2023</time>
<h3 class="text-lg font-semibold text-gray-900">3 new members</h3>
<p class="text-base font-normal text-gray-500">To help us with the increasing amount of work and our vision to qualify for the World Championships, we accepted 3 new members into the team; Jan, Rohan and Romeo.</p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">June 2023</time>
<h3 class="text-lg font-semibold text-gray-900">June event</h3>
<p class="text-base font-normal text-gray-500">Right after our team expanded to 6 members, we took part in another event, where we were awarded the ‘Regional T1 Top Team’ for outperforming the competition since preparation.</p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">September 2023</time>
<h3 class="text-lg font-semibold text-gray-900">New school year Showrun</h3>
<p class="text-base font-normal text-gray-500">At the beginning of the new school year in 2023, we participated in a Showrun, getting to share some of our insights with new enthusiasts and showcase our journey.</p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">April 2024</time>
<h3 class="text-lg font-semibold text-gray-900">Luxembourg National Finals</h3>
<p class="text-base font-normal text-gray-500">Knowing that winning this event would take us to the World Championships, we went all-in, ensuring that everything was top-notch and of best quality. Despite doing our best, we came in short to fierce and more experienced competition. </p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">July-October 2024</time>
<h3 class="text-lg font-semibold text-gray-900">Team reorganization</h3>
<p class="text-base font-normal text-gray-500">Since Jan, Rohan and Romeo graduated high school in July, we were back to 3 members over the summer holidays. Our worries were however proved unnecessary, since we quickly adopted 2 new members; Petar and Konstantina into the team.</p>
</li>
<li class="mb-10 ms-4">
<div class="absolute w-3 h-3 bg-icarus-red rounded-full mt-1.5 -start-1.5 border border-icarus-red "></div>
<time class="mb-1 text-sm font-normal leading-none text-gray-400">October 2024</time>
<h3 class="text-lg font-semibold text-gray-900">Showrun 2024</h3>
<p class="text-base font-normal text-gray-500">Similarly to the previous year, we were invited to the Showrun at ISL. Now being one of the most experienced teams, were shared our insights, tips and tricks with the younger participants. </p>
</li>
</ol>
</div>
</div>
<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="our-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 class="bg-[#da9f00] p-2 rounded-xl">
<a href="https://www.ortea.lu/" target="_blank">
<img src="/assets/sponsor_logos/ortea.svg" loading="lazy" alt="Ortea logo" class="rounded lg:max-w-64 max-w-32 md:max-w-44">
</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 justify-center">
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 w-max">
<div class="w-[15rem] h-auto bg-gray-200 text-black p-6 ml-4 rounded mb-4">
<img loading="lazy" src="/assets/members/petar.webp" width="194" height="194" alt="Manufacturing engineer Petar" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center ">Petar</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Management & Manufacturing</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg">
Petar is the manager of the team, overseeing all its operations. He is also provides advice and assistance to Nikos in the manufacturing process.
</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/celia.webp" width="194" height="194" 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">Operations & Designer</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg">
Celia is the operations administrator. She ensures that the team is well-prepared for all events and that all deadlines are met. She also satisfies the team's graphical design needs.
</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 engineer 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">Technical Design & Manufacturing</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg">
Nikos focuses on car design and manufacturing, developing innovative, and high-performance concepts that ensure the team stays ahead of the competition.
</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="194" height="194" 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</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg">
Lukas handles the team’s IT needs, including the maintenance of the website and Instagram account, as well as helping with the administrative part of the team.
</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/konstantina.webp" width="194" height="194" alt="Finance & PR Konstantina" class="rounded-full mx-auto w-[150px]">
<br class="my-1 mx-0 block">
<h2 class="text-2xl text-center lg:text-3xl">Konstantina</h2>
<h2 class="text-lg text-center text-icarus-red font-bold lg:text-xl">Communication & Finance</h2>
<br class="my-1 mx-0 block">
<p class="text-center text-sm md:text-md lg:text-lg">
Konstantina is main team contact. She also handles the team's finances and any potential sponsorship deals.
</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="194" height="194" 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>
</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 company trying to increase its visibility? </p>
<br>
<div class="text-justify">
<div class="flex flex-wrap gap-7">
<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 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.
</p>
<p class="text-sm md:text-lg">
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">accommodation</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 STEM Racing 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. This partnership aligns your company with the thrill of Formula 1, subtly enhancing your brand image as innovative and supportive. From exposure on our social media, through your logo in our portfolios and on our merchandise, we make sure to make your brand visible in every aspect of STEM Racing, ensuring <span class="text-icarus-red font-bold">global exposure</span> and connection 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>
<br>
<a href="mailto:[email protected]?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%5Bcompany%20name%5D%2C%20and%20we%20are%20interested%20in%20exploring%20partnership%20opportunities%20with%20you.%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="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-normal">More Information →</a>
</div>
</div>
<br>
<div id="contact" 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">Instagram</a>
<a href="mailto:[email protected]" 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:[email protected]" class="underline hover:text-icarus-red">[email protected]</a></p>
<br class="my-1 mx-0 block">
<p>@2024 by Icarus </p>
</footer>
<!-- <script src="/node_modules/flowbite/dist/flowbite.min.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/flowbite.min.js"></script>
<script>
// Get the navbar element
const navbar = document.getElementById('navbar');
const navLinks = document.querySelectorAll('#nav a');
// Listen for the scroll event
window.addEventListener('scroll', () => {
if (window.scrollY > 120) {
navbar.classList.add('bg-white');
navbar.classList.remove('bg-transparent');
navbar.classList.add('border-icarus-red');
navbar.classList.add('border-b-2');
navLinks.forEach(link => {
link.classList.add('md:text-black');
link.classList.remove('md:text-white');
});
} else {
navbar.classList.add('bg-transparent');
navbar.classList.remove('bg-white');
navbar.classList.remove('border-icarus-red');
navbar.classList.remove('border-b-2');
navLinks.forEach(link => {
link.classList.remove('md:text-black');
link.classList.add('md:text-white');
});
}
});
</script>
<script>
const menuBtn = document.getElementById('menuBtn');
const menu = document.getElementById('menu');
menuBtn.addEventListener('click', () => {
menu.classList.toggle('hidden');
});
</script>
</body>
</html>