Merge pull request #20 from WISVCH/basic-style

Basic style into banner and timeline changes

src/components/about/index.tsx

@@ -12,16 +12,26 @@ import * as style from "./style.scss";
 export const About: FunctionalComponent = () => (
     <section class={style.about} id="aboutus">
         <h2>About us</h2>
-        <p>
-            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!
-        </p>
-        <p>
-            Tickets are not available yet but check back here soon!
-        </p>
+        <div class={style.columns}>
+            <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. 
+                </p>
+                <h3>Who?</h3>
+                <p>
+                    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.
+                </p>
+            </div>
+            <div class={style.column}>
+                <h3>When?</h3>
+                <p>
+                    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.
+                </p>
+            </div>
+        </div>
         <div>
-            {/* <a
+        {/* <a
                 class={style.tickets}
                 href="https://forms.gle/VmVWSof6tLyaVyBB8"
                 target="_blank"

src/components/about/style.scss

@@ -2,7 +2,8 @@
 @import "./src/variables";
 
 .about {
-    margin-bottom: 32px;
+    margin-bottom: 32px; 
+
 
     h2 {
         color: $primary-color;
@@ -16,8 +17,42 @@
         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;
+    }
+
+
     p {
         margin: 8px;
+        margin-bottom: 50px;
+
+        font-family: "Krona-One";
+        font-size: 16px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: normal;
 
         a {
             color: $primary-color;

src/components/committee/index.tsx

@@ -32,17 +32,17 @@ export const Committee: FunctionalComponent = () => (
                     <td>Merle de Jong</td>
                 </tr>
                 <tr>
-                    <th>The Head of Logistics</th>
-                    <td>Marijn van der Tuin</td>
-                </tr>
-                <tr>
-                    <th>The Commissioner of Promotional Affairs</th>
+                    <th>The Commissioner of Promotion</th>
                     <td>Simon Deuten</td>
                 </tr>
                 <tr>
-                    <th>The Head of Acquisition</th>
+                    <th>The Commissioner of Acquisition</th>
                     <td>Scott Jochems</td>
-                </tr>            
+                </tr>
+                <tr>
+                    <th>The Commissioner of Logistics</th>
+                    <td>Marijn van der Tuin</td>
+                </tr>       
                 <tr>
                     <th>The Qualitate Qua</th>
                     <td>Robert van Dijk</td>

src/components/footer/index.tsx

@@ -21,7 +21,7 @@ export const Footer: FunctionalComponent = () => (
         </a>
         <a
             title="View source code."
-            href="https://github.com/WISVCH/hackdelft-2022"
+            href="https://github.com/WISVCH/hackdelft-2024"
             target="_BLANK"
         >
             <Icon icon={faGithub} pad />

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";

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 = () => (
+    <section class={style.numbers}>
+        <div class={style.columns}>
+
+            <div class={style.column}>
+                <h2>120</h2>
+                <h3>attendees</h3>
+            </div>
+
+            <div class={style.column}>
+                <h2>3</h2>
+                <h3>cases</h3>
+            </div>
+
+            <div class={style.column}>
+                <h2>24</h2>
+                <h3>hours</h3>
+            </div>
+
+        </div>
+    </section>
+);

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;
+        }
+    }
+}

src/components/photos/index.tsx

@@ -53,17 +53,18 @@ export const Photos: FunctionalComponent = () => {
     return (
         <section class={style.photos}>
             <h2>Photos</h2>
-            <p>
-                Take a look at a previous edition to get an impression of the event.
-            </p>
             <div
                 ref={gallery}
                 class={style.gallery}
                 onClick={() => (shouldAnimate.current = false)}
             >
+                <div class={style.blockleft}></div>
+
                 {photosMap.map((url) => (
                     <Photo url={url} />
                 ))}
+
+                <div class={style.blockright}></div>
             </div>
         </section>
     );

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;
     }
 }
 

src/components/sponsors/index.tsx

@@ -27,26 +27,37 @@ export const sponsorItem = (category: SponsorCategory) => {
     return (
         <Fragment>
             <h3>{category.title}</h3>
-            <p>More too be announced!</p>
             <ul class={style.sponsorlist}>
                 {sponsors.map((sponsor: Sponsor) => (
                     <li key={sponsor.logoKey} data-type={category.type}>
+
                         <a
                             href={sponsor.url}
                             target="_blank"
                             rel="noopener"
                             title={sponsor.title}
                         >
+
+                            <div class={style.topbar}>
+                                <hr/>
+                            </div>
+
                             <div class={style.img}>
                                 <img
                                     src={sponsorLogoMap[
                                         sponsor.logoKey
                                     ].toString()}
                                     alt={sponsor.title}
                                 />
+
+                            </div>                        
+                            <p>{sponsor.title}</p>           
+
+                            <div class={style.bottombar}>
+                                <hr/>
                             </div>
-                            <p>{sponsor.title}</p>
-                        </a>
+
+                        </a>                 
                     </li>
                 ))}
             </ul>