remove coming soon pop up and rename btns

Regional Rumble :D

functions/register.js

@@ -0,0 +1,3 @@
+export async function onRequest() {
+  return Response.redirect('https://www.start.gg/hub/regional-rumble/details', 301);
+}

src/components/Header.vue

@@ -13,12 +13,13 @@
 
                 <div class="links">
                     <router-link :to="{ name: 'Home' }">home</router-link>
+                    <router-link :to="{ name: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''">Regional Rumble</router-link>
                     <router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''">nationals</router-link>
-                    <router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''">the kickoff</router-link>
+                    <!--<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''">the kickoff</router-link>-->
                     <router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''">news</router-link>
                     <router-link :to="{ name: 'Tournaments' }">tournaments</router-link>
                     <router-link :to="{ name: 'Team' }">team</router-link>
-                    <a href="https://discord.aplesports.com" target="_blank">discord</a>
+                    <a href="https://discord.gg/q6Nf2eh" target="_blank">discord</a>
                     <!-- <a href="https://www.patreon.com/apl_esports" target="_blank">patreon</a> -->
                     <!-- <a href="https://donate.aplesports.com" target="_blank">donate</a> -->
                 </div>
@@ -31,14 +32,15 @@
                     </div>
 
                     <router-link :to="{ name: 'Home' }" @click.native="closeMenu()">home</router-link>
+                    <router-link :to="{ name: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">Regional Rumble</router-link>
                     <router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">nationals</router-link>
-                    <router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>
-                    <router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">news</router-link>
+                    <!--<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>-->
+  <router-link :to="{ name: 'News' }" :class="$route.name === 'News' && 'router-link-active' || $route.name === 'Article' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">news</router-link>
                     <router-link :to="{ name: 'Tournaments' }" @click.native="closeMenu()">tournaments</router-link>
                     <router-link :to="{ name: 'Team' }" @click.native="closeMenu()">team</router-link>
-                    <a href="https://discord.aplesports.com" target="_blank" @click.native="closeMenu()">discord</a>
+                    <a href="https://discord.gg/q6Nf2eh" target="_blank" @click.native="closeMenu()">discord</a>
                     <!-- <a href="https://www.patreon.com/apl_esports" target="_blank" @click.native="closeMenu()">patreon</a> -->
-                    <a href="https://donate.aplesports.com" target="_blank" @click.native="closeMenu()">donate</a>
+                    <!--<a href="https://donate.aplesports.com" target="_blank" @click.native="closeMenu()">donate</a>-->
                 </div>                
             </nav>
         </div>
@@ -98,4 +100,4 @@ export default {
         }
     }
 }
-</script>
+</script>

src/router/index.js

@@ -50,6 +50,26 @@ Vue.use(VueRouter)
     name: 'Nationals Register',
     component: () => import('../views/NationalsRegister.vue')
   },
