rbcn banner

Author: samipe

src/assets/css/text.css

@@ -23,6 +23,10 @@
     font-display: swap;
     font-weight: 600;
 }
+@font-face {
+    font-family: RBCN;
+    src: url('~Fonts/RBCN23.woff2') format('woff');
+}
 
 h1, h2, h3, h4 {
     font-family: var(--font-title);

src/assets/fonts/RBCN23.woff2

@@ -1,10 +1,8 @@
 <template>
   <div class="row bg-theme center p-medium">
     <div>
-      <h1 class="title">
-        ROBOT<br>
-        FRAME<br>
-        WORK<div style="font-size: 2.5rem; transform: translateY(-.5rem); display: inline-block;">🇺🇦</div>
+      <h1 class="title color-black">
+        ROBOT FRAMEWORK
       </h1>
     </div>
   </div>
@@ -17,9 +15,8 @@ export default {
 </script>
 
 <style scoped>
-
-  .title::first-line {
-    color: var(--color-white);
+  .title {
+    font-size: 2rem;
   }
 
 </style>

src/components/Banner.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="font-title type-uppercase bg-black color- type-center p-large type-large color-white">
+    <div class="row center bottom">
+      <div class=" ml-small col-sm-12">
+        <div class="timer">
+            <span class="color-robocon">{{ countdown.days }}</span> days
+            <span class="color-robocon">{{ countdown.hours }}</span> hrs
+            <span class="color-robocon">{{ countdown.minutes }}</span> mins
+            <span class="color-robocon">{{ countdown.seconds }}</span> sec
+        </div>
+        <div class="mx-small">
+          to
+        </div>
+      </div>
+      <div class="col-sm-12">
+        <div class="line-height-1 title-robocon">
+          RBCN<span class="color-robocon">23</span>
+        </div>
+        <div class="line-height-1 mb-small" style="font-size: 1.5rem;">
+          ONLINE CONFERENCE
+        </div>
+      </div>
+    </div>
+    <a class="type-large color-robocon" href="https://robocon.io/">
+      Get your discounted ticket!
+    </a>
+  </div>
+</template>
+
+<script>
+import { differenceInDays, differenceInHours, differenceInMinutes, differenceInSeconds } from 'date-fns'
+export default {
+  name: 'BannerRobocon',
+  data: () => ({
+    timeNow: new Date(),
+    eventDate: new Date('2023-03-01T09:00Z')
+  }),
+  computed: {
+    countdown() {
+      return {
+        days: this.numberToPaddedString(differenceInDays(this.eventDate, this.timeNow)),
+        hours: this.numberToPaddedString(differenceInHours(this.eventDate, this.timeNow) % 24),
+        minutes: this.numberToPaddedString(differenceInMinutes(this.eventDate, this.timeNow) % 60),
+        seconds: this.numberToPaddedString(differenceInSeconds(this.eventDate, this.timeNow) % 60)
+      }
+    }
+  },
+  mounted() {
+    setInterval(() => (this.timeNow = new Date()), 1000)
+  },
+  methods: {
+    numberToPaddedString: (number) => `${number}`.length === 2 ? `${number}` : `0${number}`
+  }
+}
+</script>
+
+<style scoped>
+.color-robocon {
+  color: #ff9f00;
+}
+.title-robocon {
+  font-family: RBCN;
+  letter-spacing: 0.25rem;
+  margin-top: -1rem;
+  font-size: 8rem;
+}
+@media screen and (max-width: 768px) {
+  .title-robocon {
+    font-size: 27vw;
+  }
+  .timer {
+    font-size: 4vw;
+  }
+}
+</style>

src/components/RoboconBanner.vue

@@ -1,5 +1,6 @@
 import NewsBanner from './NewsBanner.vue'
 import Banner from './Banner.vue'
+import RoboconBanner from './RoboconBanner.vue'
 import PageFooter from './PageFooter.vue'
 import Navbar from './Navbar.vue'
 import NavbarSubPage from './NavbarSubPage.vue'
@@ -25,6 +26,7 @@ import DocumentIcon from './icons/DocumentIcon.vue'
 export {
   NewsBanner,
   Banner,
+  RoboconBanner,
   PageFooter,
   Navbar,
   NavbarSubPage,

src/components/index.js

@@ -1,5 +1,6 @@
 <template>
   <nav-mobile />
+  <robocon-banner />
   <banner />
   <navbar class="nav-desktop" />
   <news-banner
@@ -89,7 +90,8 @@ import {
   ResourceBox,
   TabBox,
   Sponsors,
-  Milestones
+  Milestones,
+  RoboconBanner
 } from 'Components'
 import VideoComponent from 'Components/VideoComponent'
 
@@ -110,6 +112,7 @@ export default {
     TabBox,
     Sponsors,
     Milestones,
+    RoboconBanner,
     MonacoEditor: defineAsyncComponent(() => import('Components/Editor.vue'))
   }
 }