Holding page (#43) (#44)

Co-authored-by: danrparker <95368712+danrparker@users.noreply.github.com>

app.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="container mx-auto h-screen flex items-center">
     <HoldingPage />
   </div>
 </template>

assets/css/main.css

@@ -0,0 +1,16 @@
+body {
+  @apply text-[#231f20];
+  font-family: "ff-good-web-pro-extra-conden", sans-serif;
+}
+
+.countdown-tile {
+  @apply flex justify-center items-center w-36 h-36 border-8 border-[#231f20] bg-gradient-to-b from-[#ffffff] from-60% to-[#231f20] to-100%;
+}
+
+.countdown-text {
+  @apply text-6xl font-bold font-black;
+}
+
+.countdown-title {
+  @apply text-3xl font-extrabold;
+}

components/Countdown.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="grid grid-cols-2 sm:grid-cols-4 gap-6">
+    <div class="flex flex-col items-center gap-4">
+      <div class="countdown-tile">
+        <p class="countdown-text">
+          {{ time.days }}
+        </p>
+      </div>
+      <p class="countdown-title">
+        DAYS
+      </p>
+    </div>
+    <div class="flex flex-col items-center gap-4">
+      <div class="countdown-tile">
+        <p class="countdown-text">
+          {{ time.hours }}
+        </p>
+      </div>
+      <p class="countdown-title">
+        HOURS
+      </p>
+    </div>
+    <div class="flex flex-col items-center gap-4">
+      <div class="countdown-tile">
+        <p class="countdown-text">
+          {{ time.minutes }}
+        </p>
+      </div>
+      <p class="countdown-title">
+        MINUTES
+      </p>
+    </div>
+    <div class="flex flex-col items-center gap-4">
+      <div class="countdown-tile">
+        <p class="countdown-text">
+          {{ time.seconds }}
+        </p>
+      </div>
+      <p class="countdown-title">
+        SECONDS
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RosesCountdown',
+  props: {
+    date: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      time: {
+        days: 0,
+        hours: 0,
+        minutes: 0,
+        seconds: 0,
+      },
+    }
+  },
+  mounted() {
+    this.countdown()
+  },
+  methods: {
+    countdown() {
+      const countDownDate = new Date(this.date).getTime()
+      const x = setInterval(() => {
+        const now = new Date().getTime()
+        const distance = countDownDate - now
+        this.time.days = Math.floor(distance / (1000 * 60 * 60 * 24))
+        this.time.hours = Math.floor(
+          (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
+        )
+        this.time.minutes = Math.floor(
+          (distance % (1000 * 60 * 60)) / (1000 * 60),
+        )
+        this.time.seconds = Math.floor((distance % (1000 * 60)) / 1000)
+        if (distance < 0) {
+          clearInterval(x)
+          this.time.days = 0
+          this.time.hours = 0
+          this.time.minutes = 0
+          this.time.seconds = 0
+        }
+      }, 1000)
+    },
+  },
+}
+</script>

components/HoldingPage.vue

@@ -1,28 +1,38 @@
 <template>
-  <div class="flex h-screen items-center justify-center bg-beige shadow">
-    <div class="flex w-10/12 flex-col">
-      <img
-        class="my-4 w-10/12 md:w-6/12"
-        src="https://assets-cdn.sums.su/YU/IMG/Website/new_logo_beige.png"
-        alt="University of York Students' Union"
-        loading="lazy"
-      >
-      <h1 class="my-4 text-xl">
-        This is a special purpose website, and is currently under construction..
-      </h1>
-      <h1 class="my-4 text-xl">
-        To get in touch with us, you can contact us at
-        <a
-          href="mailto:helpdesk@yorksu.org"
-          class="text-blue-800 underline"
-        >helpdesk@yorksu.org</a>.
+  <div class="flex flex-wrap justify-center items-center gap-y-8">
+    <img
+      src="https://assets-cdn.sums.su/YU/website/img/Roses/500x500_Roses_Holding_Page.webp"
+      class="aspect-square"
+      alt="Roses 2025 logo"
+    >
+    <div class="flex flex-col gap-y-8 text-center">
+      <h1 class="text-5xl xxs:text-6xl sm:text-8xl">
+        #RosesAreWhite
       </h1>
+      <RosesCountdown date="2025-05-02T20:00:00" />
+      <div class="flex justify-center">
+        <SocialLinks />
+      </div>
+      <div class="flex justify-center items-center gap-6">
+        <a href="https://yorksu.org/"><img
+          src="https://assets-cdn.sums.su/YU/website/img/yorksu-logo-black-full.png"
+          alt="University of York Students' Union"
+          class="w-40"
+        ></a>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import RosesCountdown from './Countdown.vue'
+import SocialLinks from './Socials.vue'
+
 export default {
   name: 'HoldingPage',
+  components: {
+    RosesCountdown,
+    SocialLinks,
+  },
 }
 </script>

components/Socials.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="flex gap-6 text-2xl xxs:text-3xl">
+    <a
+      href="https://www.instagram.com/yorkunisu"
+      target="_blank"
+    ><i class="fa-brands fa-instagram" /></a>
+    <a
+      href="https://www.facebook.com/yorkunisu"
+      target="_blank"
+    ><i class="fa-brands fa-facebook" /></a>
+    <a
+      href="https://tiktok.com/@yorkunisu"
+      target="_blank"
+    ><i class="fa-brands fa-tiktok" /></a>
+    <a
+      href="http://www.youtube.com/@ThisIsRosesLive"
+      target="_blank"
+    ><i class="fa-brands fa-youtube" /></a>
+    <a
+      href="https://github.com/YUSU-Dev/roses-live"
+      target="_blank"
+    ><i class="fa-brands fa-github" /></a>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'SocialLinks',
+}
+</script>

nuxt.config.ts

@@ -8,10 +8,27 @@ export default defineNuxtConfig({
       autoSubfolderIndex: false,
     },
   },
+  css: ['~/assets/css/main.css'],
   modules: ['@nuxt/eslint', '@sentry/nuxt/module', '@nuxtjs/tailwindcss'],
   eslint: {
     config: {
       stylistic: true,
     },
   },
+  app: {
+    head: {
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/x-icon',
+          href: '/yorksu-logo-black-icon.png',
+        },
+        { rel: 'stylesheet', href: 'https://use.typekit.net/nks8xpu.css' },
+        {
+          rel: 'stylesheet',
+          href: 'https://use.fontawesome.com/releases/v6.7.1/css/all.css',
+        },
+      ],
+    },
+  },
 })