+  {
+    path: '/regionalrumble',
+    name: 'RumbleMain',
+    component: () => import('../views/RegionalRumble.vue'),
+  },
+  {
+    path: '/regionalrumble/apac',
+    name: 'RumbleApac',
+    component: () => import('../views/AsianRumble.vue'),
+  },
+  {
+    path: '/regionalrumble/mena',
+    name: 'RumbleMena',
+    component: () => import('../views/MERumble.vue'),
+  },
+  {
+    path: '/regionalrumble/ssa',
+    name: 'RumbleSsa',
+    component: () => import('../views/AfricanRumble.vue'),
+  },
   {
     path: '*',
 	name: 'NotFound',

src/scss/main.scss

@@ -30,7 +30,9 @@
   'pages/tournaments',
   'pages/about',
   'pages/kickoff',
-  'pages/nationals';
+  'pages/nationals',
+  'pages/rumble',
+  'pages/rumbleregions';
 
 @import
   'themes/default';

src/scss/pages/_rumble.scss

@@ -0,0 +1,332 @@
+.rumble {
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+  scroll-snap-type: y mandatory;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  .bg-only {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 400%;
+    width: 400%;
+    overflow: hidden;
+    z-index: -1;
+    background-color: #161616;
+    opacity: 0.1;
+    rotate: 30deg;
+    transform: translate(-50%, 0);
+    background-image:  linear-gradient(#ffffff 1.8px, transparent 1.8px), linear-gradient(90deg, #ffffff 1.8px, transparent 1.8px), linear-gradient(#ffffff 0.9px, transparent 0.9px), linear-gradient(90deg, #ffffff 0.9px, #161616 0.9px);
+    background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
+    background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px;
+
+    animation: moveBg 20s ease-in-out infinite;
+  }
+
+  section {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    scroll-snap-align: start;
+
+  }
+
+  .intro {
+    position: relative;
+    flex-direction: row;
+
+    img.rumbleLogo,
+    img.rumbleRedLogo,
+    img.rumbleGreenLogo,
+    img.rumbleYellowLogo {
+      position: absolute;
+      display: block;
+    }
+    
+    img.rumbleLogo {
+      top: 47%;
+      bottom: 63%;
+      margin: auto;
+      width: 30%;
+      max-width: 576px;
+      transition: 0.15s linear;
+      z-index: 5;
+      
+      &:hover {
+        cursor: pointer;
+        animation: logoHover 0.25s ease-in-out;
+        scale: 1.1;
+        filter: drop-shadow(0px 50px 15px rgba(white, 0.25));
+      }
+    }
+
+    img.rumbleRedLogo,
+    img.rumbleGreenLogo,
+    img.rumbleYellowLogo {
+      left: 0;
+      right: 0;
+      top: 50%;
+      bottom: 50%;
+      margin: auto;
+      width: 28%;
+      max-width: 840px;
+      visibility: hidden;
+    }
+
+    img.rumbleLogo:hover ~ img.rumbleRedLogo {
+      animation: logoRedDisplay 0.25s ease-in-out;
+    }
+
+    img.rumbleLogo:hover ~ img.rumbleGreenLogo {
+      animation: logoGreenDisplay 0.25s ease-in-out;
+    }
+
+    img.rumbleLogo:hover ~ img.rumbleYellowLogo {
+      animation: logoYellowDisplay 0.25s ease-in-out;
+    }
+
+    img.rlLogo {
+      position: absolute;
+      min-width: 100px;
+      width: 7%;
+      display: block;
+      align-self: flex-end;
+      left: 0;
+      right: 0;
+      top: 60%;
+      bottom: 0;
+      margin: auto;
+    }
+
+    .scroll-indicator {
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      bottom: 5%;
+      rotate: 90deg;
+      text-transform: uppercase;
+      font-size: 0.8rem;
+      animation: moveScroll 2s ease-in-out infinite;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 30px;
+        height: 1px;
+        background: white;
+      }
+    }
+  }
+
+  .selector {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    div {
+      position: relative;
+      width: calc(100vw / 3);
+      height: 100vh;
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: all 0.5s ease;
+
+      &.apac {
+        background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg');
+        background-position: 25% 50%;
+      }
+
+      &.me {
+        background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085e8004a71neom-9633dHhioC8-unsplash1.jpg');
+        background-position: 50% 50%;
+      }
+
+      &.ssa {
+        background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085e22e5166lina-loos-04-C1NZk1hE-unsplash.jpg');
+        background-position: 40% 50%;
+      }
+
+      &:hover {
+        width: calc(calc(100vw / 3) + 50%);
+        cursor: pointer;
+      }
+
+      img {
+        width: 50%;
+      }
+
+      .unoverlay {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(black, 0);
+        transition: 0.5s ease-in-out;
+      }
+    }
+  }
+  section.footer {
+    font-family: $text-font-stack;
+    width: 100%;
+    min-height: 200px;
+    height: 200px;
+    padding: 2rem 2rem;
+    background: lighten($bg-color, 20%);
+    text-align: center;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+    line-height: 1.5;
+  }
+}
+
+@keyframes moveBg {
+  0% {
+    transform: translate(-50%, 0);
+  }
+  50% {
+    transform: translate(-50%, 2%);
+  }
+  100% {
+    transform: translate(-50%, 0);
+  }
+}
+
+@keyframes logoHover {
+  0% {
+    scale: 1;
+    rotate: 0;
+  }
+  25% {
+    rotate: 2deg;
+  }
+  50% {
+    rotate: -2deg;
+  }
+  75% {
+    rotate: 2deg;
+  }
+  100% {
+    scale: 1.1;
+    rotate: 0;
+  }
+}
+
+@keyframes logoRedDisplay {
+  0% {
+    visibility: hidden;
+  }
+  25% {
+    visibility: visible;
+  }
+  40% {
+    visibility: hidden;
+  }
+  75% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: hidden;
+  }
+}
+
+@keyframes logoGreenDisplay {
+  0% {
+    visibility: hidden;
+  }
+  25% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: visible;
+  }
+  60% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: hidden;
+  }
+}
+
+@keyframes logoYellowDisplay {
+  0% {
+    visibility: hidden;
+  }
+  25% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: hidden;
+  }
+  75% {
+    visibility: visible;
+  }
+  90% {
+    visibility: hidden;
+  }
+}
+
+@keyframes moveScroll {
+  0% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translate(10%, 0);
+  }
+  20% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .rumble > .intro {
+    img.rumbleLogo {
+      width: calc(100vw * 0.8);
+    }
+
+    img.rumbleRedLogo,
+    img.rumbleGreenLogo,
+    img.rumbleYellowLogo {
+      width: 95%;
+    }
+
+  }
+
+  .rumble > .selector {
+    flex-direction: column;
+
+    div {
+      width: 100vw;
+      height: calc(100vh / 3);
+
+      img {
+        width: auto;
+        min-height: 100px;
+        height: 30%;
+        transition: 0.5s ease;
+      }
+
+      &:hover {
+        width: 100vw;
+        height: 70vh;
+      }
+
+      &.apac:hover > img {
+        margin-top: 50%;
+      }
+
+      &.ssa:hover > img {
+        margin-bottom: 50%;
+      }
+    }
+  }
+}

