Merge pull request #3101 from catchpoint/update_home

Update home
catchpoint · Aug 23, 2024 · e51fea3 · e51fea3
2 parents e5d0109 + 96396de
commit e51fea3
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 33 deletions.
diff --git a/www/assets/css/pagestyle2.css b/www/assets/css/pagestyle2.css
@@ -2898,7 +2898,7 @@ body.result #main {
 
 @media (min-width: 70em) {
   .home_feature_hed_contain {
-    background-position: bottom -32px left 50%, bottom -50px left 50%;
+    background-position: bottom -32px left 50%, bottom -15px left 50%;
   }
 }
 
@@ -2952,13 +2952,15 @@ body.result #main {
 @media (prefers-reduced-motion: no-preference) {
   .home_feature_hed,
   .home_feature_hed-pro,
-  .home_feature_hed-cc {
+  .home_feature_hed-cc,
+  .home_feature_hed-sonar {
     transition: opacity 1.5s ease-out, transform 1.5s ease-out;
   }
 }
 
 .home_feature_hed-main,
 .home_feature_hed-lfwp,
+.home_feature_hed-sonar,
 .home_feature_hed-cc {
   position: absolute;
   top: 0;
@@ -3002,8 +3004,10 @@ body.result #main {
 }
 
 .home:not(.feature-pro) .home_feature_hed-pro,
+.home:not(.feature-sonar) .home_feature_hed-sonar,
 .home:not(.feature-cc) .home_feature_hed-cc,
 .home:not(.feature-lfwp) .home_feature_hed-lfwp,
+.home.feature-sonar .home_feature_hed-main,
 .home.feature-lfwp .home_feature_hed-main,
 .home.feature-pro .home_feature_hed-main,
 .home.feature-cc .home_feature_hed-main {
@@ -3016,6 +3020,7 @@ body.result #main {
   overflow: hidden;
 }
 
+
 .home.feature-lfwp .home_feature_hed_contain {
   background-color: #352a20;
   background-image: url(/assets/images/wpt_home_swoop.svg),
@@ -3125,6 +3130,7 @@ header .pro-flag {
 .home_feature_hed,
 .home_feature_hed-pro,
 .home_feature_hed-cc,
+.home_feature_hed-sonar,
 .home_feature_main {
   display: flex;
   margin: 0 auto;
@@ -3134,12 +3140,22 @@ header .pro-flag {
   align-items: flex-start;
 }
 
+@media (max-width: 60em) {
+  .home_feature_hed,
+  .home_feature_hed-pro,
+  .home_feature_hed-cc,
+  .home_feature_hed-sonar,
+  .home_feature_main {
+    padding-bottom: 11rem;
+  }
+}
 @media (min-width: 60em) {
   .home_feature_hed,
   .home_feature_hed-pro,
   .home_feature_hed-cc,
+  .home_feature_hed-sonar,
   .home_feature_main {
-    padding-bottom: 3rem;
+    padding-bottom: 11rem;
   }
 }
 
@@ -3364,6 +3380,12 @@ header .pro-flag {
   object-fit: contain;
   height: auto;
 }
+
+.home_feature_hed-sonar .home_feature_hed_visual {
+  border: 0px;
+  background: #000;
+}
+
 .home_feature_hed-cc .home_feature_hed_visual {
   box-shadow: 0px 0px 5px 3px #d3dfef;
 }
@@ -3426,7 +3448,7 @@ header .pro-flag {
 
   .home_feature_hed {
     display: block;
-    padding: 2rem 0;
+    padding: 2rem 0 5rem;
   }
 
   .home_feature .home_feature_hed .attention {
@@ -3483,14 +3505,19 @@ header .pro-flag {
 
 @media (min-width: 40em) {
   .home_feature_hed-pro-loggedin {
-    padding-bottom: 5rem;
-  }
+    padding-bottom: 8rem;
+  }  
 }
 
 @media (min-width: 60em) {
   .home_feature_hed-pro-loggedin {
-    padding-bottom: 9rem;
-    padding-top: 2rem;
+    padding-bottom: 13rem;
+  }
+}
+
+@media (max-width: 70em) {
+  .home_feature_hed-pro-loggedin .home_feature_hed_visual {
+    display: none;
   }
 }
 
@@ -6500,6 +6527,11 @@ th.header {
   margin-top: -1em;
 }
 
+.alert-banner-promo img {
+  margin: unset;
+  top: 0.5em;
+}
+
 .alert-banner a,
 .alert-banner-twitch a {
   display: block;
@@ -6509,6 +6541,17 @@ th.header {
   color: #fff;
 }
 
+.alert-banner-promo {
+  font-size: 1.0em;
+  padding: 1em;
+  color: #154281;
+  background: #79cdfb;
+}
+
+.alert-banner-promo a {
+  color: #154281;
+}
+
 @media screen and (min-width: 35em) {
   .alert-banner {
     grid-column: 1 / 13;

diff --git a/www/assets/images/wpt_home_featureimg-sonar.webp b/www/assets/images/wpt_home_featureimg-sonar.webp
diff --git a/www/home_header.php b/www/home_header.php
@@ -11,13 +11,21 @@
                         <p><b>You're ready to go!</b> Enjoy premium locations, bulk runs, test priority, our API, & No-Code Experiments!</p>
                     </div>
                 </div>
-
+                <div class="home_feature_hed home_feature_hed-sonar home_feature_hed-pro-loggedin">
+                    <div class="home_feature_hed_text">
+                        <h1 class="attention"><span class="home_feature_hed_text_leadin">Live Internet Outages Map (NEW)</h1>
+                        <p>Gain visibility into internet outages and pinpoint the root cause of poor web performance.</p>
+                        <a class="pill" href="https://www.catchpoint.com/outages?utm_source=WPT&utm_medium=carousel&utm_content=sonar-map" style="padding: .9em 1.5em;">Try Internet Sonar for Free &gt;&gt;</a>
+                    </div>
+                    <div class="home_feature_hed_visual">
+                        <img src="/assets/images/wpt_home_featureimg-sonar.webp" width="1101" height="807" alt="Gain visibility into internet outages and pinpoint the root cause of poor web performance.">
+                    </div>
+                </div>
             <?php } else { ?>
                 <div class="home_feature_hed home_feature_hed-main">
                     <div class="home_feature_hed_text">
                         <h1 class="attention">Test. Experiment. Improve!</h1>
                         <p><strong>WebPageTest.</strong> <span class="home_feature_hed_highlighter">The gold standard in web performance testing. </span></p>
-
                     </div>
                     <div class="home_feature_hed_visual">
                         <img src="/assets/images/wpt_home_featureimg.jpg" width="1414" height="843" alt="screenshot of wpt results page">
@@ -32,18 +40,26 @@
                     <div class="home_feature_hed_visual">
                         <img src="/assets/images/wpt_home_lfwp_featureimg.jpg" width="1414" height="843" alt="screenshot of wpt results page">
                     </div>
-
                 </div>
                 <div class="home_feature_hed home_feature_hed-cc">
                     <div class="home_feature_hed_text">
                         <h1 class="attention"><span class="home_feature_hed_text_leadin">Introducing <b>Carbon Control <span class="flag">Experimental</span></b></span> </h1>
                         <p><b>New in WebPageTest!</b> Measure your site's carbon footprint and run No-Code Experiments to find ways to improve. </p>
-
                     </div>
                     <div class="home_feature_hed_visual">
                         <img src="/assets/images/wpt_home_featureimg-cc.jpg" width="1414" height="843" alt="screenshot of wpt results page">
                     </div>
                 </div>
+                <div class="home_feature_hed home_feature_hed-sonar">
+                    <div class="home_feature_hed_text">
+                        <h1 class="attention"><span class="home_feature_hed_text_leadin">Live Internet Outages Map (NEW)</h1>
+                        <p>Gain visibility into internet outages and pinpoint the root cause of poor web performance.</p>
+                        <a class="pill" href="https://www.catchpoint.com/outages?utm_source=WPT&utm_medium=carousel&utm_content=sonar-map" style="padding: .9em 1.5em;">Try Internet Sonar for Free &gt;&gt;</a>
+                    </div>
+                    <div class="home_feature_hed_visual">
+                        <img src="/assets/images/wpt_home_featureimg-sonar.webp" width="1101" height="807" alt="Gain visibility into internet outages and pinpoint the root cause of poor web performance.">
+                    </div>
+                </div>
                 <div class="home_feature_hed home_feature_hed-pro">
                     <div class="home_feature_hed_text">
                         <h1 class="attention"><span class="home_feature_hed_text_leadin">Say hello to </span> <img class="home_feature_hed_text_logo" width="105" height="14" src="/assets/images/wpt-logo-pro.svg" alt="WebPageTest Pro"></h1>
@@ -59,40 +75,49 @@
                         <button class="play" id="playbtn">Play/Pause Video</button>
                     </div>
                 </div>
-
             <?php } ?>
         </div>
-
-
-
-
-
         </div>
     </div>
 
     <script>
         let featureSlides = setInterval(() => {
-            if( document.body.querySelector(".home_feature_hed-main") && !document.body.classList.contains("playing") && ( !document.activeElement || document.activeElement.tagName !== 'IFRAME' ) && matchMedia("(prefers-reduced-motion: no-preference)").matches ){
-                if( document.body.classList.contains("feature-pro") ){
-                    document.body.classList.remove("feature-pro");
-                    document.body.classList.add("feature-lfwp");
-                } else if( document.body.classList.contains("feature-lfwp") ){
+            if (!matchMedia("(prefers-reduced-motion: no-preference)").matches) {
+                return;
+            }
+
+            if (document.body.classList.contains("playing") || (document.activeElement && document.activeElement.tagName === 'IFRAME')) {
+                return;
+            }
+
+            if (document.body.querySelector(".home_feature_hed-main")) {
+                if (document.body.classList.contains("feature-lfwp")) {
                     document.body.classList.remove("feature-lfwp");
                     document.body.classList.add("feature-cc");
-                } else if( document.body.classList.contains("feature-cc") ){
+                } else if (document.body.classList.contains("feature-cc")) {
                     document.body.classList.remove("feature-cc");
+                    document.body.classList.add("feature-sonar");
+                } else if (document.body.classList.contains("feature-sonar")) {
+                    document.body.classList.remove("feature-sonar");
+                    document.body.classList.add("feature-lfwp");
                 } else {
+                    document.body.classList.add("feature-lfwp");
+                }
+            } else {
+                if (document.body.classList.contains("feature-pro")) {
+                    document.body.classList.remove("feature-pro");
+                    document.body.classList.add("feature-sonar");
+                } else {
+                    document.body.classList.remove("feature-sonar");
                     document.body.classList.add("feature-pro");
                 }
-
             }
-        },8000);
+        }, 8000);
 
         <?php if (isset($req_cc)) {?>
             clearTimeout(featureSlides);
         <?php } ?>
 
-
         (function(){
                 var intro = document.querySelector("video");
                 var playbtn = document.querySelector(".play");
@@ -132,22 +157,18 @@ function deactivate(){
                     }
                 });
 
-
-
                 document.body.addEventListener("mousedown",function( e ){
                     if( this.classList.contains("playing") && e.target !== intro && e.target !== playbtn  ){
                         e.preventDefault();
                         deactivate();
                     }
                 });
+
                 document.body.addEventListener("keydown",function( e ){
                     if( this.classList.contains("playing") && e.keyCode === 27 ){
                         e.preventDefault();
                         deactivate();
                     }
                 });
             }());
-
     </script>
-
-
diff --git a/www/include/home-subsections.inc b/www/include/home-subsections.inc
@@ -3,7 +3,7 @@
 $quotes = array(
     array(
         'quote' => 'The best professional web performance investigators I know use WPT as a critical part of their workflows, and it\'s the center or mine.',
-        'author' => 'Alex Russel <span>Program Manager, Microsoft Edge</span>'
+        'author' => 'Alex Russell <span>Program Manager, Microsoft Edge</span>'
     ),
     /* array('quote' => '<a href="https://product.webpagetest.org/experiments">Experiments</a> are a game changer for quantifying the speed impact of performance optimizations. What took days of technical work is now just a few clicks. Not only will this save tons of time, it will let us test and iterate ideas to find the right mix of recommendations efficiently.<br><b>I’m blown away this exists, it feels like magic.</b>',
            'author' => 'Todd Parker <span>Partner, Filament Group</span>'),

diff --git a/www/templates/layouts/includes/wpt-header.php b/www/templates/layouts/includes/wpt-header.php
@@ -92,6 +92,15 @@ function addTab($tabName, $tabUrl, $addClass = '')
                                         <li class="wptheader_nav_menu_link"><a target="_blank" href="https://www.webpagetest.org/carbon-control/">Carbon Control (NEW)</a></li>
                                     </ul>
                                 </div>
+                                <div class="wptheader_nav_menu_section wptheader_nav_cta">
+                                    <img src="/assets/images/header-menu-arrow.svg" width="20" height="20">
+                                    <p class="wptheader_nav_title">Live Internet Outages Map (NEW)</p>
+                                </div>
+                                <div class="wptheader_nav_menu_section nested">
+                                    <ul>
+                                        <li class="wptheader_nav_menu_link"><a target="_blank" href="https://www.catchpoint.com/outages?utm_source=WPT&utm_medium=NavBar&utm_content=sonar-map ">See Outages Affecting Your Sites</a></li>
+                                    </ul>
+                                </div>
                                 <div class="wptheader_nav_menu_section wptheader_nav_cta" style="padding: 1.5rem 0;">
                                     <img src="/assets/images/header-menu-arrow.svg" width="20" height="20">
                                     <p class="wptheader_nav_title">For Enterprise:<br>Internet Performance Monitoring</p>