From 20afabf147f20dc51b0922e8a095e4a451cf732e Mon Sep 17 00:00:00 2001
From: Ayush Mukherjee <me@ayushm.com>
Date: Mon, 18 Sep 2023 20:19:48 +0530
Subject: [PATCH] finish sections 2 and 3

---
 src/scss/pages/_rumble.scss  | 173 +++++++++++++++++++++++++++++------
 src/views/RegionalRumble.vue |  37 +++++++-
 2 files changed, 178 insertions(+), 32 deletions(-)

diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss
index 1858f7e..5c3005f 100644
--- a/src/scss/pages/_rumble.scss
+++ b/src/scss/pages/_rumble.scss
@@ -6,6 +6,25 @@
   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;
@@ -14,38 +33,15 @@
     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 20s ease-in-out infinite;
-    }
-    img {
-      width: 60vh;
+    
+    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 {
diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue
index 3f5e461..067b19a 100644
--- a/src/views/RegionalRumble.vue
+++ b/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>