src/scss/pages/_rumbleregions.scss

@@ -0,0 +1,149 @@
+.regional {
+  .bg-only {
+    position: fixed;
+    top: 0;
+    left: 0;
+    height: 400%;
+    width: 400%;
+    overflow: hidden;
+    z-index: -1;
+    background-color: #161616;
+    opacity: 0.1;
+    rotate: 30deg;
+    transform: translate(-50%, 0);
+    background-image:  linear-gradient(#ffffff 1.8px, transparent 1.8px), linear-gradient(90deg, #ffffff 1.8px, transparent 1.8px), linear-gradient(#ffffff 0.9px, transparent 0.9px), linear-gradient(90deg, #ffffff 0.9px, #161616 0.9px);
+    background-size: 45px 45px, 45px 45px, 9px 9px, 9px 9px;
+    background-position: -1.8px -1.8px, -1.8px -1.8px, -0.9px -0.9px, -0.9px -0.9px;
+
+    animation: moveBg 20s ease-in-out infinite;
+  }
+  section {
+    min-height: 100vh;
+
+    &.hero {
+      position: relative;
+
+      img {
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        bottom: 0;
+        margin: auto;
+        min-width: 300px;
+        width: 20%;
+        max-width: 500px;
+      }
+
+      .goback {
+        padding-top: 100px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: row;
+        max-width: 300px;
+        justify-content: space-evenly;
+        align-items: center;
+
+        p {
+          font-size: 14pt;
+        }
+        svg {
+          width: 24px;
+          height: 24px;
+          fill: white;
+        }
+
+        &:hover {
+          cursor: pointer;
+
+          p {
+            text-decoration-line: underline;
+          }
+        }
+      }
+    }
+
+    &.info {
+      min-height: 100vh;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      .infomercial {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+
+        div {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          width: calc(calc(100vw / 2) - 4rem);
+          h2 {
+            text-align: center;
+          }
+        }
+      }
+    }
+
+    &.trailer {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 1rem 2rem;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        max-width: 1280px;
+        max-height: 720px;
+      }
+    }
+  }
+  footer {
+    font-family: $text-font-stack;
+    width: 100%;
+    padding: 2rem 2rem;
+    background: lighten($bg-color, 20%);
+    text-align: center;
+    font-size: 1rem;
+    letter-spacing: 0.5px;
+    line-height: 1.5;
+  }
+}
+
+
+@keyframes moveBg {
+  0% {
+    transform: translate(-50%, 0);
+  }
+  50% {
+    transform: translate(-50%, 2%);
+  }
+  100% {
+    transform: translate(-50%, 0);
+  }
+}
+
+@media screen and (max-width: 960px) {
+  .regional > section.info {
+    padding: 1rem 2rem;
+    margin-bottom: 5rem;
+
+    .infomercial {
+      flex-direction: column;
+      width: 100%;
+      height: 100%;
+
+      div {
+        width: 100%;
+        height: 100%;
+        justify-content: space-evenly;
+        align-items: flex-start;
+      }
+    }
+  }
+}

