Merge branch 'implement-banner-and-timeline' into basic-style

data/timeline.json

@@ -1,51 +1,60 @@
 {
     "saturday": [
         {
-            "time": "12:00",
+            "id": "sa1",
+            "time": "12:00 - 13:00",
             "name": "Walk-in",
-            "description": "We will welcome you in hall X1 of TU Delft X! You then have a bit of time to get settled in before the hacking starts."
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         },
         {
-            "time": "13:00",
-            "name": "Opening Presentation",
-            "description": "Here you will finally be introduced to the challenges, and get other important information about the event. If you don't have a team yet, you can form it here."
+            "id": "sa2",
+            "time": "13:00 - 14:00",
+            "name": "Opening",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         },
         {
-            "time": "14:00",
-            "name": "Start Hacking!",
-            "description": "After the challenges have been divided you can now get started on your project. We are excited to see what you will come up with!"
+            "id": "sa3",
+            "time": "14:00 - 00:00",
+            "name": "Hacking!",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         },
         {
+            "id": "sa4",
             "time": "18:30 - 20:00",
             "name": "Dinner",
             "description": ""
         }
     ],
     "sunday": [
         {
+            "id": "su1",
+            "time": "00:00 - 14:00",
+            "name": "Hacking!",
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
+        },
+        {
+            "id": "su2",
             "time": "8:00 - 10:00",
             "name": "Breakfast",
             "description": ""
         },
         {
+            "id": "su3",
             "time": "12:30 - 14:30",
             "name": "Lunch",
             "description": ""
         },
         {
-            "time": "14:00",
-            "name": "Hacking Ends",
-            "description": "It has been 24 hours since we started! Now it's time to pitch your project to the jury."
-        },
-        {
-            "time": "14:30",
+            "id": "su4",
+            "time": "14:30 - 16:00",
             "name": "Networking Drinks",
-            "description": "Talk to your fellow hackers at the drinks after the hacking has ended."
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         },
         {
-            "time": "± 16:00",
+            "id": "su5",
+            "time": "16:00 - 17:00",
             "name": "Award Ceremony",
-            "description": "We have a lot of prizes to award here, maybe to you?"
+            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
         }
     ]
 }

src/_mixins.scss

@@ -13,3 +13,4 @@ $breakpoints: (
         @content;
     }
 }
+

src/_variables.scss

@@ -1,5 +1,6 @@
 $background-color: #002E78;
-$primary-color: #389EE9;
+$primary-color: #84C1EE;
+$primary-color-darker: #389EE9;
 $secondary-color: #DB00FF;
 $tu-color: #00a6d6;
 $discord-color: #7289da;

src/components/about/index.tsx

