diff --git a/src/components/about/index.tsx b/src/components/about/index.tsx index 69d6afb..09b4ba8 100644 --- a/src/components/about/index.tsx +++ b/src/components/about/index.tsx @@ -12,16 +12,26 @@ import * as style from "./style.scss"; export const About: FunctionalComponent = () => (

About us

-

- Join us on May 25th and May 26th in this all-inclusive 24 hour - hackathon where you solve fun challenges provided by our partner - companies, win prizes, and have a good time! -

-

- Tickets are not available yet but check back here soon! -

+
+
+

What?

+

+ Embark on an exciting journey with Hack to the Future, a fully inclusive 24-hour hackathon experience. Immerse yourself in a dynamic environment where participants take on entertaining challenges presented by our amazing partner companies. Beyond the thrill of problem-solving, the event offers the chance to win exciting prizes and guarantees a good time for all involved. +

+

Who?

+

+ Any current university student is welcome! Whether you're a beginner or an experienced individual, the hackathon welcomes all levels of expertise. Partner companies provide challenges for participants to solve. They foster a collaborative environment where students can showcase their skills and creativity. +

+
+
+

When?

+

+ Mark your calendars for May 25th and May 26th as we invite you to join us at TU Delft X for an exhilarating two-day event. The excitement kicks off on Saturday morning, extending all the way through Sunday evening. To enhance your experience, we've got dinner covered, and sleeping over at the venue is an option. Across these two days, participants will have a dedicated 24 hours to collaboratively tackle and solve a challenging case. +

+
+
- {/* ( Merle de Jong - The Head of Logistics - Marijn van der Tuin - - - The Commissioner of Promotional Affairs + The Commissioner of Promotion Simon Deuten - The Head of Acquisition + The Commissioner of Acquisition Scott Jochems - + + + The Commissioner of Logistics + Marijn van der Tuin + The Qualitate Qua Robert van Dijk diff --git a/src/components/footer/index.tsx b/src/components/footer/index.tsx index 7e1123e..2ad0d57 100644 --- a/src/components/footer/index.tsx +++ b/src/components/footer/index.tsx @@ -21,7 +21,7 @@ export const Footer: FunctionalComponent = () => ( diff --git a/src/components/index.ts b/src/components/index.ts index 3d44df1..17d54aa 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -4,6 +4,7 @@ export { FAQ } from "./faq"; export { Footer } from "./footer"; export { Header } from "./header"; export { Icon } from "./icon"; +export { Numbers } from "./numbers" export { Photos } from "./photos"; export { Sponsors } from "./sponsors"; export { Timeline } from "./timeline"; diff --git a/src/components/numbers/index.tsx b/src/components/numbers/index.tsx new file mode 100644 index 0000000..29fa34f --- /dev/null +++ b/src/components/numbers/index.tsx @@ -0,0 +1,32 @@ +import { h, FunctionalComponent } from "preact"; + +import * as style from "./style.scss"; + + + + +/** + * Renders the about section. + */ +export const Numbers: FunctionalComponent = () => ( +
+
+ +
+

120

+

attendees

+
+ +
+

3

+

cases

+
+ +
+

24

+

hours

+
+ +
+
+); diff --git a/src/components/numbers/style.scss b/src/components/numbers/style.scss new file mode 100644 index 0000000..5188ee9 --- /dev/null +++ b/src/components/numbers/style.scss @@ -0,0 +1,78 @@ +@import "./src/mixins"; +@import "./src/variables"; + +.numbers { + margin-bottom: 64px; + + + h2 { + color: $secondary-color; + font-family: "Audiowide"; + font-size: 96px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-align: center; + margin: 0; + padding-left: 2px; + } + + h3 { + font-family: "Krona-One"; + font-size: 32px; + font-style: normal; + font-weight: 400; + line-height: normal; + text-align: center; + margin: 0; + padding-left: 2px; + } + + .columns { + display: flex; + justify-content: space-between; + width: 100%; + } + + .column { + flex: 1; + display: flex; + flex-direction: column; + text-align: left; + padding: 20px; + justify-content: flex-start; + } + + + div { + display: flex; + flex-direction: column; + justify-content: center; + + a { + margin: 8px 16px; + padding: 0.6em 1.6em; + border-radius: 6px; + white-space: nowrap; + text-decoration: none; + cursor: pointer; + + svg { + display: inline-block; + vertical-align: middle; + } + + &:hover { + text-decoration: underline; + } + } + } +} + +@include breakpoint(sm) { + .numbers { + div { + flex-direction: row; + } + } +} diff --git a/src/components/photos/index.tsx b/src/components/photos/index.tsx index 0a8dbfd..072affb 100644 --- a/src/components/photos/index.tsx +++ b/src/components/photos/index.tsx @@ -53,17 +53,18 @@ export const Photos: FunctionalComponent = () => { return (

Photos

-

- Take a look at a previous edition to get an impression of the event. -

(shouldAnimate.current = false)} > +
+ {photosMap.map((url) => ( ))} + +
); diff --git a/src/components/photos/style.scss b/src/components/photos/style.scss index fab2fb6..465248d 100644 --- a/src/components/photos/style.scss +++ b/src/components/photos/style.scss @@ -11,7 +11,7 @@ font-weight: 400; line-height: normal; text-align: center; - margin: 0; + margin-bottom: 32px; padding-left: 2px; } @@ -20,10 +20,35 @@ } } +.blockleft { + position: absolute; + margin-top: -6.3%; + margin-left: 6%; + display: block; + width: 260px; + height: 500px; + background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 50%); + z-index: 2; + transform: rotate(-90deg); + } + +.blockright { + position: absolute; + margin-top: -6.3%; + margin-left: 40%; + display: block; + width: 260px; + height: 500px; + background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.00) 50%); + z-index: 2; + transform: rotate(90deg); + } + + .gallery { display: flex; overflow-x: scroll; - gap: 12px; + gap: 8px; scrollbar-width: auto; scrollbar-color: $primary-color $background-color; @@ -38,6 +63,8 @@ &::-webkit-scrollbar-thumb { background-color: $primary-color; } + + } .image { @@ -47,7 +74,6 @@ height: 260px; width: 400px; object-fit: cover; - border-radius: 6px; } } diff --git a/src/components/sponsors/index.tsx b/src/components/sponsors/index.tsx index 9c21adb..539020e 100644 --- a/src/components/sponsors/index.tsx +++ b/src/components/sponsors/index.tsx @@ -27,16 +27,21 @@ export const sponsorItem = (category: SponsorCategory) => { return (

{category.title}

-

More too be announced!

 diff --git a/src/components/sponsors/style.scss b/src/components/sponsors/style.scss index 9109b7b..951fbd3 100644 --- a/src/components/sponsors/style.scss +++ b/src/components/sponsors/style.scss @@ -12,21 +12,22 @@ font-weight: 400; line-height: normal; text-align: center; - margin: 0; - margin-bottom: 32px; + margin-bottom: 64px; padding-left: 2px; } h3 { color: $primary-color; font-family: "Krona-One"; + font-size: 32px; font-style: normal; font-weight: 400; line-height: normal; text-align: center; - margin: 0; + margin-bottom: 64px; padding-left: 2px; } + } .sponsorlist { @@ -42,18 +43,39 @@ justify-content: center; } + .topbar{ + + hr { + margin-bottom: 10px; + height: 2px; + width: 100%; + color: #84C1EE; + background-color: #84C1EE; + } + } + + .bottombar { + + hr { + margin-top: 10px; + height: 2px; + width: 75%; + color: #84C1EE; + background-color: #84C1EE; + } + } + .img { display: flex; padding: 8px; - border: 3px solid currentColor; - border-radius: 12px; - background-color: $sponsor-background; img { width: 100%; height: 120px; object-fit: contain; } + + } a { @@ -61,8 +83,13 @@ } p { - margin: 8px 0 0 0; + color: #FFF; text-align: center; + font-family: Krona One; + font-size: 20px; + font-style: normal; + font-weight: 400; + line-height: normal; } [data-type="organisation"] > * { diff --git a/src/global.scss b/src/global.scss index 03fb465..1ac01c8 100644 --- a/src/global.scss +++ b/src/global.scss @@ -57,3 +57,8 @@ section { font-family: "Krona-One"; src: url(../static/fonts/KronaOne-Regular.ttf); } + +@font-face { + font-family: "Audiowide"; + src: url(../static/fonts/Audiowide-Regular.ttf); +} diff --git a/src/index.tsx b/src/index.tsx index 50b185e..4975a65 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,6 +6,7 @@ import { FAQ, Footer, Header, + Numbers, Navigation, Photos, Sponsors, @@ -21,6 +22,7 @@ const start = (): void => { render(
+ diff --git a/static/fonts/Audiowide-Regular.ttf b/static/fonts/Audiowide-Regular.ttf new file mode 100644 index 0000000..348817d Binary files /dev/null and b/static/fonts/Audiowide-Regular.ttf differ diff --git a/static/sponsors/bit.png b/static/sponsors/bit.png deleted file mode 100644 index 5c032e2..0000000 Binary files a/static/sponsors/bit.png and /dev/null differ diff --git a/static/sponsors/bwl.png b/static/sponsors/bwl.png deleted file mode 100644 index c7e1e48..0000000 Binary files a/static/sponsors/bwl.png and /dev/null differ diff --git a/static/sponsors/cgi.png b/static/sponsors/cgi.png deleted file mode 100644 index 03a042a..0000000 Binary files a/static/sponsors/cgi.png and /dev/null differ diff --git a/static/sponsors/ch.png b/static/sponsors/ch.png index 7b7de12..debe78a 100644 Binary files a/static/sponsors/ch.png and b/static/sponsors/ch.png differ diff --git a/static/sponsors/ded.png b/static/sponsors/ded.png deleted file mode 100644 index e6ce79a..0000000 Binary files a/static/sponsors/ded.png and /dev/null differ diff --git a/static/sponsors/elastic.png b/static/sponsors/elastic.png deleted file mode 100644 index b7167f7..0000000 Binary files a/static/sponsors/elastic.png and /dev/null differ diff --git a/static/sponsors/ind.png b/static/sponsors/ind.png deleted file mode 100644 index be088f6..0000000 Binary files a/static/sponsors/ind.png and /dev/null differ diff --git a/static/sponsors/kleine.png b/static/sponsors/kleine.png deleted file mode 100644 index f3b9a2d..0000000 Binary files a/static/sponsors/kleine.png and /dev/null differ diff --git a/static/sponsors/koro.png b/static/sponsors/koro.png deleted file mode 100644 index 3e81745..0000000 Binary files a/static/sponsors/koro.png and /dev/null differ