Merge branch 'source' of https://github.com/overwolf/overwolf.github.io…

… into source

pages/api/live-game-data/supported-games/valorant.mdx

@@ -332,12 +332,14 @@ List of parameters:
 * name - the player's name
 * character - the character's name
 * teammate - is the player in my team or not
+* team - 0/1 - team 0 will always start on attack and team 1 will always start on defense. The team IDs will not change after switching sides 
 * kills / deaths / assists - The number of kills, deaths and assists during the game 
 * money - the amount of money during the game for each player
 * is_local - local player or not (Boolean)
 * alive - if the player is alive true/false
 * shield - the currently used shield for the local and teammate players. Possible values are 0 - no shield, 1 - light shield (25), 2 - heavy shield (50)
 * weapon - the current primary weapon (loadout) name used by the local and teammate players. Visible to all players in a deathmatch like the behavior in the scoreboard during the game. 
+* spike - is the player carrying the spike or not (Boolean) - only available for teammates
 * ult_points / ult_max - the current ultimate point out of the maximum ultimate points
 
 <details open>
@@ -400,7 +402,7 @@ knife = Knife
 Data Example:
 
 ```json
-{"info":{"match_info":{"scoreboard_0":"{\"name\":\"MrTesting123 #1111\",\"character\":\"Phoenix\",\"teammate\":true,\"alive\":true,\"player_id\":\"d746ecb4-3b1d-52e7-82b0-270c20acfdba\",\"shield\":2,\"weapon\":\"TX_Hud_Sniper_Operater\",\"ult_points\":1,\"ult_max\":6,\"kills\":0,\"deaths\":0,\"assists\":0,\"money\":99999,\"is_local\":true}"}},"feature":"match_info"}
+{"feature": "match_info", "category": "match_info", "key": "scoreboard_0", "data": "{\"name\":\"MrTest #1111\",\"character\":\"Sarge\",\"teammate\":true,\"team\":1,\"alive\":true,\"player_id\":\"61b608c1-1656-5c92-a34c-c18042826d0d\",\"shield\":0,\"weapon\":\"TX_Hud_Pistol_Classic\",\"spike\":true,\"ult_points\":0,\"ult_max\":8,\"kills\":11,\"deaths\":5,\"assists\":3,\"money\":1800,\"is_local\":true}"}
 ```
 
 #### *kill_feed* note

pages/start/monetize-your-app/advertising/recommended-ads-layouts.mdx

@@ -37,7 +37,7 @@ The following is a list of recommended Ad layouts for your different App windows
 <OWTable headerCellNames={['Layout', 'Revenue Est. ($)', 'Overview']}>
   <AdsLayoutRow 
     assetsPath='/assets/start/monetize-your-app/advertising/recommended-ads-layouts/desktop/two-ads-large'
