From 8674fe2be20557e937e72b959eae15bf0f1d3029 Mon Sep 17 00:00:00 2001
From: therealwolf42 <76-therealwolf42@users.noreply.gitlab.syncad.com>
Date: Mon, 10 Nov 2025 22:21:38 +0100
Subject: [PATCH 1/2] fix countdown position

---
 src/components/infobar/infobar.vue | 47 +++++++++++++++----
 src/layouts/default.vue            | 14 +-----
 src/pages/index.vue                | 72 ++++++++++++++++++------------
 3 files changed, 83 insertions(+), 50 deletions(-)

diff --git a/src/components/infobar/infobar.vue b/src/components/infobar/infobar.vue
index de1cf28..8774be0 100644
--- a/src/components/infobar/infobar.vue
+++ b/src/components/infobar/infobar.vue
@@ -17,9 +17,17 @@
       </div>
       <div class="infobar__countdown__timeBox" @click="go()">
         <span class="infobar__countdown__time">{{ formattedCountdown }}</span>
+        <fa-icon
+          class="infobar__countdown__icon"
+          :icon="['fas', 'external-link-alt']"
+        />
       </div>
     </div>
-    <div v-if="state.setInterval && isReady" class="infobar__ready" @click="go()">
+    <div
+      v-if="state.setInterval && isReady"
+      class="infobar__ready"
+      @click="go()"
+    >
       {{ infobar.titleReady }}
     </div>
   </div>
