section 1 progress

src/router/index.js

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

src/scss/main.scss

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

src/scss/pages/_rumble.scss

@@ -0,0 +1,127 @@
+.rumble {
+  display: flex;
+  flex-direction: column;
+  max-height: 100vh;
+  scroll-snap-type: y mandatory;
+  overflow-x: hidden;
+  overflow-y: scroll;
+
+  section {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    scroll-snap-align: start;
+
+    &:nth-child(2) {
+      background: purple;
+    }
+    &:nth-child(3) {
+      background: coral;
+    }
+  }
+
+  .intro {
+    position: relative;
+    flex-direction: column;
+
+    .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 30s ease-in-out infinite;
+    }
+    img {
+      width: 60vh;
+      display: block;
+      transition: 0.15s linear;
+      
+      &:hover {
+        cursor: pointer;
+        animation: logoHover 0.25s ease-in-out;
+        scale: 1.1;
+        filter: drop-shadow(0px 50px 15px rgba(white, 0.25));
+      }
+    }
+
+    .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;
+      }
+    }
+  }
+}
+
+@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 moveScroll {
+  0% {
+    transform: translate(0, 0);
+  }
+  10% {
+    transform: translate(10%, 0);
+  }
+  20% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, 0);
+  }
+}

src/views/RegionalRumble.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="rumble">
+    <section class="intro">
+      <div class="bg-only"></div>
+      <img alt="Regional Rumble Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/18/650841c1d9f23rr23-brand-logo-global-white.png" />
+
+      <div class="scroll-indicator">
+        scroll&nbsp;&nbsp;
+      </div>
+
+    </section>
+    <section class="info">
+      Section 2
+    </section>
+    <section class="selector">
+      Section 3
+    </section>
+  </div>
+</template>
+