@@ -10,7 +10,7 @@ import * as style from "./style.scss";
  * Renders the about section.
  */
 export const About: FunctionalComponent = () => (
-    <section class={style.about}>
+    <section class={style.about} id="aboutus">
         <h2>About us</h2>
         <div class={style.columns}>
             <div class={style.column}>

src/components/faq/index.tsx

@@ -1,4 +1,6 @@
 import { h, FunctionalComponent } from "preact";
+import { faChevronDown } from "@fortawesome/free-solid-svg-icons";
+import { Icon } from "/src/components/icon";
 
 import faqData from "/data/faq.json";
 
@@ -10,14 +12,12 @@ import * as style from "./style.scss";
  */
 export const FAQ: FunctionalComponent = () => (
     <section class={style.faq}>
-        <h2>Frequently Asked Questions</h2>
+        <h2>FAQ</h2>
         <ul>
             {faqData.map((q: Question, i: number) => (
                 <li key={i}>
-                    <details
-                        open={window.matchMedia("(min-width: 768px)").matches}
-                    >
-                        <summary>{q.question}</summary>
+                    <details>
+                        <summary>{q.question}<span class={style.icon}><Icon icon={faChevronDown}/></span></summary>
                         <p>{q.answer}</p>
                     </details>
                 </li>

src/components/faq/style.scss

@@ -2,12 +2,6 @@
 @import "./src/mixins";
 
 .faq {
-    margin: 12px 0;
-    padding: 16px;
-    background: $primary-color;
-    margin-bottom: 32px;
-
-
     h2 {
         color: $secondary-color;
         font-family: "Krona-One";
@@ -16,33 +10,57 @@
         font-weight: 400;
         line-height: normal;
         text-align: center;
-        margin: 0;
-        padding-left: 2px;
-    }
+        margin: 0;    }
 
     ul {
         padding: 0;
         list-style-type: none;
+        width: 80%;
+        margin-left: auto;
+        margin-right: auto;
     }
 
     li {
-        border-left: 3px solid mix($primary-color, $primary-text, 75%);
-        padding-left: 16px;
-        margin: 0 0 16px 8px;
+        margin: 32px 0;
+    }
+
+    .icon {
+        position: absolute;
+        right: 48px;
+        color: $primary-color;
+        font-size: 24px;
+    }
+
+    details[open] .icon{
+        transform: rotate(180deg);
+
+    }
+
+    details {
+        border-radius: 19px;
+        border: 3px solid $primary-color;
+        padding: 12px 48px;
+        position: relative;
     }
 
     summary {
         cursor: pointer;
-        font-size: 1.1em;
-        font-weight: 600;
-        color: mix($primary-color, $primary-text, 40%);
+        font-size: 1.17em;
+        font-weight: 700;
+        text-align: center;
+        list-style: none;
+
+        &::-webkit-details-marker {
+            display: none;
+        }
     }
 
     p {
         margin: 8px 0;
-        font-size: 1.1em;
-        line-height: 20px;
+        font-size: 1.17em;
+        line-height: normal;
         color: $primary-text;
+        text-align: center;
     }
 }
 

src/components/header/index.tsx

@@ -1,18 +1,32 @@
 import { h, FunctionalComponent } from "preact";
+import { faCalendarDay, faLocationDot } from "@fortawesome/free-solid-svg-icons";
+
 
 import * as style from "./style.scss";
 
 import icon from "url:/static/HogeResolutieLogo.png?as=webp&width=500";
+import { Icon } from "/src/components/icon";
+
 
 /**
  * Renders the header of the site.
  */
 export const Header: FunctionalComponent = () => (
     <header class={style.header}>
-        <img src={icon} alt="HackDelft" />
-        <span>
-            <h2>Date: May 25th &amp; May 26th</h2>
-            <h3>Location: TU Delft X</h3>
-        </span>
+        <div class={style.container}>
+            <img src={icon} alt="HackDelft" />
+            <div class={style.text}>
+
+                <p> <Icon icon={faCalendarDay}/> 25 and 26 may 2024</p>
+                <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> */}
+                <button href="https://discord.gg/rB2ucUaFnc" target="_blank">Join Discord</button>
+            </div>
+        </div>
+
     </header>
 );

src/components/header/style.scss

@@ -3,42 +3,76 @@
 
 .header {
     display: flex;
-    flex-direction: column;
-    margin-top: 32px;
+    flex-direction: column; 
+    height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #05238E 100%,), url('../../../static/banner.gif');
+    background-repeat: no-repeat;
+    background-size: cover;
 
-    img {
-        height: 4em;
-        margin: 0 auto;
+    .container {
+        margin: auto;
+        display: flex;
+        flex-direction: column;
+        align-content: center;
+        justify-content: center;
+        width: 100%;
+        max-width: 700px;
     }
 
-    span {
-        margin: 16px 2vw;
-
-        h2 {
-            margin: 0;
-            white-space: nowrap;
-            color: $primary-color;
-        }
+    .text {
+        display: flex;
+        justify-content: space-between;
+        margin: 0 30px;
+    }
 
-        h3 {
-            margin: 0;
-            white-space: nowrap;
-            color: $secondary-color;
-        }
+    .buttons {
+        display: flex;
+        justify-content: center;
+        gap: 30px;
+        margin-top: 60px;
     }
-}
 
-@include breakpoint(sm) {
-    .header {
-        flex-direction: row;
-        margin-bottom: 24px;
+    button {
+        border-radius: 10px;
+        border: 1px solid $background-color;
+        background-color: $primary-color;
+        color: $background-color;
+        font-size: 18px;
+        padding: 10px 15px;
+        width: 200px;
 
-        img {
-            margin: 0;
+        &:hover {
+            background-color: $primary-color-darker;
+            cursor: pointer;
         }
+    }
 
-        span {
-            margin: 0 2vw;
-        }
+    button.secondary {
+        border: 1px solid $primary-color;
+        color: $primary-color;
+        background-color: $background-color;
+    }
+
+    p {
+        color: $primary-color;
+        font-size: 24px;
+        font-family: "Krona-One";
     }
 }
+
+// @include breakpoint(sm) {
+//     .header {
+//         flex-direction: row;
+//         margin-bottom: 24px;
+
+//         img {
+//             margin: 0;
+//         }
+
+//         span {
+//             margin: 0 2vw;
+//         }
+//     }
+// }

src/components/index.ts

@@ -8,3 +8,4 @@ export { Numbers } from "./numbers"
 export { Photos } from "./photos";
 export { Sponsors } from "./sponsors";
 export { Timeline } from "./timeline";
+export { Navigation} from "./navigation";

src/components/navigation/index.tsx

@@ -0,0 +1,20 @@
+import * as style from "./style.scss";
+import { h, FunctionalComponent } from "preact";
+import { faStopwatch } from "@fortawesome/free-solid-svg-icons";
+import { Icon } from "/src/components/icon";
+
+
+export const Navigation: FunctionalComponent = () => (
+    <section class={style.navigation}>
+        <div>
+            <a>About us</a>
+            <a>Timetable</a>
+            <a>Pictures</a>
+            <a>Themes</a>
+            <a>FAQ</a>
+            <a>Sponsors</a>
+            <a>Contact</a>
+            <span class={style.time}><span class={style.icon}><Icon icon={faStopwatch}/></span>05d 05h 05m 05s</span>
+        </div>
+    </section>
+);