Website improvements

data/faq.json

@@ -1,16 +1,20 @@
 [
     {
         "question": "Who can attend?",
-        "answer": "Any current university student can attend HackDelft."
+        "answer": "Any student can attend HackDelft."
     },
     {
         "question": "How can I sign up for HackDelft?",
-        "answer": "Ticket sales are not open yet so check back here soon!"
+        "answer": "Buy a ticket at: https://ch.tudelft.nl/activities/event/2024/hackaton/ and don't forget to fill in the form at: wisv.ch/hackform"
     },
     {
         "question": "What languages can I use during the event?",
         "answer": "You can use any language or tool you want during the event!"
     },
+    {
+        "question": "I don't have a group yet. Can I still sign up?",
+        "answer": "Of course! You can use the discord to find others still searching for a group. Haven't found a group yet on the day itself? No problem we can help you find a group during the event."
+    },
     {
         "question": "What is the maximum group size?",
         "answer": "There is a limit of four participants per group. Do you have more friends? You can join in multiple groups! Don't know who joins you yet? You can form your groups later, or even at the event itself."
@@ -29,7 +33,7 @@
     },
     {
         "question": "How much will it cost to attend HackDelft?",
-        "answer": "The price has not been determined yet so check back here soon!"
+        "answer": "If you are a CH member tickets will be € 1,- and non-CH members will have to pay € 3,−. If you also want to attend the brunch on Sunday you will have to buy a brunch ticket for € 1,-"
     },
     {
         "question": "What do I need to bring to the event?",

data/photos.ts

@@ -2,10 +2,10 @@
 // This is required as the bundler (currently) cannot currently read the contents of the photo folder
 export const photosMap: URL[] = [
     new URL("/static/photos/DSC_0001.jpg?as=webp&width=1200", import.meta.url),
+    new URL("/static/photos/DSC_0519.jpg?as=webp&width=1200", import.meta.url),
     new URL("/static/photos/DSC_0032.jpg?as=webp&width=1200", import.meta.url),
     new URL("/static/photos/DSC_0511.jpg?as=webp&width=1200", import.meta.url),
     new URL("/static/photos/DSC_0515.jpg?as=webp&width=1200", import.meta.url),
-    new URL("/static/photos/DSC_0519.jpg?as=webp&width=1200", import.meta.url),
     new URL("/static/photos/DSC_0537.jpg?as=webp&width=1200", import.meta.url),
     new URL("/static/photos/DSC_0544.jpg?as=webp&width=1200", import.meta.url),
     new URL("/static/photos/DSC_0556.jpg?as=webp&width=1200", import.meta.url),

data/timeline.json

@@ -2,24 +2,30 @@
     "saturday": [
         {
             "id": "sa1",
-            "time": "12:00 - 13:00",
+            "time": "11:30 - 12:00",
             "name": "Walk-in",
             "description": "More information will follow soon..."
         },
         {
             "id": "sa2",
-            "time": "13:00 - 14:00",
+            "time": "12:00 - 13:30",
             "name": "Opening",
             "description": "More information will follow soon..."
         },
         {
             "id": "sa3",
-            "time": "14:00 - 00:00",
+            "time": "13:30 - 00:00",
             "name": "Hacking!",
             "description": "More information will follow soon..."
         },
         {
             "id": "sa4",
+            "time": "16:30 - 17:30",
+            "name": "Pitch workshop",
+            "description": "More information will follow soon..."
+        },
+        {
+            "id": "sa5",
             "time": "18:30 - 20:00",
             "name": "Dinner",
             "description": ""
@@ -28,30 +34,18 @@
     "sunday": [
         {
             "id": "su1",
-            "time": "00:00 - 14:00",
+            "time": "00:00 - 13:30",
             "name": "Hacking!",
             "description": "More information will follow soon..."
         },
         {
             "id": "su2",
-            "time": "8:00 - 10:00",
-            "name": "Breakfast",
-            "description": ""
+            "time": "8:00 - 14:30",
+            "name": "Brunch",
+            "description": "In order to join the brunch you will have to buy a ticket. More information will follow soon... "
         },
         {
             "id": "su3",
-            "time": "12:30 - 14:30",
-            "name": "Lunch",
-            "description": ""
-        },
-        {
-            "id": "su4",
-            "time": "14:30 - 16:00",
-            "name": "Networking Drinks",
-            "description": "More information will follow soon..."
-        },
-        {
-            "id": "su5",
             "time": "16:00 - 17:00",
             "name": "Award Ceremony",
             "description": "More information will follow soon..."

src/components/about/index.tsx

@@ -14,7 +14,7 @@ export const About: FunctionalComponent = () => (
             <div class={style.column}>
                 <h3>What?</h3>
                 <p>
-                    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. 
+                    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. A brunch is also offered on sunday. To join this you will have to buy a different brunch ticket.
                 </p>
                 <h3>Who?</h3>
                 <p>

src/components/footer/index.tsx

@@ -24,7 +24,7 @@ export const Footer: FunctionalComponent = () => {
                         <p>Site</p>
                         <a onClick={() => scrollToDiv('home')}>Home</a>
                         <a onClick={() => scrollToDiv('aboutus')}>About us </a>
-                        <a onClick={() => scrollToDiv('photos')}>Pictures</a>
+                        <a onClick={() => scrollToDiv('pictures')}>Pictures</a>
                         <a onClick={() => scrollToDiv('timetable')}>Timetable</a>
                         <a onClick={() => scrollToDiv('sponsors')}>Sponsors</a>
                         <a onClick={() => scrollToDiv('faq')}>FAQ</a>                      

src/components/header/index.tsx

@@ -1,5 +1,5 @@
 import { h, FunctionalComponent } from "preact";
-import { faCalendarDay, faLocationDot } from "@fortawesome/free-solid-svg-icons";
+import { faCalendarDay, faLocationDot, faTicket } from "@fortawesome/free-solid-svg-icons";
 import { faDiscord } from "@fortawesome/free-brands-svg-icons";
 
 
@@ -23,9 +23,10 @@ export const Header: FunctionalComponent = () => (
                 <p> <Icon icon={faLocationDot}/> X TU Delft</p>
             </div>
             <div class={style.buttons}>
-                {/* TODO: uncomment when tickets are online */}
-                {/* <button>Tickets</button> */}
-                {/* <button class={style.secondary}>Join Discord</button> */}
+                <a href="https://ch.tudelft.nl/activities/event/2024/hackaton/" target="_blank">
+                    <Icon icon={faTicket} pad />
+                    Buy Tickets
+                </a>
                 <a href="https://discord.gg/rB2ucUaFnc" target="_blank">
                     <Icon icon={faDiscord} pad />
                     Join Discord

src/components/header/style.scss

@@ -9,6 +9,7 @@
     background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, $background-color 100%,), url('../../../static/banner.gif');
     background-repeat: no-repeat;
     background-size: cover;
+    background-position: center;
 
     .container {
         margin: auto;
@@ -30,7 +31,7 @@
         display: flex;
         justify-content: center;
         gap: 30px;
-        margin-top: 60px;
+        flex-wrap: wrap;
     }
 
     a {
@@ -39,6 +40,7 @@
         background-color: $primary-color;
         color: $background-color;
         font-size: 18px;
+        font-family: "Krona-One";
         padding: 10px 15px;
         width: 200px;
         display: flex;

src/components/navigation/index.tsx

@@ -15,7 +15,7 @@ export const Navigation: FunctionalComponent = () => {
         <section class={style.navigation}>
             <div>
                 <a onClick={() => scrollToDiv('aboutus')}>About us </a>
-                <a onClick={() => scrollToDiv('photos')}>Pictures</a>
+                <a onClick={() => scrollToDiv('pictures')}>Pictures</a>
                 <a onClick={() => scrollToDiv('timetable')}>Timetable</a>
                 <a onClick={() => scrollToDiv('sponsors')}>Sponsors</a>
                 <a onClick={() => scrollToDiv('faq')}>FAQ</a>

src/components/navigation/style.scss

@@ -5,10 +5,13 @@
     border: 5px solid $primary-color;
     display: none;
 
+
+
     > div {
         display: flex;
         gap: 16px;
         font-size: 20px;
+        font-family: "Krona-One";
         margin: 4px 8px;
 
         .time {

src/components/numbers/style.scss

@@ -32,6 +32,7 @@
         display: flex;
         justify-content: space-between;
         width: 100%;
+        flex-wrap: wrap;
     }
 
     .column {

src/components/photos/index.tsx

@@ -53,8 +53,8 @@ export const Photos: FunctionalComponent = () => {
     }, []);
 
     return (
-        <section class={style.photos} id='photos'>
-            <h2>Photos</h2>
+        <section class={style.photos} id='pictures'>
+            <h2>Pictures</h2>
             <div ref={galleryContainer} class={style.galleryContainer}>
                 <div
                     ref={gallery}

src/components/sponsors/style.scss

@@ -74,8 +74,6 @@
             height: 120px;
             object-fit: contain;
         }
-
-
     }
 
     a {
@@ -85,7 +83,7 @@
     p {
         color: #FFF;
         text-align: center;
-        font-family: Krona One;
+        font-family: "Krona-One";
         font-size: 20px;
         font-style: normal;
         font-weight: 400;

src/components/timeline/style.scss

@@ -49,7 +49,8 @@
         margin: 16px 8px;
     }
 
-    .saturday {       
+    .saturday {    
+        width: 50%;   
         .timelineEntry:nth-child(1) {
             grid-column-start: 1;
         }
@@ -67,26 +68,32 @@
             }
         }
         .timelineEntry:nth-child(4) {
+            grid-column-start: 1;
+            grid-row-start: 6;
+        }
+        .timelineEntry:nth-child(5) {
             grid-column-start: 1;
             grid-row-start: 8;
         }
     }
 
     .sunday {
+        width: 50%;
         .timelineEntry:nth-child(1) {
             grid-column-start: 2;
             grid-row-start: 1;
-            grid-row-end: 5;
-            height: 85%;
+            grid-row-end: 6;
+            height: 100%;
         }
         .timelineEntry:nth-child(2) {
             grid-column-start: 1;
-            grid-row-start: 3;
-            margin-bottom: auto;
+            grid-row-start: 4;
+            grid-row-end: 7;
+            height: 100%;
         }
         .timelineEntry:nth-child(3) {
-            grid-column-start: 1;
-            grid-row-start: 4;
+            grid-column-start: 2;
+            grid-row-start: 8;
             height: 100%;
         }