Update platform page (#4075)

* update images

* update page layout and stylesheet

* Update platform.ejs

* mobile padding

* fix logo padding

* Update platform.ejs

* replace schrodinger logo, add missing image, adjust svg width for safari

* lint fixes

* fix logo rows margin and Schrodinger logo on mobile

website/assets/styles/pages/platform.less

@@ -36,7 +36,6 @@
     max-width: 100%;
     filter: drop-shadow(0px 3.85401px 24.0876px rgba(0, 0, 0, 0.15));
     border-radius: 4.78295px;
-    margin-top: -15px;
   }
 
   [purpose='platform-content'] {
@@ -49,14 +48,20 @@
   [purpose='platform-section'] {
     padding-top: 100px;
   }
-
+  [purpose='platform-user-story-wrapper'] {
+    max-width: 900px;
+    max-height: 180px;
+    margin: auto;
+    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+    border-radius: 16px;
+    z-index: 1;
+  }
   [purpose='platform-user-story'] {
     margin-top: 80px;
     padding: 30px 24px;
-    max-height: 180px;
+    height: 180px;
     max-width: 900px;
     background-color: #192147;
-    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
     border-radius: 16px;
     color: #F9FAFC;
     overflow: hidden;
@@ -64,25 +69,27 @@
       color: #F9FAFC;
       font-weight: 700;
       text-decoration: none;
+      cursor: pointer;
     }
     svg {
       position: absolute;
-      left: -50px;
+      left: -10px;
       top: -30px;
       bottom: 0px;
       overflow: visible;
+      border-radius: 16px;
       vertical-align: middle;
-      z-index: -1;
-      width: 367px;
+      z-index: 0;
+      width: 100%;
       height: 180px;
     }
     img:not(a > img) {
-      position: absolute;
+      position: relative;
       display: inline;
-      height: 120px;
+      height: 100px;
       z-index: 1;
-      left: 60px;
-      bottom: 0;
+      left: 40px;
+      bottom: -10px;
     }
   }
 
@@ -138,10 +145,19 @@
 
   [purpose='platform-logos'] {
     padding-top: 24px;
+    .card {
+      height: 60px;
+      width: 80px;
+      min-width: 80px;
+      border: none;
+      background: #FFFFFF;
+      border-radius: 8px;
+      box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+    }
     img {
-      height: 92px;
-      width: 112px;
-      display: inline;
+      width: auto;
+      max-height: 36px;
+      margin: auto;
     }
   }
 
@@ -225,25 +241,7 @@
           top: 0px;
         }
       }
-    }
-  }
 
-  @media (max-width: 767px) {
-
-    [purpose='platform-user-story'] {
-      max-height: 180px;
-      margin-top: 40px;
-      // padding: 31px 24px;
-      // max-height: 345px;
-      max-width: fit-content;
-      background-color: #192147;
-      filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
-      border-radius: 16px;
-      color: #F9FAFC;
-      overflow: hidden;
-      p {
-        margin-block-end: 4px;
-      }
     }
     [purpose='next-steps'] {
       .card {
@@ -251,13 +249,43 @@
         margin-bottom: 16px;
       }
     }
-
     [purpose='platform-feature-image'] {
-      padding-top: 60px;
+      max-width: 100%;
       margin-left: auto;
       margin-right: auto;
-      margin-top: -15px;
     }
+  }
+
+  @media (max-width: 767px) {
+
+    [purpose='platform-user-story'] {
+      max-height: 180px;
+      max-width: fit-content;
+      background-color: #192147;
+      border-radius: 16px;
+      color: #F9FAFC;
+      overflow: hidden;
+      svg {
+        position: absolute;
+        left: -10px;
+        top: -30px;
+        bottom: 0px;
+        overflow: visible;
+        border-radius: 16px;
+        vertical-align: middle;
+        z-index: 0;
+        height: 182px;
+      }
+      img:not(a > img) {
+        left: 15px;
+      }
+    }
+
+    [purpose='platform-feature-image'] {
+      max-width: 100%;
+      padding-top: 60px;
+    }
+
     [purpose='platform-content'] {
       padding-top: 80px;
       padding-left: 120px;
@@ -288,7 +316,7 @@
 
   }
 
-  @media (max-width: 576px) {
+  @media (max-width: 575px) {
     h1 {
       font-size: 28px;
       line-height: 54px;
@@ -324,47 +352,53 @@
         }
       }
     }
-
+    [purpose='platform-user-story-wrapper'] {
+      min-height: 375px;
+      max-width: 375px;
+      margin: auto;
+      filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
+      border-radius: 16px;
+      z-index: 1;
+    }
     [purpose='platform-user-story'] {
       margin-top: 40px;
       padding: 31px 24px;
+      height: unset;
       min-height: 375px;
-      max-width: 375px;
       background-color: #192147;
-      filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.1));
       border-radius: 16px;
       color: #F9FAFC;
       overflow: hidden;