@@ -72,7 +80,10 @@ export default defineComponent({
       // Only show leading zeros when needed
       state.d = String(dNum)
       state.h = dNum > 0 ? (hNum < 10 ? '0' : '') + String(hNum) : String(hNum)
-      state.m = (dNum > 0 || hNum > 0) ? (mNum < 10 ? '0' : '') + String(mNum) : String(mNum)
+      state.m =
+        dNum > 0 || hNum > 0
+          ? (mNum < 10 ? '0' : '') + String(mNum)
+          : String(mNum)
       state.s = (sNum < 10 ? '0' : '') + String(sNum)
     }
 
@@ -121,12 +132,8 @@ export default defineComponent({
 
 <style lang="scss">
 .infobar {
-  position: absolute;
-  right: 0;
-  left: 0;
-  top: 120px;
   width: fit-content;
-  margin: 0 auto;
+  margin: -160px auto 50px auto;
   text-align: center;
 
   &--active {
@@ -167,6 +174,10 @@ export default defineComponent({
       min-width: 250px;
       cursor: pointer;
       transition: transform 0.5s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
 
       &:hover {
         transform: translateY(-10%);
@@ -180,6 +191,13 @@ export default defineComponent({
       letter-spacing: 2px;
       color: white;
     }
+
+    &__icon {
+      height: 10px;
+      width: 10px;
+      color: white;
+      opacity: 0.8;
+    }
   }
 
   &__ready {
@@ -194,16 +212,27 @@ export default defineComponent({
   }
 }
 
+@media (max-height: 800px) {
+  .infobar {
+    margin-top: 0;
+    margin-bottom: 30px;
+  }
+}
+
 @media (max-width: 600px) {
   .infobar {
-    top: 100px;
-    padding: 12px 20px;
+    margin-top: 0;
+    margin-bottom: 20px;
 
     &__countdown {
       &__textWrapper {
         font-size: 0.8rem;
       }
 
+      &__timeBox {
+        padding: 12px 20px;
+      }
+
       &__time {
         font-size: 1.5rem;
         letter-spacing: 1.5px;
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 0398990..a99e379 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,7 +1,6 @@
 <template>
   <div class="layout layout--default">
     <Header class="layout__header" :items="headerNavigation" />
-    <Infobar v-if="showInfobar" />
     <nuxt class="layout__main" />
     <div class="layout__socials">
       <SocialIcon
@@ -35,29 +34,20 @@ import {
   NAVIGATION_HEADER,
   NAVIGATION_FOOTER,
   SOCIAL_MEDIAS,
-  INFOBAR,
 } from '../helpers/var'
-import Infobar from '~/components/infobar/infobar.vue'
 import Header from '~/components/header/header.vue'
 import Footer from '~/components/footer/footer.vue'
 import SocialIcon from '~/components/icon/icon.vue'
 
 export default defineComponent({
-  components: {Header, Footer, Infobar, SocialIcon},
+  components: {Header, Footer, SocialIcon},
   props: {},
   setup(_props, {root}) {
     const headerNavigation = ref(NAVIGATION_HEADER)
     const footerNavigation = ref(NAVIGATION_FOOTER)
     const socials = ref(SOCIAL_MEDIAS)
-    const infobar = ref(INFOBAR)
 
     const preventScroll = computed(() => root.$accessor.preventScroll)
-    const showInfobar = computed(
-      () =>
-        INFOBAR.show &&
-        INFOBAR.routes.includes(String(root.$route.name)) &&
-        root.$route.name,
-    )
 
     onMounted(() => {
       watch(
@@ -81,8 +71,6 @@ export default defineComponent({
       headerNavigation,
       footerNavigation,
       socials,
-      infobar,
-      showInfobar,
     }
   },
 })
diff --git a/src/pages/index.vue b/src/pages/index.vue
index c369b05..8e08e18 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -1,37 +1,42 @@
 <template>
   <div class="root">
     <div class="root__home root__container">
-      <div class="root__home__left">
-        <h1 v-if="false" class="root__headTitle">Fast. Scalable. Powerful.</h1>
-        <h1 class="root__headTitle">Fast.</h1>
-        <h1 class="root__headTitle">Scalable.</h1>
-        <h1 class="root__headTitle">Powerful.</h1>
-        <h3 class="root__subtitle">The Blockchain for Web3</h3>
-        <div class="root__buttons">
-          <el-button
-            class="root__learnMore"
-            type="primary"
-            @click="$router.push('/about')"
-            >{{ $t('root.learnMore') }}</el-button
-          >
+      <Infobar />
+      <div class="root__home__wrapper">
+        <div class="root__home__left">
+          <h1 v-if="false" class="root__headTitle">
+            Fast. Scalable. Powerful.
+          </h1>
+          <h1 class="root__headTitle">Fast.</h1>
+          <h1 class="root__headTitle">Scalable.</h1>
+          <h1 class="root__headTitle">Powerful.</h1>
+          <h3 class="root__subtitle">The Blockchain for Web3</h3>
+          <div class="root__buttons">
+            <el-button
+              class="root__learnMore"
+              type="primary"
+              @click="$router.push('/about')"
+              >{{ $t('root.learnMore') }}</el-button
+            >
+          </div>
         </div>
+        <!-- <Video class="video" /> -->
+        <Logo class="root__home__logo" :full="false" />
       </div>
-      <!-- <Video class="video" /> -->
-      <Logo class="root__home__logo" :full="false" />
     </div>
 
     <scrollindicator style="margin: 0 auto 0px auto; margin-bottom: 40px" />
 
     <!-- Ecosystem -->
-    <RootEco class="secondarybg"/>
+    <RootEco class="secondarybg" />
 
     <!-- Fast transactions -->
     <!--div class="root__general root__container secondarybg">
       <div class="root__general__inner root__container__inner non-reverse">
         <div class="root__general__image-container">
           <img class="root__general__image" src="~/assets/images/fast.png" /-->
-          <!-- <div class="root__general__image-background"></div> -->
-        <!--/div>
+    <!-- <div class="root__general__image-background"></div> -->
+    <!--/div>
         <div class="root__general__left">
           <h2 class="root__general__title">{{ $t('root.fastTitle') }}</h2>
           <p class="root__general__description">
@@ -44,8 +49,8 @@
           >
             {{ $t('root.fastButton') }}</el-button
           -->
-          <!--  -->
-        <!--/div>
+    <!--  -->
+    <!--/div>
       </div>
     </div -->
 
@@ -188,8 +193,8 @@
           >
             {{ $t('root.walletsButton') }}</el-button
           -->
-          <!--  -->
-        <!-- /div>
+    <!--  -->
+    <!-- /div>
         <div class="root__wallets__image-container">
           <img class="root__wallets__image" src="~/assets/images/vault.svg" />
           <div class="root__wallets__image-background"></div>
@@ -298,24 +303,38 @@ export default defineComponent({
   }
 
   &__home {
+    display: flex;
+    flex-direction: column !important;
     align-items: center;
+    justify-content: center;
     padding: 60px 20px 0px 20px;
     min-height: calc(
       100vh - 90px - 60px - 80px
     ); /* 100vh - header - padding  */
 
+    &__wrapper {
+      display: flex;
+      flex-direction: row !important;
+      align-items: center;
+      justify-items: center;
+      position: relative;
+      flex-shrink: 0;
+      flex-wrap: nowrap;
+    }
+
     &__logo {
       height: 150px;
       margin-left: -55px;
-      margin-top: -180px;
+      margin-top: -130px;
+      flex-shrink: 0;
     }
     &__left {
       height: fit-content;
       display: flex;
       flex-flow: column;
       justify-content: center;
-      margin-top: -50px;
       min-width: 433px;
+      flex-shrink: 0;
     }
   }
 
@@ -563,9 +582,6 @@ export default defineComponent({
   max-width: 640px !important;
 }
 @media (max-width: 1000px) {
-  .root__home {
-    flex-flow: wrap !important;
-  }
   .video {
     margin-top: 40px;
     margin-bottom: 10px;
@@ -633,7 +649,7 @@ export default defineComponent({
     }
 
     &__wallets__image,
-    &__hbd__image, {
+    &__hbd__image {
       width: 100px;
     }
 
-- 
GitLab


From b05e1f5d9fa2364c534380653503b3657bf4ab77 Mon Sep 17 00:00:00 2001
From: therealwolf42 <76-therealwolf42@users.noreply.gitlab.syncad.com>
Date: Mon, 10 Nov 2025 22:27:13 +0100
Subject: [PATCH 2/2] fix to load instant

---
 src/components/infobar/infobar.vue | 40 +++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 9 deletions(-)

diff --git a/src/components/infobar/infobar.vue b/src/components/infobar/infobar.vue
index 8774be0..326e911 100644
--- a/src/components/infobar/infobar.vue
+++ b/src/components/infobar/infobar.vue
@@ -49,17 +49,41 @@ export default defineComponent({
   props: {},
 
   setup() {
+    const infobar = ref(INFOBAR)
+
+    const getInitialCountdown = () => {
+      const then = moment.utc(INFOBAR.date).valueOf()
+      const now = moment.utc().valueOf()
+      if (then - now < 0) {
+        return {d: '0', h: '0', m: '0', s: '0'}
+      }
+      const countdown = moment(then - now)
+      const dNum = Number(countdown.utc().format('DD')) - 1
+      const hNum = Number(countdown.utc().format('HH'))
+      const mNum = Number(countdown.utc().format('mm'))
+      const sNum = Number(countdown.utc().format('ss'))
+
+      return {
+        d: String(dNum),
+        h: dNum > 0 ? (hNum < 10 ? '0' : '') + String(hNum) : String(hNum),
+        m:
+          dNum > 0 || hNum > 0
+            ? (mNum < 10 ? '0' : '') + String(mNum)
+            : String(mNum),
+        s: (sNum < 10 ? '0' : '') + String(sNum),
+      }
+    }
+
+    const initial = getInitialCountdown()
     const state = reactive({
-      d: '0',
-      h: '0',
-      m: '0',
-      s: '00',
+      d: initial.d,
+      h: initial.h,
+      m: initial.m,
+      s: initial.s,
       interval: null as any,
-      setInterval: false,
+      setInterval: true,
     })
 
-    const infobar = ref(INFOBAR)
-
     const setCountdown = () => {
       const then = moment.utc(INFOBAR.date).valueOf()
       const now = moment.utc().valueOf()
@@ -88,9 +112,7 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      setCountdown()
       state.interval = setInterval(() => {
-        state.setInterval = true
         setCountdown()
       }, 1000)
     })
-- 
GitLab