add navigation and faq

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>
         <p>
             Join us on May 25th and May 26th in this all-inclusive 24 hour

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/index.ts

@@ -7,3 +7,4 @@ export { Icon } from "./icon";
 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>
+);

src/components/navigation/style.scss

@@ -0,0 +1,23 @@
+@import "./src/mixins";
+@import "./src/variables";
+
+.navigation {
+    border: 5px solid $primary-color;
+
+    div {
+        display: flex;
+        gap: 16px;
+        font-size: 20px;
+        margin: 4px 8px;
+
+        .time {
+            margin-left: auto;
+            margin-right: 0;;
+        }
+        .icon {
+            color: $secondary-color;
+            margin: 0 8px;
+            vertical-align: middle;
+        }
+    } 
+}

src/components/timeline/index.tsx

@@ -11,7 +11,7 @@ import * as style from "./style.scss";
  * Renders the timeline section.
  */
 export const Timeline: FunctionalComponent = () => (
-    <section class={style.timeline}>
+    <section class={style.timeline} id='timetable'>
         <h2>Timetable</h2>
         <p>
             This is an indication of the schedule of the event! It is an

src/index.tsx

@@ -6,6 +6,7 @@ import {
     FAQ,
     Footer,
     Header,
+    Navigation,
     Photos,
     Sponsors,
     Timeline,
@@ -20,6 +21,7 @@ const start = (): void => {
     render(
         <Fragment>
             <Header />
+            <Navigation />
             <About />
             <Photos />
             <Timeline />