src/views/AfricanRumble.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="regional">
+    <div class="bg-only"></div>
+    <section class="hero">
+      <div class="goback" @click="goback">
+          <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero"/></svg>
+        <p>back to Regional Rumble</p>
+      </div>
+      <img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
+    </section>
+    <section class="info">
+      <h1>SSA Rumble</h1>
+      <div class="infomercial">
+        <div>
+          <h2>Biweekly Rumble - $1500 Each</h2>
+          <ul>
+            <li><b>SSA:</b> 7th October / 21st October / 4th November 2023</li>
+          </ul>
+        </div>
+        <div>
+          <h2>Regional Rumble - $15,500</h2>
+          <ul>
+            <li><b>Day 1:</b> 18th November 2023</li>
+            <li><b>Day 2:</b> 25th November 2023</li>
+          </ul>
+        </div>
+      </div>
+      <div class="register">
+        <a class="btn" href="https://www.start.gg/tournament/ssa-regional-rumble">Sign Up</a>
+      </div>
+    </section>
+    <section class="trailer">
+      <iframe src="https://www.youtube.com/embed/b53E8v2tFYw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </section>
+    <footer>
+      Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license.  &copy; 2015-2023 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners.
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AsianRumble',
+  methods: {
+    goback() {
+      this.$router.push('/regionalrumble');
+    },
+    signup() {
+      alert('Signups open soon!');
+    }
+  },
+}
+</script>

src/views/AsianRumble.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="regional">
+    <div class="bg-only"></div>
+    <section class="hero">
+      <div class="goback" @click="goback">
+          <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero"/></svg>
+        <p>back to Regional Rumble</p>
+      </div>
+      <img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
+    </section>
+    <section class="info">
+      <h1>APAC Rumble</h1>
+      <div class="infomercial">
+        <div>
+          <h2>Biweekly Rumble - $1500 Each</h2>
+          <ul>
+            <li><b>APAC N:</b> 8th October / 22nd October / 5th November 2023</li>
+            <li><b>APAC S:</b> 7th October / 21st October / 4th November 2023</li>
+          </ul>
+        </div>
+        <div>
+          <h2>Regional Rumble - $15,500</h2>
+          <ul>
+            <li><b>Day 1:</b> 19th November 2023</li>
+            <li><b>Day 2:</b> 26th November 2023</li>
+          </ul>
+        </div>
+      </div>
+      <div class="register">
+        <a class="btn" href="https://www.start.gg/tournament/apac-regional-rumble">Sign Up</a>
+      </div>
+    </section>
+    <section class="trailer">
+      <iframe src="https://www.youtube.com/embed/b53E8v2tFYw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </section>
+    <footer>
+      Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license.  &copy; 2015-2023 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners.
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AsianRumble',
+  methods: {
+    goback() {
+      this.$router.push('/regionalrumble');
+    },
+    signup() {
+      alert('Signups open soon!');
+    }
+  },
+}
+</script>

