From d29fe7347f724175b66ad8f41d07be11c9e714e6 Mon Sep 17 00:00:00 2001
From: Ayush Mukherjee <me@ayushm.com>
Date: Tue, 19 Sep 2023 13:05:26 +0530
Subject: [PATCH] remove section 2, finish new section 2 and add footer

---
 src/scss/pages/_rumble.scss  | 84 +++++++-----------------------------
 src/views/RegionalRumble.vue | 71 ++++++++++++++++++++----------
 2 files changed, 64 insertions(+), 91 deletions(-)

diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss
index 4b96020..f7ffd39 100644
--- a/src/scss/pages/_rumble.scss
+++ b/src/scss/pages/_rumble.scss
@@ -81,75 +81,12 @@
     }
   }
 
-  .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 {
+    div {
       position: relative;
       width: calc(100vw / 3);
       height: 100vh;
@@ -184,18 +121,27 @@
       }
 
       .overlay {
+        display: block;
         position: absolute;
         width: 100%;
         height: 100%;
-        background: rgba(black, 0.05);
+        background: rgba(black, 0);
         transition: 0.5s ease-in-out;
-
-        &:hover {
-          background: rgba(black, 0.2);
-        }
       }
     }
   }
+  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 {
diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue
index 067b19a..6a935ed 100644
--- a/src/views/RegionalRumble.vue
+++ b/src/views/RegionalRumble.vue
@@ -9,39 +9,66 @@
       </div>
     </section>
 
-    <section class="info">
-      <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">
       <div class="apac">
-        <div class="overlay"></div>
+        <span class="overlay"></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="overlay"></div>
+        <span class="overlay"></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="overlay"></div>
+        <span class="overlay"></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',
+  mounted() {
+    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>