Homepage content update (#6968)

* Updated homepage messaging

- Updated messaging
- Add new images
- Updated stylesheet to improve readability at smaller breakpoints

* Delete feature-increase-install-rates-440x283@2x.png

- removed unnecessary image

* image update

* image updated

* Update homepage.less

- removed trailing whitespace to resolve lint warning.

Co-authored-by: Mike McNeil <mikermcneil@users.noreply.github.com>

website/assets/styles/pages/homepage.less

@@ -7,8 +7,9 @@
 
   h3 {
     font-size: 24px;
-    line-height: 40px;
+    line-height: 32px;
     font-weight: @bold;
+    margin-bottom: 24px;
   }
 
   h6 {
@@ -100,11 +101,11 @@
       margin-bottom: 0px;
     }
     [purpose='features-text-left'] {
-      max-width: 500px;
+      max-width: 450px;
       padding-right: 80px;
     }
     [purpose='features-text-right'] {
-      max-width: 500px;
+      max-width: 450px;
       padding-left: 80px;
     }
   }
@@ -177,11 +178,12 @@
       [purpose='features-text-left'] {
         padding-right: 0px;
         padding-bottom: 40px;
+        max-width: 640px;
       }
       [purpose='features-text-right'] {
         padding-left: 0px;
         padding-bottom: 40px;
-
+        max-width: 640px;
       }
     }
 
@@ -280,16 +282,30 @@
       padding-top: 216px;
     }
   }
+
+  @media (max-width: 480px) {
+    [purpose='features'] {
+    [purpose='features-text-left'] {
+       max-width: 320px;
+    }
+    [purpose='features-text-right'] {
+        max-width: 320px;
+    }
+    }
+  }
+
   @media (max-width: 395px) {
     [purpose='hero-banner'] {
       padding-top: 236px;
     }
   }
+
   @media (max-width: 355px) {
     [purpose='log-destination'] {
       flex-basis: 80px;
     }
   }