src/views/MERumble.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="regional">
+    <div class="bg-only"></div>
+    <section class="hero">
+      <div class="goback" @click="goback">
+          <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9.474 5.209s-4.501 4.505-6.254 6.259c-.147.146-.22.338-.22.53s.073.384.22.53c1.752 1.754 6.252 6.257 6.252 6.257.145.145.336.217.527.217.191-.001.383-.074.53-.221.293-.293.294-.766.004-1.057l-4.976-4.976h14.692c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-14.692l4.978-4.979c.289-.289.287-.761-.006-1.054-.147-.147-.339-.221-.53-.221-.191-.001-.38.071-.525.215z" fill-rule="nonzero"/></svg>
+        <p>back to Regional Rumble</p>
+      </div>
+      <img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
+    </section>
+    <section class="info">
+      <h1>MENA Rumble</h1>
+      <div class="infomercial">
+        <div>
+          <h2>Biweekly Rumble - <br />$2,500 each for ME / $1,000 each for NAF</h2>
+          <ul>
+            <li><b>ME:</b> 5th October / 19th October / 2nd November 2023</li>
+            <li><b>NAF:</b> 6th October / 20th October / 3rd November 2023</li>
+          </ul>
+        </div>
+        <div>
+          <h2>Regional Rumble - $20,000</h2>
+          <ul>
+            <li><b>Day 1:</b> 17th November 2023</li>
+            <li><b>Day 2:</b> 24th November 2023</li>
+          </ul>
+        </div>
+      </div>
+      <div class="register">
+        <a class="btn" href="https://www.start.gg/tournament/mena-regional-rumble">Sign Up</a>
+      </div>
+    </section>
+    <section class="trailer">
+      <iframe src="https://www.youtube.com/embed/b53E8v2tFYw" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+    </section>
+    <footer>
+      Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license.  &copy; 2015-2023 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners.
+    </footer>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MERumble',
+  methods: {
+    goback() {
+      this.$router.push('/regionalrumble');
+    },
+    signup() {
+      alert('Signups open soon!');
+    }
+  },
+}
+</script>

src/views/RegionalRumble.vue