-      p {
-        margin-block-end: 16px;
-      }
       svg {
         position: absolute;
-        top: -20px;
-        left: 0px;
+        top: -32px;
+        left: -9px;
         overflow: visible;
         vertical-align: middle;
-        z-index: -1;
-        width: 100%;
-        height: auto;
+        z-index: 0;
+        width: calc(~'18px + 100%');
+        height: calc(~'56px + 100%');
       }
       img:not(a > img) {
         position: relative;
         display: inline;
-        height: 120px;
+        height: 100px;
         z-index: 1;
-        top: -20px;
+        top: 0px;
         left: 0px;
         margin-left: auto;
         margin-right: auto;
       }
     }
     [purpose='platform-logos'] {
-      img {
-        height: auto;
-        width: 150px;
-        margin: -10px;
-        display: inline;
+      .card {
+        &.grow {
+          min-width: 108px;
+          min-height: 80px;
+          img {
+            max-height: 40px;
+          }
+        }
       }
     }
   }

website/views/pages/platform.ejs

@@ -2,8 +2,8 @@
 
   <div purpose="platform-banner-background">
     <div purpose="platform-banner" class="container-fluid">
-      <div style="max-width:1200px;" class="flex-row row mx-xl-auto justify-content-md-around justify-content-start">
-        <div purpose="platform-banner-text" class="col-lg-5 col-md-6 px-0 col-12 text-center flex-grow-1 text-lg-left mx-auto">
+      <div style="max-width:1200px;" class="flex-row row mx-xl-auto justify-content-center justify-content-lg-start">
+        <div purpose="platform-banner-text" class="col-md-6 px-0 col-12 flex-grow-1 text-center text-lg-left mx-xl-auto mx-md-0 mx-auto">
           <h1>Developer-friendly IT</h1>
           <h4>One agent, any platform, up-to-the-minute data</h4>
           <p>Fleet allows you to harness the power of osquery to stream accurate, real-time data from all of your devices. It’s easy to deploy at scale, granular and open source.</p>
@@ -12,8 +12,7 @@
             <a style="color:#F9FAFC;" href="https://calendly.com/fleetdm/demo" target="_blank" class="btn col-md-6 col-12">Schedule a demo <img class="d-inline" alt="A small white arrow pointing to the right" src="/images/platform/icon-right-arrow-white-16x16@2x.png"></a>
           </div>
         </div>
-        <div class="col-lg-1"></div>
-        <div class="col-lg-6 col-12 px-0 px-sm-auto" purpose="platform-banner-hero">
+        <div class="col-xl-6 col-lg-4 col-12 flex-column pl-lg-3 px-0 px-sm-auto" purpose="platform-banner-hero">
           <img class="d-none d-lg-inline" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-850x523@2x.png">
           <img class="d-inline d-lg-none" alt="The Fleet instance and fleetctl command line tool" src="/images/platform/platform-hero-660x430@2x.png">
         </div>
@@ -27,16 +26,24 @@
   </div>
 
   <div purpose="platform-content" class="container-fluid">
-    <div  class="mx-auto">
-      <h2 class="text-center">Maintain secure laptops & servers</h2>
+    <div class="mx-auto">
+      <h2 class="text-md-center">Maintain secure laptops & servers</h2>
       <div purpose="platform-logos" class="row pb-2 justify-content-around">