+
   @media (max-width: 330px) {
     [purpose='hero-banner'] {
       padding-top: 256px;

website/views/pages/homepage.ejs

@@ -5,12 +5,11 @@
       <div purpose="hero-clouds">
         <div class="container-lg">
           <div class="container-fluid text-center">
-            <h1 class="pt-lg-4">
-              All the data you need, <br>
-              without the downtime risk
+            <h1 style="max-width: 680px;" class="mx-auto pt-lg-4">
+              Lightweight, programmable server and workstation telemetry.
             </h1>
             <h6 style="max-width: 650px;" class="mx-auto mt-3 mb-0">
-              Fleet is the lightweight telemetry platform for servers and workstations. Get comprehensive, customizable data from all your devices.
+              The most accurate, actionable data from your servers and workstations, without the performance hit.
             </h6>
             <div style="max-width: 500px;" class="mt-5 mx-auto mb-0 d-sm-flex justify-content-center">
               <a purpose="top-try-it-out-btn" class="d-sm-flex align-items-center justify-content-center btn btn-block btn-primary mx-auto mx-sm-0" href="/get-started?tryitnow">Try it out</a>
@@ -27,7 +26,7 @@
   <div class="container-fluid justify-content center px-0 py-0">
     <div style="max-width: 630px;" class="container text-center mx-auto pb-5">
       <h3 class="text-center pt-3 pb-4">
-        Ask questions about your servers and laptops. Whatever their operating system, wherever they live.
+        Get real-time answers about all your servers and workstations in a single pane of glass.
       </h3>
       <div class="row pb-2 justify-content-around">
         <div class="col-12 col-sm-6 justify-content-sm-end justify-content-center pb-4 d-flex pr-sm-0">
@@ -46,38 +45,51 @@
       <div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
         <div purpose="features-text-left" class="container text-center text-lg-left pl-0 m-0">
           <h3>
-            Make the right call — right away
+            Accurate, comprehensive, up&#8209to&#8209date data.
           </h3>
           <p>
-            Get accurate, up-to-the-minute data from every endpoint in your organization. So you can make more informed decisions — quickly and confidently.
+            Make better data-driven decisions with a single source of truth for all operating systems.
           </p>
         </div>
-        <div style="max-width: 440px;" class="container d-flex px-2 px-sm-0 m-0">
-          <img alt="Fleet UI" src="images/feature-realtime-440x277.png" class="w-100 h-100 m-lg-0"/>
+        <div style="max-width: 500px;" class="container d-flex px-2 px-sm-0 m-0">
+          <img alt="Fleet UI" src="images/feature-realtime-500x315@2x.png" class="w-100 h-100 m-lg-0"/>
         </div>
       </div>
       <div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
         <div purpose="features-text-right" class="container text-center text-lg-left pr-0 m-0">
           <h3>
-            Reduce risk, increase stability
+            No downtime risks or performance hits.
           </h3>
           <p>
-            Some security agents strain your systems. Fortunately, Fleet uses osquery. This open-source solution was built to be deployed across hundreds of thousands of devices.
+            Fleet's agent is lightweight, inspectable, and manageable through the CI/CD pipeline.
           </p>
         </div>
-        <div style="max-width: 440px;" class="container d-flex order-lg-first px-2 px-sm-0 m-0">
-          <img alt="Fleet UI" src="images/feature-file-integrity-monitoring-440x277.png" class="w-100 h-100 m-lg-0"/>
+        <div style="max-width: 500px;" class="container d-flex order-lg-first px-2 px-sm-0 m-0">
+          <img alt="Fleet UI" src="images/feature-file-integrity-monitoring-500x296@2x.png" class="w-100 h-100 m-lg-0"/>
         </div>
       </div>
       <div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
         <div purpose="features-text-left" class="container text-center text-lg-left pl-0 m-0">
-          <h3>Find the answers that really matter</h3>
+          <h3>Complete control over the queries you run.</h3>
           <p>
-            Every organization is unique. That’s why Fleet gives you complete control of your data — including the ability to create custom queries.
+            Create complex, custom queries for your organization. Or copy and paste tested queries from our growing library.
           </p>
         </div>
-        <div style="max-width: 440px;" class="container d-flex px-2 px-sm-0 m-0">
-          <img alt="Fleet UI" src="images/feature-threat-detection-440x277.png" class="w-100 h-100 m-lg-0"/>
+        <div style="max-width: 500px;" class="container d-flex px-2 px-sm-0 m-0">
+          <img alt="Fleet UI" src="images/feature-threat-detection-500x328@2x.png" class="w-100 h-100 m-lg-0"/>
+        </div>
+      </div>
+      <div purpose="features" class="container d-flex flex-wrap flex-lg-nowrap justify-content-center justify-content-lg-center align-items-center px-0 pt-3">
+        <div purpose="features-text-right" class="container text-center text-lg-left pr-0 m-0">
+          <h3>
+            Increase your install rates.
+          </h3>
+          <p>
+            Fleet's open-source agent protects device performance and provides transparency about the data it collects.
+          </p>
+        </div>
+        <div style="max-width: 500px;" class="container d-flex order-lg-first px-2 px-sm-0 m-0">
+          <img alt="Fleet UI" src="images/feature-increase-install-rates-500x322@2x.png" class="w-100 h-100 m-lg-0"/>
         </div>
       </div>
     </div>
@@ -144,7 +156,7 @@
   </div>
   <div id="testimonials" style="background: #F4F6FA; position: relative">
     <div class="container-lg text-center justify-content-center py-5 mx-auto">
-      <h3 class="px-4 mt-5 mb-3">Join the open-source community</h3>
+      <h3 class="px-4 mt-5 mb-3">Fleet is open source and community supported.</h3>
       <p style="max-width: 860px" class="px-3 px-xs-5 px-md-4 mx-auto">
         Software engineers. Security specialists. IT administrators. Lots of professionals are working together to make Fleet even better. From contributing patches to dreaming up features.
       </p>