@@ -0,0 +1,100 @@
+<template>
+  <div class="rumble">
+    <section class="intro">
+      <div class="bg-only"></div>
+      <img class="rumbleLogo" alt="Regional Rumble Logo" @click="openReg" src ="https://cms.aplesports.com/storage/uploads/2023/09/18/650841c1d9f23rr23-brand-logo-global-white.png" />
+      <img class="rumbleYellowLogo" alt="Regional Rumble SSA Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650957469adearr23-brand-logo-regional-ssa.png" />
+      <img class="rumbleGreenLogo" alt="Regional Rumble MENA Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650957436a783rr23-brand-logo-regional-mena.png" />
+      <img class="rumbleRedLogo" alt="Regional Rumble Asia Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650954c83f3farr23-brand-logo-regional-asia.png" />
+      <img class="rlLogo" alt="Featuring RL logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65084e280f323rl_featuringrl_logo.png">
+      <div class="scroll-indicator">
+        scroll&nbsp;&nbsp;
+      </div>
+    </section>
+
+    <section class="selector">
+      <div class="apac" @click="gotoRoute('/regionalrumble/apac')">
+        <span class="unoverlay"></span>
+        <img alt="Regional Rumble APAC Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65086296b79fcrr23-brand-logo-asia-white.png" />
+      </div>
+      <div class="me" @click="gotoRoute('/regionalrumble/mena')">
+        <span class="unoverlay"></span>
+        <img alt="Regional Rumble MENA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629a9ba86rr23-brand-logo-mena-white.png" />
+      </div>
+      <div class="ssa" @click="gotoRoute('/regionalrumble/ssa')">
+        <span class="unoverlay"></span>
+        <img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
+      </div>
+    </section>
+    <section class="footer">
+      Rocket League, Psyonix, and all related marks and logos are trademarks or registered trademarks of Psyonix LLC and used under license.  &copy; 2015-2023 Licensed by Psyonix LLC, All rights reserved. All other trademarks are property of their respective owners.
+    </section>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RegionalRumble',
+  methods: {
+    gotoRoute(route) {
+      document.querySelector('header').classList.remove('scroll');
+      this.$router.push(route);
+    },
+    openReg() {
+      window.open('https://www.start.gg/hub/regional-rumble');
+    },
+  },
+  mounted() {
+    const h = document.querySelector('header');
+    const container = document.querySelector('.rumble');
+    container.addEventListener('scroll', () => {
+      if(container.scrollTop > 128) {
+          if(!h.classList.contains('scroll')) {
+              h.classList.add('scroll')
+          }
+      } else {
+          if(h.classList.contains('scroll')) {
+              h.classList.remove('scroll')
+          }
+      }
+    });
+
+    const apac = document.querySelector('.apac')[0];
+    const apac_overlay = document.querySelector('.apac span');
+    const me = document.querySelector('.me')[0];
+    const me_overlay = document.querySelector('.me span');
+    const ssa = document.querySelector('.ssa')[0];
+    const ssa_overlay = document.querySelector('.ssa span');
+
+    apac_overlay.addEventListener('mouseover', () => {
+      me_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
+      ssa_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
+    });
+
+    apac_overlay.addEventListener('mouseout', () => {
+      me_overlay.style['background'] = "rgba(0, 0, 0, 0)";
+      ssa_overlay.style['background'] = "rgba(0, 0, 0, 0)";
+    });
+
+    me_overlay.addEventListener('mouseover', () => {
+      apac_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
+      ssa_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
+    });
+
+    me_overlay.addEventListener('mouseout', () => {
+      apac_overlay.style['background'] = "rgba(0, 0, 0, 0)";
+      ssa_overlay.style['background'] = "rgba(0, 0, 0, 0)";
+    });
+
+    ssa_overlay.addEventListener('mouseover', () => {
+      apac_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
+      me_overlay.style['background'] = "rgba(0, 0, 0, 0.3)";
+    });
+
+    ssa_overlay.addEventListener('mouseout', () => {
+      apac_overlay.style['background'] = "rgba(0, 0, 0, 0)";
+      me_overlay.style['background'] = "rgba(0, 0, 0, 0)";
+    });
+  }
+}
+</script>

workers-site/.gitignore

@@ -1,2 +0,0 @@
-node_modules
-worker

workers-site/index.js

