finish regional pages

src/components/Header.vue

@@ -19,7 +19,7 @@
                     <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>
@@ -38,9 +38,9 @@
   <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>

src/router/index.js

@@ -41,11 +41,6 @@ Vue.use(VueRouter)
     name: 'Nationals',
     component: () => import('../views/Nationals.vue')
   },
-  {
-    path: '/regionalrumble',
-    name: 'RumbleMain',
-    component: () => import('../views/RegionalRumble.vue'),
-  },
   {
     path: '/Nationals',
     redirect: '/nationals',
@@ -55,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

@@ -31,7 +31,8 @@
   'pages/about',
   'pages/kickoff',
   'pages/nationals',
-  'pages/rumble';
+  'pages/rumble',
+  'pages/rumbleregions';
 
 @import
   'themes/default';

src/scss/pages/_rumble.scss

@@ -1,7 +1,3 @@
-.scroll {
-  background: rgba(black, 0.5) !important;
-}
-
 .rumble {
   display: flex;
   flex-direction: column;

src/scss/pages/_rumbleregions.scss

@@ -0,0 +1,135 @@
+.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(100vw / 2);
+        }
+      }
+    }
+
+    &.trailer {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 1rem 2rem;
+
+      iframe {
+        width: 100%;
+        height: 100%;
+        max-width: 1280px;
+        max-height: 720px;
+      }
+    }
+  }
+}
+
+@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,44 @@
+<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>
+    </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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AsianRumble',
+  methods: {
+    goback() {
+      this.$router.push('/regionalrumble');
+    }
+  },
+}
+</script>

src/views/AsianRumble.vue

@@ -0,0 +1,45 @@
+<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</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>
+    </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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AsianRumble',
+  methods: {
+    goback() {
+      this.$router.push('/regionalrumble');
+    }
+  },
+}
+</script>

src/views/MERumble.vue

@@ -0,0 +1,45 @@
+<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 - $2,500 for ME / $1,000 for NAF each</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>
+    </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>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MERumble',
+  methods: {
+    goback() {
+      this.$router.push('/regionalrumble');
+    }
+  },
+}
+</script>

src/views/RegionalRumble.vue

@@ -13,15 +13,15 @@
     </section>
 
     <section class="selector">
-      <div class="apac">
+      <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">
+      <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">
+      <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>
@@ -35,6 +35,12 @@
 <script>
 export default {
   name: 'RegionalRumble',
+  methods: {
+    gotoRoute(route) {
+      document.querySelector('header').classList.remove('scroll');
+      this.$router.push(route);
+    },
+  },
   mounted() {
     const h = document.querySelector('header');
     const container = document.querySelector('.rumble');