-        <div class="col-12 col-sm-6 justify-content-sm-end justify-content-center d-flex pr-sm-0">
-          <img src="/images/platform/icon-laptop-112x92@2x.png" alt="A laptop">
-          <img src="/images/platform/icon-aws-112x92@2x.png" alt="Amazon Web Services">
+        <div class="col-12 col-sm-6 justify-content-sm-end justify-content-center pb-3 d-flex pr-sm-0">
+          <div class="card grow mx-3">
+            <img src="/images/platform/icon-laptop-56x40@2x.png" alt="A laptop">
+          </div>
+          <div class="card grow mx-3">
+            <img src="/images/platform/logo-aws-59x36@2x.png" alt="Amazon Web Services">
+          </div>
         </div>
         <div class="col-12 col-sm-6 justify-content-sm-start justify-content-center d-flex pl-sm-0">
-          <img src="/images/platform/icon-gcp-112x92@2x.png" alt="Google Cloud Platform">
-          <img src="/images/platform/icon-azure-112x92@2x.png" alt="Microsoft Azure">
+          <div class="card grow mx-3">
+            <img src="/images/platform/logo-google-cloud-45x36@2x.png" alt="Google Cloud Platform">
+          </div>
+          <div class="card grow mx-3">
+            <img src="/images/platform/logo-microsoft-azure-36x36@2x.png" alt="Microsoft Azure">
+          </div>
         </div>
       </div>
 
@@ -54,7 +61,7 @@
 
     <div purpose="platform-section">
       <div class="d-flex align-items-center flex-row row justify-content-around">
-        <div class="col-md-6 col-12">
+        <div class="col-md-6 col-12 pr-lg-4">
           <h2>Respond to incidents before they become emergencies</h2>
           <div purpose="platform-bullet-list">
             <p>Interpret incidents accurately and make decisions using real device data.</p>
@@ -63,8 +70,8 @@
             <p>Perform custom remediation actions using osquery extensions.</p>
           </div>
         </div>
-        <div class="col-md-6 col-12 px-0 px-sm-auto">
-          <img purpose="platform-feature-image" alt="Easily detect and monitor vulnerable software" src="/images/platform/platform-feature-image-1-598x345@2x.png">
+        <div class="col-md-6 col-12 px-0 pl-md-5 align-self-center">
+          <img purpose="platform-feature-image" class="px-0 pl-md-2" alt="Easily detect and monitor vulnerable software" src="/images/platform/platform-feature-image-1-548x335@2x.png">
         </div>
       </div>
     </div>
@@ -74,21 +81,35 @@
       <div purpose="platform-bullet-list" class="text-md-center text-left">
         <p>Verify whether vulnerable software was actually patched / verify changes made with other systems</p>
       </div>
-      <div purpose="platform-logos" class="flex-row flex-wrap flex-sm-nowrap row justify-content-center">
-        <img src="/images/platform/icon-tenable-112x92@2x.png" alt="Tenable">
-        <img src="/images/platform/icon-munki-112x92@2x.png" alt="Munki">
-        <img src="/images/platform/icon-jamf-112x92@2x.png" alt="Jamf">
-        <img src="/images/platform/icon-kandji-112x92@2x.png" alt="Kandji">
-        <img src="/images/platform/icon-simple-mdm-112x92@2x.png" alt="Simple MDM">
+      <div purpose="platform-logos" class="flex-row flex-wrap row justify-content-center">
+        <div class="col-12 col-sm-auto d-flex p-sm-0 justify-content-sm-end justify-content-center mb-md-0 mb-4">
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-tenable-36x36@2x.png" alt="Tenable">
+          </div>
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-munki-60x36@2x.png" alt="Munki">
+          </div>
+          <div class="card mr-sm-4 mr-0">
+            <img src="/images/platform/logo-jamf-36x36@2x.png" alt="Jamf">
+          </div>
+        </div>
+        <div class="col-12 col-sm-auto d-flex p-sm-0 justify-content-sm-start justify-content-center">
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-kandji-49x36@2x.png" alt="Kandji">
+          </div>
+          <div class="card mr-sm-4 mr-0">
+            <img src="/images/platform/logo-simple-mdm-57x36@2x.png" alt="Simple MDM">
+          </div>
+        </div>
       </div>
     </div>
 
     <div purpose="platform-section">
       <div class="d-flex align-items-center flex-row row justify-content-around">