@@ -1,80 +0,0 @@
-import { getAssetFromKV, mapRequestToAsset } from '@cloudflare/kv-asset-handler'
-
-/**
- * The DEBUG flag will do two things that help during development:
- * 1. we will skip caching on the edge, which makes it easier to
- *    debug.
- * 2. we will return an error message on exception in your Response rather
- *    than the default 404.html page.
- */
-const DEBUG = false
-
-addEventListener('fetch', event => {
-  try {
-    event.respondWith(handleEvent(event))
-  } catch (e) {
-    if (DEBUG) {
-      return event.respondWith(
-        new Response(e.message || e.toString(), {
-          status: 500,
-        }),
-      )
-    }
-    event.respondWith(new Response('Internal Error', { status: 500 }))
-  }
-})
-
-async function handleEvent(event) {
-  const url = new URL(event.request.url)
-  let options = {}
-
-  /**
-   * You can add custom logic to how we fetch your assets
-   * by configuring the function `mapRequestToAsset`
-   */
-  // options.mapRequestToAsset = handlePrefix(/^\/docs/)
-
-  try {
-    if (DEBUG) {
-      // customize caching
-      options.cacheControl = {
-        bypassCache: true,
-      }
-    }
-    return await getAssetFromKV(event, options)
-  } catch (e) {
-    // if an error is thrown try to serve the asset at 404.html
-    if (!DEBUG) {
-      try {
-        let notFoundResponse = await getAssetFromKV(event, {
-          mapRequestToAsset: req => new Request(`${new URL(req.url).origin}/index.html`, req),
-        })
-
-        return new Response(notFoundResponse.body, { ...notFoundResponse, status: 404 })
-      } catch (e) {}
-    }
-
-    return new Response(e.message || e.toString(), { status: 500 })
-  }
-}
-
-/**
- * Here's one example of how to modify a request to
- * remove a specific prefix, in this case `/docs` from
- * the url. This can be useful if you are deploying to a
- * route on a zone, or if you only want your static content
- * to exist at a specific path.
- */
-function handlePrefix(prefix) {
-  return request => {
-    // compute the default (e.g. / -> index.html)
-    let defaultAssetKey = mapRequestToAsset(request)
-    let url = new URL(defaultAssetKey.url)
-
-    // strip the prefix from the path for lookup
-    url.pathname = url.pathname.replace(prefix, '/')
-
-    // inherit all other props from the default request
-    return new Request(url.toString(), defaultAssetKey)
-  }
-}

workers-site/package-lock.json

@@ -1,33 +0,0 @@
-{
-  "name": "worker",
-  "version": "1.0.0",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@cloudflare/kv-asset-handler": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/@cloudflare/kv-asset-handler/-/kv-asset-handler-0.0.11.tgz",
-      "integrity": "sha512-D2kGr8NF2Er//Mx0c4+8FtOHuLrnwOlpC48TbtyxRSegG/Js15OKoqxxlG9BMUj3V/YSqtN8bUU6pjaRlsoSqg==",
-      "requires": {
-        "@cloudflare/workers-types": "^2.0.0",
-        "@types/mime": "^2.0.2",
-        "mime": "^2.4.6"
-      }
-    },
-    "@cloudflare/workers-types": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@cloudflare/workers-types/-/workers-types-2.0.0.tgz",
-      "integrity": "sha512-SFUPQzR5aV2TBLP4Re+xNX5KfAGArcRGA44OLulBDnfblEf3J+6kFvdJAQwFhFpqru3wImwT1cX0wahk6EeWTw=="
-    },
-    "@types/mime": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-2.0.2.tgz",
-      "integrity": "sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q=="
-    },
-    "mime": {
-      "version": "2.4.6",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz",
-      "integrity": "sha512-RZKhC3EmpBchfTGBVb8fb+RL2cWyw/32lshnsETttkBAyAUXSGHxbEJWWRXc751DrIxG1q04b8QwMbAwkRPpUA=="
-    }
-  }
-}

workers-site/package.json

@@ -1,12 +0,0 @@
-{
-  "private": true,
-  "name": "worker",
-  "version": "1.0.0",
-  "description": "A template for kick starting a Cloudflare Workers project",
-  "main": "index.js",
-  "author": "Ashley Lewis <ashleymichal@gmail.com>",
-  "license": "MIT",
-  "dependencies": {
-    "@cloudflare/kv-asset-handler": "~0.0.11"
-  }
-}

wrangler.toml

@@ -1,10 +0,0 @@
-name = "aplesports"
-type = "webpack"
-account_id = "b145b7736bf8766828b646bb3a4d41d4"
-workers_dev = false
-route = "aplesports.com/*"
-zone_id = "6fdf37ae02c450309546d9444bc57a0a"
-
-[site]
-bucket = "./dist"
-entry-point = "workers-site"