Implement/aboutpage

components/ImageScroll.vue

@@ -0,0 +1,79 @@
+<template>
+    <div>
+        <h2 class="image_scroller_title">{{ title }}</h2>
+        <div class="container">
+            <div v-for="i in images" :key="i" class="image_container">
+                <NuxtImg :src="i" />
+            </div>
+            <div class="image_container">
+                <NuxtImg :src="images[0]" />
+            </div>
+            <div class="image_container">
+                <NuxtImg :src="images[1]" />
+            </div>
+            <input id="count" type="number" :value="images.length" />
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    title: string;
+    images: string[];
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+:root {
+    --end-translate: 0;
+}
+
+//how much scroll, should scale with # of images, 100% is width of 1 image
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(-300%);
+    }
+}
+
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    overflow-x: auto;
+    counter-reset: c 0;
+    height: 80%;
+    z-index: 2;
+}
+.container .image_container {
+    animation: scroll 35s linear infinite; //animation time, should scale with # of images
+    counter-increment: c 1;
+}
+
+// pause scroll on hover
+// .container:hover .image_container {
+//     animation-play-state: paused;
+// }
+
+::-webkit-scrollbar {
+    height: 0;
+}
+
+.image_scroller_title {
+    display: flex;
+    position: absolute;
+    padding-top: var(--indent-m);
+    margin-left: 50%;
+    z-index: 1;
+}
+
+.content {
+    background: var(--theme-color);
+    flex-grow: 1;
+    padding: var(--indent-xl);
+}
+</style>

components/TheHeader.vue

@@ -1,9 +1,11 @@
 <template>
     <nav class="header" :class="{ sticky: y > 0 }">
-        <NuxtImg class="header__img" src="/images/logo.png" />
+        <a class="header__link" href="/">
+            <NuxtImg class="header__img" src="/images/logo.png" />
+        </a>
         <div class="header__link">
             <a class="header__link" href="#">Tickets</a>
-            <a class="header__link" href="#">About us</a>
+            <a class="header__link" href="/aboutus">About us</a>
             <a class="header__link" href="#">My Area</a>
         </div>
     </nav>

layouts/default.vue

@@ -23,6 +23,7 @@
     --font-size-m: 1.6rem;
     --font-size-l: 2rem;
     --font-size-xl: 3.2rem;
+    --font-size-xxl: 4rem;
 
     --line-height-s: 1.8rem;
     --line-height-m: 2rem;
@@ -54,6 +55,14 @@ a:active {
     color: inherit;
 }
 
+h1 {
+    color: var(--theme-color-alt);
+    font-size: var(--font-size-xxl);
+    line-height: var(--line-height-xl);
+    font-weight: 700;
+    margin-top: 0;
+}
+
 h2 {
     color: var(--theme-color-alt);
     font-size: var(--font-size-xl);

pages/aboutus.vue

@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <TextImage image="/Images/Gamers.jpg" :inverse="false">
+            <h1 style="padding-top: 48px">Who are we?</h1>
+            <p>
+                The LANcie is the committee that organises AreaFiftyLAN each
+                year. It's our job to make sure everything goes to plan and that
+                all potential problems are taken care of. We don't bite, so
+                don't hesitate to contact us with a good story, some questions
+                or just a casual conversation about gaming. We're always open to
+                feedback and fun ideas. We hope to see you at the event! If you
+                have any questions or are interested in sponsoring the event,
+                please send an email with our contact form.
+                <br /><br />
+                Logi is the best position by the way.
+            </p>
+        </TextImage>
+        <SponsorBanner :sponsors="sponsors">
+            <p>PLACEHOLDER</p>
+        </SponsorBanner>
+        <ImageScroll title="Oud LAN" :images="images"></ImageScroll>
+    </div>
+</template>
+
+<script setup lang="ts">
+const sponsors = [
+    {
+        title: "Presented by",
+        sponsors: ["/Images/chlogo.png", "/Images/chlogo.png"],
+    },
+    {
+        title: "Sponsored by",
+        sponsors: ["/Images/chlogo.png", "/Images/chlogo.png"],
+    },
+];
+
+const images = ["/Images/lan1.jpg", "/Images/lan2.jpg", "/Images/lan3.jpg"];
+</script>