-        <div class="col-md-6 col-12 px-0 px-sm-auto order-last order-md-first">
-          <img style="transform-origin: bottom left;" purpose="platform-feature-image" alt="See up-to-date information about devices" src="/images/platform/platform-feature-image-2-598x410@2x.png">
+        <div class="col-md-6 col-12 px-0 pr-md-5 order-last order-md-first align-self-center">
+          <img purpose="platform-feature-image" class="px-0 pr-md-2" alt="See up-to-date information about devices" src="/images/platform/platform-feature-image-2-528x347@2x.png">
         </div>
-        <div class="col-md-6 col-12 ">
+        <div class="col-md-6 col-12 pl-lg-4">
           <h2>Keep an accurate inventory of all your devices</h2>
           <div purpose="platform-bullet-list">
             <p>Enroll macOS, Windows, and Linux laptops.</p>
@@ -104,7 +125,7 @@
 
     <div purpose="platform-section">
       <div class="d-flex align-items-center flex-row row justify-content-around">
-        <div class="col-md-6 col-12">
+        <div class="col-md-6 col-12 pr-lg-4">
           <h2>Meet compliance goals</h2>
           <div purpose="platform-bullet-list">
             <p>Verify compliance with accurate, up-to-the-minute data from actual devices.</p>
@@ -115,15 +136,15 @@
             <p>Audit historical compliance of devices, computers, and teams.</p>
           </div>
         </div>
-        <div class="col-md-6 col-12 px-0 px-sm-auto">
-          <img purpose="platform-feature-image" alt="Set policies for for specific teams" src="/images/platform/platform-feature-image-3-598x367@2x.png">
+        <div class="col-md-6 col-12 px-0 pl-md-5 align-self-center">
+          <img purpose="platform-feature-image" class="pl-md-2 px-0" alt="Set policies for for specific teams" src="/images/platform/platform-feature-image-3-548x326@2x.png">
         </div>
       </div>
     </div>
 
     <div purpose="platform-section">
       <div class="flex-row row">
-        <div class="col-12 text-center">
+        <div class="col-12 text-md-center">
           <h2>Automate security workflows in a single application</h2>
           <div purpose="platform-bullet-list">
             <p>Collect and send accurate security events to any external SIEM or data platform.</p>
@@ -132,33 +153,51 @@
           </div>
         </div>
       </div>
-      <div purpose="platform-logos" class="flex-row row justify-content-center">
-        <img src="/images/platform/icon-panther-112x92@2x.png" alt="Panther Labs">
-        <img src="/images/platform/icon-jamf-112x92@2x.png" alt="Jamf">
-        <img src="/images/platform/icon-splunk-112x92@2x.png" alt="Splunk">
-        <img src="/images/platform/icon-kandji-112x92@2x.png" alt="Kandji">
-        <img src="/images/platform/icon-elastic-112x92@2x.png" alt="Elastic">
-        <img src="/images/platform/icon-snowflake-112x92@2x.png" alt="Snowflake">
+      <div purpose="platform-logos" class="flex-row row justify-content-md-center justify-content-around">
+        <div class="col-12 col-md-6 d-flex justify-content-md-end justify-content-center pr-md-0 mb-4 mb-md-0">
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-panther-40x40@2x.png" alt="Panther Labs">
+          </div>
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-jamf-36x36@2x.png" alt="Jamf">
+          </div>
+          <div class="card mr-md-4">
+            <img src="/images/platform/logo-splunk-40x40@2x.png" alt="Splunk">
+          </div>
+        </div>
+        <div class="col-12 col-md-6 d-flex justify-content-md-start justify-content-center pl-md-0">
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-kandji-49x36@2x.png" alt="Kandji">
+          </div>
+          <div class="card mr-sm-4 mr-2">
+            <img src="/images/platform/logo-elastic-40x40@2x.png" alt="Elastic">
+          </div>
+          <div class="card">
+            <img src="/images/platform/logo-snowflake-41x40@2x.png" alt="Snowflake">
+          </div>
+        </div>
       </div>
     </div>
   </div>
 
   <div class="container-fluid p-lg-0">
