From e20a4d36d40b67266cc7d69fe979683c7052be6f Mon Sep 17 00:00:00 2001
From: Ayush Mukherjee <me@ayushm.com>
Date: Tue, 19 Sep 2023 14:28:01 +0530
Subject: [PATCH] finish regional rumble landing

---
 src/components/Header.vue    |   8 ++-
 src/scss/pages/_rumble.scss  | 127 +++++++++++++++++++++++++++++++++--
 src/views/RegionalRumble.vue |   3 +
 3 files changed, 130 insertions(+), 8 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 0a4ab80..645a589 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -13,8 +13,9 @@
 
                 <div class="links">
                     <router-link :to="{ name: 'Home' }">home</router-link>
+                    <router-link :to="{ name: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''">RegionalRumble</router-link>
                     <router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''">nationals</router-link>
-                    <router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''">the kickoff</router-link>
+                    <!--<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''">the kickoff</router-link>-->
                     <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>
@@ -31,8 +32,9 @@
                     </div>
 
                     <router-link :to="{ name: 'Home' }" @click.native="closeMenu()">home</router-link>
+                    <router-link :to="{ name: 'RumbleMain' }" :class="$route.name === 'RegionalRumble' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">RegionalRumble</router-link>
                     <router-link :to="{ name: 'Nationals' }" :class="$route.name === 'Nationals' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">nationals</router-link>
-                    <router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>
+                    <!--<router-link :to="{ name: 'Kickoff' }" :class="$route.name === 'Kickoff' && 'router-link-active' ? 'active' : ''" @click.native="closeMenu()">the kickoff</router-link>-->
                     <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>
@@ -98,4 +100,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/scss/pages/_rumble.scss b/src/scss/pages/_rumble.scss
index f7ffd39..767864c 100644
--- a/src/scss/pages/_rumble.scss
+++ b/src/scss/pages/_rumble.scss
@@ -38,12 +38,21 @@
   .intro {
     position: relative;
     flex-direction: column;
+
+    img.rumbleLogo,
+    img.rumbleRedLogo,
+    img.rumbleGreenLogo,
+    img.rumbleYellowLogo {
+      position: absolute;
+      display: block;
+    }
     
     img.rumbleLogo {
-      min-width: 400px;
-      width: 30%;
-      display: block;
+      top: 20%;
+      width: calc(100vw * 0.8);
+      max-width: 600px;
       transition: 0.15s linear;
+      z-index: 5;
       
       &:hover {
         cursor: pointer;
@@ -53,11 +62,34 @@
       }
     }
 
+    img.rumbleRedLogo,
+    img.rumbleGreenLogo,
+    img.rumbleYellowLogo {
+      top: 20%;
+      min-width: 400px;
+      width: 40%;
+      max-width: 840px;
+      visibility: hidden;
+    }
+
+    img.rumbleLogo:hover ~ img.rumbleRedLogo {
+      animation: logoRedDisplay 0.25s ease-in-out;
+    }
+
+    img.rumbleLogo:hover ~ img.rumbleGreenLogo {
+      animation: logoGreenDisplay 0.25s ease-in-out;
+    }
+
+    img.rumbleLogo:hover ~ img.rumbleYellowLogo {
+      animation: logoYellowDisplay 0.25s ease-in-out;
+    }
+
     img.rlLogo {
+      position: absolute;
       min-width: 100px;
       width: 7%;
       display: block;
-      margin-top: 5.5rem;
+      bottom: 10rem;
     }
 
     .scroll-indicator {
@@ -94,7 +126,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      transition: 0.5s ease;
+      transition: all 0.5s ease;
 
       &.apac {
         background-image: url('https://cms.aplesports.com/storage/uploads/2023/09/18/65085dc28ca0frawkkim-KKz6NgO69yQ-unsplash.jpg');
@@ -176,6 +208,60 @@
   }
 }
 
+@keyframes logoRedDisplay {
+  0% {
+    visibility: hidden;
+  }
+  25% {
+    visibility: visible;
+  }
+  40% {
+    visibility: hidden;
+  }
+  75% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: hidden;
+  }
+}
+
+@keyframes logoGreenDisplay {
+  0% {
+    visibility: hidden;
+  }
+  25% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: visible;
+  }
+  60% {
+    visibility: hidden;
+  }
+  100% {
+    visibility: hidden;
+  }
+}
+
+@keyframes logoYellowDisplay {
+  0% {
+    visibility: hidden;
+  }
+  25% {
+    visibility: hidden;
+  }
+  50% {
+    visibility: hidden;
+  }
+  75% {
+    visibility: visible;
+  }
+  90% {
+    visibility: hidden;
+  }
+}
+
 @keyframes moveScroll {
   0% {
     transform: translate(0, 0);
@@ -190,3 +276,34 @@
     transform: translate(0, 0);
   }
 }
+
+@media screen and (max-width: 960px) {
+  .rumble > .selector {
+    flex-direction: column;
+
+    div {
+      width: 100vw;
+      height: calc(100vh / 3);
+
+      img {
+        width: auto;
+        min-height: 100px;
+        height: 30%;
+        transition: 0.5s ease;
+      }
+
+      &:hover {
+        width: 100vw;
+        height: 70vh;
+      }
+
+      &.apac:hover > img {
+        margin-top: 50%;
+      }
+
+      &.ssa:hover > img {
+        margin-bottom: 50%;
+      }
+    }
+  }
+}
diff --git a/src/views/RegionalRumble.vue b/src/views/RegionalRumble.vue
index 6a935ed..5ed03e9 100644
--- a/src/views/RegionalRumble.vue
+++ b/src/views/RegionalRumble.vue
@@ -3,6 +3,9 @@
     <section class="intro">
       <div class="bg-only"></div>
       <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="rumbleYellowLogo" alt="Regional Rumble SSA Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650957469adearr23-brand-logo-regional-ssa.png" />
+      <img class="rumbleGreenLogo" alt="Regional Rumble MENA Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650957436a783rr23-brand-logo-regional-mena.png" />
+      <img class="rumbleRedLogo" alt="Regional Rumble Asia Logo" src ="https://cms.aplesports.com/storage/uploads/2023/09/19/650954c83f3farr23-brand-logo-regional-asia.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;