-    name='Two Ads (Large)'
+    name='Tall Duo'
     revenueBenchmark='$$$$$'
     overview={
       {
@@ -53,7 +53,7 @@ The following is a list of recommended Ad layouts for your different App windows
   />
   <AdsLayoutRow 
     assetsPath='/assets/start/monetize-your-app/advertising/recommended-ads-layouts/desktop/two-ads-split2'
-    name='Two Ads (Split)'
+    name='Combo Classic'
     revenueBenchmark='$$$$$'
     overview={
       {
@@ -68,7 +68,7 @@ The following is a list of recommended Ad layouts for your different App windows
   />
   <AdsLayoutRow 
     assetsPath='/assets/start/monetize-your-app/advertising/recommended-ads-layouts/desktop/two-ads-split'
-    name='Two Ads (Split)'
+    name='Studio Tower'
     revenueBenchmark='$$$$'
     overview={
       {
@@ -83,7 +83,7 @@ The following is a list of recommended Ad layouts for your different App windows
   />
   <AdsLayoutRow 
     assetsPath='/assets/start/monetize-your-app/advertising/recommended-ads-layouts/desktop/one-ad-large'
-    name='One Ad (Large)'
+    name='Tower'
     revenueBenchmark='$$$$'
     overview={
       {
@@ -99,7 +99,7 @@ The following is a list of recommended Ad layouts for your different App windows
   />
   <AdsLayoutRow 
     assetsPath='/assets/start/monetize-your-app/advertising/recommended-ads-layouts/desktop/one-ad-medium'
-    name='One Ad (Medium)'
+    name='Studio'
     revenueBenchmark='$$$'
     overview={
       {

pages/start/test-your-app/marketing-checklist.mdx

@@ -2,6 +2,7 @@
 id: marketing-checklist
 image: "/img/embed/getting-started.jpg"
 title: Marketing checklist
+draft: true
 sidebar_label: Marketing checklist
 sidebar_custom_props:
   tags:

pages/start/test-your-app/product-checklist.mdx

@@ -2,6 +2,7 @@
 id: product-checklist
 image: "/img/embed/getting-started.jpg"
 title: Product checklist
+draft: true
 sidebar_label: Product checklist
 sidebar_custom_props:
   tags:

pages/start/test-your-app/technical-checklist.mdx

@@ -2,6 +2,7 @@
 id: technical-checklist
 image: "/img/embed/getting-started.jpg"
 title: Technical checklist
+draft: true
 sidebar_label: Technical checklist
 sidebar_custom_props:
   tags:

src/components/comparison-table/index.scss

@@ -1,30 +1,22 @@
 :root {
-  --evc-table-header-bg: var(--color-black);
-  --evc-border-header: var(--border-table);
-  --evc-border: var(--border-table);
-  --evc-header-title: var(--color-white);
-  --evc-group-title: var(--color-999);
-  --evc-group-title-bg: var(--secondary-bg);
-  --evc-row-title: var(--txt-secondary);
+  --evc-table-header-bg: var(--color-neutral-0);
+  --evc-border-header: var(--color-neutral-24);
+  --evc-border: var(--color-border-tertiary);
+  --evc-header-title: var(--color-neutral-128);
+  --evc-group-title: var(--color-text-tertiary);
+  --evc-group-title-bg: var(--color-surface-primary);
+  --evc-row-title: var(--color-text-primary);
   --evc-tab-active: var(--color-primary);
 }
 
-html[data-theme="light"] {
-  --evc-border: var(--light-border-color);
-  --evc-group-title-bg: var(--light-border-color);
-  --evc-group-title: var(--border-table);
-  --evc-row-title: var(--secondary-bg);
-}
-
-// TODO convert all active vs inactives here to use ISMOBILE
-
 .comparison-table {
   max-width: 1112px;
   margin: auto;
-  padding: 56px 0;
+  padding: var(--space-1400, 56px) 0;
 
-  @media (max-width: 966px) {
+  @media (max-width: 1112px) {
     padding: 0 0 32px;
+    width: 100%;
   }
 
   .comparison-table-headers {
@@ -36,16 +28,16 @@ html[data-theme="light"] {
 
     @media (max-width: 966px) {
       flex-wrap: wrap;
-      top: 48px;
+      top: 80px;
     }
 
     .comparison-categories {
       display: flex;
       flex-direction: row;
 
       @media (max-width: 966px) {
-        overflow-x: scroll;
-        gap: 16px;
+        // overflow-x: scroll;
+        gap: 0;
 
         flex-basis: 100% !important;
         width: fit-content;
@@ -71,6 +63,8 @@ html[data-theme="light"] {
       @media (max-width: 966px) {
         border: none;
         flex-basis: 100% !important;
+        min-height: 68px;
+        padding-top: 28px;
       }
 
       &.comparison-title {
@@ -85,7 +79,7 @@ html[data-theme="light"] {
 
         @media (max-width: 966px) {
           border-bottom: 1px solid var(--evc-border);
-          padding: 16px 16px 8px;
+          padding: 16px 16px 20px;
         }
 
         &:after {
@@ -95,6 +89,10 @@ html[data-theme="light"] {
           position: absolute;
           bottom: 0;
           left: 16px;
+
+          @media (max-width: 966px) {
+            left: 0;
+          }
         }
 
         @media (max-width: 966px) {
@@ -167,11 +165,11 @@ html[data-theme="light"] {
           justify-content: center;
 
           &.green {
-            color: var(--color-ui-success-dark);
+            color: var(--color-text-success);
           }
 
           &.red {
-            color: var(--color-primary);
+            color: var(--color-brand-ow);
           }
 
           .tt-container {
@@ -187,4 +185,4 @@ html[data-theme="light"] {
       }
     }
   }
-}
+}

src/components/footer/footer.jsx

@@ -187,7 +187,7 @@ const Footer = (props) => {
       <div className="site-footer-social">
         <div className="site-footer-social-inner">
           <div className="copyright">
-            <span>Overwolf 2023</span>
+            <span>Ⓒ 2024 Overwolf. All rights reserved.</span>
           </div>
         </div>
       </div>

src/components/footer/footer.scss

@@ -1,15 +1,15 @@
 
   .site-footer {
     width: 100%;
-    padding-top: 60px;
-    background-color: #000000;
+    padding-top: 24px;
+    margin-top: 24px;
+    background-color: var(--color-neutral-0);
     background-image: url(/img/home-2023/footer-bg.webp);
     background-repeat: no-repeat;
     background-position: top 60px center;
 
     @media (max-width: 800px){
       background-size: auto;
-      background-color: #030303;
     }
 
 
@@ -22,19 +22,19 @@
       margin: auto;
       font-size: 16px;
       line-height: 24px;
-      color: #B5B5B5;
+      color: var(--color-neutral-112);
       text-decoration: none;
       margin-bottom: 12px;
 
       svg {
-        color: #E9E9E9;
+        color: var(--color-neutral-128);
         width: 24px;
         height: 24px;
 
       }
 
       &:hover, &:hover svg {
-        color: var(--color-primary-hover);
+        color: var(--color-hover-brand-ow);
       }
     }
 
@@ -74,10 +74,11 @@
           list-style: none;
 
           h5 {
-            font-size: 16px;
-            line-height: 24px;
-            color: var(--color-txt);
-            font-weight: bold;
+            font-family: var(--font-family-brand);
+            font-size: var(--font-size-400);
+            font-weight: var(--font-weight-medium, 500);
+            line-height: var(--font-line-height-600);
+            color: var(--color-neutral-80);
           }
 
           & ul {
@@ -92,36 +93,38 @@
               width: fit-content;
 
               & + li {
-                margin-top: 16px;
+                margin-top: 12px;
               }
 
               svg {
                 width: 24px;
                 height: 24px;
-                color: var(--color-999);
+                color: var(--color-neutral-80);
               }
 
               &:hover {
                 a {
-                  color: var(--color-txt);
+                  color: var(--color-neutral-128);
                   text-decoration: underline;
                 }
 
                 svg {
-                  color: var(--color-txt);
+                  color: var(--color-neutral-128);
                 }
               }
 
               a {
-                font-size: 16px;
-                line-height: 24px;
-                color: var(--color-999);
+                color: var(--color-neutral-80);
+                font-family: var(--font-family-brand);
+                font-size: var(--font-size-350);
+                font-weight: var(--font-weight-regular, 400);
+                line-height: var(--font-line-height-600);
                 text-decoration: none;
                 text-underline-offset: 3px;
-                letter-spacing: 0.02em;
+
 
                  &.is-active {
-                  color: var(--color-headline);
+                  color: var(--color-neutral-128);
                   text-decoration: underline;
                 }
               }
@@ -132,7 +135,7 @@
     }
 
     .site-footer-social {
-      background-color: var(--color-grey-light-2);
+      background-color: var(--color-neutral-8);
 
       .site-footer-social-inner {
         padding: 12px 24px;
@@ -150,26 +153,10 @@
         }
 
         span {
-          color: var(--color-220);
+          color: var(--color-neutral-80);
           font-size: 14px;
         }
       }
 
     }
   }
-
-  html[data-theme=dark] {
-    .site-footer {
-
-      .site-footer-social {
-        background-color: var(--color-120);
-
-        .copyright {
-          span {
-            color: var(--color-txt);
-          }
-        }
-
-      }
-    }
-  }