-    <div purpose="platform-user-story" class="mx-auto">
-      <div class="flex-sm-row flex-column row justify-content-around justify-content-sm-between text-center text-sm-left">
-        <div class="col-12 col-sm-2 col-md-4 pb-md-0 pb-5">
-          <img alt="Schrodinger logo" src="/images/platform/logo-schrodinger-120x120@2x.png">
-          <svg class="d-none d-sm-inline" viewBox="0 0 238 181" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <circle cx="53.9834" cy="90.2871" r="183.5" fill="white"/>
-          </svg>
-          <svg class="d-inline d-sm-none" viewBox="0 0 345 177" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <circle cx="172.5" cy="-7.22607" r="183.5" fill="white"/>
-          </svg>
-        </div>
-        <div class="col-12 col-sm-7 col-md-8 flex-grow-1 justify-content-end align-self-end pt-sm-0 pl-sm-4 pl-md-3 pr-sm-0">
-          <h3>Fleet user story</h3>
-          <p>Jason Walton gives insight into how his team uses Fleet and osquery at Schrödinger.</p>
-          <a href="https://blog.fleetdm.com/fleet-user-stories-200c94ca8a10" class="mt-3 mt-sm-0">Read more <img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+    <div purpose="platform-user-story-wrapper">
+      <div purpose="platform-user-story" class="mx-auto">
+        <div class="flex-sm-row flex-column row justify-content-around justify-content-sm-between text-center text-sm-left">
+          <div class="col-12 col-sm-4 pb-sm-0 pb-5 pr-md-5">
+            <img alt="Schrodinger logo" src="/images/platform/logo-schrodinger-150x150@2x.png">
+            <svg class="d-none d-sm-inline" viewBox="0 0 238 181" fill="none" xmlns="http://www.w3.org/2000/svg">
+              <circle cx="53.9834" cy="90.2871" r="183.5" fill="white"/>
+            </svg>
+            <svg class="d-block d-sm-none" viewBox="0 0 345 177" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <circle cx="172.5" cy="-7.22607" r="183.5" fill="white"/>
+            </svg>
+          </div>
+          <div class="col-12 col-sm-8 flex-grow-1 justify-content-end align-self-sm-start align-self-end pt-sm-0 pt-4 mt-auto mt-sm-0 pl-md-4">
+            <h3>Fleet user story</h3>
+            <p>Jason Walton gives insight into how his team uses Fleet and osquery at Schrödinger.</p>
+            <a href="https://blog.fleetdm.com/fleet-user-stories-200c94ca8a10" class="mt-3 mt-sm-0">Read more <img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+          </div>
         </div>
       </div>
     </div>
@@ -168,12 +207,12 @@
 
     <div style="padding-top: 80px; max-width: 640px;" purpose="platform-section" class="mx-auto">
       <div class="text-center">
-        <h2>Explore Fleet</h2>
+        <h1>Explore Fleet</h1>
         <p>Find out how Fleet can benefit your organization by exploring our docs and community. Want to get up and running quicker? Then try out Fleet locally on your device - you’ll be up and running in minutes.</p>
       </div>
     </div>
 
-    <div purpose="next-steps" class="row card-deck flex-md-row flex-column">
+    <div purpose="next-steps" class="row card-deck flex-lg-row flex-column mx-auto">
       <div class="card card-body text-center">
         <img class="mx-auto" style="width: 40px; height: 40px; margin-bottom: 16px;" alt="Fleet logo" src="/images/platform/logo-fleet-brandmark-40x40@2x.png">
         <h3>Try Fleet</h3>
@@ -190,7 +229,7 @@
         <img class="mx-auto" style="width: 40px; height: 40px; margin-bottom: 16px;" alt="Slack logo" src="/images/logo-slack-24x24@2x.png">
         <h3>Join the community</h3>
         <p>Join the conversation or ask for help in our Slack channel.</p>
-        <a  href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" target="_blank" class="mt-auto">Join on Slack<img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
+        <a href="https://osquery.slack.com/join/shared_invite/zt-h29zm0gk-s2DBtGUTW4CFel0f0IjTEw#/" target="_blank" class="mt-auto">Join on Slack<img alt="A vibrant blue arrow pointing right" src="/images/platform/icon-right-arrow-vibrant-blue-16x16@2x.png"></a>
       </div>
     </div>
   </div>