finish sections 2 and 3

src/scss/pages/_rumble.scss

@@ -6,26 +6,6 @@
   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;
@@ -44,8 +24,24 @@
 
     animation: moveBg 20s ease-in-out infinite;
   }
-    img {
-      width: 60vh;
+
+  section {
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    scroll-snap-align: start;
+
+  }
+
+  .intro {
+    position: relative;
+    flex-direction: column;
+    
+    img.rumbleLogo {
+      min-width: 400px;
+      width: 30%;
       display: block;
       transition: 0.15s linear;
       
@@ -57,6 +53,13 @@
       }
     }
 
+    img.rlLogo {
+      min-width: 100px;
+      width: 7%;
+      display: block;
+      margin-top: 5.5rem;
+    }
+
     .scroll-indicator {
       position: absolute;
       display: flex;
@@ -77,6 +80,122 @@
       }
     }
   }
+
+  .info {
+    height: 100vh;
+    justify-content: flex-start;
+
+    .trailer {
+      position: relative;
+      height: 100%;
+      width: 50%;
+      overflow: hidden;
+
+      img {
+        position: absolute;
+        top: 0;
+        display: block;
+        width: 100%;
+        height: 100%;
+        rotate: -90deg;
+        z-index: -1;
+      }
+
+      .overlay {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        background: rgba(0, 0, 0, 0.2);
+        display: grid;
+        place-items: center;
+        transition: 0.25s linear;
+        
+        svg {
+          width: 40px;
+          height: 40px;
+          fill: white;
+        }
+
+        &:hover {
+          cursor: pointer;
+          background: rgba(0, 0, 0, 0.5);
+        }
+      }
+    }
+
+    .textInfo {
+      height: 100%;
+      width: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+
+      div {
+        display: flex;
+        align-items: center;
+
+        h2 {
+          margin-left: 2rem;
+          text-shadow: 0 0 15px white;
+        }
+      }
+    }
+  }
+
+  .selector {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    div.apac, div.me, div.ssa {
+      position: relative;
+      width: calc(100vw / 3);
+      height: 100vh;
+      background-size: cover;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      transition: 0.15s ease-in;
+
+      &.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%;
+      }
+
+      .overlay {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        background: rgba(black, 0.05);
+        transition: 0.15s ease-in;
+
+        &:hover {
+          background: rgba(black, 0.2);
+        }
+      }
+    }
+  }
 }
 
 @keyframes moveBg {

src/views/RegionalRumble.vue

@@ -2,18 +2,45 @@
   <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" />
-
+      <img class="rumbleLogo" alt="Regional Rumble Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/18/650841c1d9f23rr23-brand-logo-global-white.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="info">
-      Section 2
+      <div class="trailer">
+        <img alt="APL Regional Rumble Trailer" src="https://cms.aplesports.com/storage/uploads/2023/09/18/65085173e1666apl-player-bg-test.jpg" />
+        <div class="overlay">
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 22v-20l18 10-18 10z"/></svg>
+        </div>
+      </div>
+      <div class="textInfo">
+        <div>
+          <h1>3 Major Tournaments</h1>
+          <h2>$51,000 Prize Pool</h2>
+        </div>
+        <div>
+          <h1>15 Qualifiers</h1>
+          <h2>$24,000 Prize Pool</h2>
+        </div>
+      </div>
     </section>
+
     <section class="selector">
-      Section 3
+      <div class="apac">
+        <div class="overlay"></div>
+        <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="overlay"></div>
+        <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="overlay"></div>
+        <img alt="Regional Rumble SSA Logo" src="https://cms.aplesports.com/storage/uploads/2023/09/18/6508629d08e60rr23-brand-logo-ssa-white.png" />
+      </div>
     </section>
   </div>
 </template>