Implement/aboutpage

components/ImageScroll.vue

@@ -0,0 +1,75 @@
+<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>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+interface Props {
+    title: string;
+    images: string[];
+}
+
+defineProps<Props>();
+</script>
+
+<style lang="scss" scoped>
+//how much scroll should scale with # of images, 100% is width of 1 image
+@keyframes scroll {
+    0% {
+        transform: translateX(0);
+    }
+    100% {
+        transform: translateX(calc(-100% * 3));
+    }
+}
+// pause scroll on hover
+// .container:hover .image_container {
+//     animation-play-state: paused;
+// }
+.container {
+    display: flex;
+    height: 80%;
+    width: auto;
+    flex-direction: row;
+    padding-bottom: var(--indent-xl);
+    justify-content: left;
+    overflow-x: hidden;
+    z-index: 2;
+}
+.container .image_container {
+    animation: scroll 35s linear infinite; //animation time, should scale with # of images
+    width: 1200px;
+    height: auto;
+}
+
+img {
+    height: 800px;
+    max-height: 85vh;
+    min-height: 400px;
+    width: auto;
+}
+
+.image_scroller_title {
+    display: block;
+    margin-bottom: var(--indent-s);
+    text-align: center;
+    margin-top: var(--indent-s);
+}
+
+.content {
+    background: var(--theme-color);
+    flex-grow: 1;
+}
+</style>

components/TheHeader.vue

@@ -3,7 +3,7 @@
         <NuxtLink href="/"><NuxtImg src="/images/logo.png" /></NuxtLink>
         <div>
             <a href="#">Tickets</a>
-            <a href="#">About us</a>
+            <a href="/about">About us</a>
             <a href="#">My Area</a>
         </div>
     </nav>

layouts/default.vue

@@ -13,6 +13,7 @@
     --theme-color: #1a2b43;
     --theme-color-alt: #ffe574;
     --color-white: #fff;
+    --alpha: 0.5;
 
     --indent-s: 8px;
     --indent-m: 16px;
@@ -23,6 +24,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;

pages/about.vue

@@ -0,0 +1,36 @@
+<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.
+            </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>